Claude Codeでホームページを作る方法：Claude Designとの使い分け、公開から運用まで（自社サイト157ページの実例）

「Claudeでホームページは作れるのか」「Claude CodeとClaude Design、どちらを使えばいいのか」。「Claude サイト作成」「Claude Code ホームページ 作成」といった検索から、カトルセのサイトにたどり着く方が増えています。

答えは「作れます。ただし、作る道具と、公開して直し続ける道具は分けたほうがいい」です。この記事では、カトルセの自社サイトを実例に、道具の選び方 → 公開までの手順 → 公開後の運用を、Claude Codeへの指示の例つきでまとめます。Claude Designという道具そのものの紹介はClaude Designの記事に、WordPressからの移行とDNSの切り替えはWordPressを卒業した話に書いたので、ここでは繰り返しません。

1. 結論：作るまではClaude Design、公開して育てるのはClaude Code

カトルセのHPは、Claude Designで作った静的HTMLです。ページのデザインや記事の初稿はClaude Designで作り、書き出したファイルをClaude Codeがリポジトリ（ファイルの保管場所）に反映して公開しています。

役割を分けている理由は、得意なことが違うからです。

• Claude Design：画面を見ながら「ここをもう少し大きく」「色を落ち着かせて」と直せます。見た目を決める段階では、これがいちばん早い道具です。
• Claude Code：手元やGitHubにあるファイル一式を読んで、まとめて直し、変更の記録（コミット）や確認依頼（PR）まで作れます。ページが100を超えてから効いてくるのは、こちらです。

たとえば「全ページのURLから.htmlを外す」「画像1,648枚を軽い形式に変える」といった作業は、1ページずつ画面で直す道具には向きません。逆に、ファーストビューの雰囲気を決める作業をコードで指示するのは遠回りです。

2. どの道具を使うか：チャット・Claude Design・Claude Codeの比較

Claudeでホームページを作る道具は、大きく3つあります。2026年10月時点の状況で比べると、次のとおりです。

※ 2026年10月25日時点。Claude Designの書き出し形式とClaude Codeへの引き渡しはClaudeのヘルプセンター、各プランで使える機能はClaudeの料金ページで確認しました。

10月8日の発表で変わったこと

Anthropicは2026年10月8日、Docs・Slides・Designのベータを終え、無料プランを含む全プランで使えるようにしたと発表しました（Claudeの発表）。デザインを作るところまでは、無料プランでも試せるということです。

あわせて、使う場所も変わっています。Designは9月16日から通常のClaudeの会話の中で使えるようになり、これまでの単独サイト（claude.ai/design）は12月14日まで残ったあと、Claudeに統合されます。閉じたあとは、単独サイトのチャットとプロジェクトのコメントが使えなくなり、プロジェクトの公開リンクも切れます。単独サイトで作ったデザインがある方は、それまでに書き出しておいてください。

一方、Claude Codeは有料プランに含まれる機能で、無料プランでは使えません（料金ページ）。つまり「試作は無料で、運用に入ったら有料プラン」という分かれ方になります。

迷ったときの選び方

• 1ページだけ、今日中に見たい：チャットで十分です。
• 会社のサイトとして見た目を作り込みたい：Claude Designから始めます。
• 公開後に毎週ページを足す、何十ページもある：Claude Designで作り、公開と運用はClaude Codeに移します。

3. 手順：デザインを作ってから公開するまで

カトルセのサイトと同じ形、つまり静的HTML＋GitHub＋Cloudflare Pagesで公開する手順です。静的HTMLは、サーバー側でプログラムを動かさず、出来上がったHTMLファイルをそのまま配る形のことです。CMS（WordPressなど）の更新作業がなく、攻撃される部品も少なくなります。

1. STEP 1Claude Designでデザインとページを作る
2. STEP 2静的HTMLで書き出し、Claude Codeで整える
3. STEP 3GitHubのリポジトリで管理する
4. STEP 4Cloudflare Pagesで公開する

用意するものは、Claudeのアカウント（Claude Codeを使うなら有料プラン）、GitHubのアカウント、Cloudflareのアカウント、独自ドメインです。Claude Codeの導入方法はClaude Code完全活用ガイドを参照してください。

STEP 1：Claude Designでデザインとページを作る

最初に渡すのは「誰に、何を伝えて、何をしてほしいか」です。見た目の好みより先に、ページの目的を決めます。参考サイトがあれば、どこが良いと思うかを言葉で添えます。

中小企業向けに生成AI研修を提供する会社のコーポレートサイトを作ってください。
・読む人：研修を検討している人事・経営者
・してほしい行動：無料相談の申し込み
・ページ：トップ／サービス3種／事例／会社概要／お問い合わせ
・色：ティール（#008C8C）を基調に、強調はオレンジ（#F59A2A）
まずトップページだけ作り、構成の意図を3行で説明してください。

