- Claude Codeとは
- Claude Codeとは、Anthropic社のAI「Claude」とターミナル上で対話しながら、コードの生成・編集・実行までを進められる開発ツールです。
こんにちは、Webflow専門家として活動しつつ、AIの最先端を追っているマサトです。
2026年7月、Web春の自社サイトをClaude Codeでフルリニューアルしました。26ページの新規構築・記事62本の移行・フォーム4種の接続を、構築3日（企画込みで7日）で完了。この記事ではClaude Codeによるホームページ制作の実録を、これから自分でやってみたい技術寄りの方向けに「手順」として再構成します。
✓記事の内容
- Claude Codeでコーポレートサイトを作る5工程（企画→設計→構築→検証→公開）
- 26ページを3日で構築した実際のタイムラインと使ったツール
- 公開後の運用（AIO一括実装・計算ツール開発）もAIでやった実例
先に結論から書きます。Claude Codeだけで26ページのコーポレートサイトは作れます。ただし僕の場合、デザインをうまく生成できるようになるまでに約1ヶ月、ゴミを大量に作りました。手順そのものより「どこを人間が判断するか」が品質を決めます。
前提｜使ったツールと費用
- Claude Code（OpusとFable）: 月額約30,000円のAI課金
- Astro: 静的サイトジェネレーター。Cloudflareとの互換性と表示速度で選びました
- Cloudflare: ホスティング。サーバー費は無料で、運用費はドメイン代の年1,500円だけです
人間は僕ひとり。ただしデザイン・構築・SEOの基礎知識はもともとあった前提です。旧サイトはWebflowで、サブスク費用は年10万円弱かかっていました。切り替え後はドメイン代のみになっています。
工程1｜企画（Day 1）
最初にやるのはコードではなく棚卸しです。流入経路はどこか、ターゲットは誰か、今までどんな顧客が多かったか。手元の数字を並べて、リニューアルで達成するゴールを言語化しました。
僕の場合、当初は大手案件向けに寄せるつもりでした。でも実際の顧客の約9割がスタートアップや中小企業だったので、ターゲットをそちらに再設定しています。この判断はAIにはできません。ここが曖昧なまま構築に入ると、後工程のテキスト精査で全部やり直しになります。
工程2｜設計（Day 2〜4）
データ移行とデザイン定義
旧サイト（Webflow）から記事62本と実績24件をスクレイピングで抽出し、ローカルへ落とし込みました。同時に、色・ボタン配置・表現したい方向性といったデザインの根幹をテキストで定義します。この定義文が、以降ずっとプロンプトの土台になります。
トップページを50パターン往復する
新デザインはHTMLベースで作成しました。トップページに重きを置き、「3パターン出す→気に入らない箇所とその理由を伝える→また3パターン」を繰り返して、合計50パターンほど作っています。ここが一番AIとの往復が多い工程です。感想ではなく理由を伝えるのがコツで、「なんか違う」では同じものが返ってきます。
サイトマップはあえて後から
トップページが決まってから、サイトマップを作成しました。一般的にはサイトマップが先ですが、最初に固めるとAIに変な制約がつくと考えて後回しにしています。トップでデザインが確定していれば、それを参照させるだけで下層ページは一気に量産できます。
工程3｜構築（Day 5）
HTMLで確定したデザインをAstroへ移植します。Next.jsではなくAstroを選んだのは、Cloudflareとの互換性と読み込み速度から、僕が試した範囲では、SEO媒体として一番パフォーマンスが出る組み合わせだったからです。
合わせて全ページのSEO最適化とAI最適化を実施。構造化データ・sitemap・llms.txtの整備までClaude Codeにやらせています。記事側は、詳細ページのデザインをHTMLで1ページだけ先に作り、それをテンプレートに62本を流し込みました。
工程4｜検証（Day 6〜7）
Googleタグ・Cloudflare・4種のフォームの連携を行い、本番手前まで持っていきます。ここで一番重要なのがテキスト精査です。AIが作ったページには、僕が想定していない文言や数値が大量に入っていました。企画と照らし合わせて一気に直します。
最後は全ページを人間の目視でチェックしました。企業情報の誤りは信頼に直結するので、ここはAIに任せません。手を動かすのがAI、判断するのが人。この分担が品質を決めると考えています。
工程5｜公開と結果
公開はCloudflareへのデプロイと、旧URLからの移行処理です。結果、リニューアル翌日の時点で旧記事30本中24本のインデックスが維持されていました（Search Console実測）。移行設計をちゃんとやれば、リニューアルでSEOが吹き飛ぶことはありませんでした。
Day別の詳しい記録と、人間側が何を考えていたかはリニューアル全工程の記事に書いています。
公開後の運用もClaude Codeでできる｜やった2つのこと
63記事へのAIO一括実装
公開後の2026年7月、ブログ63記事に要点ボックス・FAQ（FAQPage構造化データ）・一文定義・Speakableを一括実装しました。自社採点は平均47.8点→97.3点。ついでに誤字校正450件超と、キーワードがカニバっていた記事の301統合を3組やっています。手作業では現実的にやれなかった規模ですが、記事をJSONで構造化してテンプレートで生成する作りにしていたので回せました。
計算ツールの実装
インボイス経過措置の計算ツールもClaude Codeで実装しました。「ブログにツールを1個足す」ような開発が外注なしで完結するのは、AI構築に切り替えた大きな利点です。この辺りの実測の続きはメルマガで先出ししています。
正直な話｜遅かったこと・できなかったこと
- 細かい微調整はノーコードより遅いです。「セクション間の余白を少し広げたい」が全体調整に発展しがちで、Webflowで力技をやっていた頃のほうが早い場面もありました
- デザインが安定して出るまで約1ヶ月かかりました。プロンプトの言葉選びが難しく、途中まで作ったサイトを捨てて0から作り直す判断も何度かしています
- AI任せ100%で公開すると、どのサイトも同じ顔になります。ブランド価値を下げるので、審美判断は人間が持つべきです
それでも、知らない言語や技術の壁はほぼ消えました。この進め方はAIサイト制作として商品化しています（ヒアリング込みで約1ヶ月・¥500,000〜）。まずはこの記事の手順で自社サイトを触ってみて、難しそうならそこから相談してもらえれば大丈夫です。
よくある質問
Claude Codeだけでコーポレートサイトは作れますか？
実装は作れるとしています。筆者は26ページの自社サイトを構築3日で作りました。ただし企画・デザインの審美判断・事実確認は人間の仕事で、そこを放棄するとどこかで見たようなAIっぽいサイトになるとのことです。
費用はどれくらいかかりますか？
筆者の場合、AIの課金が月額約30,000円ほどです。ホスティングはCloudflareでサーバー費無料、運用費はドメイン代の年1,500円だけになったとしています。Webflow時代は年10万円弱かかっていたとのことです。
フレームワークはなぜAstroを選んだのですか？
Cloudflareとの互換性と読み込み速度から、SEO媒体として最も高いパフォーマンスを出せると確認しているためとしています。Next.jsも候補でしたが採用しなかったとのことです。
リニューアルでSEOは落ちませんでしたか？
リニューアル翌日の時点で旧記事30本中24本のインデックスが維持されていたとしています（Search Console実測）。旧URLからの移行処理を含めた設計を先に行うことが前提だとのことです。
