演習：Claude CodeでWebサイトを作る

WSP ClaudeDesign

Claude Codeで、ちゃんとしたWebサイトやWebアプリを作る演習。複数ページのWebサイト、Claude Designで作るデザイン、1回の依頼で作るWebアプリ、公開後にやっておきたい仕上げ（favicon・OGP・404ページ）を順に試す。

前提は、作ったものをCloudflareで公開する手順が分かっていること。まだなら、先に CloudflareにHTMLをアップロードして公開するを終えておく。Claude CodeでWranglerを使って公開する方法でもよい。この記事では公開の手順は繰り返さない。

作業フォルダは、どの章も ~/claude の下に新しく作り、Claude Codeで新しいセッションを開いてそのフォルダを指定する（1-1 と同じ要領）。公開するファイルは、どの章も public フォルダの下に置く。

1. 複数ページのWebサイトを作る

複数のページからなるWebサイトを作る。Webサイト用の新しいフォルダ（例：profile）を ~/claude の下に作り、Claude Code で新しいセッションを開いてそのフォルダを指定する。

個人プロフィールサイトを作って！
架空の人物の設定で、名前・趣味・制作物などは適当に考えて。
ページ構成：
- public/index.html（自己紹介・トップ）
- public/works/index.html（制作物や趣味の紹介）
- public/contact/index.html（連絡先）
CSSは public/css/style.css にまとめて。
各ページにナビゲーションメニューをつけて。
リンクのパスは各HTMLファイルの場所からの相対パスで記述すること。
写真が入りそうな場所は placehold.co のプレースホルダー画像を使って。
シンプルでモダンなデザインで。

フォルダ構成はこのようになる：

profile/
└── public/
    ├── index.html
    ├── css/
    │   └── style.css
    ├── works/
    │   └── index.html
    └── contact/
        └── index.html

完成したら、public フォルダを Cloudflare に公開する（公開の手順）。公開URLで確認する。

作例：プロフィールサイト

最後の一行の「シンプルでモダンなデザインで。」を変えるだけで、全体の雰囲気を大きく変えられる。たとえば「南国リゾート風なデザインで。」にすると、次のようになる。

「南国リゾート風なデザインで。」にした例（トップ・制作物・連絡先の3ページ）

2. Claude Designでデザインを作る

Claude Design は、プロンプトでWebページなどのデザインを生成する機能。Claudeデスクトップアプリのサイドバーの Design から使う。作ったデザインは Artifact として保存され、Claude Code はそのリンクから中身を読める。この章では、まずダミーの会社サイトをざっくり作って公開するところまで通し、そのあとでデザインシステムを使ってデザインをそろえる作り方と、複数ページをまとめて作る方法を試す。

以前の単独サイト claude.ai/design は 2026年12月14日で終わり、Claude 本体に移る。この章の手順は、Claudeデスクトップアプリから始める。

2-1. まず作る：ダミーの会社サイト

Claudeデスクトップアプリの左上の切り替えで Claude（吹き出しのアイコン）を選び、サイドバーの Design を開く。Code（</> のアイコン）の側ではない。

サイドバーの Design。下に、これまでに作ったデザインが並ぶ

「新しいものを作成」の デザイン にカーソルを合わせ、プロンプトから始める を押す。

デザイン のカードと プロンプトから始める

「このデザインで何を表示しますか？」と書かれた入力欄が出るので、作りたいWebページの概要をプロンプトで伝える。

プロンプトから始める を押した時点で会話が作られる。何も送らずに戻ると、サイドバーの「最近の項目」に「Untitled design」という会話が残る。中身はないので、気になれば消してよい。

最初は細かく決めず、それらしい見た目のものを1回で出してもらう。Claude Design は社名・ターゲット・配色などを聞き返してくることがあるので、その分を最初から入れておき、「質問せず1回で出して」と頼む。凝りすぎると生成が長引き、使用量も増えるので、作り込みの程度も指定しておく。

日本語の企業ホームページを1ページで作ってください。
確認の質問はせず、足りない情報は下記の指定や一般的な内容で補って、そのまま完成版を1回で出力してください。

【会社】
- 社名: オレオレAIカンパニー
- 事業: AIを活用した業務効率化サービスを提供する、従業員5〜6名のスタートアップ
- ターゲット: 中小企業の経営者・情報システム担当者

