高コンバージョンLPの9割は戦略で決まる!AIに作らせる前にやるべきこと【抹茶シリーズ第1回】

概要

海外移住Webデザイナーのあやか氏が、抹茶パフェのLP制作を題材に全6回シリーズでAI時代のプロのLP制作術を解説。第1回は「売れるLP」を作るための前提設計フェーズで、参考サイトの探し方・競合デザインリサーチ・構成と文章の作成方法を扱う。

主なポイント

• AIで見た目が綺麗なLPは数時間で作れるが、「綺麗」と「本当に売れる・伝わる」LPは別物であり、企画・設計が全体の8割を占める重要工程
• いきなりAIに生成させず、まず「参考」や「LPアーカイブ」などのサイトでカテゴリー・色味・同業種・同一動線などの観点から参考デザインを探し、プロの基準値に合わせることで手戻りを防ぐ
• 文章・構成作成にはChatGPT課金者向けの「Codex」を活用。画像生成の精度が高いChatGPT系列に統一する方が効率的という理由で、著者はClaudeからCodexに移行しつつある(Claudeは画像生成非対応)
• CodexはNotionやGoogleドキュメントとプラグイン連携でき、リンクを渡すだけでAIが直接読み書き・保存できるため、コピペの手間が省ける
• エージェントモードでは1ステップごとに作業ログを自動記録させることも可能で、後からチームに共有する際に有用
• 参考デザインを1つに絞ってから画像を添付し、HTML/CSSでコーディングさせると、そのデザインテイストを読み込んだLPを生成できる
• 初回生成はAIっぽさが残るため、ファーストビューやセクションごとに画像生成し直してブラッシュアップする方法が有効(手書き風装飾なども指定可能)
• 参考デザインに寄せすぎるとパクリになるリスクがあるため人間の目でのチェックが必須。クライアント案件では実際の店舗・商品写真と事実が異なる生成物にならないよう注意が必要

実践に使えること

• LP等のデザイン制作前に、必ず参考サイト(参考、LPアーカイブなど)から複数の参考デザインを集めてから着手し、AIにいきなり生成させない
• ChatGPT/Codexなど画像生成が強いAIツールと、Notion/Googleドキュメント連携機能を組み合わせて、文章作成からコーディングまでを一気通貫で進める
• 生成されたLPの「AIっぽさ」が気になる箇所は、セクション単位で画像を再生成し、部分的に差し替えてクオリティを底上げする
• AI生成物を参考デザインに寄せすぎていないか、事実(実際の商品・店舗情報)と齟齬がないかを必ず人間が確認する