design.mdあり・なしで生成結果は変わるのか？を実験してみた
前回は、AIにブランドらしい判断をさせるために、design.md や visual-language.json を用意する話を書きました。そこで気になったのが、
design.md を渡す意味はあるのか？ です。
今回は、その違いを実際の生成結果で比べてみます。
実験内容
題材
題材は架空ウェビナーです。
投影資料の表紙スライド
参加特典のトートバッグ
見たかったのは、Webや画面デザインだけでなく、ノベルティのような周辺制作物にもブランド感を展開できるかです。
生成時の条件
比較では、制作物・サイズ・ウェビナー内容・基本ビジュアル指定は共通にしました。
design.mdありの条件では、それに加えて視覚言語ファイルを参照させ、必要に応じてその判断基準に沿うよう指示しています。
共通条件
同じ画像生成モデル、同じ設定で生成する
同じウェビナー内容を使う
同じ制作物を作る
メインカラー、サブカラー、フォント方向などの基本指定は共通で入れる
画像参照は使わない
生成はすべて一発出しで、良い結果だけを選び直さない
各制作物は、それぞれ独立したチャット / 独立した生成タスクとして作成する
視覚言語なしの条件では、以下を使いません。
design.md
visual-language.json
色、タイポグラフィなどの視覚言語ファイル
過去の会話内容
メモリに保存されたブランド情報
先に生成した別の制作物
つまり、毎回プロンプト内に書いた基本指定だけで生成しています。
design.md ありの条件では、同じ基本プロンプトに加えて、
以下のファイルを参照させました。
design.md
visual-language.json
color-patterns.json
typography-language.md
※実際に使用したプロンプト全文は長くなるため、記事の最後にファイルとして添付しています。
実験結果
視覚言語あり
スライドとトートバッグで表現の文法が揃っています。
黒いアウトライン・フラットな面・幾何学的図形・
ドットや接続線・整理された密度感
雰囲気含め、しっかり同じブランドなんだなと感じられます。
視覚言語なし
視覚言語なしのほうも、ぱっと見は揃って見えます。
配色、背景、フォントの方向性、ワークフローらしい抽象グラフィックなど、基本の指定は共通で入れているからです。
ただ、細かく見ると表現の作法が違います。
スライドは、淡い有機的な背景、レイヤー感、柔らかい影やグローを含む、画像生成でよく見かけるような、SaaS風の盛ったグラフィック。
一方で、トートバッグは完全にフラットなグラフィックです。
色は揃っている。
でも、表現の文法は揃っていない。ここに差が出ました。
あえて崩しても統一感は出るか
実際のデザインでは、すべてを同じ見た目にしたいわけではありません。
むしろ、揃いすぎるとつまらない。
いかに統一感を出すか、ということ言っていたのですが実際にはあえて崩すみたいなことは普通にやったりします。
そこでトートバッグのデザインを崩してみることにしました。
濃色の生地に変え、印刷は白を中心に、文字は減らしグラフィックを主役にします。同じ見た目に揃うかではなく、
崩しても同じブランドに見えるかです。
単体でみると、どちらも一見良さそうです。クオリティ自体はわるくないと思います。
先程のスライドと並べるとどうでしょうか。
視覚言語あり
スライドは白背景。トートは濃色生地。
スライドには大きなタイトルと文章。トートは文字がない。
それでも同じブランドの制作物として見えますし、揃っている感じがある。
理由は、同じ見た目を繰り返しているからではありません。
図形の使い方。
線の扱い。
フラットな面。
余白と密度。
遊びはあるけれど幼くない温度感。
そういう作り方の文法が揃っているからです。
視覚言語なし
視覚言語なしのスライドはどうでしょうか。
スライドは、柔らかいSaaS風のグラフィック。
濃色トートは、白インク中心のフラットなグラフィック。
色やテーマは近い。でも、表現の作法が違う。
同じブランドのアレンジというより、同じテーマを別々のノリで解いたように見えます。
３つ並べるとさらに別々な感じが顕著になります。
design.mdを使うと別媒体でも同じブランドに見えた
色やフォントを毎回プロンプトに書けば、ぱっと見の統一感は作れます。
ただ、媒体が変わると、AIはそれぞれの媒体に合わせて「それっぽい表現」を選びます。
design.md や visual-language.json を渡した場合は、どちらの制作物も同じ方向性を参照します。
今回の結果では、媒体が変わっても、線、面、密度、余白、遊び方の方向性が揃って見えました。
さらに、濃色トートのように意図的に崩しても、図形の使い方や線・面の扱いが共通しているため、同じブランドの別表現として見えやすくなりました。
少なくとも今回の実験では、design.md を渡す意味はあると感じました。
ぱっと見の統一感ではなく、媒体が変わったときの判断の揃い方に差が出たからです。
次は、色、タイポグラフィ、shape など、より具体的な制作ルールのレイヤーについて書きます。
つづく。
実際に実験で使ったプロンプト集
関連記事
