Claude Codeで
ウェブサイトを作る

OVERVIEW

全体像 ── 5つの段階

コードは一行も書きません。書くのはClaude Codeです。あなたの仕事は、道具をつなぐことと、何を作るかを決めることの2つだけです。

この順番が肝心です。多くの人は「中身を作ってから公開する」と考えますが、逆にしてください。空っぽでいいので、先に公開までの道を通してしまう。そうすれば以降は「直したものが自動で公開される」状態で作業できます。順番を逆にすると、完成した最後の日に公開でつまずいて、誰にも見せられずに終わります。

1枚もののページで足りる場合。ランディングページだけ作りたいなら、STEP 4（サイトの地図）とSTEP 7（ページを増やす）は飛ばしてください。残りはそのまま使えます。

ENVIRONMENT

必要な環境 ── どこに何があるか

そろえるものは多くありません。ただ、どれが自分のパソコンの中にあって、どれがインターネットの向こう側にあるのかを最初に掴んでおくと、後で詰まったときに「どこを見ればいいか」が自分で分かるようになります。

この図から読み取ってほしいことが2つあります。

ひとつ目。Claude Codeはあなたのパソコンで動きますが、考えているのはクラウドのClaudeです。だから接続が切れると、ファイルは手元にあるのに何も進まなくなります。合宿や出先で「急に止まった」ときは、まず回線を疑ってください。

ふたつ目。金色の本線は、いったんつながれば自動で流れます。GitHubに送れば、あとはVercelが勝手に公開してくれる。人が毎回アップロードする作業は発生しません。逆に、Claude Designとのやりとりだけは自動化されていません。ここだけはあなたがコピーして運びます。手作業が残るのはここだけだ、と分かっていれば迷いません。

STEP 1

環境を整える目安30分

STEP 2

保管庫と公開係を用意する目安20分

登録するサービスは2つです。役割が違います。

STEP 3 ── 最重要

空のページを、先に公開してしまう目安30分

中身はまだ作りません。「準備中」とだけ書いた1ページを、本当にインターネットに公開します。ここを最初に済ませるかどうかで、この先の難易度が変わります。

この工程が終わると、○○.vercel.app という形のURLが手に入ります。スマホで開いてみてください。自分のパソコンで作ったものが、世界中から見える状態になった瞬間です。

土台の指定について

Astro は複数ページのサイトを作るのに向いた道具で、Tailwind CSS は見た目を整えるための書き方の作法です。どちらもClaude Codeが自動で入れるので、あなたが登録したり支払ったりするものは何もありません。作業中に「Tailwindを入れます」と言われても、そのまま進めてください。

なぜ最初に指定するのか。STEP 6でClaude Designが作ったデザインをClaude Codeに戻す往復があります。このとき両側の書き方が揃っていないと、統合が「翻訳作業」になり、原因の分かりにくい崩れが出ます。Tailwindに揃えておけば、この事故が起きません。土台は後から替えるのが最も高くつくので、ここで決めます。

一度、達成感を取っておいてください。この先は地味な作業が続きます。「公開できた」という手触りを先に持っているかどうかで、続く時間の心理的な負担がまったく違います。

STEP 4

サイトの地図を作る複数ページのサイトなら、ここが分かれ道

ページを作り始める前に、どんなページが必要かを決めて、URLを確定させます。ここを飛ばすと、思いついた順にページが増え、あとで「このページ要らなかった」「URLを変えたらリンクが切れた」が必ず起きます。

ページを増やすかどうかの判断根拠

「あったほうがいい」で判断すると、ページは無限に増えます。基準はひとつだけにしてください。

そのページが無いと、訪問者が次の行動に進めないか。

無くても進めるページは、作らない。会社案内の定番だから、という理由で足さない。ページが増えるほど、あとで全部を最新に保つ手間が増えます。維持できない量のページは、無いほうがましです。

増えないページと、増えるページを分ける

