アセットから始めるデザインは、キービジュアルやアイコンなどの素材を先に作り、それらが伝える内容を踏まえて画面構成とコピーを組み立てる手法である。画像の雰囲気、形、配置には、受け手がサービスや体験を理解するための情報が含まれる。制作の早い段階でその情報を扱えば、文字で説明する内容と、視覚表現に任せる内容を具体的に分けられる。画像を生成できるAIと、構成や実装を考えるAIを使う場合にも、この順序を制作の仮説として試せる。
アセットが伝える内容から情報の配分を考える
アセットとは、画面やページを構成する画像、イラスト、アイコンなどの素材を指す。キービジュアルはサービス全体の印象を表す主要な画像であり、個々のアイコンは機能や分類の手がかりになる。どのような人や物を描くか、どれほど細かく描くか、どの色や形を使うかによって、受け手が想像する用途や雰囲気は異なる。
たとえば、複数人が同じものを作っている絵からは、共同作業の場面を読み取れる。表情や姿勢を通じて、協力する楽しさも表現できる。その絵を使うなら、コピーでは参加方法や利用できる場面を説明する選択ができる。「みんなで楽しく作れる」という印象を画像と文章の両方で繰り返す必要があるかを、実物を前に検討できるためである。
ビジュアルコミュニケーションはコミュニケーションコスト効率が良いで扱った視覚表現の働きを、制作順序に取り入れる考え方である。受け手が絵から読み取れる意味を、文章量を決める際の判断材料にする。必要な文字数は、画像と一緒に提示したときの理解を基準に決める。
説明の重複は、文字と画像を別々に完成させると生まれやすい
構成とコピーを先に詳しく作ると、その段階では画像のない状態でも理解できるよう、説明を補っていくことになる。後から画像を追加した際に文章をそのまま残すと、一つの内容について絵、見出し、説明文が並ぶ。個々の要素には意味があっても、組み合わせた画面では同じ説明が繰り返される。
文章を完成させた後には、各見出しや段落に対応する場所もできている。画像が入って説明の一部が不要になっても、文章の削除に加えて、セクションの統合やレイアウトの変更が必要になる。すでに整えた構成を保ちながら画像を追加するほど、要素が増える方向で調整しやすい。
アセットを先に用意すれば、画像を含む状態で構成を検討できる。絵で意味が伝わる箇所は見出しを短くし、画像だけでは判断できない箇所に説明を置く。一つの画像で複数の関係を示せるなら、説明のまとまり方も見直せる。後工程で文字や配置を修正する回数を減らせる、というのがこの順序に期待する効果である。
アセットは人間とAIが参照できる具体例になる
世界観を「親しみやすい」「落ち着いている」といった言葉だけで指定すると、色、形、密度、質感のどれで表すかは決まっていない。アセットがあれば、その表現を具体例として共有できる。人間は採用したい特徴を指し示し、AIにはその特徴を使って別の画面や要素を作らせられる。
デザインツールはマスターデータ制作からAIへの視覚的インプット生成へと役割を変えるで論じたように、画像は制作意図を伝える手段にもなる。ゲームなら、パッケージの絵や結果画面の案を先に用意し、それを参照しながら他の画面を考える方法がある。何を大きく扱うか、どの程度の装飾を使うかを、具体的な画面に沿って相談できる。
画像を参照させるときは、残したい特徴も伝える。たとえば、配色は使いたいが文字の大きさは調整したい、人物の親しみやすさは残したいが背景は簡素にしたい、といった指定である。視覚的仮説をAIの判断材料にする際には、画像全体の模倣と、採用した特徴の展開を区別できる説明が必要になる。
素材の生成と構成の検討を往復する
この手法を試すときは、目的と伝えたい内容を共有したうえで、次の順に具体化する。
- 作るものの目的、対象者、利用場面、必要な情報を整理する。アセットの方向を選ぶために、誰に何を理解してほしいかを先に言葉にする。
- 世界観を表すために必要な素材を考え、キービジュアルやアイコンの案を作る。AIには素材の案と画像生成用のプロンプトを考えさせ、人間が目的に合う表現を選ぶ。
- 選んだ素材について、画像で伝わる内容、文字で補う内容、誤解されそうな内容を整理する。判断しにくい部分は仮置きとして残す。
- 実際の素材を使って構成とコピーを作る。画像の大きさ、見出し、説明文の関係を比較し、意味の重複がある箇所を整理する。
- 画面全体で意図が伝わるかを検討し、素材、構成、コピーの必要な箇所を修正する。画像を差し替えた場合は、その画像を前提に省いた説明も再検討する。
最初に作るアセットは、表現の方向を判断できる程度のものでよい。細部を仕上げる前に構成へ組み込めば、文字を置く余白や、画面内で必要な大きさも判断できる。画像単体では魅力的でも、実際の配置では説明を邪魔する場合がある。
素材制作と組み合わせを繰り返すデザインプロセスの中で、アセットの検討を早める方法として位置づけられる。構成を作って初めて必要になる素材もあるため、最初の素材一式を固定して全工程を進める必要はない。
コピーには、画像だけでは決められない意味を担わせる
画像で雰囲気や状況を表せても、利用条件や操作の結果は言葉で特定する必要がある。楽しそうな人物の絵から参加費は分からず、矢印のアイコンだけでは保存と公開の違いを伝えきれない。文字を減らす判断は、受け手に必要な意味が残ることを条件にする。
UIコピーは体験のメロディとしてデザインの主体軸を決めるで扱った、言葉が体験や行動の意味を明らかにする役割は、この手法でも維持する。先に言葉にしておくのは、画面の目的と実現したい体験である。画面に表示する個々の見出しや説明の長さは、アセットと組み合わせながら決められる。
確認のために画像と文字で同じ内容を示すことにも意味がある。操作を間違えやすい場所では、アイコンに短いラベルを添える方が判断しやすい場合がある。画像から読み取れる内容は受け手によって異なるため、制作側が省けると感じた説明を実際の利用者も省けるとは限らない。説明を削った案では、何の画面か、何ができるか、次の操作で何が起きるかを利用者が理解できるかを検証する。
最初の画像を選ぶ判断と、手法の効果を分けて検証する
先に作った画像は、その後の制作で繰り返し参照する対象になる。目的に合わない表現を選ぶと、構成やコピーまでその表現に合わせて調整してしまう。AIに初手で叩き台を作らせるとアンカリング効果で思考の幅が縮むで挙げた懸念は、アセットの選定にも当てはめて検討できる。生成された最初の一案を採用の前提にせず、目的との適合を判断する必要がある。
AIにMVPを渡すと、自分の判断を起点に制作を広げられるという考え方では、AIが展開する前に、人間が何を作りたいかを具体化する。アセットをAIで生成する場合にも、人間が選んだ主題や表現上の判断を残せる。採用理由を説明できれば、後から作った画面と比べて、その特徴が保たれているかを評価できる。
この手法は、世界観や視覚表現が内容理解に関わるUIやWebページで試す価値がある。効果を判断するときは、文章量に加えて、情報の抜け、誤解、構成を組み直した回数、制作全体に要した時間を比較する。素材の作り直しが増えれば、構成の調整が減っても全体の時間は長くなる。読みやすさと制作時間の両方を記録しておくと、次に同じ順序を採用する条件を具体化できる。