はじめに
「このバナー、良さそうだけど、なぜ良いのか説明できますか？」——これは多くのWebマーケターや企画職が直面する問いです。数字（CTR/CVR）は出ていても、「なぜ差が出たのか」「どこを変えるべきなのか」は、しばしば感覚に頼らざるを得ません。
今回の取り組みは、その“もやもや”を突破するためのテストです。
本稿で紹介するのは、正解を求めるための仕組みではなく、あえて非人間的な視点から構造化された情報を言語化することで、新たな認識や視点を引き出し、次の企画やビジュアライズに活かすための試みです。
GPTとCLIPを活用し、バナー2枚とLP（任意）のファーストビューを多角的に分析。差異を感覚へ落とし込み、次の行動に繋がる“言語化された気づき”を抽出する仕組みを構築しました。
実際のアプリUIと参考アウトプット
なぜ、これをつくったのか？：バナー改善の根源的な悩み
- 非言語的な“見た目の違い”を、どう言葉にすればよいか？
- 正解のない中で、何を改善すればよいかがわからない
- バナーとLP、文脈・セグメント・目的といった全体像との接続が断たれがち
さらに、既存の改善アプローチは「AとBでCTRが高い方を残す」という非常に表層的なものでした。その裏にある“意味の違い”を把握し、次の施策にどう繋げるか？ それが本取り組みの焦点です。
システム構成：GPTとCLIPを用いた意味差分の多層解析
この分析システム入力 → GPT分析 → CLIP分析 → 総合統合 → Insight / Suggestの流れに沿って以下の4要素で構成されています。
1. GPTによる構成要素と言語化分析（analyze_banner_with_gpt_vision()）
- 色・構図・キャッチコピーなどの視覚的要素を抽出
- OCRによる文字情報の補足
- 印象・意図・行動喚起要素の仮説化
2. GPTによるLPとの整合性評価（analyze_banner_with_lp()）
- 配色やトンマナの整合性評価
- メッセージ・構成・表現の方向性との一致度
- InsightとSuggestも合わせて生成
※ ただし本機能は「付け足し的」であり、本質的にはバナー自体の意味差分を掘るための補助です。
3. CLIPによるベクトル比較（compare_images_with_clip()）
- バナーA/Bを意味ベクトルとして取得し、cos類似度で比較
- 差異が大きい場合、GPTにより“どのような視覚的印象の差があるか”を言語化
- 「なぜBは違って見えるのか」を構造化された言語で取得
4. 総合考察（generate_comparative_insight()）
- 上記すべての要素を統合し、Insight（気づき）と Suggest（改善案）を抽出
- セグメントやユーザー像、CTR等の入力も考慮
- “ズレ”や“齟齬”から逆算的に新たな企画視点を導出
出力例：分析結果の構造と厚み
## 気づき（Insight）
- **視覚的魅力と印象**: 両方のバナーは、沖縄の美しい風景とリゾートの魅力を視覚的に表現しており、旅行者の興味を引くようにデザインされています。しかし、バナーAはリラクゼーションと寛ぎのイメージを強調しており、バナーBは信頼性（現地スタッフの推薦）とアクションを促す明確なCTAを含めている点で異なります。
- **行動喚起の明確さ**: バナーAには明確なCTAが見られないため、ユーザーに具体的な行動を促す力が弱い可能性があります。一方で、バナーBは「詳細はこちら」というCTAを明確に配置し、直接的なアクションを促進しています。
- **オーディエンスの受け取り方**: 色調やデザイン要素の違いによる印象の差異から、バナーAとBが異なるユーザー層に異なる影響を与える可能性があります。例えば、バナーAの落ち着いたトーンは年上の旅行者にアピールするかもしれませんが、バナーBの鮮やかな色調は若い旅行者の関心を引きやすいかもしれません。
## 改善提案（Suggest）
- **CTAの強化**: バナーAにおいても明確なCTAを追加することを検討すべきです。「詳細はこちら」などの具体的な行動を促すテキストがあることで、ユーザーのコンバージョン率を向上させる可能性があります。
- **セグメント別ターゲティング**: それぞれのバナーが異なるオーディエンスセグメントに対応している可能性があるため、ABテストを実施し、どちらのバナーがどのセグメントでより効果的かを測定することを推進します。これにより、ターゲットオーディエンスに合わせた最適なデザインを選定することができます。
- **視覚要素の強化**: 両方のバナーにおける視覚要素の強化が考えられます。バナーAでは、背景の白や緑の強調をバランス良く配色し、リラックスした印象を持つように調整します。バナーBでは、赤のアクセントをモデレートし、より視覚的に心地よいデザインを提供する可能性があります。
- **ブランド一貫性の確認**: 全体的なブランドイメージを統一するため、それぞれのバナーがブランドの他のマーケティング素材やプロモーションと一致していることを確認します。これにより、ユーザーのブランドエクスペリエンスを一貫させ、信頼性を強化できます。
これは単なる感想ではなく、非人間的な構造化視点から導出された認識の再構築です。
導入事例：どのような場面で活かせるか
1. 代理店の提案精度向上
クライアントに対して「このバナーがなぜ刺さるのか」を説明したいとき、GPTとCLIPによる言語化と構造化が強力な補助になります。
2. インハウスチームのPDCA効率化
LPを踏まえた整合性評価や、ベクトルによる類似性比較から「次に作るべきバナーの方向性」を自然に導けます。
3. 新人デザイナー／ディレクターの学習支援
何がどう違うのかを構造で把握できるため、言語化スキル・クリエイティブリテラシーの育成にも寄与します。
人が関与する意味と、AI同士が語る効率の可能性
本プロジェクトの中で改めて見えたのは、人間が直接気づくことのできないレベルの差異や構造を、AI同士が認識し、語り合うことで新たな視点が浮かび上がるという事実です。
たとえばCLIPが捉える「意味ベクトルのズレ」は、私たちが“見た目が違う”と感じる以前に存在しています。それをGPTが言語として翻訳し、私たちは初めて「そういう違いだったのか」と理解できる。このプロセスは、**AIによる“視覚と言語の翻訳的対話”**とも言えます。
一方で、すべてをAI任せにすることには限界もあります。人が途中で「意味づけ」や「判断」を行うことで、出力された情報が文脈とつながり、“納得のある提案”へと昇華されていきます。
この仕組みは、まさに**AIと人間がともに思考を深めていく「過渡期のアーキテクチャ」**の一形態です。どこまでをAIに任せ、どこからを人間の判断とするのか。今後この問いへの設計が、あらゆる情報処理・クリエイティブ活動において重要なテーマになっていくはずです。
差別化された設計思想と技術ポイント
- Vision対応GPTとCLIPを併用：1枚の画像を“構造”と“意味”の両側面から抽出
- Base64で画像を送信：URL非依存・安定性の高い画像解析処理
- フォームから入力された背景文脈（セグメント・目的など）を総合分析に組み込む：生成内容の「意味密度」が向上
- 「正解を出す」ではなく「意味の違いを掘る」ツール設計：判断軸の創出が目的
将来的な拡張の方向性
この仕組みは、今後さらに以下のような方向に発展可能です：
1. ベクトル＋成果値の蓄積による知見の自動抽出
- CLIPベクトル × CTR の関係をDB化し、反応しやすいビジュアル傾向を逆算
- GPTで生成したテキスト・仮説・印象もタグとして再学習可能
2. 単語ベースの反応予測（OCR＋CTR）
- OCRで抽出された文言とその成果値（CTRやCVR）を蓄積
- 「この言葉は反応がよい」「この語調は不信感を生みやすい」といった分析へ
3. 類似バナー検索／リコメンド
- 過去のベクトルDBとCLIP空間上で比較 →「類似してCTRが高かったものを提示」
4. 自動生成との接続
- 「今回の目的で、LPに整合性のあるバナー案を3つ出して」→画像とコピーを自動提案
おわりに：構造化 × 感覚のあいだにあるものを掘る
本プロジェクトの本質は、人間の感覚を代替することではなく、補助することにあります。
視覚表現という“非言語の領域”を、AIが構造化・仮説化し、それを人間が読める言葉に変換する。そこには必ず、これまで見落としていた“意味の差”が浮かび上がります。
「これはいいバナーだと思う、でもなぜだろう？」
その問いに対し、GPTやCLIPはきっと、新しい判断軸を一緒に生み出してくれるはずです。
本取り組みが、より良いクリエイティブと企画思考のための出発点になることを願って。