Claude Code で作る Webサイト作成・ホームページ作成 12レッスン完全コース/カリキュラム/第2章: LP（ランディングページ）を作る/2-2 Claude Code で LP を生成する手順

2-2 Claude Code で LP を生成する手順

無料

Claude Code に設計図を渡してランディングページの HTML / CSS を AI 自動生成します。一発で形にする指示の出し方と、生成結果がイマイチだったときに修正を依頼するコツを学びます。

第2章: LP（ランディングページ）を作る20分

このレッスンで身につくこと

このレッスンは、2-1 で設計したラフを 実際の HTML / CSS ファイルとして Claude Code に生成させる ためのものです。デザインを磨くのは 2-3 に任せて、ここでは「最初の 1 回でどこまで形にできるか」「うまく作れなかったときどう修正を頼むか」に集中します。

ポイント

このレッスンのゴール

1 つのプロンプトで トップから下まで通った LP を生成できる
生成された index.html を ブラウザで開いて確認 できる
画像が用意できなくても ダミー画像で詰まらずに進められる
思ったものと違う出力が出たとき、部分だけ修正を頼める
スマホ表示 が壊れていないか自分で確認できる

所要時間 — 約 20 分（指示を出して待つ時間が半分くらいです）前提 — 2-1 でラフ構成（誰向け / 何を伝える / どこに CTA）を整理済み

最初の指示を出す — 架空のカフェ「CAFE BLUE」

ここでは練習用に、架空のカフェ「CAFE BLUE」の LP を作ります。自分のビジネスで作る場合も、考え方は同じです。テンプレートとして真似してください。

作業フォルダに入ってから claude を起動します。

cd ~/Documents/my-website
claude

> プロンプトが出たら、いよいよ最初の指示です。1 回で全部書くのがコツです。途中で「あ、あれも追加して」と継ぎ足すと、Claude Code の頭の中の設計図と食い違って、後半のセクションだけ浮いた仕上がりになります。

> 架空のカフェ「CAFE BLUE」のランディングページを作って。

  目的 — 近所の人にお店を知ってもらい、来店してもらう
  ターゲット — 30〜40代、カフェでゆっくり過ごしたい人

  構成（上から順番に）
  1. ヒーロー — 大きな背景画像 +「最高の一杯を、あなたに」+ CTA ボタン
  2. お店の特徴 — 3カラム（こだわりの豆 / 手作りスイーツ / 落ち着く空間）
  3. メニュー — コーヒー ¥500、ラテ ¥600、カプチーノ ¥700、季節のケーキ ¥450
  4. アクセス — 東京都渋谷区（ダミー住所）、Google Maps 風の埋め込み枠
  5. フッター — 営業時間 9:00〜18:00、定休日 水曜、Instagram / X リンク

  デザイン
  - 落ち着いたブラウン基調、白背景、アクセントは深い緑
  - 角丸ボタン、ふんわり影、上品な余白
  - 見出しは少しだけセリフ系で温かみを出す

  技術要件
  - HTML + Tailwind CSS（CDN 経由）の 1 ファイル構成
  - レスポンシブ対応（スマホ・タブレット・PC）
  - ファイル名は index.html
  - 画像は Unsplash の URL を使うか、なければ placeholder で OK

「目的」「ターゲット」「構成」「デザイン」「技術要件」の 5 つのブロックを書くのがポイントです。これだけで、Claude Code は「誰向けの、どんなトーンの、どんな技術スタックの」サイトを作ればいいか迷わずに済みます。

気づき

最初の指示は 長くて OK です。むしろ短い指示の方が、結果がブレて何度もやり直すハメになります。「Claude Code への指示は、外注先への発注書」くらいのつもりで書きましょう。

プロンプトの構造 — なぜこの 5 ブロックなのか

このプロンプトは、なんとなく長く書いているわけではありません。項目ごとに役割があります。

ブロック	これがあると何が変わるか
目的	Claude が「コンバージョン重視」か「情報提供重視」か判断できる
ターゲット	フォントサイズ、色のトーン、文章の固さがブレなくなる
構成	セクションの並び順が意図通りになる（CTA が下に埋もれない）
デザイン	色とトーンで指示する。具体的なカラーコードを書いてもいい
技術要件	1 ファイル / 複数ファイル、フレームワークの有無を最初に決める

特に 技術要件 を書き忘れると、Claude Code は「最近流行ってる Next.js で作っておこう」のように 勝手に重い構成を選ぶ ことがあります。今回は「HTML + Tailwind CDN の 1 ファイル」と明示することで、ファイルマネージャで開けばすぐ表示できる最軽量の構成を強制しています。

生成された中身を見る — Claude Code に説明させる

