AIでLP制作、どこまでできるのか？プロが本気で検証してみた

概要

フロントエンドエンジニア出身のAI専門家が、ランディングページ(LP)をAIで作れるかを実務レベルで検証した回。既存デザインの再現度や、画像切り張り方式とAIコーディング方式それぞれの向き不向きを具体的な事例とともに解説している。

主なポイント

• デザインカンプがある場合、Claudeなどのコーディング系AIにHTML/CSSで完全再現させると現状の完成度は50%程度で、修正コストの方が重い
• 画像(WebGL風の背景やグラデーション装飾など)の再現度がまだ低く、AIコーディングでは崩れやすい
• 一方、SEOを重視しない・限定キーワードで十分なキャンペーンサイト等なら、既存デザインを画像で切り張りして組み立てる手法が最速かつ高品質
• Figmaのプラグインで既存Webサイトの構成をそのままFigma上に取り込み、テキストや画像を差し替えるだけで新しいLP案を量産できる
• スプレッドシートに画像パーツを指定し、ボタン一つで画像を繋ぎ合わせてHTML化する自作の半自動化ツールを使うと、1本あたり10〜30分でLPが完成する
• お問い合わせフォームなどの動的部分やレスポンシブ対応(ブレイクポイント設定)はAIコーディングで問題なく実装可能
• テンプレート化されたデザイン(WordPressテンプレート相当)であればClaudeでの再現度は高く、インタラクティブな演出も作成できる
• SEOを重視する本格的なLPは、テキスト情報の重要性からAI画像切り張りではなく人によるコーディングが依然として必要
• 現状「AIだけで作ったLPで成果が出ている」事例は聞いたことがなく、フォーマット化して量産する使い方が最も効率的

実践に使えること

• SEOを重視しないキャンペーンサイトやABテスト用LPは、既存デザインを画像化してAIで切り張り・コーディングさせる方式で高速量産する
• デザインカンプの完全再現をAIコーディングに丸投げせず、テンプレート的なデザインに限定して依頼すると精度が上がる
• Figmaの「Webサイト取り込み」系プラグインを使い、自社や競合の過去LP資産を土台にデザイン案を素早く量産する
• 画像パーツをスプレッドシートで管理し、ボタン一つでHTML生成する仕組みを自作すれば、社内のLP量産フローを大幅に効率化できる
• ヘッダーへのアナリティクスタグ埋め込みやリンク先設定など、動的要素はAIコーディングに任せて工数を削減する