トップの方向性が決まってから、ほかのページに広げます。全ページを一度に作らせると、直すときの手戻りが大きくなるためです。

STEP 2：静的HTMLで書き出し、Claude Codeで整える

Claude Designの書き出し（Export）には、standalone HTML、.zip、PDF、PPTXなどがあり、「Handoff to Claude Code」で手元やWeb版のClaude Codeへ引き渡すこともできます。ホームページにするなら、HTMLか.zipで書き出し、1つのフォルダにまとめます。

書き出したままだと、ページごとに同じCSSが重複していたり、リンクがファイル名のままだったりします。公開前に、Claude Codeで次のような点検をかけます。

このフォルダはClaude Designから書き出したサイト一式です。公開前に点検してください。
1. 全ページのリンク切れ（存在しないファイルへのリンク）を一覧にする
2. title・description・canonical が無いページを一覧にする
3. スマホ幅（390px）で横にはみ出す要素がないか確認する
直すのは一覧を見せてからにしてください。

ポイントは最後の1行です。いきなり直させず、まず一覧を出させて人が確かめる。Claude Codeには「作って」より「確かめて」を多く頼むほうが、品質が上がります。

STEP 3：GitHubのリポジトリで管理する

ファイル一式をGitHubの非公開リポジトリに入れます。以後の変更はすべてここを通るので、「いつ、何を、なぜ変えたか」が残り、いつでも前の版に戻せます。

このフォルダをGitHubの非公開リポジトリ「company-site」として初回コミットしてください。
READMEに、サイトの構成・公開先・更新の手順を書いてください。
今後の変更は、mainに直接入れず、作業ごとにブランチを切ってPRを出してください。

READMEに手順を書かせておくのが、地味ですが効きます。カトルセのリポジトリのREADMEにも、画像を足したときに実行するスクリプトや、記事を大きく更新したときの決まりごとが書いてあり、次の作業のときにClaude Codeがそれを読んで同じ手順で進めます。

STEP 4：Cloudflare Pagesで公開する

CloudflareのダッシュボードでPagesのプロジェクトを作り、GitHubのリポジトリをつなぎます。カトルセの設定は「フレームワークなし・ビルドコマンドなし・出力ディレクトリはリポジトリ直下・本番ブランチはmain」です。ビルドの工程がないので、HTMLを置けばそのまま配信されます。

つないだあとは、PRを出すたびに確認用のURL（プレビュー）が作られ、mainにマージすると本番が更新されます。この「プレビューで見てから出す」流れが、後の運用の土台になります。

Cloudflare Pagesで公開する前提で、次を用意してください。
・旧URLから新URLへの転送ルール（_redirects）
・sitemap.xml と robots.txt
・存在しないページ用の 404.html
転送ルールは、転送先が実在するかも確認してください。

独自ドメインをつなぐ作業（DNSの切り替え）は、メールを止めないための段取りが要ります。カトルセが実際に行った5段階の手順と戻し方は、WordPressを卒業した話にまとめています。

4. 公開後の運用：Claude Codeでやったことと、良くなったこと

ホームページは公開してからが本番です。カトルセは10月21日に静的なコピーを作ってCloudflareへ移し、そこから10月25日までに、Claude Codeで13本のPRを出しました。主なものを「やったこと → 何が良くなったか」で並べます（数字はリポジトリのREADMEと変更履歴にあるものです）。

問い合わせフォーム：鍵をページに置かない

移行前のフォームは、ブラウザから直接CRM（顧客管理システム）に送る作りで、送信に使う鍵がページの中に書かれていました。ページのソースを見れば誰でも読める状態です。これを、間に小さな中継の仕組みを挟む形に変え、鍵は中継側の設定（環境変数）にだけ置くようにしました。あわせて、悪用を防ぐために送信の回数に上限を設けています。

同じ時期に、送信が終わってもフォームと「送信中です…」の表示が画面に残る不具合も見つけて直しました。仕組みを変えたあとは、プレビューで実際に送ってみて、CRMに届くか・画面がどう変わるかまで確かめています。動く部分は、1つ変えると別の場所に影響が出やすいからです。

表示速度：画像・フォント・React

サイトの画像はPNGやJPEGのままで、1枚で500KBを超えるものもありました。Claude Codeに変換のスクリプトを書かせ、1,648枚のWebP版を作って参照を切り替えたところ、合計は617.5MBから67.6MBになりました。SNSの共有画像とファビコンは、SNS側の対応がまちまちなのでPNGのまま残しています。

