CodexにLPの完成イメージ画像を作ってもらうと、かなりそれらしく見えるものが出てくるようになりました。
架空のシャンプー商品のLP画像も、見出し、商品写真、価格、ボタン、悩み訴求まで入っていて、一見すると「これをそのままWebページにできるのでは」と思える出来でした。
では、同じCodexに続けてHTML/CSSで作ってもらえば、すぐに実務で使えるLPになるのでしょうか。
実際に試してみると、そこにはかなり現実的な壁がありました。
AI生成LPは、方向性を見せる材料としてはかなり優秀です。
ただし、1枚の画像をそのままHTML/CSSへ変換すれば制作物になる、というほど単純ではありません。
最初のLP画像は、かなりよく見えた
最初にCodexで作ったのは、架空のシャンプー「Nelmia」のLP画像です。
睡眠中のヘアケアというコンセプトで、白と深いグリーンを基調にした落ち着いたデザイン。大きな見出し、商品ボトル、初回価格、CTAボタン、悩みのタグまで入っています。
画像として見ると、かなり完成度があります。
この時点では、つい「この見た目を同じ流れでHTML/CSSにしていけば、LPのたたき台になるのでは」と期待したくなります。
ただ、ここで大事なのは、この画像があくまで1枚の完成イメージだということです。
Webページとして使うには、見出しはテキストとして編集できる必要があります。価格も変更できなければいけません。ボタンはクリックできる必要があります。スマホ表示にも対応しないといけません。
つまり、見た目があるだけではまだ足りません。
HTML/CSSにしてみると、急に難しさが出る
次に、このLP画像をもとに、CodexでHTML/CSS化を試しました。
結果として、ページの構造は作れます。見出し、商品エリア、ボタン、悩み訴求、カード風の要素など、何を置くべきかは読み取れます。
ただし、見た目の完成度はかなり落ちました。
余白、文字の大きさ、商品の存在感、背景の空気感、価格表示の重み、全体の高級感。こうした部分が、画像の印象から離れてしまいます。
LPは、要素が並んでいれば成立するわけではありません。
特に美容系や商品のLPでは、写真の質感、余白の取り方、見出しの迫力、CTAの押しやすさがかなり重要です。ここが少し崩れるだけで、一気に「それっぽいけど弱い」画面になります。
これはCodexが悪いというより、1枚の画像から読み取れる情報には限界があるという話です。
画像には、CSSの設計、正確な余白、フォント指定、レスポンシブ時の優先順位、画像素材の切り分け方までは入っていません。
画像なしで作り直すと、今度は別物になる
次に、画像をそのまま再現するのではなく、改めてLPのデザイン案を作り直してみました。
すると、今度は見た目としてはリッチになりました。夜、ベッド、商品ボトル、ラベンダー、月明かり。雰囲気はかなり良いです。
でも、元のLP画像とは別物です。
さらに実務上気になるのは、商品のラベルです。ラベルの文字がなくなり、ブランドや商品情報として使うには不安が残る状態になりました。
AIは、全体の雰囲気を作るのは得意です。
しかし、「この商品名を残して」「このラベルの文字は変えないで」「この価格だけ差し替えて」「この構成は維持して」という制作現場の細かい固定条件には、まだ注意が必要です。
新しい案として見るなら優秀です。
でも、実務で必要なのは、毎回別案を作ることではなく、必要なところだけ直せることです。
背景画像だけなら、かなり使いやすい
一方で、Codexに背景画像だけを作ってもらうと、かなり使いやすい結果になりました。
商品ボトル、ラベンダー、夜の寝室、月明かり。雰囲気は残しつつ、左側にはテキストを載せやすい余白があります。
これはLPのメインビジュアル背景として使いやすそうです。
ここで見えてきたのは、AI生成画像を「完成したLPそのもの」として扱うより、「背景素材」や「商品イメージ」などの部品として扱う方が現実的だということです。
背景は画像として使う。
見出しや価格、CTAボタンはHTML/CSSで作る。
商品名やラベルは、必要なら別の画像素材として管理する。
このように分けると、修正しやすさが一気に上がります。
1枚の画像ではなく、分けて作る必要がある
今回の実験で一番大きかった気づきは、AI生成LPを実務に近づけるには、最初から部品を分けて考える必要があるということです。
たとえば、次のように分けます。
- 背景画像
- 商品画像
- 商品ラベル
- 見出しコピー
- 説明文
- 価格表示
- CTAボタン
- アイコン
- 悩み訴求のカード
- スマホ表示の並び
これらを1枚の画像に全部焼き込んでしまうと、あとから直すのが大変です。
価格を変えたいだけなのに、全体を再生成することになります。ボタン文言を変えたいだけなのに、背景や商品まで変わることがあります。商品名を残したいのに、ラベルが消えることもあります。
制作実務では、「そこだけ直したい」が頻繁に起きます。
そのため、AI生成画像は完成品としてではなく、素材や方向性を作るための入口として使う方が向いています。
Codexに頼むなら、画像生成と構造化を分けて考える
今回のポイントは、最初の画像生成もHTML/CSS化も、どちらもCodexに頼んでいるということです。
ただし、同じCodexに頼んでいても、「LP画像を作ること」と「修正できるWebページに組み直すこと」は別の作業です。
「この画像をそっくりHTMLにして」とだけ伝えるより、役割を分けて依頼した方がよさそうです。
たとえば、次のような頼み方です。
- 背景画像はこの雰囲気を使う
- 見出しと本文はHTMLテキストとして配置する
- 価格とCTAは編集できる部品として作る
- 商品画像は独立した画像として扱う
- スマホでは商品画像より先に見出しとCTAを見せる
このように伝えると、Codexの役割は「画像をなぞること」ではなくなります。
画像を参考資料として読み取り、Webページとして修正できる構造に組み直すことが役割になります。
ここは、前回の記事で書いた「画像を作ること」と「制作物として扱える形にすること」は同じではない、という話にもつながります。
Codexは、画像生成もコード作成も頼めます。
だからこそ、こちら側が「今は画像案を作ってほしいのか」「Webページとして編集できる構造を作ってほしいのか」を分けて伝える必要があります。
ただし、HTML/CSS化の手がかりが1枚画像だけだと、構造化にも限界があります。
だからこそ、人間側が「何を画像にして、何をHTMLにして、何をあとから編集できるようにするのか」を決める必要があります。
AI生成LPは、制作の出発点として使う
今回試してみて、AI生成LPへの期待値が少し整理できました。
Codexで作ったLP画像は、かなり魅力的な方向性を出してくれます。商品の雰囲気、色味、世界観、レイアウトの大まかな方向を考えるには、とても役に立ちます。
でも、そのまま納品物になるわけではありません。
実務で使うには、テキストを編集できること、価格を変更できること、スマホで読みやすいこと、画像とHTMLの役割が分かれていることが必要です。
AI生成画像は、完成品ではなく制作の出発点。
その見た目をどう分解し、どう修正可能な形に組み直すか。ここに、制作側の判断が必要になります。
AIを使えばLPが一瞬で完成する、というより、AIを使うことで最初の方向性出しが速くなる。
そして、その先で必要になるのは、やはり設計と確認です。
