Claude Code だけで LP を2時間で作る方法【2026年実践】

Claude Code だけで LP を作るという選択肢

ランディングページ（LP）を作りたいけれど、Webデザインの経験がない。外注すると数万〜数十万円かかる。そんなときに注目したいのが、Claude Code CLI だけで LP を完成させる方法です。

Claude Code はターミナル上で動くAIコーディングエージェントで、自然言語の指示だけでHTML/CSS/JavaScriptのコードを生成し、ファイルとして保存できます。デザインツールやノーコードビルダーを使わず、ターミナルの対話だけで LP が出来上がるのが特徴です。

この記事では、Claude Code を使って約2時間で LP を完成させるまでの流れを解説します。

必要な環境

LP制作に必要なものは以下の通りです。

• Claude Code CLI：Anthropic公式のターミナル型AIエージェント
• Node.js（v18以上）：Claude Codeの動作に必要
• テキストエディタ（VS Code等）：生成されたコードの確認・微調整用
• デプロイ先：Cloudflare Pages、Vercel、Netlifyなどの無料静的ホスティング

LLMのAPI利用枠は必要ですが、LP 1本を作る程度であれば大きな消費にはなりません。

ステップ1：LP の構成を設計する（約15分）

まずClaude Code に LP の目的と構成を伝えます。いきなり「LP を作って」ではなく、目的・ターゲット・構成要素を明確にするのがポイントです。

指示に含めるべき情報の例を挙げます。

• LP の目的：資料請求、メルマガ登録、サービス紹介など
• ターゲット：誰に向けたページか
• 必要なセクション：ヒーロー、特徴紹介、料金、FAQ、CTA など
• デザインの方向性：色味、雰囲気（シンプル、ビジネス寄り、カジュアルなど）

Claude Codeはこれらの情報をもとにページ構成案を提案してくれるので、対話しながら方向性を固めます。

ステップ2：HTML/CSS を生成する（約30分）

構成が決まったら、Claude Code にコードの生成を指示します。Claude Code は指示に従ってHTML/CSSファイルを作成し、プロジェクトディレクトリに直接保存します。

このステップで得られるものは以下の通りです。

• レスポンシブ対応のHTML：PC・スマホ両方で適切に表示されるレイアウト
• CSS スタイル：指定した色味・雰囲気に合わせたデザイン
• セクション構造：ヒーロー → 特徴 → 料金 → FAQ → CTA の流れ

生成されたHTMLをブラウザで開いて確認し、修正したい箇所があれば自然言語で追加指示を出します。「ヒーローの背景色をもう少し濃くして」「CTAボタンを大きくして」といった指示で即座にコードが修正されます。

ステップ3：画像・アセットを用意する（約20分）

LP に使う画像素材は以下の方法で用意できます。

• フリー素材サイト：Unsplash、Pexels、Pixabayなどから無料素材をダウンロード
• AI画像生成：別途画像生成AIを使ってオリジナル素材を作成
• SVGアイコン：Claude Codeに直接SVGコードを生成させることも可能

画像の配置もClaude Codeに指示すれば、HTMLのimg要素の追加やCSSでのサイズ調整をしてくれます。

ステップ4：フォーム連携を設定する（約20分）

お問い合わせフォームやメルマガ登録フォームの設置も、Claude Codeで対応できます。

フォームの送信先として使える無料サービスの例です。

• Formspree：HTMLのaction属性にURLを設定するだけでメール通知を受け取れる
• Google Forms埋め込み：Googleフォームをiframeで埋め込む方法
• Cloudflare Workers：サーバーレス関数でフォーム処理を自前実装

Claude Codeにフォームの連携コードを生成させ、HTMLに組み込みます。バリデーション（入力チェック）のJavaScriptも自然言語の指示で追加可能です。

ステップ5：デプロイする（約15分）

完成したLPをインターネット上に公開します。静的なHTML/CSS/JSファイルであれば、以下のサービスで無料ホスティングできます。

Cloudflare Pages の場合

1. Cloudflareアカウントを作成（無料）
2. GitHubリポジトリと連携するか、直接ファイルをアップロード
3. 自動でビルド・デプロイされ、URLが発行される
4. 独自ドメインの設定も管理画面から可能

Vercel / Netlify の場合

いずれもGitHubリポジトリと連携するだけでデプロイが完了します。pushするたびに自動で再デプロイされるため、修正→公開のサイクルが速いのが利点です。

Claude CodeでGitの操作も可能なため、commit → pushまでターミナル上で完結できます。

ステップ6：微調整とSEO対策（約20分）

公開後の仕上げとして以下の作業を行います。

• meta タグの設定：title、description、OGPタグをClaude Codeに生成させる
• パフォーマンス確認：Lighthouseでスコアを確認し、画像の最適化やCSSの軽量化を指示
• アクセス解析の導入：Google Analytics や Cloudflare Analyticsのタグを埋め込む
• 表示テスト：PC・スマホ・タブレットでの表示を確認し、崩れがあれば修正

注意点

• デザインの品質：AIが生成するデザインは実用的だが、プロのデザイナーによる仕上がりとは差がある。ビジネスの重要な局面では専門家への依頼も検討する
• コードの確認：生成されたコードは必ずブラウザで表示確認すること。意図と異なるレイアウトになっている場合は追加指示で修正する
• セキュリティ：フォーム処理にサーバーサイドの処理が必要な場合、入力値の検証は必ず行うこと
• 著作権：フリー素材を使う場合でもライセンス条件を確認すること

まとめ

• Claude Code CLI の対話だけで、HTML/CSS/JSの LP を約2時間で作成可能
• 構成設計 → コード生成 → 画像配置 → フォーム連携 → デプロイ → SEO対策の6ステップで完結
• デプロイはCloudflare Pages・Vercel・Netlifyなどの無料ホスティングが利用できる
• プロのデザインには及ばないが、個人プロジェクトやプロトタイプには十分実用的
• 具体的なコマンドや最新の操作方法は公式ドキュメントで確認することを推奨