研修や採用のページ（27ページ）は、ブラウザの中でプログラムを変換して表示する作りでした。人が見る分には問題がなくても、検索エンジンには本文が読みにくい状態です。事前に描画した結果をHTMLに書き込む形に変えました。

大事なのは、どれも1回きりの手作業にせず、スクリプトとして残したことです。新しい画像やページを足したら同じスクリプトを実行する、とREADMEに書いてあるので、次の作業でもClaude Codeが同じ手順を踏めます。

URLの統一：308転送と、ついでに見つかった404

Cloudflare Pagesは、xxx.htmlへのアクセスをxxxへ308で転送します（設定では止められません）。ところがサイトのcanonical・サイトマップ・サイト内リンクは.html付きのままで、検索エンジンにとって正式なURLが揺れ、Search Consoleでも同じ記事が2行に分かれていました。

そこでcanonical・構造化データ・サイトマップ・サイト内リンク・共有ボタンのURLを、.htmlなしに一括で揃えました。サイト内リンクだけで約7,100か所です。この作業の途中で、構造化データの執筆者・パンくずのURLや、X・Facebook・LINEの共有ボタンのURLが404になっていたことも見つかり、あわせて直しました。もう使っていない旧ページは、後継のページへ301で転送しています。

人が1ページずつ見ていたら、まず気づかない種類の不具合です。サイト全体を機械的に点検できるのが、運用をClaude Codeに任せるいちばんの利点だと感じています。

記事の追加と更新：一覧まで含めて1回で

記事は今もClaude Designで書いています。書き出した記事を渡すと、Claude Codeが記事本体だけでなく、記事一覧・トップページの新着・サイトマップ・関連記事のリンクまで反映してPRを出します。大きく更新した記事は、更新日を記事と一覧に出し、一覧の先頭に移す決まりにしました。これもREADMEに書いてあります。

変更は毎回、PR → Cloudflareのプレビューで確認 → マージ、の順で本番に出しています。プレビューのURLで実物を見てから出せるので、「公開してから崩れに気づく」事故を防げます。

5. 費用と体制：「直せる人」が1人いればいい

費用

道具の費用は、Claudeのプランと公開先の料金です。2026年10月時点のClaudeの料金ページでは、Claude DesignとアーティファクトはFreeを含む全プランで使え、Claude CodeはPro以上の有料プランに含まれます。Proは月20ドル（月払い。年払いは月あたり17ドル）です。Teamなど法人向けプランもあります。最新の金額とプランの違いは公式ページとClaude Code料金完全ガイドで確認してください。

Cloudflare Pagesには無料で始められるプランがありますが、ビルド回数などの上限や有料プランの条件は変わることがあるため、公式ページで確認してください。Vercelとの比較はWordPressを卒業した話に書いています。独自ドメインの費用は別にかかります。

体制

専任のWeb担当や制作会社がいなくても回ります。必要なのは、社内に「直せる人」が1人いることです。ここでいう「直せる人」は、HTMLを自分で書ける人ではありません。次の3つができる人です。

1. やりたいことを、Claude Codeに言葉で正確に伝えられる
2. 出てきた変更点（差分）とプレビューを見て、意図どおりか判断できる
3. おかしいときに「マージしない」と決められる

運用の流れは単純です。変更は必ずPRにし、Cloudflareのプレビューで確認してからマージする。mainへ直接入れない。これだけで、AIが間違えても本番に出る前に止められます。

6. 注意点：AIに作らせるときに守ること

Claudeが書いたコードは人が確かめる

Claude Codeは速く、たいていは正しく直します。それでも、見落としや思い込みはあります。カトルセでも、画像の変換スクリプトがファイル名の全角スペースで区切りを誤り、WebP版があるのに一部のページで重い画像を読み続けていたことが、あとから分かりました（22ページ・65か所）。PRの差分とプレビューを見る工程は省かないでください。

権限は必要な分だけ渡す

• GitHubとCloudflareの連携は、対象のリポジトリだけに許可する
• パスワードやAPIキーをClaudeとの会話やファイルに書かない。公開先の環境変数に人が登録する
• Claude Codeに許可する操作の範囲（ファイルの編集やコマンドの実行）を決めておく。考え方はClaude Code完全活用ガイドの権限の章を参照

問い合わせフォームのような「動く部分」は慎重に

静的なページは、表示が崩れても直せば済みます。しかし、問い合わせフォームや外部サービスとの連携のようにデータを受け取って送る部分は、作りを誤ると情報の漏えいや悪用につながります。鍵をページに置かない、中継の仕組みを挟む、送信の回数に上限を設ける。少なくともこの3点は確認し、不安があれば専門家に見てもらってください。

ツールの変化に追いつく

