株式会社Web春 代表取締役の栗田です。
先に結論です。Claude Codeでのホームページ作成は、企画→設計→構築→検証→公開の5工程で進めれば、26ページでも構築3日でできます。2026年7月、Web春の自社サイトをこの手順で作り直しました。新しい26ページ・記事62本の移行・フォーム4種の接続まで、企画込みで7日です。
ただし、僕がデザインを安定して出せるようになるまでには約1ヶ月かかっていて、その間にゴミを大量に作りました。手順そのものより、どこを人が判断するかで出来が決まります。この記事は、自分の手でClaude Codeを動かしてホームページを作りたい人に向けて、その5工程を順番に書きます。
この記事の要点
- Claude Codeとは
- Claude Codeとは、Anthropic社のAI「Claude」とターミナルで対話しながら、コードの生成・編集・実行まで進められる開発ツールです。Web春はClaude Codeで自社サイト26ページを構築3日（企画込み7日）で作りました。
目次
Claude Codeでホームページ作成に使った道具
- Claude Code：コードを書き、直し、動かすところまで任せる
- Astro：静的サイトを作るフレームワーク。Cloudflareとの相性と表示の速さで選んだ
- Cloudflare：配信先。サーバー代はかからず、維持費はドメイン代の年1,500円だけ（2026年10月時点）
手を動かす人間は僕1人です。ただ、デザイン・サイト構築・SEOの基礎知識はもともと持っていました。旧サイトはWebflowで、ローカライズ込みのサブスクが年10万円弱。切り替えたあとはドメイン代だけになっています。
工程1｜企画（Day 1）は、AIに任せられない
最初にやるのはコードではなく棚卸しです。流入はどこから来ているか、誰に向けたサイトか、今までどんなお客さんが多かったか。手元の数字を並べて、作り直しで達成するゴールを言葉にしました。
僕の場合、最初は大手向けに寄せるつもりでした。ところが実際のお客さんの約9割がスタートアップや中小企業だったので、ターゲットをそちらに置き直しています。この判断はAIにはできません。ここがあいまいなまま構築に入ると、あとのテキスト精査で全部やり直しになります。
工程2｜設計（Day 2〜4）が、Claude Codeで一番時間のかかる所
旧サイトのデータを移し、デザインを文章で定義する
旧サイト（Webflow）から、記事62本と実績24件をスクレイピングで抜き出してローカルへ落としました。同時に、色・ボタンの置き方・表したい方向性といったデザインの根っこを文章で決めます。この定義文が、あとのプロンプトの土台になります。
トップページは約50パターン往復した
新しいデザインはHTMLで作りました。トップページに力を入れて、「3パターン出す→気に入らない所と理由を伝える→また3パターン」を繰り返し、合計で50パターンほど。ここが一番AIとのやり取りが多い工程です。
コツは、感想ではなく理由を伝えること。「なんか違う」と返すと、同じようなものがまた返ってきます。
サイトマップはトップが決まってから作る
サイトマップは、トップページが決まってから作りました。普通はサイトマップが先ですが、最初に固めるとAIに余計な縛りがつくと考えて後に回しています。トップでデザインが決まっていれば、それを参照させるだけで下層ページは一気に作れます。
工程3｜構築（Day 5）はAstroへ移すだけ
HTMLで決めたデザインを、Astroへ移します。Next.jsではなくAstroにしたのは、Cloudflareとの相性と表示の速さです。僕が試した範囲では、記事で集客するサイトとして一番速さが出る組み合わせでした。
同じ日に、全ページのSEOとAI検索向けの整備もやっています。構造化データ・sitemap・llms.txtまでClaude Codeに任せました。記事は詳細ページのデザインをHTMLで1ページだけ先に作り、それをテンプレートにして62本を流し込んでいます。
工程4｜検証（Day 6〜7）は、人が全ページを目で見る
Googleタグ・Cloudflare・4種類のフォームをつないで、本番の手前まで持っていきます。ここで一番大事なのがテキストの精査です。AIが作ったページには、僕が想定していない文言や数値が大量に入っていました。企画と照らし合わせて、一気に直します。
最後に、全ページを人の目でチェックしました。会社の情報の誤りは信頼に直結するので、ここはAIに任せていません。手を動かすのはAI、判断するのは人。この分担で出来が決まる、というのが7日間やってみた実感です。
工程5｜公開と、翌日の検索の数字
公開は、Cloudflareへのデプロイと旧URLからの移行処理です。リニューアル翌日の時点で、旧記事30本のうち24本のインデックスが残っていました（Search Console実測）。移行の設計をやっておけば、作り直しで検索の評価が吹き飛ぶことはありません。
その後の検索の推移はAIで作ったサイトのSEOを実測した記事に、7日間に僕が何を考えていたかはホームページリニューアルをAIで7日でやった記事に書いています。
公開後の運用もClaude Codeで回している
63記事へのAIO一括実装
公開後の2026年7月、ブログ63記事に要点ボックス・FAQ（FAQPageの構造化データ）・一文定義・Speakableをまとめて入れました。自社採点の平均は47.8点から97.3点です。あわせて誤字の校正を450件超、キーワードが食い合っていた記事の301統合を3組やっています。手作業では無理な量ですが、記事をJSONで持ってテンプレートで組む作りにしていたので回せました。
計算ツールの実装
インボイス経過措置の計算ツールも、Claude Codeで作りました。「ブログにツールを1個足す」ような開発が外注なしで終わるのは、AIで作る形に切り替えて一番大きかった変化です。毎日の使い方はバイブコーディングをClaude Codeで毎日仕事にしている記事にまとめました。
Claude Codeのホームページ作成で、遅かったこと・できなかったこと
- 細かい微調整はノーコードより遅い。「セクションの間を少し広げたい」が全体の調整に広がりがちで、Webflowで力技をやっていたころのほうが早い場面もあった
- デザインが安定して出るまで約1ヶ月かかった。プロンプトの言葉選びが難しく、途中まで作ったサイトを捨てて0から作り直したことも何度かある
- AIに100%任せて公開すると、どのサイトも同じ顔になる。ブランドの価値を下げるので、デザインの良し悪しの判断は人が持つ
それでも、知らない言語や技術の壁はほぼ消えました。AIを使いこなしているから、この質で出せる。そこは本当に変わった所です。
まずはこの記事の5工程で、自分のサイトを触ってみてください。Claude Codeの実装の続きはメルマガで先に出しています。自分で作るのは難しそうなら、Web春のフルスクラッチサイト構築は¥1,000,000〜（税別）・最低2〜3ヶ月が目安です（2026年10月時点）。何を納品しているかはフルスクラッチのWebサイトの記事に、料金は料金ページにあります。
制作実績
よくある質問
Claude Codeだけでホームページは作れますか？
作れます。僕は26ページの自社サイトを構築3日（企画込み7日）で作りました。ただし企画・デザインの良し悪しの判断・事実確認は人の仕事で、そこを手放すとどこかで見たようなサイトになります。
Claude Codeでホームページを作るのに何日かかりますか？
Web春の自社サイトは、企画1日・設計3日・構築1日・検証2日の計7日でした。ただしデザインを安定して出せるようになるまでに、その前に約1ヶ月の試行錯誤があります。
フレームワークはなぜAstroにしたのですか？
Cloudflareとの相性と表示の速さです。僕が試した範囲では、記事で集客するサイトとして一番速さが出る組み合わせでした。Next.jsも候補でしたが採用していません。
公開後の維持費はいくらですか？
Cloudflareで配信しているのでサーバー代はかからず、ドメイン代の年1,500円だけです（2026年10月時点）。Webflowで運用していたころは年10万円弱でした。
リニューアルで検索順位は落ちませんでしたか？
リニューアル翌日の時点で、旧記事30本のうち24本のインデックスが残っていました（Search Console実測）。旧URLからの移行処理を先に設計しておくのが前提です。
自分で作るのが難しそうなら依頼できますか？
できます。Web春のフルスクラッチサイト構築は¥1,000,000〜（税別）・最低2〜3ヶ月が目安です（2026年10月時点）。納品はコードでもWebflowでも選べます。
