1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

DifyでバナーデザインのAI判定ツールを作った結果、たどり着いた悲しい結末

1
Last updated at Posted at 2026-07-01

ロゴのガイドラインをAIで判定する

企業やサービスのブランドロゴを使用してバナーデザインをするとき、関係各所へ納品前のガイドラインチェックが必要になる場合があります。金融系サービスだと、かなり厳しく確認される印象です。

このやり取りが、地味に時間を取られるんだよなぁ。メールで画像を送信して、人間の返信を待つ。修正が発生した場合は確定までに2日くらいかかることもあります。納品を急いでいるときは、なかなかのタイムロス。広告表記に必ず必要な注釈や、ロゴ表示時の最小サイズなど、デザインに気を取られていると、ついつい見落としてしまう細かいルールが結構あるものです。

ロゴ規定のガイドラインなんか文書化されてるんだから、チェックはツールで自動化できるっしょ!ということで、Difyを使って社内確認用のAIロゴチェッカーを試作してみました。今回は実験ということで、ロゴの部分の規定チェックに絞って検証を始めてみました。

Difyの設定

lesson02-Q01.png

気をつけたこと

LLMの設定

  • Vison機能がついたAIモデルを選ぶ
  • Vision機能をONにする

プロンプト
Chat GPTにプロンプト作成のアドバイスを求めたところ、こんな回答がありました。

この用途であれば、単に「ガイドラインに従ってください」というプロンプトでは精度が出ません。また、GPT系モデルは画像認識は得意ですが、「何となく問題ない」と回答しやすいため、必ずチェックリスト方式で判定させると精度がかなり向上します。

確かに、ファーストトライでざっくりと書いたプロンプトでは、期待したような判定は行われませんでした。まともな診断結果を出してもらうには、プロンプトの書き方が鍵になるようです。Chat GPTの回答に満足できなかったら、GeminiやClaudeなどにセカンドオピニオンを求めるなどして、プロンプトの修正を何度も行いました。

架空のガイドラインを作成してナレッジに格納

業務上よく見ている資料を参考にしながら、架空の金融サービス”魚PAY”ロゴのガイドラインを作成。今回はプロトタイプなので、WEBメディアに掲載する場合の利用規定を、テストしたい項目に絞って簡単に作ってみました。

lesson02-Q02.png

さあ!お手並み拝見だよ!

すべての設定を終えて、いざ、テストランです。

lesson02-Q03.png
ロゴは斜めに配置したらNGです。ナイスジャッジ!

lesson02-Q04.png
いいよいいよ!その調子!アドバイスも的確!

lesson02-Q05.png
不確実なことに対して、曖昧な返事をよこさない!チェッカーの鑑だね!
キレてる!キレてる!

lesson02-Q06.png
あ、あれー?ここにきてFail、なんでだー!

仮説を立てて再テスト

いくつかあるルールの中で、縦横比だけが具体的な数値の記載がガイドラインにはありませんでした。ナレッジの内容は、基本テキストベースで学習されているような気がします。AIはナレッジに登録された画像の細かい解析処理まではせずに、ノリで適当に答えていそうな雰囲気です。

取り急ぎLLMの記述にこちらを書き加えて、再テストしてみましたが...

## 縦横比
このロゴの縦横比は613:160です。
4:1の縦横比よりも大きく数値がずれている場合はNGを返してください。

結果は失敗。やはり、ガイドラインの文字しか参照していない気がします。それならば、解決策はナレッジの設定にあるのか?

ナレッジで適当に設定していたハイブリッド検索の設定を見直すことにしました。セマンティック(ベクトル検索)とキーワード(全文検索)の比率で何が変わるんだろう。調べてみると...

  • セマンティック(ベクトル検索)
    特徴: 言葉の「意味」や「文脈」の類似度で探す方法です。
    例:「お腹が空いた」というクエリで、「おすすめのレストラン」や「満腹になるレシピ」といった、意味的に関連するドキュメントを見つけられます。
  • キーワード(全文検索)
    特徴: 文字が完全に一致していなくても、ニュアンスが近ければヒットします。
    例:「iPhone 15 Pro」や「エラーコード 404」のように、その言葉ズバリを含んだ書類を探したい時に強力です。

うーんこれかな。
lesson02-Q08.png

というわけで、スライダーをちょっとずらして再テスト。

lesson02-Q09.png

お、お、お、できたーーー、と思ったら、

lesson02-Q10.png
別のパターンで失敗しました。これは、カラーが間違っていることを指摘しなきゃダメなやつです。LLMのプロンプトしか見ていない!

ならば、LLMに追記した縦横比のプロンプトは削除して、ガイドラインに縦横比の数値を入れよう... このようにガイドラインに改変を重ね、何度もPDFを上書き更新していたら、Difyの挙動がおかしくなってきました。何回テストをしても「魚PAYロゴ利用規定が見つかりません」といわれてしまいます。これは、プロジェクトを作り直して最初からやり直した方が良さそうです。

今日ここまでにして、ほとぼりが冷めたらもう一度チャレンジしてみようと思います。

振り返り

今回のロゴのAI判定ツールは、ガイドラインで縦横比の数値を定義していなかったことでコケましたが、あと一歩のところ...までは近づけたのではないでしょうか!

AIの回答で心許ないと感じた部分も、課金してAIのモデルをアップグレードすれば解消できそうな気がします。 金融系サービスの広告はキャッチコピーのレギュレーションが厳しいので、キャッチコピーの規定も参照させておけば、ロゴとコピーの両方をチェックできるツールが作れそうです。

最後にアハ体験

この記事を書くにあたり、架空の決済アプリ"魚PAY"のバナーを量産するのが楽しくて、しばし時間を忘れて没頭していました。しばらくして、はたと我に返りました。AIにロゴやコピーのガイドラインをここまで学習させることができるなら、そのままAIにバナーを出力してもらった方が早いのではないか、と。

隣に座っているミレニアムヤングな同僚は、きっと私にこう言うでしょう。
「え、バナーをわざわざ作ってるんですか?チャッピーに頼んだら5秒で出てきますよ」

う、うわーーーーー!

人間が作ったものを、AIが判定!NGが返されたら人間によって修正!これぞ業務効率化!なんてドヤってる場合じゃありませんでした。効率化を考えるなら、AIがバナーを制作して、人間がジャッジするワークフローを作った方が時短になりそうです。

Difyを使ったプロトタイプ制作は、AIとの付き合い方を考える良い機会になりました。
旧人類としては、創作の楽しみが奪われるようで、ちょっと寂しい気持ちにもなりました。

(浮いた時間で粘土細工でもはじめようかな〜)

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?