2-2 LPを生成する

最初の指示を出す

架空のカフェのLPを作ってみましょう。具体的な情報を盛り込んだ指示を出します。

> 架空のカフェ「CAFE BLUE」のランディングページを作って。
> 
> 構成:
> - ヒーロー: 大きな背景 + 「最高の一杯を、あなたに」
> - メニュー: コーヒー ¥500、ラテ ¥600、カプチーノ ¥700
> - 3つの特徴: こだわりの豆 / 手作りスイーツ / 落ち着く空間
> - アクセス: 東京都渋谷区（ダミー）
> - フッター: 営業時間 9:00-18:00、定休日 水曜
> 
> Tailwind CSS を CDN で使って。レスポンシブ対応。
> ファイル名は index.html で。

生成結果を確認する

Claude Code がHTMLファイルを作成したら、ブラウザで開いて確認しましょう。

Mac の場合:

• Finder で index.html をダブルクリック
• または open index.html をターミナルで実行

Windows の場合:

• エクスプローラーで index.html をダブルクリック

ブラウザで表示を確認

ページが正しく表示されていれば成功です。レスポンシブ対応もチェックしましょう。

ブラウザのDevToolsでスマホ表示を確認する方法:

• Chrome: F12 → デバイスアイコン
• Safari: 開発 → レスポンシブデザインモード