【構成】次のセクションを縦に並べる
- ヒーロー（キャッチコピー＋一言説明）
- 会社概要
- 理念／社長からのメッセージ
- 提供サービス一覧（3件程度）
- アクセス
- お問い合わせ（送信はしない、フォーム風の見た目だけ）

【デザイン】
- 今風で洗練された、ひと目で「おお」と思える見た目に。しっかり作り込んだヒーロー、効いた配色、余白とタイポグラフィにこだわる
- グラデーションやアクセントカラーを効果的に使い、モダンで上質な雰囲気に
- ただし生成が長引かないよう、重いアニメーションや過剰な作り込みは避け、1回でまとまる範囲で仕上げる
- 日本語。本文はそれらしい日本語のダミーテキストで埋める

それでも質問が来たら、答えればよい。2026年10月に試したときは、質問は来ず、約3分でできあがった。会話の右にキャンバスが開き、デザインが表示される。会話には、ダミーで補った内容（設立年・代表者名・住所など）の説明が出る。

左が会話、右がキャンバス

ここでできるのは、Claude Design 用の形式のデザイン。ふつうのHTMLファイルではないので、公開する前に 2-3 で Claude Code にHTMLにしてもらう。プロンプトで「index.html 1ファイルで」と指定しても、この形式で作られる。

Claude Design の使用量は、チャットや Claude Code と同じ枠から使われる。複雑なデザインほど多く使う（公式ヘルプ）。作り直しを繰り返すと、Claude Code で作業できる分が減ることがある。

2-2. キャンバスで直す

できたデザインはキャンバスに表示される。気になるところがあれば、ここで直す。

全体の雰囲気や構成を変えたいときは、会話でそのまま頼む
特定の見出しやボタンだけ直したいときは、キャンバスのその部分にコメントを付けて頼む
文言の書き換えや、見出し・セクションの位置の入れ替えは、キャンバスで直接できる

全体をもう少し落ち着いた配色にして。アクセントカラーは1色に絞って。

キャンバス上の文字を選ぶと書式のツールバー（フォント・大きさ・色・太字など）が出て、その場で書き換えられる。見出しやセクションは、つかんでドラッグすれば動かせる。直した内容はそのままデザインに保存される。

キャンバスで見出しを書き換えているところ

キャンバス右上の ▷ を押してアートボードを選ぶと、ページを実際にクリックして確かめる表示になる。この表示では編集できない。左上の＜を押すとキャンバスに戻る。

右上の ▷ からアートボードを選ぶ

ドラッグは HTML の組み立てごと動かすので、セクションが別のセクションの中に入り込むことがある。手で直した直後なら Cmd + Z で取り消せる。時間がたって戻せなくなったときは、どこがどうずれたかを会話で伝えれば直してもらえる。配置を大きく変えたいときも、手で動かすより会話で頼む。

ここで作り込みすぎなくてよい。細かい調整は、このあと Claude Code でもできる。

2-3. Claude Code に渡す

デザインが決まったら、そのリンクを Claude Code に渡して、ふつうのHTMLにしてもらう。

キャンバス右上の共有を押し、共有のタブで プライベートリンクをコピー を押す。一般アクセスは「あなたのみ」のままでよい。Claude Code は自分のアカウントでリンクを読むので、ほかの人に公開しなくても読める。

共有のパネル

作業フォルダ（例：~/claude/design）を作り、Claudeデスクトップアプリ → 左上の </> のアイコン（Code）→ 新規 → その作業フォルダを指定してセッションを開始する。コピーしたリンクを貼って頼む。

次のリンクは Claude Design で作ったデザイン。中身を読んで、見た目はそのままに、ReactやJavaScriptを使わない素のHTML/CSSにして public/index.html に保存して。スマホでも崩れないようにして。
====
（コピーしたリンクを貼る）

Claude Code はリンク先のデザインを読み、public/index.html を作る。試したときは、許可を求められることもなく、すぐに終わった。

リンクから読んで public/index.html を作ったところ

そのまま公開してもよいが、気になる箇所があれば続けて Claude Code で調整する。

ダークモード風にして。

