AIでデザインやコーディング、どこまでできるのか試してみました。
今年に入って爆速に進化しているAIですが、実際にはどのようなLPを作ってくれるのか。
使用する画像もAIプロンプト（gemini）で作成。
各AIに指示した今回のプロンプト
LPのフレームデザインお願いします。
マーケティング的に集客につながりやすいものにしてください。
・オンラインのホームコンサート
・演奏曲は、TVでよく使われているクラッシックを5曲
・ターゲットは30代のワーキングウーマンとその子供
・親子で楽しめる、週末夜の開催
・写真は枠のみでOK
・料金：1家族1,000円
・上品でかわいらしさを感じる色パターンとあしらい
html,css, 必要であればjavascript
レスポンシブでお願いします。
一旦フレームデザインが固まってから、追加でリクエスト
以下のようなキャッチコピーを入れてください。
おうちで
いつものソファで
好きなお茶やお菓子を片手に
画像もAIで生成
今流行りのgeminiのimagenとGemini 2.5 Flash Image（Nano Banana）で生成し加工しました。プロンプトは以下の通りです。
※同じプロンプロト入れても、毎回生成されるものが微妙に異なるのが面白いです。
- 写真風
- ソファに座る女性、手にマグカップ
- 女性の隣に座る5歳ぐらいの女の子と女性に頭を預ける2歳ぐらいの男の子
- 三人を上部から見下ろすアングル
- デスクの上のパソコンの画面にピアノコンサートの画像
- 全体に落ち着いた雰囲気
- 時間帯は夜
コード生成されたLPとそれぞれの特徴
演奏者の画像はnano bananで生成し、手動で各LPにはめ込みました。
AIそれぞれが、まずプロンプトに沿ってリサーチを行っていました。
フレームデザインも中のテキストもそれぞれのAIが作成したものをそのまま表示しています。
gemini
タイトルと本文のバランスが一番気に入りました。
お申込みボタンの色がアクセントになっていて、画面が引き締まって見える
残念な点）
上部の2つのボックス以外が全部テキスト中央ぞろえ
あしらいのセンスがいまひとつ
ほぼすべて枠で囲われている
※個人の感想です
perplexity
今流行りかつターゲット層向けの、カラーセット・フォント・必要なコンテンツを洗い出して生成
お申込みボタンとお申込みフォームのひな型も完璧です。
残念な点）
生成するコードがかなり煩雑（よく言えば凝っている）為、カスタマイズしにくいかも
※個人の感想です
claude code
個人的に一番気に入っているclaude
今流行りかつターゲット層向けの、カラーセット・フォント・必要なコンテンツを洗い出して、シンプルなコードで生成
お申込みボタンとお申込みフォームのひな型も完璧です。
残念な点）
ページ送りがおしゃれなのですが、それぞれのページが長い
※個人の感想です
画像生成についてのメモ
今回使用したgemini imagin、生成精度が上がっていて、本当に写真のようです。
一見、完璧に見えてよくみると不自然。まだ過渡期なのでしょうかね。
今回生成してみて、気づいたのは以下の点、これは採用前によくよく見直す必要があります。
- 人体の構造を理解していない疑惑（上半身の数と脚の数が合っていない、掌が無くいきなり指など）
- 角度が不自然（楽器と演奏者の向きが合っていないなど）
- 人種についての変更が難しい時がある（今回・東洋系の人に変更が利かなかった）
画像だけでなく、生成されたコードについてもいわゆるハルシネーションやバグも、修正してほしいのになかなか言葉（プロンプト）を理解してもらえなかったり
AI「直しました」
自分「え？どの辺を直したの？（どこも変更されていない…???）」×複数回
自分（心の声）『諦め）別のチャットにして最初から作り直しか…むむむ』
新しいチャットにすると、スルっとサクッと生成してくれたりします。
が多く、もどかしい思いをしていました。
nano bananaが優秀
今回画期的だったのは、google nano banana
gemini imagenで生成した、一見完璧だけどよく見るとあちこち不自然な画像を、修正依頼のプロンプト数回でサクッと修正してくれました。
プロンプト（以下プ「」）は以下の通りです
- プ「人間の脚の本数と手前の人物の手の指の数を修正してください」
→NG:脚変わらず、指は手ごと消去 - １．がうまくいかなかったので、いったん手前の男の子を消去
プ「手前の男の子を消去してください」→OK。脚の数がまだ多い - プ「脚の数を一人分にしてください」→OK
- プ「手前に２歳ぐらいの男の子を座らせてください」→OK
←最初の生成
- 左の男の子の体の位置が不自然
- 脚の数が合わない
修正された→
画像右下のgeminiマークは健在
※操作している最中に、チャットで「画像（gemini imagen）」を選択すると「nano bananaで生成（作成？）します」と一瞬表示されました。geminiに引き続き聞いてみたところ以下のような回答が…。どうやら統合されたらしい。
そういえば、チャット窓の「画像🍌」もバナナですね。
上記の後、再度「画像🍌」で生成してみた画像はこちら。なかなかうまくいきました。
- プロンプトは以下の通り
- 写真風
- 人物は東洋人で
- ソファに座る女性、手にマグカップ
- 女性の隣に座る5歳ぐらいの女の子と女性の横に座る2歳ぐらいの男の子
- 三人を上部から見下ろすアングル
- デスクの上のパソコンの画面にピアノコンサートの画像
- 全体に落ち着いた雰囲気
- 時間帯は夜
まとめ
どんどん進化するAIが、クリエーターの頼もしい相棒になってきていると感じます。
マーケティング要素の指定も可能（AIはリサーチが超絶得意）なので、対話しながらターゲット層・最終目的・最適なカラー選定、刺さるキャッチコピーやカラー選定などの要件定義をまとめ、
それに沿ったLPデザインの生成ができてしまう。
※現時点（2025年9月）で人間の手直しはまだ必須ですが。
- まずはターゲット層、LPのゴールなどの提案をしてもらい、要件定義
- 要件定義に沿ってAIのみでLPの製作は可能：ただし、細かなコードの修正はまだ必要
- 必要な画像も生成できる：生成されたものはよく確認し、不自然な部分は修正が必要
などが、個人的な感想でした。
反省点
- 要件定義していく時に視認性（アクセシビリティ）や多様性（ダイバーシティ）について、AIとのディスカッションが必要だった。
- 今回「コードを完全オリジナルで、必要ならばjqueryを使用」「javascriptは、セキュアに使用できるもののみ」の指定をしませんでした。
シンプルなコードで生成されたものならば、少しの手直しでそのまま使用できそうですが、今回のものは念のため実際に生成されたファイルのアップロードはしませんでした。
今後も、また色々とAIとの生成実験をしていきたいと思います。