3枚の原図を見せても、「動きの意味」は再現されなかった。
Claude最上位モデルで作ったCTAを、GPT/Codexで再設計した比較検証。差が出たのは、モデルの優劣よりも「画像とコードの役割」と「時間軸の指定」を分けたかどうかだった。
元にしたのは、バリュープロポジションを説明する3枚の図解だった。紫の円は「競合が提供するもの」、シアンの円は「顧客が求めるもの」、下側の円は「自分（人間）にできること」。AI活用と人間力を高めるほど、下側の円が上へ広がり、3つの重なりが大きくなる構造だ。
依頼したのは「原図のデザインとカラーで動くCTA」
この画像のデザインとカラーをオリジナルとして、デザイントークンで動くCTAにしてほしい。AIを多少使えている人、AIを触っていない人、AIだけでなく人間力も高めている人の3状態を見せたい。
3つの円を拡大させ、発光と状態切り替えを加えれば、成長の演出として成立する。
見た目は作れている。ただ、上の2円まで変わると元図の意味が変わる。固定するものと、育つものを分ける必要がある。
背景は生成画像、文字と円はコードに分離する。上2円は固定し、人間力の円だけを下側を大きく動かさず上方向へ広げる。3枚は参考画像ではなく、時間軸上のキーフレームとして扱う。
スクリーンショットではなく、成果物そのものを比較する
下の3段階ボタンを押すと、原図・Claude / Fable 5版・GPT / Codex版が同じ状態へ切り替わります。見た目だけでなく、固定要素と可変要素の違いを実際に操作して確認できます。
原図3枚は正解キーフレーム。左がClaudeの既存成果物、右がGPT / Codexの再設計版です。
比較ラボを別タブで大きく見る ↗なぜ最上位モデルでも再現が甘くなったのか
Claude版は失敗作ではない。紫・シアン・コーラルの配色、太い縁取り文字、2層の発光など、静止画の視覚的な特徴はよく拾っていた。一方で、3枚の時間軸をどう読むかは指定に含まれていなかった。
| 比較点 | Claude / Fable 5版 | GPT / Codex再設計版 |
|---|---|---|
| 3枚の扱い | 雰囲気と成長演出の参考として解釈 | 開始・中間・到達のキーフレームとして数値化 |
| 上側の2円 | 状態に合わせて半径が変化 | 半径113pxで固定 |
| 人間力の円 | 60→95→178px。中心位置は固定 | 73→114→164px。下端をおおむね保ちながら中心を上へ移動 |
| 自動再生 | 初期表示後に自動遷移。手動選択と競合する場面あり | ユーザーが開始した時だけ動き、手動選択で停止 |
| 素材の分担 | 主にコードで世界観を再構成 | 背景のみ画像生成。文字・円・状態管理はSVG/HTML/CSS/JS |
| 導線 | 図解そのものを主役にしたCTA | 図解の後に、実在するデザインラボへのボタンを設置 |
高性能なモデルへ原図を3枚渡せば、変化しない要素と成長する要素まで自動で読み取ると思っていた。
モデルは見た目を高水準で再現したが、時間軸の意味は別解釈になった。必要だったのはモデル変更より、固定・可変・移動方向・操作ルールの明文化だった。
GPTが向いていたのではなく、工程を分けたことが効いた
今回はGPT側で画像生成とコード実装を同じ会話内で扱えたため、背景の質感と図解の正確さを分担しやすかった。ただし、画像生成AIに日本語や円の関係まで焼き込ませると修正できなくなる。そこで、写真・テクスチャ・空気感だけを画像に任せ、意味を持つ文字と図形はコードで残した。
つまり、今回の結果は「GPTの方が常に上」というランキングではない。Claudeは余白、構図、コードだけの表現に強みがあり、GPT/Codexは画像生成を含む素材分業と実装検証を一つの流れにしやすかった。作品の種類によって、最適な役割分担は変わる。
今日から再現できる3ステップ
開始・中間・到達の順番と、それぞれの状態で変化する数値を指定する。
今回は上2円を固定し、人間力の円だけを拡大。下側を大きく動かさず、中心を上へ移した。
背景は画像、文字と図形はSVG、状態はJavaScript。これで視覚品質と修正可能性を両立する。
この記事そのものがプロンプト
今回の検証で効いた要素を、次の制作へそのまま持ち出せる形にした。コピーして、自分の3枚の原図と一緒に渡すといい。
添付した3枚は、同じ図解の「開始・中間・到達」を表すキーフレームです。 目的: 静止画の見た目だけでなく、3枚に込めた意味を保持した動くCTAをHTML/CSS/SVG/JavaScriptで制作する。 実装前に必ず整理すること: 1. 3枚で変化しない固定要素 2. 3枚で変化する可変要素 3. 位置・サイズ・透明度・色の変化方向 4. 自動再生と手動操作の優先ルール 今回の固定条件: - 上側2つの円は位置・サイズとも固定 - 下側の「自分にできること」の円だけを小→中→大へ変化 - 下端をおおむね保ち、中心を上へ移動させる - 中央の価値領域が広がる意味を壊さない 素材分担: - 背景の質感・光・空気感: 画像素材 - 日本語・見出し・円・ラベル: SVG/HTML - 状態切り替え・自動再生・停止: JavaScript 操作: - 自動再生はユーザーが開始した時だけ動く - 状態ボタンを押したら自動再生を停止 - 現在状態をボタンと説明文に同期 - prefers-reduced-motionでは自動再生しない 品質確認: - 1280×720と390×844で横幅超過がない - 文字と図形が背景画像に焼き込まれていない - CDNや画像が失敗しても本文と操作が残る - 見た目だけでなく、図解の因果関係が原図と一致する
この要素をそのままコピーして使うといい。モデルが今回の構成以外でも判断しやすいよう、固定要素、可変要素、操作、検証条件まで加えてあるので、普通に「動かして」と質問するよりは良い回答が得られるはずだ。
※本記事は、同じ原図から制作した2つの成果物を比較した一事例です。Claude、GPT、Codex各製品の総合的な優劣を断定するものではありません。モデル、実行環境、指示内容により結果は変わります。
AIに任せれば、できることは増える。 けれど、正しく選べるとは限らない。
AI時代に必要なのは、AIに丸投げする力ではなく、AIが出した結果を判断できる最低限の基礎です。
活躍できる場所
AI活用と人間力が重なるほど、あなたにしか生み出せない価値の領域は広がっていきます。
AIトレンドロードマップを見る →※ 別タブで開きます。読み終えたらこの記事に戻れます。
この記事へのコメントはありません。