補足：リンクから読めないときは、共有のパネルの エクスポート のタブで HTML をダウンロードし、作業フォルダに移して「このHTMLは Claude Design から書き出したもの。見た目はそのままに、ReactやJavaScriptを使わない素のHTML/CSSにして public/index.html に保存して」と頼む。書き出したHTMLは中身を詰め込んだ形（600KB 以上）で、Claude Code が取り出して書き直すので、リンクを渡すより時間がかかる。

2-4. 公開する

調整が終わったら、public フォルダを Cloudflare に公開する（公開の手順）。公開URLで確認する。

作例：企業サイト

2-5. デザインシステムでデザインをそろえる

2-1 では、デザインのたびに配色や文字の雰囲気を Claude Design が決めていた。ページを増やしたり作り直したりすると、そのたびに見た目が少しずつ変わる。

デザインシステムは、色・文字（フォントと大きさ）・余白・ボタンなどの部品をまとめた決めごと。一度作っておくと、Claude Design はそれに合わせてデザインを作る。同じ会社のページを何枚作っても、見た目がそろいやすい。

ここでは、2-1 で作った会社サイトのデザインからデザインシステムを作り、同じ見た目で採用ページを作る。材料は 2-3 でコピーしたプライベートリンク。

サイドバーの Design を開き、デザインシステム のカードにカーソルを合わせて プロンプトから始める を押す。会話の途中なら、入力欄の＋ → デザインシステム → 新しいデザインシステム → Claude を使用 からでも同じ画面になる。

デザインシステム のカード

「このデザインシステムを何をもとに作成しますか？」と聞かれ、GitHub から同期・コネクタから構築・ブランドファイルをアップロード が並ぶ。右には、まだ中身のないデザインシステムのページが開く。ここではどれも押さず、入力欄にリンクを貼って頼む。

新しいデザインシステムを作り始めたところ

次のリンクは、オレオレAIカンパニーのWebサイトのデザイン。
中身を読んで、そこで使われている色・フォント・文字の大きさ・余白・角丸をそのまま使って、この会社のデザインシステムを作って。
ボタンや見出しなどの部品も決めて、一覧で見られるようにして。
====
（コピーしたリンクを貼る）

デザインのコードから値を読み取るので、色やフォントは会社サイトと同じものになる。返事の説明文が英語になることもあるが、中身は日本語で作られる。

リンクから作ったデザインシステム

補足：Claude Design で作っていないサイトなら、スクリーンショットを添えて「この見た目をもとにデザインシステムを作って」と頼んでも作れる。ただし色やフォントは画像から推し量るので、近いが同じではないものになる（試したときは、濃紺 #0A0E1F が #0a0c1d に、フォントも別のものになった）。

できたら、そのデザインシステムを使って別のページを作る。2-1 と同じく Design → デザイン のカード → プロンプトから始める で新しいデザインを始め、入力欄の＋ → デザインシステム で オレオレAIカンパニー にチェックを入れる（最初から入っていることもある）。入力欄の下にデザインシステムの名前が出ていれば、使われる。

使うデザインシステムを選ぶ

オレオレAIカンパニーのデザインシステムを使って、採用ページを1ページで作って。
募集職種（2件程度）、働き方、応募の流れ、エントリーボタンを縦に並べる。

2〜3分で、会社サイトと同じ色・フォント・ボタンの形の採用ページができる。給与や勤務地のように決まっていない情報は「[勤務地]」のような仮置きで入るので、公開する前に書き換えるか、Claude Design に実際の内容を伝えて直してもらう。

デザインシステムを使って作った採用ページ

公開するときは 2-3 と同じくプライベートリンクをコピーし、会社サイトの作業フォルダ（~/claude/design）のセッションで Claude Code に頼む。会社サイトの public/index.html を上書きしないよう、置き場所を指定する。

次のリンクは Claude Design で作った採用ページ。中身を読んで、見た目はそのままに素のHTML/CSSにして public/recruit/index.html に保存して。会社サイトのトップページから採用ページへのリンクも付けて。
====
（コピーしたリンクを貼る）

あとは 2-4 と同じ手順で公開する。

デザインシステムは、リンクやスクリーンショットのほかに、ロゴやフォントなどのファイル、GitHub のリポジトリ、デザイン系のサービスからの取り込み、言葉での説明からも作れる。新しいデザインシステム で Claude Code を使用 を選ぶと、Claude Code が作業フォルダのコードから色や部品を読み取って作る。

