AIはウェブサイト再構築の15％（タイピング部分）を圧縮したが、残りの85％はそのまま

bitnoise.plチームは、Claude CodeとFigma MCPを用いてウェブサイトを完全に再構築した詳細なブログ記事を公開しました。核心的な発見は、AIが確かにコーディング時間を大幅に短縮したものの、それはプロジェクトの約15％に過ぎないタイピング部分に限られ、残りの85％（戦略、デザイン、コピーライティング、レビュー、品質保証）には依然として人間の深い関与が必要だったという点です。チームは、開発時間を420時間から78時間に削減できた秘訣は、AIが自律的にコードを書いたからではなく、人間の労力をタイピングから判断にシフトしたことにあると強調しています。

プロジェクトは56暦日（8週間）にわたりましたが、実際の開発日数はわずか25日で、残りの31日はデザイン、コピー、レビュー、意思決定など、AIには代替できない作業に費やされました。コードベースは合計24,296行で、120のReactコンポーネントと47のTypeScriptファイルで構成されています。チームは181回のコミットを行い、そのすべてがClaude Codeによって生成され、開発者によってレビューされました。実際のコーディングセッションは約78時間で、コミットあたりの平均作業時間は約26分でした。ツールのコストは使用するモデルの組み合わせにもよりますが、約90～180ドルと見積もられています。

特に印象的なのは、ブログとケーススタディの移行です。2026年5月20日、チームはたった8.5時間（8コミット、1人の開発者）で、古いサイトから新しいスタックへの完全な移行を完了しました。これにはSEO最適化とStrapi統合が含まれます。ただし、チームは正直に、この移行が迅速だった理由は、Strapiスキーマが事前にチームによって設計されており、コンテンツ自体も古いStrapiインスタンスにすでに存在していたからだと述べています。移行日は主にフロントエンドを既存のバックエンドに接続することに費やされ、コンテンツの再作成は不要でした。その後1週間かけて、レスポンシブ画像やフィルターなどの細部を微調整するための小さなコミットが行われました。

コピーは完全に人間が主導しました。CEOとCTOがすべてのヒーローヘッドライン、サービス概要、ケーススタディのリードを執筆または大幅に修正しました。モデルは類語辞典や字数調整ツールとしてのみ使用され、自由な作成は許可されませんでした。その理由は3つあります：トーンの均質化（モデルのデフォルトは往々にして他社と似てしまう）、架空の能力の主張（提供していないサービスを約束するリスク）、そして汎用的なSaaS用語です。具体例として、ホームページのサービスセクションにある「プロジェクトデリバリー」のスライドが挙げられています。モデルの初稿は「We can help you deliver projects on time and on budget」でしたが、最終版では具体的な成果物を明示し、「we can」や「we help」をすべて削除しました。約40％の単語が残りましたが、構造はほぼ100％書き直されました。

デザインとアニメーションはすべてUX/UIチームから提供されました。Figma MCPが重要なツールとなり、Claude CodeがFigmaファイル内のコンポーネント、レイアウト、デザイントークン、モーションプロトタイプを直接読み取れるようにし、デザイン意図を正確に実装できるようになりました。各アニメーションは6段階のループに従いました。デザイナーがFigmaで開始フレームと終了フレームを設定し、モーションプロトタイプを作成。それを技術要件と実装計画を含む文書にまとめ、開発者がレビュー。Claude Codeがその文書に基づいてキーフレームを実装。開発者が実機のブラウザとスマートフォンでテスト。必要に応じてパラメータを手動調整。最後にデザイナーがブラウザ上で最終的なエフェクトを確認し承認。モデルはキーフレームを書いただけで、「正しい」と感じるかを判断することはなく、アニメーションの完了を宣言することもありませんでした。

記事は、戦略レベルの作業はAIに代替できないと明確に述べています。プロンプトを書く前に、チームはポジショニング文書、サイトマップ、ページごとのコンテンツブリーフを作成しました。これらの文書がウェブサイトの方向性を決定し、その後でモデルが実装を実行しました。同様のアプローチを検討しているチームへの核心的な教訓は、AIをコーヒーメーカーとして扱うのではなく、効率的なタイピストとして扱うことです。本当の課題は、AIの出力を出荷する価値があるかどうかを判断できる能力を持つことです。