Webディレクターとしてデザイナーに依頼をする際、「デザインイメージ」というものを相手に伝える必要がある。作って欲しいデザインの方向性を決め、頭の中にあるそのイメージをデザイナーに正確に伝える。これは、Webディレクターが避けて通れない重要な仕事だ。
基本的に、デザイン開始の前に参考サイトやワイヤーフレームをデザイナーに共有することになるが、これだけではデザインイメージを正確に伝えることはできない。
そういった情報にプラスして、ディレクター自身がデザインの進むべき方向性を“言葉で”定めておく必要があるのだ。それこそが「デザインイメージを伝える」ということだ。
しかし、これが意外と難しい。
ディレクターはデザインのプロではない。一体どんな言葉でイメージを伝えれば良いのか、どんな伝え方をすればデザイナーが納得してくれるのか…、思い悩んでしまうこともあるだろう。
今回はそんなディレクターに向けて「デザインイメージの言語化」について考えていこうと思う。
正解の無い問題だが、それを真摯に考える時間はきっと、あなたのディレクター人生に大きく影響していくことだろう。
なぜ、言語化する必要があるのか？
さて、「デザインイメージ」というものは“デザインの方向性を言葉で定義したもの”だと冒頭で語った。
ここで一つの疑問が浮かび上がる。
なぜ、わざわざ言葉で定義しなければいけないのだろうか？
デザインのイメージを伝えるのであれば、参考サイトがあれば十分な気もする。人間は視覚から８割の情報を得ていると言うし、実際の参考例を見せた方が言葉で伝えるよりもずっと分かりやすいようにも思える。
それにも関わらず、なぜ言葉で定義する必要があるのか。
それは、より情報を限定的に・簡潔に伝えるためだ。
例えば、ある企業のブランドイメージを定義する場合を考えてみよう。ブランドイメージは、社員全員がすぐに理解でき、社員自身がそれを誰かに説明できるようなものがベストだろう。だがもし、そのイメージを一枚のイラストで定義してしまったら…。
ブランドイメージを誰かに説明する際、いちいちイラストを描いて説明しなければならないし、何よりそのイラストを相手に見せたとしても思い描いていた通りに解釈してくれるかは分からない。
Webデザインについても全く同じで、一つの参考サイトだけで方向性を定義してしまうと、人によって解釈がバラバラになってしまうのだ。ある人はそのサイトをそっくりそのままトレースしたようなデザインを目指してしまったり、また別の人はそのサイトの色とフォントだけを参考にしてあとはオリジナルで考えてしまうかもしれない。
こういった認識の齟齬が無いように、デザインイメージは言葉で定義するべきだ。「言葉」はイラストなどに比べると伝えられる情報量が圧倒的に少ない手段だ。だが逆に、情報量が少ないが故に認識の齟齬も起こりづらいのだ。
だからこそ、僕たちは情報量が限定される「言葉」というツールを使ってデザインを定義する必要がある。
情報量の多い手段を使うと、思わぬ誤解を生んでしまう可能性があるからだ。
デザインイメージ言語化の例
さて、デザインイメージを言葉で伝える場合、実際にはどのような言葉で伝えることになるだろうか。例を挙げてみよう。
以下は、それぞれ別のWebサイトのデザインを依頼するときの言葉だと思ってほしい。
「大人向けのWebメディアなので、シンプルで洗練されたデザインを目指してください。カラーは白と黒、グレーのみ、フォントはモダンなものを使用してください。なるべく無駄な装飾を排除して余白を生かし、文章と美しい写真を目立たせるたデザインにしましょう。」
「子供向けのサイトなので、柔らかくて親しみの持てるデザインにしたいです。カラーは暖色系のオレンジと黄色あたりでバランスを取りたいです。見出しのフォントは角の丸いポップなものを使用し、背景にグラデーションを使うなどして柔らかいイメージを演出したいです。」
このような言葉でデザインの方向性を定義すれば、途中で方向性がズレていくことはほとんど無いだろう。デザインイメージと合わせて参考サイトを共有すれば、お互いの認識のズレはほとんどなくなっていくはずだ。
デザインイメージを言語化する方法
さて、ではどうやってデザインイメージを適切な言葉に落とし込んでいけば良いのだろうか？
これは意外と簡単で、ある種のテンプレートに沿って言葉を当てはめれば良いだけだ。
まず、デザインイメージとして含めるべき項目について考えてみよう。
- ターゲット層
- 全体の方向性
- カラー
- フォント
- デザインの特徴
- 何をアピールしたいのか
これらに対し、よく使われるワードを当てはめていけば良いだけだ。
それぞれ簡単に解説していこう。
・ターゲット層
ターゲット層によって目指すべきデザインは異なるので、まずはこのあたりを定義する必要がある。要するに、Webサイトを閲覧するペルソナ像を明確にするということだ
（例）20代の美意識の高い女性向け、管理職など高い地位についているビジネスマン向け、おしゃれでモダンなものを好む意識の高い人たち向け
・全体の方向性
デザイン全体の方向性については、1~2ワードくらいでシンプルに示すのがベストだ。
（例）スタイリッシュ、モダン、柔らかい、親しみやすい、可愛らしい、力強い、シンプル
・カラー
基調となる色も定義しよう。企業やサービスのイメージカラーでも良いし、ターゲット層に合わせた色味でもOKだ。
（例）ピンク色をメインに赤色も使用、白と黒でまとめて必要であればグレーも使用
・フォント
どんなフォントを使用するのかも定義しよう。多くの場合、本文のフォントは読みやすい無難なものを使用することになるので、見出しやキャッチコピーに使用する特徴的なフォントを定義しよう。
（例）セリフのついたスタイリッシュなフォント、サンセリフのシンプルでモダンなフォント、丸みのある可愛らしいフォント
・デザインの特徴
デザインの特徴的な要素を具体的に伝えよう。やや難易度は高いが、他のサイトを見ながら参考にしたい部分を探して言語化するのが手っ取り早い。
（例）要素同士の余白を多めにとる、背景にグラデーションをひく
・何をアピールしたいのか
最後に、目立たせたい部分を明確に定義しておこう。サイトを目にした時にまずどこに視線が集中して欲しいのかを考えよう。
（例）タレントを起用した写真が一番目立つようにしたい、コンバージョンボタンが目につきやすいデザインにしたい
言葉を組み合わせて言語化する
必要なワードが抽出できたら、あとはそれを組み合わせて文章にするだけだ。
例えば、例に挙げたワードのうち一番最初のものだけを集めてデザインイメージを言語化してみよう。
こんな感じだ。
「今回のサイトは20代の美意識の高い女性向けであり、商品の価格も高めです。そのためスタイリッシュでモダンなイメージを目指したいです。色味は女性らしいピンク色をメインに赤色も使用し、フォントはセリフのついたスタイリッシュなフォントを使用してください。サイト内の要素同士の余白を多めに取り、タレントを起用した写真がよく目立つようにしてください。」
抽出したワードを組み合わせて文章にしただけだが、それなりにデザインの方向性が分かる内容になっているだろう。
このように方向性を決めた上で参考サイトを見せながら会話すれば、デザイナー自身も自ずと目指すべき方向性が見えてくるはずだ。
まとめ
さて、今回はデザインイメージを言語化する方法について考えてみた。
まず重要なのは、それぞれの要素に対して最適なワードを見つけることだ。
スタイリッシュ、かっこいい、可愛い、ポップ、モダン… などデザイン界隈でよく使われる言葉をなんとなく把握しておくことも重要だろう。
ワードが抽出できたら、それらを組み合わせて文章にしてみよう。
意外とここが難しかったりするのだが、慣れも重要だ。慣れないうちは今回例として取り上げた文章をフォーマット的に利用して文章を組み上げるのが良いだろう。
ぜひ、デザインイメージを“言葉”で伝えて互いの認識を合わせてほしい。
コメント