ここが、1枚もののページとの決定的な違いです。サイトの中には性質の違う2種類のページが混ざっています。

STEP 5

デザインより先に、文章を決める

ここが、多くの人が順番を間違えるところです。見た目から入らないでください。

体験の設計には、戦略 → 要件 → 構造 → 骨格 → 表層という5つの層があります。デザインは最後の「表層」です。中身が決まらないまま器から作ると、仮の文章に合わせた器ができあがり、本当の文章を入れた瞬間に崩れます。作り直しになる。

まずトップページだけを、完成させる

全ページ分の文章を一度に書こうとしないでください。トップページが決まれば、下層ページは「トップで言い切れなかった詳細」として自然に決まります。逆に、トップが曖昧なまま下層を書くと、全ページを書き直すことになります。

トップページに書くべきことは3つだけです。

• ・誰のためのものか（顧客）
• ・その人は何が得られるのか（ベネフィット）
• ・なぜ他ではなく、あなたから受けるのか（アドバンテージ）

下層ページには、行き先を1つ決める

各ページについて、「読んだ人に、次に何をしてほしいか」を1つだけ決めてください。問い合わせなのか、資料請求なのか、別のページを読んでもらうのか。

これが決まらないページは、そもそも無くていいページです。STEP 4の判断基準がここでもう一度効いてきます。

ここでAIに書かせきらないこと。一般論で埋めたきれいな文章は、誰の心にも残りません。あなたの実体験と、あなたが感じている違和感からしか、選ばれる理由は出てきません。AIの役割は書くことではなく、あなたから引き出すことです。

STEP 6

デザインを作る ── 全ページ分は作らない

文章が固まってから、ようやく見た目に入ります。ここで大事なのは、ページの数だけデザインを作らないことです。

作るのは2種類だけ。トップページ用と、下層ページ用。下層ページはこの1つの型を全ページで使い回します。ページごとに違うデザインを作ると、直すたびに全ページを直すことになり、更新が止まります。

STEP 7

ページを増やす

型ができたので、あとは流し込むだけです。ただし最初の1ページは、自分で流れを見届けてください。2ページ目以降は同じことの繰り返しになります。

STEP 8

問い合わせを受け取れるようにする

複数ページのサイトなら、問い合わせフォームはほぼ必須です。そしてここが、初めての人が最も高い確率で事故を起こす場所です。

STEP 9

独自ドメインをつないで、育てる

ドメインの取得先は、種類で決まる

○○.vercel.app のままでも動きますが、事業として見せるなら独自ドメインを取ります。

co.jp は選ばないでください。法人の登記確認が入るため、その日のうちには使えません。個人・法人どちらでも取れる汎用の ○○.jp にします。

ここからが本番 ── 更新のループ

公開は終わりではなく、始まりです。以降はこの3つの繰り返しになります。

この一巡を体で覚えることが、実質的なゴールです。ここまで来れば、あとは何を直すかを決めるだけになります。技術の問題は終わり、事業の問題だけが残る。その状態を作るのが、この手順書の目的です。

詰まったときの原則

• ・同じエラーで10分ループしたら、自力での解決をやめる。Claude Codeに「別のやり方はないか」と聞くか、人に聞く
• ・エラー文はそのまま貼る。要約しない。原因は要約で落ちた部分に入っていることが多い
• ・作業の区切りごとにGitHubへ送る。「ここまでは動いていた」地点があると、いつでも戻れる
• ・分からない言葉は、その場で聞く。「いま言った○○を、たとえ話で説明して」と頼めば必ず言い換えてくれる

GLOSSARY

最低限の用語

FOR YOUR CLAUDE CODE

この手順書を、Claude Code自身に持たせる

読んで進めるより、Claude Codeにこの手順を持たせて、案内役をやってもらうほうが速いです。下のファイルを渡せば、Claude Codeが順番を管理し、あなたが手を動かす場面で止まって指示を出してくれます。