補足：デザインの方針（フォント・色・余白・タイポグラフィなど）を Markdown 1ファイルにまとめる DESIGN.md という手法もある。Awesome Design MD JP には日本語サイト向けのサンプルが多数揃っている。外部から持ってきたファイルは、AIに渡す前に中身を一度確認しておくと安全。

2-6. 複数ページをまとめて作る

ここまでは1回のデザインで1ページを作った。1つのデザインの中に、ページごとのアートボード（キャンバス上の1枚の画面）を並べて作ることもできる。ページ同士のリンクもつながった状態でできる。

2-5 の採用ページと同じく、Design → デザイン → プロンプトから始める で新しいデザインを始め、入力欄の＋ → デザインシステム で オレオレAIカンパニー を選んでから頼む。

オレオレAIカンパニーのデザインシステムを使って、会社サイトを3ページで作って。
ページは、トップ、サービス、お問い合わせ。ページごとに別のアートボードにして、ヘッダーのナビで互いに行き来できるようにする。
確認の質問はせず、1回で出して。

5分ほどで、キャンバスに3ページが横に並ぶ。右上の ▷ からページを選ぶと、ナビをクリックしてほかのページに移れるかを確かめられる。

1つのデザインに3ページ

Claude Code には、2-3 と同じくプライベートリンクで渡す。2-3 で作った public/index.html を上書きしないよう、新しい作業フォルダ（例：~/claude/design-multi）で始める。ページごとの置き場所は依頼文で指定する。

次のリンクは Claude Design で作った会社サイト（3ページ）。中身を読んで、見た目はそのままに、ReactやJavaScriptを使わない素のHTML/CSSにして保存して。トップは public/index.html、サービスは public/services/index.html、お問い合わせは public/contact/index.html にして、ページ同士のリンクもつなぎ直して。スマホでも崩れないようにして。
お問い合わせフォームは送信先がないので見た目だけでよい。送信ボタンを押しても「送信しました」とは表示しないで。
====
（コピーしたリンクを貼る）

ページごとの HTML と、3ページ共通の CSS ファイルに分かれて保存される。公開は 2-4 と同じ手順でよい。

フォームの一文を入れているのは、Claude Design のフォームが「送信しました」と表示が切り替わるだけの見本だから。何も言わずに変換を頼むと、その動きがそのまま写り、入力した内容はどこにも送られないのに、送った人には届いたように見える。本当に問い合わせを受け付けるには、送信先の仕組みが別に要る。

3. 1回の依頼でWebアプリを作る

HTMLファイル1つで動く小さなWebアプリを、1回の依頼で作る。新しいフォルダ（例：renda）を作って Claude Code で新しいセッションを開き、次のどれかを頼む。お題を変えるときは、フォルダを分けるか、同じフォルダで public/index.html を上書きする形で頼めばよい。

プロンプト例:

HTML+JavaScriptでポモドーロタイマーを作って！
public/index.html 1ファイルで作って。

複利計算機をHTML+JavaScriptで作って！
構成はHTMLファイル(public/index.html)が1つ。

マウスかタッチパッドでボタンを10回連打するのに何秒かかるかを競うゲーム。
public/index.html 1ファイルで作って。

ボタンを押すと効果音が出るWebアプリをHTMLファイル1つ（public/index.html）で作って。
3つのボタンで三つの効果音。

TODOリストをHTML+JavaScriptで作って！
項目の追加・削除ができて、ページを閉じても消えないようにしたい。
public/index.htmlに書いて。ファイルは1つで。

最大60秒のカウントダウンタイマーをHTML+JavaScriptで作って！
秒数を入力してスタート・リセットできるようにしたい。
HTMLファイル1つ（public/index.html）にまとめて。

Claude Codeで連打ゲームを作成

完成したら、public フォルダを Cloudflare に公開する（公開の手順）。公開URLで確認する。

作例：連打ゲーム

ここで作ったのは、1回の依頼で完成して、その場で使い終わるアプリ。使いながら機能を足していく、データを残す、といった「育てる」作り方は一人完結型Webアプリの実践で扱っている。

4. 公開後にやっておきたい仕上げ