Claude Designは、この1か月で使える場所とプランが変わりました。単独サイトのclaude.ai/designは12月14日までです。作ったものは自社のリポジトリに書き出して持っておくのが、道具が変わっても困らないいちばんの備えです。

7. カトルセの支援

カトルセは、この記事の内容を自社サイトで実際に運用しています。同じことを自社でやりたい企業向けに、次の支援をしています。

• AI開発：自社サイトや社内ツールを、Claude CodeなどのAIと一緒に作り、社内で直し続けられる形（リポジトリ、README、PRとプレビューの流れ）で引き渡します。開発事例もご覧ください。
• 職種別AI研修シリーズ：「直せる人」を社内で育てる研修です。開発・社内IT向けの生成AI×開発実務研修では、AIとの対話でプロトタイプや社内ツールを作る「バイブコーディング」から、テスト・レビュー・ドキュメント作成までを演習します。職種別AI研修シリーズ（全9講座・各11時間）。受講料は全講座共通で1名あたり36万円（税抜）。ライブ形式（対面／オンライン同時双方向）のため人材開発支援助成金の活用をご検討いただけます。支給の可否は都道府県労働局の審査で決まります。申請手続きは社会保険労務士の独占業務のため、必要な場合は提携社労士をご紹介します。
• 無料相談：「今のサイトをClaudeで作り直せるか」「どこまで社内でやれるか」を30分で整理します。

研修・AI顧問・開発を組み合わせて、法人研修の受講者は累計2,000名以上になりました。

よくある質問

Claude Codeだけでホームページは作れますか？

作れます。ただ、見た目を決める段階は、画面を見ながら直せるClaude Designのほうが早く進みます。カトルセでは、デザインとページの初稿はClaude Design、公開の準備と公開後の改修はClaude Codeと分けています。

無料でホームページを作れますか？

作るところまでは無料プランでも試せます。2026年10月時点で、Claude Designとチャットのアーティファクトは無料プランを含む全プランで使えます。一方、Claude Codeは有料プラン（Pro以上）に含まれる機能です。公開先のホスティングやドメインの料金は、各サービスの公式ページで確認してください。

claude.ai/design が終わると、作ったデザインはどうなりますか？

Anthropicによると、単独サイトのclaude.ai/designは2026年12月14日まで残り、その後はチャットとプロジェクトのコメント、単独サイトのプロジェクトの公開リンクが使えなくなります。9月16日からは、通常のClaudeの会話の中でDesignが使えます。残したいデザインは、それまでにHTMLなどで書き出しておくと安心です。

問い合わせフォームもClaudeに作らせて大丈夫ですか？

作らせることはできますが、いちばん慎重に扱う部分です。送信先の鍵をページのHTMLに置かない、間に中継の仕組みを挟む、送信の回数に上限を設ける、といった対策が要ります。Claudeが書いたコードは人が読み、本番の前にプレビューで実際に送って確かめてください。

まとめ ── ホームページは「作って終わり」から「直し続ける」ものへ

1. 道具を分ける。見た目を作るのはClaude Design、公開して育てるのはClaude Code。1ページの試作ならチャットで十分です。
2. 静的HTML＋GitHub＋Cloudflare Pages。サーバーもCMSも持たず、変更の履歴が残り、プレビューで確かめてから出せます。
3. 公開後に差が出る。画像の軽量化、URLの統一、フォームの安全化のような「サイト全体の作業」こそ、Claude Codeの出番です。
4. 人は「確かめる・決める」に回る。直せる人が1人いて、PRとプレビューの流れを守れば、AIの間違いは本番の前に止められます。

この記事の実例は、いま見ているこのサイトそのものです。トップページから、AI記事の一覧や研修のページまで、同じ仕組みで動いています。

参考

1. Claude：Dashboards and Motion（2026年10月8日。Docs・Slides・Designのベータ終了、claude.ai/design の扱い）
2. Claudeヘルプセンター：Get started with Claude Design（書き出し形式・Claude Codeへの引き渡し）
3. Claude：料金ページ（各プランの料金と使える機能）

※ 本記事は2026年10月25日時点の情報にもとづいています。Claudeの機能・プラン・料金は2026年10月24日に上記の公式ページで確認しました。Cloudflare Pagesの料金・上限は記載していません。導入の際は各社の公式ページで最新の条件をご確認ください。カトルセの数字（ページ数・画像の容量・変換した箇所の数など）は、自社サイトのリポジトリのREADMEと変更履歴にもとづきます。セキュリティ上の理由から、問い合わせフォームの具体的な設定値や仕組みの詳細は記載していません。本記事に登場する製品名・サービス名は、それぞれの提供元の商標または登録商標です。