指示を投げると、Claude Code はプロジェクトの構成案を返してきます。

作成するファイル
- index.html  ... LP 本体（HTML + Tailwind CDN）
- README.md   ... プレビュー方法のメモ

画像は Unsplash の以下を使用
- ヒーロー  https://images.unsplash.com/photo-1495474472287-...
- 豆       https://images.unsplash.com/photo-1559056199-641a0...
- スイーツ  https://images.unsplash.com/photo-1551024506-0bccd...

進めてよいですか？ (y/n)

ここで ==y を押すと、実際にファイルが作られます。所要時間は 30 秒〜1 分== です。完成したら、その場で次のように頼んでみてください。

> いま作った index.html の中身をセクションごとに、何行目から何行目で
> 何を表示してるか教えて

Claude Code は次のように返してきます。

- 1〜15 行    : <head> / Tailwind CDN 読み込み / Google Fonts
- 16〜45 行   : ヒーローセクション（背景画像 + 中央寄せタイトル + CTA）
- 46〜80 行   : 特徴セクション（3カラム、grid-cols-3、md:grid-cols-1）
- 81〜120 行  : メニューセクション（カード型）
- 121〜150 行 : アクセスセクション（住所 + iframe 風ダミー）
- 151〜末尾   : フッター（営業時間 + SNS リンク + コピーライト）

「中身を読まずに、Claude に説明させる」のが、コードを書かない人の最強テクニックです。後で「メニューセクションだけ直して」と頼むときに、Claude がどこを触ればいいか自分で分かっている状態になります。

ブラウザでプレビューする方法

ファイルが揃ったら、ブラウザで開いて確認します。一番簡単なのはダブルクリックです。

Mac の場合は次の通りです。

open index.html

Windows の場合は次の通りです。

start index.html

エクスプローラーや Finder で index.html をダブルクリックしても OK です。デフォルトのブラウザ（Chrome / Edge / Safari）でページが開きます。

ローカルサーバーで開く（推奨）

実は、file:// で開くと一部の機能（fetch、外部 JSON 読み込み等）が動かないことがあります。最初はダブルクリックでも十分ですが、後々のためにローカルサーバーで開く方法も覚えておきましょう。

# このフォルダで実行
npx serve .

npx は Node.js を入れたときに一緒に入っているコマンドです。実行すると ==http://localhost:3000== のような URL が表示されます。ブラウザでアクセスすれば、本物の Web サーバー越しで動作確認できます。終了は Ctrl+C です。

ポイント

2-3 以降でアニメーションやフォーム送信を扱うなら、最初から ==npx serve .== でプレビューする習慣をつけておくと、後でハマりません。

画像をどう扱うか — 自分で用意しなくていい

LP を作るときに一番ハードルが高いのが画像の準備です。プロのカフェの写真を自分で撮るのは大変なので、最初はフリー素材 or プレースホルダーでつなぎます。

選択肢	用途	例
Unsplash 直リンク	本番に近い見た目を確認したい	`https://images.unsplash.com/photo-...`
placehold.co	サイズだけ決めたい	`https://placehold.co/1200x600?text=Hero`
自前の写真	本番リリース時	`./images/hero.jpg`

Claude Code に頼むと、適切な画像 URL を自動で提案してくれます。

> ヒーローのコーヒー画像、もっと暖色系で湯気が立っているやつに差し替えて。
> Unsplash で良さそうな URL を提案してくれる？

次のような提案が返ってきます。

候補
- https://images.unsplash.com/photo-1509042239860-f550ce710b93
  (湯気が立つラテアート、暖色のライティング)
- https://images.unsplash.com/photo-1442550528053-c431ecb55509
  (木のテーブルに置かれたコーヒー)

①を採用して index.html を更新しますか？ (y/n)

==y を押すだけで、画像が差し替わります。「自分で写真を探して、ダウンロードして、フォルダに置いて、パスを書く」というコードを書かない人の最大の詰まりどころ== を、Claude Code がまるごと肩代わりしてくれます。

気づき

本番リリースする頃には、撮ったお店の写真を ./images/hero.jpg のように差し替えればいいだけです。最初から本番画像を用意しなくていいので、プロトタイプを高速に作れます。

レスポンシブの確認 — スマホ表示を必ず見る

LP の 7 割はスマホで見られます。PC で見て「いい感じ」でも、スマホで崩れていたら台無しです。生成直後に必ずスマホ表示をチェックしましょう。

Chrome DevTools でモバイル表示

ブラウザで index.html を開く
==F12== を押して DevTools を開く（Mac は Cmd + Option + I）
左上のスマホアイコン（Toggle device toolbar）をクリック
上部のセレクトボックスから iPhone 14 Pro や Galaxy S20 を選択
ページを上から下までスクロールして崩れがないか確認

