AIはLPデザイナーになれるのか？モックアップ生成を試して分かったこと

AI LP分析ツール開発→モックアップ画像生成で見えてきた課題

今回開発しているのは、既存のWebサイトを分析し、その企業や事業者が持つ魅力を整理したうえで、より伝わりやすいLP構成案を提案するツールです。

使用しているのはOpenAIのAPIですが、単にChatGPTに質問しているわけではありません。

サイト分析、追加ヒアリング、LP構成案生成、PDF保存などの処理を自分で設計し、HTML・CSS・JavaScript・Node.jsを使って開発を進めています。

このツールを作ろうと思ったきっかけは、今まで数多くのウェブサイトを制作してきた中で、

「魅力はあるのに、それがうまく伝わっていない」

というケースを数多く見てきたからです。

良い商品やサービスを持っていても、その価値が伝わらなければ、本来出会えるはずの顧客にも届きません。

そこで、企業や事業者が持つ魅力を整理し、どのように発信すれば伝わりやすくなるのかを考えるための補助ツールとして開発を始めました。

前回の記事では、AIが既存サイトを分析し、追加ヒアリングを行いながらLP構成案を提案するツールを試作したところまでを書きました。

当初の計画では、その分析結果のPDFファイルをアップロードすると、それをもとにLPのモックアップ画像を生成するツールを開発する予定でした。

そこで実際に、作ってみたもの

前回の記事で作成したLP構成案提案結果のPDFをアップロードすると、それを分析し、モックアップ用デザイン指示が提案される
↓

更に、モックアップ画像を生成し、ページ下部に表示される

という流れを実装してみました。

実際に生成してみると、思っていた結果とは程遠い

↓テスト１　驚くほどダメな結果に、LPではなくただの図解、分析ツールによって提案されたテキストが全く反映されていない、日本語が変

↓テスト２　LPモックアップ生成プログラムとプロンプトを修正。日本語のテキストが反映されず、英文になってしまう。しかし、ちょっとLPっぽいレイアウトにはなってきた。

↓テスト３　テキストは反映されたが、またひどいレイアウトに戻ってしまう。日本語フォントもAIにありがちな変な文字に

といった問題が出てきました。

また、AIはLPの構成を理解しているようでいて、実際には「それっぽいデザイン画像」を作ることが得意なだけで、実際のWebサイトとして成立するレベルとは程遠い。

AIは“完成品”より“たたき台”が得意かもしれない

何度かテストを繰り返しているうちに、あることに気付きました。

それは、

「AIは完成品を作るより、たたき台を作る方が得意なのではないか」

ということです。

例えば今回のツールでは、

・どんな課題を持っているのか
・誰に向けて発信するべきか
・どのような流れで情報を伝えるべきか

といった構成部分については、かなり良い提案が出るようになってきました。

一方で、デザインの細部や完成度の高いUIについては、まだ人間側の調整が必要です。

これは逆に言えば、

AIはディレクターやプランナーの補助として非常に優秀

とも言えるかもしれません。

誤解されがちですが、このツールは「AIに仕事を丸投げするため」に作ったわけではありません。

実際に開発を進めるほど、

・何を価値として伝えるのか
・誰に届けたいのか
・どの魅力を優先して見せるのか

といった部分は、人間が考える必要があることを強く感じました。

AIはそれを代わりに考えてくれる存在ではなく、整理し、比較し、試行錯誤を加速させるための補助ツールとして使うのが最も効果的だと感じています。

そこで方向転換することにした

当初は、

分析
↓
LP構成案
↓
モックアップ画像生成

という流れを想定していました。

しかし試行錯誤の結果、

分析
↓
LP構成案
↓
HTMLモックアップ生成

という方向へ変更することにしました。

HTMLであれば、

・日本語が崩れない
・後から修正しやすい
・実際のWeb制作へ繋げやすい
・SEOにも有利

というメリットがあります。

実際に試作したところ、まだまだ改善点は山ほどありますがｍ画像生成よりも安定してLPの構造を表現できるようになりました。

↓生成されたLPのHTMLモックアップのスクリーンショット

AIはデザインするより、構造を考える方が得意なのかもしれない

今回の開発を通して感じたのは、

AIは「デザインを作る」よりも、「情報を整理する」のが得意なのではないか

ということです。

人間が考えると時間のかかる、

・構成の整理
・情報の優先順位付け
・見出し案の作成
・導線設計

といった部分は、AIとの相性がかなり良いように感じます。

一方で、洗練されたデザインや細かな表現は、まだ人間の感覚が大きく関わる領域だと感じました。

次の目標

現在はHTMLモックアップ生成まで完成しています。

今後は、

・追加ヒアリングの精度向上
・LP構成パターンの強化
・優れたLPの分析と学習
・デザインテンプレートの改善

など、要するに今のデザインではまだまだダサくてダメなので、ブラッシュアップを進めていく予定です。

特に興味があるのは、「優れたLPはなぜ優れているのか」をAIに学習させることです。

もし実現できれば、単なるサイト生成ツールではなく、

「伝わらない魅力を発見し、伝わる形へ整理するAI」

に近づけるのではないかと考えています。