LPをAIで作る最大のコツは「分割」
LP全体を一度に依頼すると、長すぎて管理しにくいコードが返ってきます。セクション単位に分けて依頼するのが成功の鍵です。最初にCSS変数(デザイントークン)を設計してもらい、各セクションの依頼時に共有すると統一感が保てます。
ステップ①:デザイントークンをAIに設計させる
「SaaS系LPのCSS変数(デザイントークン)を設計してください。
カラーパレット・フォントサイズ(モバイル/PC)・余白スケール・ブレイクポイントをCSS変数で定義してください。
ブランドカラーは #1a1a2e(背景)・#4fc3f7(アクセント)です。」
セクション別の依頼フロー
- ヘッダー/ナビ:「ロゴ左・ナビ右・スクロールで背景が変わるスティッキーヘッダー」
- ヒーローセクション:「全画面・左キャッチコピー+右モックアップ画像・CTA2ボタン」
- 特徴セクション:「3カラムのアイコン+見出し+説明テキスト」
- 料金プランセクション:「3プラン比較カード。中央のプランを強調表示」
- お客様の声:「スワイプ対応スライダー形式のテスティモニアル」
- CTAセクション:「コンバージョンを促す行動喚起エリア」
- フッター:「4カラムリンク集・SNSアイコン・コピーライト」
統一感を保つための指示
- 各セクション依頼時に「先ほど定義したCSS変数を使ってください」と一言添える。
- 「クラス名はすべて .lp-セクション名-要素名 の形式で統一してください」と命名規則を指定する。