チェックする項目は次の通りです。

ヒーローのタイトルが画面からはみ出していない
メニューの 3 カラムが、スマホでは 1 カラムに変わっている
ボタンが指でタップできる大きさ（44px 以上）
文字が小さすぎない（14px 以上が目安）

崩れていたら、次のように頼みます。

> スマホで見るとメニューの 3 カラムが横に並んだままで窮屈です。
> 640px 以下では 1 カラムにしてください。
> あとヒーローのタイトルが画面からはみ出しているので、
> モバイルだと文字サイズを下げてください。

「どこで」「どうなって」「どう直してほしい」の 3 点セットで伝えると、Claude Code はピンポイントで修正してくれます。

思ったものと違うとき — 部分修正の頼み方

最初の生成が 100 点になることは少ないです。たいてい「ここはいいけど、ここは違う」みたいな仕上がりになります。ここで全部やり直さず、部分修正で詰めていくのがコツです。

パターン① 一部だけ直したい

> ヒーローのキャッチコピーだけ「最高の一杯を、あなたに」から
> 「街角の、ちいさな贅沢を。」に変えて。他はそのまま。

「他はそのまま」と付け加えると、Claude Code が余計なところまで触らずに済みます。

パターン② 全体的に直したい

> 全体的にもう少し落ち着いた印象にして。
> 余白を広めに、フォントサイズを少し小さく、配色は彩度を下げる方向で。

「全体的に」と最初に宣言すると、Claude Code は全セクションに同じ調整を適用します。

パターン③ セクションごと追加・削除

> メニューとアクセスの間に「お客様の声」セクションを追加して。
> 3件のダミーレビューと星評価を入れて。

「どこに」「何を入れる」を明示するだけで、適切な位置に差し込んでくれます。

ポイント

1 回の指示で 1〜2 個の変更に絞ると、結果が予測しやすくなります。「あれもこれも」と頼むと、片方が反映されてないことに気づきにくくなります。

失敗パターン

実際にやってみると、最初のうちは何度かハマります。よくある失敗 3 つを先に潰しておきます。

失敗① 指示が曖昧で何度も作り直し

Bad

悪い例

> カフェのオシャレな LP を作って

「オシャレ」が人によって違いすぎるので、結果がギャンブルになります。「ミニマル」と取られたり、「ゴージャス」と取られたり、毎回違うものが出てきます。

良い例は、このレッスンの最初に書いた 5 ブロック構造（目的 / ターゲット / 構成 / デザイン / 技術要件） で書く方法です。最初の 5 分長く考えるだけで、その後の作り直し時間が 1 時間減ります。

失敗② 要素を詰め込みすぎて全体が崩れる

Bad

悪い例

> ヒーロー、特徴、メニュー、店舗紹介、シェフ紹介、お客様の声、
> よくある質問、ブログ、お知らせ、採用情報、予約フォーム、
> アクセス、フッターを全部 1 ページに

セクションが 10 以上あると、Claude Code が要点を抑えきれずに各セクションが薄っぺらくなります。LP は 4〜6 セクションが上限です。

「載せたい情報」と「LP に必要な情報」は別物です。LP はゴール（来店 / 予約 / 問い合わせ）に向けて削ぎ落とすのが鉄則です。

失敗③ 技術的な制約を伝えてない

Bad

悪い例

> モダンなフレームワークでカッコよく作って

「モダン」と言われて Claude Code が Next.js + TypeScript + ShadCN の構成を組み始めると、初心者には ==npm run dev で起動== すら難しくなります。

このコースの範囲では、「HTML + Tailwind CSS CDN の 1 ファイル」と明示するのが正解です。ダブルクリックで開けるシンプルさが、最大の武器です。

LP 生成の流れ全体

このレッスンでやったことを順番に並べると、こうなります。このまま自分のビジネスに当てはめれば LP が作れます。

まとめ

このレッスンで押さえたいことは次の 5 つです。

プロンプトは 5 ブロック構造（目的 / ターゲット / 構成 / デザイン / 技術要件）で書く
生成後は必ず Claude Code に「何が何行目にあるか」説明させる
画像は Unsplash か placehold.co で詰まらずに進める
スマホ表示は F12 → スマホアイコンで必ずチェック
修正は「どこを」「どう」の 2 点セットで小刻みに頼む

次のレッスン 2-3: デザインを調整するでは、ここで生成した LP を対話形式で磨いていきます。色、フォント、余白の微調整から、セクションの追加・削除まで、自然言語だけでどこまで仕上げられるかを実演します。