AIモデル（3社）によるデザイン生成の比較

同じ文を、ChatGPT と Gemini の画像版、スキルを使った Claude にも渡しています。

Claude・ChatGPT・Gemini の3つに、まったく同じ文で頼みます。結果をくらべて、Den & Forest の「AI活用レポート」の題材にします。

対象

• 「12種類のフレーバー」のセクションの下にある、クリーム色の角丸の箱です(「選び方とくじ」というコメントから、その箱の終わりまで)。
• 中身は今こうなっています: ウサギの絵「毎回自分で選ぶ」 / 「or」 / ハリネズミの絵「全部おまかせ」、ボタン「おまかせで3つ引いてみる」、締め切りの一文。

なぜ作り直すか(依頼主の判断)

Crunch Munch のいちばんの強みなのに、説明が足りません。読んだ人が次のことを分からないまま申し込みに進んでしまいます。

1. 選び方は申し込みのときに1回だけ選び、あとから変えられない。 LP には書かれていません(申し込み画面には書いてあります)。いちばん大事な抜けです。
2. 「毎回自分で選ぶ」は、お届けごとに、マイページで12種類から3つを選ぶ。選ばなかった回は前回と同じ3つが届く。締め切りはお届けの5日前の0時(前日の23:59まで)。締め切りは、自分で選ぶ人だけの話です。
3. 「全部おまかせ」は、届く3つを毎回 Crunch Munch が選んでお届けする。何が届くかはお楽しみ。何もしなくてよい。(「好みに合わせて」とは言わない。申し込み画面の言い方に合わせる)
4. いまはボタンがおまかせ側にしかなく、二択の重さが片寄っています。

守ること

• ほかのセクションは変えない。この箱だけを置きかえる。
• 決まり(上の1〜3)を変えない。新しい機能や約束を作らない(例: 「あとで切り替えできます」「AIが好みを学習」は書かない)。
• 書体・色はいまの LP のものを使う。色の変数: --color-cm-orange #c4520f、--color-cm-orange-strong #b84a0c、--color-cm-brown #5a2a18、--color-cm-tea #7a5a48、--color-cm-cream #fbf4ea、--color-cm-beige #f3e8dc、--color-cm-line #ead9c6、--color-cm-orange-pale #fff4ec。書体は var(--font-sans)(本文)と var(--font-hand)(見出し)。
• 絵は今あるウサギとハリネズミのものだけを使う。新しい絵は描かない。
• 「おまかせで3つ引いてみる」のくじを残すなら、id="omakase"(ボタン)、id="omakase-label"、id="omakase-result"(結果の ul 要素)をそのまま使う(LP のくじのしくみが使っている)。残すかどうかは自由です。
• 文章はやわらかい「です・ます」。命令やそっけない言い方はしない。
• スマホ幅(390px)で読みやすいこと。横にはみ出さないこと。
• 外部の CDN・書体・画像は読まない。

出してほしいもの

1. HTML を1つ。いまの箱と置きかえる HTML の断片です。見た目の CSS は、断片の先頭の style 要素に書き、すべてのセレクタを .redesign の中に閉じこめる(断片の一番外側は、class が redesign の div 要素にする)。Tailwind のクラスは使わない(LP のCSSは使っているクラスしか入っていないため)。
2. メモに、3〜5行で: 何がいちばん伝わっていなかったと考えたか、どう変えたか、迷ったところ。

• いちばん伝わっていなかったのは「申し込みのときに1回だけ選び、あとから変えられない」こと。見出しのすぐ下に、鍵のしるしつきで置いた。
• 二択の「or」をやめ、同じ重さの2枚のカードにした。どちらにも「こんな方に」と、選んだあとに何が起きるかを2行で書いた。
• 締め切りは「自分で選ぶ」のカードの中だけに入れ、おまかせ側には「選ぶ手間も、締め切りもありません」と書いた。
• ボタンを両側に置いた(自分で選ぶ → 12種類の味を見る、おまかせ → くじ)。
• 迷ったところ: くじを申し込みの前に置くと「おまかせ」に寄せすぎるかもしれない。今回は残した。

