「Claude Codeでランディングページが作れる」と聞いても、実際にどう進めるのかイメージが湧かない方も多いと思います。
この記事はLP制作の一部始終を時系列で記録したものです。私はHTML・CSSの基礎知識はありますが、デザイナーでも本職のフロントエンドエンジニアでもありません。そんな状態から1時間でどこまでできたかを、指示の内容も含めて全部見せます。
作ったのは「オンライン英会話サービスの仮想LP」です。実在するサービスではありませんが、実際の制作に近い条件で進めました。
0:00 スタート：まず「どんなLPにするか」を決める
最初にやったこと：要件を整理して渡す
最初の指示は作業の依頼ではなく、情報の整理でした。
Claude Codeに渡した情報はこうです。「オンライン英会話サービスのLPを作りたい。ターゲットは20〜30代の社会人で、忙しくて時間がない人。差別化ポイントは1回25分・スキマ時間で学べること。デザインのトーンは清潔感があってシンプル、メインカラーは青系。HTMLとCSSで作って、レスポンシブ対応も必要」
この情報を一度に渡して「まず構成案を提案してください」と聞きました。いきなり「作って」ではなく、構成の合意から始めるのがポイントです。
Claude Codeが出してきた構成案
返ってきた構成案はこうでした。
- ファーストビュー：キャッチコピー＋サブコピー＋CTAボタン
- 課題提示：「こんな悩みありませんか？」セクション
- サービス特徴：3つの強みをアイコン付きで紹介
- 使い方：3ステップで始められることを図解
- 料金プラン：シンプルな2プラン比較
- お客様の声：3〜4件のテスティモニアル
- FAQ：よくある質問5件
- 最終CTA：申し込みフォームへの誘導
「この構成でOK、進めて」と答えました。所要時間：約5分。
0:05〜0:25 コーディングフェーズ
一気に生成してもらう
「この構成でHTMLとCSSを作ってください。HTMLは1ファイルにまとめて、CSSはインラインではなくstyleタグにまとめてください」という指示を出しました。
生成には1〜2分かかりました。出てきたコードをそのままindex.htmlとして保存してブラウザで開いてみると、骨格は出来ていました。デザインはまだ素朴でしたが、構成通りのセクションが揃っていました。
気になった点を次々修正していく
ここからは「気になる点を見つけて→指示する→確認する」の繰り返しです。
最初の修正は「ファーストビューが地味すぎる。ヒーローセクションの背景に薄いグラデーションを入れて、テキストをもっと大きく、CTAボタンを目立たせて」です。
2回目は「スマホで見たときにナビゲーションが崩れる。ハンバーガーメニューにして」です。
3回目は「料金プランの比較表が読みにくい。おすすめプランを視覚的に強調して」です。
4回目は「テスティモニアルのカード、もう少し余白が欲しい。影も追加して」です。
このやりとりで約20分が経過しました。
0:25〜0:45 細かい調整フェーズ
日本語のコンテンツを差し替える
最初に生成されたコンテンツはダミーのテキストが多かったため、ここで実際に使う文言を入れ込む作業をしました。
「ファーストビューのキャッチコピーを5パターン出して。ターゲットは忙しい社会人で、25分で学べることを訴求したい」という指示で候補を出してもらい、一番しっくりきたものを選びました。
FAQの内容も「オンライン英会話でよく聞かれる質問を10個出して」という指示で洗い出してもらい、5件に絞りました。
アクセシビリティの確認
「このHTMLにアクセシビリティ上の問題がないか確認して」と聞くと、画像のalt属性が設定されていない箇所、コントラスト比が基準を下回る箇所などを指摘してくれました。修正指示を出して対応。
0:45〜1:00 仕上げと確認
最終チェックをClaude Code自身にやってもらう
「このLPをユーザー目線でチェックして。改善できるポイントがあれば教えて」という指示を最後に出しました。
返ってきた指摘は3点でした。CTAボタンのコピーがありきたり、ファーストビューに信頼感を高める要素（受講者数・星評価など）がない、フォントがシステムフォントのままで洗練度が低い。
時間の関係でCTAコピーとソーシャルプルーフの追加だけ対応しました。
1時間後の状態
完成度は正直70〜75%といったところです。商品写真・実際の料金・本物のテスティモニアルを入れれば公開できるレベルには達しました。
ゼロから自力で作ったら数日かかるものが、1時間で骨格ができたということの意味は大きいです。残りの磨き込みは内容の問題であって、コーディングの問題ではなくなりました。
やってみてわかったこと3つ
「一気に全部作って」より「構成→骨格→細部」の順が断然効率的
最初から細かく指示しようとすると迷います。まず構成を合意して、次に骨格を作って、最後に細部を磨くという順序が自然で精度も高いです。
修正は「何が嫌か」より「どうしたいか」で伝える
「これ変」ではなく「CTAボタンをもっと目立たせたい。サイズを1.5倍にして背景色を#FF6B35にして」という具体的な指示が効きます。感覚的な評価ではなく、状態の描写で伝えることが重要です。
Claude Code が提案してくれる改善点は信頼できる
「どこか改善できますか？」と聞いたときに返ってくる指摘は、的外れなことが少ないです。自分では気づかなかった問題を指摘してくれることも多く、自己レビューより精度が上がります。
まとめ：1時間でここまでできるということ
LP制作に「Claude Codeを使うかどうか」を迷っている方に伝えるなら、試してみる価値は確実にあります。
1時間でここまでできる、という体験をすると、「時間がなくてランディングページが作れない」という言い訳が使えなくなります。アイデアを形にするスピードが、制作の心理的ハードルを大きく下げてくれます。
