web creators／MdN Design Interactive共同企画

デザイン現場の目線で“リアルに語る”

実践! WEBビジュアルデザイン 第4回「戦略からビジュアルに落とし込む（後編）」

2011年1月14日
TEXT：文＝田口 亮（（株）フォーデジット）

Webデザインに必要な知識や考え方は、普遍的なものもあれば、案件やクライアントによって変化する部分もある。PCやネットの技術やトレンドの変化によっても変わっていく。そのような知識や考え方、取り組み方を学び、考えるうえで大事なことは、現場で役に立つ、実践的でリアルな知識を得ることだ。

そこで本連載では、Webデザインの現場で役に立つ、実践的なWebビジュアルデザインのトピックや考え方、取り組み方について考えていく。

※本記事は「実践! WEBビジュアルデザイン 第3回「戦略からビジュアルに落とし込む（前編）」」の続きになります。前編をお読みでない方は前編からお読みください。

---

Webデザインの要素は、「カラースキム」、「フォント」、「テクスチャ」、「エレメント」、「写真・動画」、「レイアウト」に分類され、これらの組み合わせとバランスでWebのビジュアルデザインが成り立つ。それぞれの要素はビジネスゴールとユーザーニーズを満たすために役割が分担され、ビジュアルの方向性と合わせてアウトプットへとつながっていく。上記のデザインプロセスの中で、それぞれの要素への影響をJames Garrett氏の5段階の各フェーズにて確認する。


James Garrett氏の5 Planes Model

■「戦略」フェーズ

何より重要なのはビジネスゴールがどこにあるのかを理解することだ。何のためにデザインを行うのか、そもそもなぜつくるのか、ということを理解することで、デザインが作業ではなくビジネスにおける重要なプロセスである、ということがわかる。かなりまわりくどい話になることが多いが、デザイナーにとっては尊厳に関わる重要な問題だ。

そして、企業のブランドアイデンティティやターゲットは、より具体的なものでありデザインに大きく影響する。ブランドアイデンティティには、フォントやマージン、ロゴの使い方などを規定している場合が多く、それによって、見た目の振り幅も規定されていることもある。ターゲットは、ネットヘビーユーザーだったり、65才以上の人だったり、子どもがいる30代の主婦だったりするが、具体的に文字の視認性やコントラスト、ユーザビリティに影響する。


ビジネスゴールとターゲットニーズの両面を理解する

■「要件」フェーズ

コンテンツフェーズでは、おもにテキスト要素や写真要素のそれぞれにプライオリティがあり、レイアウトに大きく影響を及ぼす。フォントやカラーも戦略フェーズで規定されていない場合は、コンテンツ要求に応じて影響を受ける。また、エレメントやテクスチャ、写真素材などもコンテンツを魅力的に見せるための要素として登場する。コンテンツが戦略フェーズで規定した以上の範囲を超える場合は検討しなければならないが、ブランドアイデンティティで規定されたものを超えてコンテンツを重視する傾向が現実にはかなり強い。


写真や企画などが策定される

■「構造」フェーズ

全体像を構築して行くうえでデザインに影響するのは、レイアウトの部分だ。機能として使いやすいかどうか、また使いやすそうに見えるか、ユーザーがストレスなくサイトを回遊できるかが重要となる。サイト構造によってナビゲーションの部分はレイアウトに大きく影響する。


サイトの全体像が決まる。ナビゲーションは特に重要だ

■「骨格」フェーズ

それぞれのテキスト要素、写真要素が具体化され、文字量やコンテンツのバランスなどが決定することで、レイアウトや文字・色などに影響する。特にボタンラベルなどは影響力が強いので、注意が必要だ。


ワイヤーフレーム。ビジュアルに直結する工程だ

■「視覚」フェーズ

いままでのフェーズで規定されたことをビジュアル化するのが「視覚」フェーズだ。前編で述べた「トンマナ策定」から、具体的なビジュアルに落として行く作業になる。ここまでの流れの中で挙げたことをすべて達成することが最適なデザインと言える。

■重要性や優先度を把握しよう

現実のプロジェクトの中には「まずはサイトの全体像とデザインを」など、いきなり手を動かさないといけないケースももちろんある。対処するには上記のデザインプロセスを複層的に理解していることが重要となってくる。デザイナーは手を動かしながらほかのデザインを参考にヒントを得たり解決して行くことも多いと思うが、前提の部分をきちんと理解しているケースはまだまだ少ない。当然ながら、表面的要素だけでアウトプットをつくり上げることも不可能ではないが、それぞれの重要性や優先度を把握することでのヒントや創造性が成果を出すことにつながっていく。