6-1 LP 作成

LP を作る流れ

ランディングページ（LP）は、1つの商品やサービスを訴求するための1ページ完結型のWebページです。

Claude Code なら、要件を伝えるだけで LP をゼロから作成できます。デザイン、コーディング、レスポンシブ対応まで一気に完了します。

Before / After：LP 制作の変化

LP を作る従来の方法と Claude Code を使った方法の比較です。

Before（外注または手作業）

• デザイナーに依頼 → 1週間 + 10万円〜
• ノーコードツール → 1〜2日 + 月額費用
• HTMLを自分で書く → プログラミング知識が必要

After（Claude Code）

• 要件を伝えて生成 → 30分
• 追加費用なし（APIコストのみ $0.5 程度）
• プログラミング知識不要

特に「とりあえず試したい」「社内向けの簡単なページ」に最適です。

実践：カフェの LP

架空のカフェの LP を作ってみましょう。

> 架空のカフェ「CAFE SUNRISE」のLPを作って。
> 
> 構成:
> - ヒーロー: 大きな写真（placeholder）+ キャッチコピー
> - メニュー紹介: コーヒー3種（各 ¥500, ¥600, ¥700）
> - お店の特徴: 3つのカード
> - アクセス: Google Maps 埋め込み（ダミー）
> - フッター: 営業時間 9:00-18:00、定休日 水曜
> 
> Tailwind CSS を CDN で使って。レスポンシブ対応必須。

期待される出力

Claude Code は以下のような LP を生成します。

• 全画面ヒーローセクション（キャッチコピー + CTA ボタン）
• メニューカードが3列に並ぶセクション
• 特徴を3つのアイコンカードで紹介するセクション
• アクセス情報と地図エリア
• フッターに営業情報
• スマホでは1列表示に自動切り替え

ブラウザで開いて確認してみてください。

修正と磨き込み

最初の出力をベースに、細部を調整していきます。

• 「ヒーローの文字をもう少し大きくして」
• 「メニューの写真を横並びにして」
• 「色をもう少し温かみのあるトーンにして」

対話形式で少しずつ理想に近づけていくのが、Claude Code の強みです。

> ヒーローセクションの背景色を暖色系（#F5E6D3）に変えて。
> フォントサイズを見出しは 48px、本文は 18px にして。
> CTAボタンを目立つオレンジ色にして。

やってみよう：オリジナルの LP を作る

以下のどれかの LP を作ってみましょう。

1. 自分の趣味やサイドプロジェクトの紹介ページ
2. 架空のイベントの告知ページ
3. 自分のポートフォリオサイト

要件をセクションごとに書き出すのがコツです。

> 私のポートフォリオサイトを作って。
> 
> セクション:
> - 自己紹介（名前、職種、一言キャッチ）
> - スキル一覧（バッジ形式）
> - 実績・制作物（カード3枚）
> - 連絡先（メールアドレスのみ）
> 
> シンプルで清潔感のあるデザイン。Tailwind CSS CDN を使用。

デプロイ（公開）

完成した LP を公開する方法はいくつかあります。

1. Vercel — GitHub にプッシュするだけで自動デプロイ（無料）
2. Cloudflare Pages — 静的サイトのホスティング（無料）
3. GitHub Pages — リポジトリから直接公開（無料）

Claude Code に「Vercel にデプロイして」と頼めば、設定ファイルの作成からデプロイ手順まで案内してくれます。

> このLP を Vercel にデプロイする手順を教えて。
> git init からデプロイ完了まで
> コマンドを順番に示して。

まとめ

このレッスンのポイントを振り返ります。

• LP はセクション構成を書き出してから依頼するのが効果的
• Tailwind CSS CDN を指定すると見栄えの良いページが生成される
• 追加指示で色、サイズ、レイアウトを微調整できる
• Vercel、Cloudflare Pages、GitHub Pages で無料公開可能

次のレッスンでは、社内ツールのプロトタイプを作ります。