AI画像生成でブランドが崩れる問題と "視覚言語"の考え方
AIでWebサイトのデザインやグラフィックを生成するとき、 単発のアウトプットであれば、その都度プロンプトを工夫すればよいと思います。
画像生成の精度も上がってきて、単純にその生成結果のクオリティが良いか悪いかを判断するだけなら、そこまで大きな問題は感じません。
ただ、ブランドがすでにある場合は話が変わってきます。 その画像単体として良く見えても、ブランドの範囲から外れていたら不合格です。
難しいのは、ブランドの範囲からはみ出さずに、安定してアウトプットし続けることです。 ブランドに限らず同じ雰囲気のデザインを安定して生成する方法は無いのでしょうか？
画像生成でブランドを作る難しさ
大きく２つあると思っています。
変えてはいけないものを絶対に変えない
一貫性のあるものをつくる
なぜこの２つが難しいのでしょうか？
AIは画像を「そのまま使う」のではなく「描き直す」
ブランドを守るとき、変えてはいけないものといえばロゴとカラーです。
ブランドの顔ともいえるロゴの形や色を自由に変えて使っていいよ、というブランドは 私が知る限りでは出会ったことがありません。
通常、「変えてはいけない」ものです。
でも画像生成ではここが難しいです。
たとえばバナーを生成するとして、そこに自社のロゴを配置したい時。 ロゴ画像を渡しても、そのまま配置されるわけではありません。 AIは画像を解釈し、近いものを再現しているだけです。
注： 近い将来、正確に扱えるようになる可能性は十分あります。
では、どうするかというと、正しいロゴに手作業で差し替えます。
色も同じで、HEXを指定してもその値を塗るのではなく、近い色を再現します。 ただ、色はロゴほど厳密にやるかはケースバイケースでよいのではと思っています。
媒体や用途によって求められる精度は違うので、どこまでのズレなら許容するかをあらかじめ決めて運用するのが現実的だと思います。
私の場合は、HEX差し替えまではせず、「明らかに違う／濁り・暗さ・彩度のズレ」を感じたら直す、というラインにしています。
より厳密にやるなら、一度SVGで作ってPNGに変換する手もあります（HEX指定しやすいため）。ただしSVGで成立するビジュアル前提で、写真的・複雑な質感には向きません。
ブランドらしさは、ロゴとカラーだけではない
２つめの「一貫性のあるものをつくる」について。
ブランドを守るのは、ロゴとカラーだけの話ではありません。
レイアウトのリズム、線の太さ、図形の選び方、情報密度、タイポグラフィ、文言。 こうした要素の積み重ねで、ブランドらしさはできています。
同じブランドなのに制作物ごとで微妙に違っていたり、微妙に違うならまだしも全く違う見た目だったりしたら、一貫性があるとはいえません。
どの制作物をみても、同じブランドのものだね、と感じられないといけないのです。
記事冒頭で、単発ならプロンプトに工夫をと書きましたがこれを同じブランドの制作物でやってしまうと鼓膜指示しない限りは一貫性無くつくられてしまうでしょう。
そこで用意したのが、ブランドを守るルールをドキュメントにしたもののセットです。
ここではそれを視覚言語と呼んでいます。
視覚言語
視覚言語とは、デザインの要素をどう扱うかの判断基準のことです。
ふだんデザイナーは、ブランドにおけるデザインの方向性（抽象度が高い）を意識しつつ、具体的なアウトプットを瞬時に判断して選択していきます。（フォントの種類、余白の取り方、全体の雰囲気、ボーダーの太さなど）
これは違う、これは合っている、と。
これをAIに渡しやすくドキュメントにまとめたものが視覚言語の実体です。
抽象度の違う層に分けて持つ
視覚言語は、1つの長いプロンプトではありません。
抽象度ごとに、3つの層に分けています。
大きな方向性
どんな空気感で見せるか、何をよしとし、何を避けるかを定義する層。具体的なブランドルール
使う色、形など、制作で使う数値とルール。実行時の指示
今回は何を、どのルールを強く効かせて作るか。
上の層ほど抽象的で安定、下の層ほど具体的でその場限り。
目的に応じて、どの層を強く効かせるかを選べる構造にしています。
実際にPalmaで書いた design.md から、いくつか抜粋します。
- ニュートラル背景
- 黒または濃色の輪郭線
- 太いモダンな見出しタイポ
- モジュール構造
- 制御されたアクセントカラー
- フラットで明快な面
- プロダクト / システムとしての説得力
- 楽しいが幼くないトーンルールだけでなく、NG方向も書きます。
- 強いグラデーション中心の未来感
- 発光、ネオン、ガラスモーフィズム
- 幼児向けアプリのようなかわいさポイントは、やっていいことと同じくらい、何をやると壊れるかを書くことです。
ブランドガイドラインのような硬い文体である必要はありません。自分の言葉で書いたほうが、判断基準のニュアンスはむしろ残ります。
ここまでが、「視覚言語」にたどり着くまでの話と、
視覚言語とは何かの話でした。
次の記事では実際につくった視覚言語のファイルの中身を解説しながら作り方を話したいと思います。
つづく。
関連記事
