【AIでLP作成】AIのランディングページ制作力はどこまで進化したのか検証

概要

StockSunのメンバーが「AIでLPをどこまで作れるか」を1年前の検証と比較しながら再挑戦。競合LPのスクショ・トンマナ・コンテンツをAIに解析させ、Google AIスタジオの「Build」機能で実際にLPを生成する過程を実演している。

主なポイント

• Chrome拡張でページ全体をスクロール撮影し1枚の画像として競合LPを取得する手法を紹介
• ChatGPTに画像を渡し、コンテンツ構成をMarkdownで抽出しつつ固有名詞は創作に変えるよう指示
• 参考にしたいおしゃれなサイトの画像を渡し「トンマナ(色・フォント・雰囲気)を言語化」させて取捨選択する手法
• 抽出したコンテンツ・トンマナ・画像をまとめてGoogle AIスタジオのBuild機能に渡すだけでLPが生成される
• 生成物はデザイン崩れがほぼなく、画像も生成またはダミーで自動配置されるレベルまで進化
• 弱点はアイコンなど「いかにもAI感」が残る点と、凝ったクリエイティブ画像の再現度の低さ
• 一度作った叩き台はFigmaやCanvaに持ち込んで細部を調整すればさらにブラッシュアップ可能
• 会話ベースで「この画像をこれに差し替えて」等の追加指示をすればセクション単位で再生成できる
• デザイナーに1枚数千〜1万円で発注するより低コストで、仮説検証用LPなら十分実用レベル
• Manusなど自律型AIエージェントに任せれば同様の作業をさらに高精度・自動でできる可能性がある

実践に使えること

• 新規事業の仮説検証用LPを作る際は、まずChrome拡張(全ページスクショ)で参考サイトを画像化する
• ChatGPTなどのマルチモーダルAIに画像を渡し「コンテンツ構成の抽出」と「トンマナの言語化」を別工程で行うと精度が上がる
• 抽出したコンテンツ・トンマナ・参考画像をまとめてGoogle AIスタジオのBuild機能などのAIサイト生成ツールに渡し、たたき台を数十分で作る
• 生成後はセクションごとに会話形式で画像差し替えや文言修正を指示し、気に入らない部分だけ再生成する
• 著作権に配慮し「コンテンツは大筋維持」ではなく「固有名詞・素材は創作に変更」と明示的に指示する