いちばん伝わっていなかったのは、選び方を申し込み時に一度だけ決め、あとから変更できないことだと考えました。

その決まりを二択の前に置き、同じ大きさ・装飾のカードで二つの選び方を並べました。

自分で選ぶ側にはマイページでの選択・選ばなかった回・締め切りを、おまかせ側には毎回お店が選ぶこと・操作不要を明記しました。

くじを残すか迷いましたが、今回は選び方の比較を優先して外し、スマホではカードを縦に並べる構成にしました。

いちばん伝わっていなかったのは、選び方は申し込み時に一度だけ決めて後から変更できない最重要ルールと、締め切りが「自分で選ぶ」側だけに存在する点だと考えました。

二択の前に「お申し込み後の変更不可」を明記した上で、白背景の左右完全対称なカード形式で整理しました。

各スタイルの仕組みに加え、下部の枠で「締め切り日時」と「操作不要」を対比させ、違いを一目で分かるようにしました。

おまかせ側にあったくじ機能は楽しさがあるものの、二択の重さを大きく片寄らせていたため、公平な比較と確実な理解を優先して外すか最後まで迷いました。

• いちばん伝わっていなかったのは「選び方は申し込みのときに1回だけ選び、あとから変えられない」こと。そのせいで、二択が「その都度選べる気分の違い」に見えていたと考えました。
• その決まりを箱の一番上の白い枠に置き、そこから点線が2本に分かれて2つの選び方につながる「分かれ道」の形にしました。2つは同じ3項目(3つを選ぶのは/お届けまでにすること/締め切り)で見くらべられるようにし、おまかせ側の締め切りは「ありません」と書いて、締め切りが自分で選ぶ人だけの話だと分かるようにしました。
• ボタンは両方に同じ形で置きました(自分で選ぶ→12種類の一覧へ戻るリンク、おまかせ→くじ)。くじの id はそのままで、結果はおまかせ側の中に出ます。見出しは「今回届いたのは…」から「たとえば、こんな3つが届きます」に変えました。
• 迷ったところ: 自分で選ぶ側のボタンをリンクにしたこと(新しいくじ・選択の仕組みを作らないため)と、「変えられません」をどこまで強く言うか。オレンジの太字1行にとどめ、「見くらべてみてください」とやわらかく続けました。

• いちばん伝わっていなかったのは「選び方は申し込みのときに1回だけで、あとから変えられない」ことです。もう1つ、締め切りの一文が箱の下にあって、2つの選び方の両方にかかっているように読めていました。
• 見出しのすぐ下の点線の囲みで、「1回だけ」を最初に伝えます。2つの選び方は、同じ項目(選ぶのは/選び方/選ばなかった回・あなたは/締め切り)を左右にそろえて見くらべられる形にしました。締め切りは「自分で選ぶ」の欄にだけ書き、おまかせは「締め切り:ありません」にしています。
• ボタンは左右に1つずつ、同じ形にしました(「12種類を見くらべてみる」と、くじの「おまかせで3つ引いてみる」)。くじは残し、結果の見出しは「たとえば、こんな3つが届きます」にして、例であることが分かるようにしました。
• 迷ったところ: 自分で選ぶ側には、くじと同じような「試してみる」仕かけがなく、上の12種類へ戻るリンクにしました。おまかせの「締め切り:ありません」は、新しい約束に読まれないか迷いましたが、締め切りは自分で選ぶ人だけの話なので、比べやすさを優先しました。

いちばん伝わっていなかったのは、選び方を申し込み時に1回だけ選び、その後は変更できないことだと考えました。

共通の注意を上部に置き、2つの選び方を同じ重さのカードで並べました。既存の動物の絵とLPの配色を参照しています。

自分で選ぶ側には、マイページで12種類から3つを選ぶこと、未選択時の扱い、専用の締め切りをまとめました。

くじを残すか迷いましたが、今回は選び方の理解を優先して省き、おまかせ側には毎回の操作が不要なことを明記しました。

組み込みの画像生成ツールを使用し、「既存の2枚の絵を使い、変更不可を上部に強調し、同じ重さのカードで比較する」を生成指示の中心にしました。