サイトが公開できたら、もう少しだけ手を加えると「ちゃんとしたサイト」感が増す。どれもClaude Codeとの短いやりとりでできる軽い作業。これまで作ったどのサイトにも同じ要領で適用できる。

設定を加えたあとは、もう一度公開して反映する（ブラウザでアップロードしたならサイトを更新すると同じ要領）。

4-1. favicon

favicon（ファビコン）は、ブラウザのタブやブックマーク、履歴の一覧などに表示される小さなアイコン。設定しておくと「ちゃんとしたサイト」感が出る。

先ほどのセッションで下記のように頼む:

このサイトのfaviconを作って、public/index.htmlに設定して。
サイトの内容に合うシンプルなデザインで。SVGで作ってくれてOK。
ファイルは public/favicon.svg として保存して。

SVGならClaude Codeが直接コードでアイコンを書けるので、画像生成ツールがなくても作れる。public/favicon.svg として保存され、<link rel="icon" href="favicon.svg"> のように読み込まれる。

デプロイ後、ブラウザのタブに小さなアイコンが出ていれば成功。出ない場合はブラウザのキャッシュが効いていることがあるので、ハードリロード（macOSなら Cmd + Shift + R）を試す。

4-2. ページタイトル・description

<title> はブラウザのタブやブックマーク、検索結果に表示される文字。<meta name="description"> は検索結果に出る説明文。Claude Codeが生成したHTMLでは Document のままだったりすることもあるので、内容に合った文言にしておく。

public/index.html の <title> と <meta name="description"> を、
サイトの内容に合った文言に整えて。

4-3. OGP（SNSシェア対応）

OGPは、サイトのURLをXやLINEなどに貼ったときに、タイトルや画像が大きく表示される仕組み。設定しないと味気ないリンクのままだが、設定するとカード型のリッチな表示になる。

このサイトにOGPの設定を追加して。
シェア用画像（public/og.png）も作って、タイトル・説明・画像を public/index.html の <head> に設定して。
タイトルと説明文は、すでに設定してある <title> と <meta name="description"> に揃えて。
シェア画像はサイトの雰囲気に合わせて作って。
og:image は公開後のフルURL（公開URLの末尾に /og.png を付けたもの）で設定して。相対パスにしないこと。

Claude Codeが生成したOGP画像の例（vibecodingnotes.com の場合）

このプロンプトは一発で完結しないことが多い。途中でClaude Codeとやりとりすることになる:

画像生成ツールのインストール許可を求められる: シェア画像の生成にImageMagickなどをインストールしようとすることがある。許可すればOK
公開URLを聞かれる: og:image には公開後のフルURL（https:// から始まり /og.png で終わる形）が必要。まだデプロイしていない場合は仮のURLで進めておき、最初のデプロイで公開URLが確定したら教えて貼り直してもらう

設定が終わってデプロイしたら、ラッコツールズのOGP確認などに公開URLを貼って、各SNSでのカード表示を確認する。

4-4. 404ページ

存在しないURLにアクセスされたとき、デフォルトでは無味乾燥なエラー画面が出る。自分で作った404ページを出しておくと、迷い込んだ人をトップに戻せる。

存在しないURLにアクセスされたときに表示する404ページを作って。
サイトのデザインに合わせて、トップに戻るリンクを入れて。
公開先で表示されるようにするのに設定が必要なら、それも用意して。

404ページの出し方は、公開のしかたによって違う。Cloudflare にブラウザからアップロードした場合は、Pages でも Workers でも 404.html を置くだけで表示される。Wrangler で Workers に公開する場合は、置くだけでは表示されず、設定ファイル（wrangler.jsonc）に1行要る。依頼文の最後の1行は、その違いをClaude Codeに任せるためのもの。

Claude Codeが作成した404ページの例。画像は後から追加した。

5. 次のステップ

ここまでで、静的なWebサイトやWebアプリなら、たいていのものは作って公開できるようになった。

使いながら機能を足していく、データをブラウザに残す、といった作り方を知りたい：一人完結型Webアプリの実践
独自ドメインで公開したい：CloudflareでWebサイトに独自ドメインを設定する
公開や更新をClaude Codeに任せたい：Claude CodeでWebアプリを作ってWranglerでCloudflareに公開する

2026-10-02 (last updated: 2026-10-23) タツヲ (yto)

☕️ Vibecoding Notes を応援