ランディングページ — 正規の構造
コンバージョンするランディングページは、以下の5つのセクションで構成されます（順番通り）：
- ヒーロー — 一文の約束 + ビジュアル + 1つの主要CTA
- 3つのハイライト — 3枚のカードで示す3つのメリット。それ以上は不要
- 時間・詳細 — 2画面目の上部に表示する実用的な情報
- 地図・連絡先 — 埋め込みiframeまたはリンク
- フッター — 最小限：著作権、ソーシャルリンク
技術ルール（エンジニアリング部分）
- 1ファイル。 インラインの
<style>と<script>を含むindex.html。ビルドステップは不要。 - Tailwind はCDN経由 —
<script src="https://cdn.tailwindcss.com"></script>。npm は使用しない。 - ストックフォトはUnsplashのソースURLを使用 —
https://source.unsplash.com/featured/?keyword - モバイルファースト。 375px幅でテストすること。
- アニメーションは200msを超えないこと。 カルーセル、ポップアップは禁止。
色のガイダンス
- 1つのプライマリカラーと1つのアクセントカラーを選び、残りはニュートラルカラーを使用する。
- 温かみのあるビジネス（飲食、ホスピタリティ）の場合：オレンジ/赤をプライマリ、クリームをニュートラルに。
- テクノロジーの場合：青/藍色をプライマリ、スレートをニュートラルに。
- 純黒を純白の上に使用しない — 両方を柔らかくすること。
手順
ランディングページの作成を依頼された場合：
- プロンプトからビジネスタイプを特定する。
- 上記のガイダンスに従ってカラーパレットを選ぶ。
- 5つのセクションを含む
index.htmlを作成する。 - リアルなコピーを使用する（「Lorem ipsum」は不可）。プロンプトに合わせた具体的な内容にする。
- 作成後、
bashツールを使用してopen index.html（macOS）またはxdg-open index.html（Linux）を実行する。 - ユーザーが変更を求めてきた場合、編集機能を使用して対象を絞った変更を行う — 書き直さないこと。