web creators／MdN Design Interactive共同企画

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

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

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

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

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

---

Webのビジュアルデザインとはどういう作業だろうか？　ユーザーエクスペリエンスの権威であるJames Garrett氏の提唱する5段階モデルによると、戦略から骨格までで策定された要素を目に見える形に視覚化するプロセスがWebのビジュアルデザインだ。いかにして目に見えない戦略をビジュアルに変換するのか、また、5段階のプロセスの中でビジュアルに影響を与える要素を理解する必要がある。なお、本記事は本連載の第1回、第2回の話を受けて書いているので、第1回、第2回をお読みでない方は、先にそちらをお読みいただくことをおすすめする。


James Garrett氏の5 Planes Model

■世界観・トンマナを決める

ビジュアルの世界観を決めて行く作業は、サイトのビジュアルコンセプトとも言える重要な作業だ。同氏の5段階モデルにおいて視覚化は最終段階で行われるが、ビジュアルコンセプトだけは先に決められることも多い。視覚化の前段階としてクリエイティブブリーフを策定するケースもある。

ビジュアルコンセプトはサイトの方向性となるべきもので、ここが定まらないとデザインは迷走してしまう。もちろん、戦略から段階を経て導きだされるゴールに沿ったものを構築するのが前提だが、世界観は「とにかくかっこいい」とか「ほんわかしてやさしい感じ」などのあいまいな言葉で進んでしまうことも多く、ここの転換がいちばん大きいので、いくつかの手法を紹介したい。

【1】対比した形容詞の振り幅を決める

「SD法」と言われる手法で、対比する形容詞を左右に置き、それがどのぐらいのポジションになるのかを決めて行くものだ。それが複数集まることで、狙うべき世界観を具体化する。たとえば、「安定←→革新」、「丸い←→尖っている」、「機械的←→叙情的」、「カラフル←→シンプル」などである。こういった要素を戦略に基づいて振り幅を決めて行く。これによってどういう世界を構築するかのヒントとすることが目的なため、できるだけデザインの言葉としてわかりやすいことが望ましい。


設定する軸が重要

【2】印象マトリクスを利用する

デザインの印象を計るうえでの一般的な「SOFT←→HARD」、「WARM←→COOL」の2軸のマトリクス。このマトリクスは、同様の軸でカラースキム、シェイプ、形容詞、音までがマッピングされている。一般的な軸の設定のため、共通言語として使いやすい。

ただ、個人的な意見だが、どちらかというと評価手法に向いていて、このマッピングを狙ってデザインをするのは実際は難しい面もある。


縦軸に「SOFT←→HARD」、横軸に「WARM←→COOL」

【3】4Pの視点からマトリクスを構築する

「売れるデザインのしくみ -トーン・アンド・マナーで魅せるブランドデザイン-」（ウジ トモコ著、ビー・エヌ・エヌ新社刊）で詳しく紹介されている、マーケティング的な軸を入れるやり方もある。この場合は、ウリが競合とどう違うか、狙って行くマーケットがどう違うかなど、「4P」（商品・価格・戦場・プロモーション）の視点からマトリクスを構築している。上記の印象のマップよりも具体性を帯びることが多いため、アウトプットのイメージや向かうべき方向性を共有しやすい。


競合と比較するのにも有効

これらの手法を使って、戦略や要件に沿ったトンマナ、デザインの方向性を決める。こういった手法を使わなくても、参考サイト、参考ビジュアルなどの具体例を挙げるやり方もあるが、経験的に参考サイトでは、最終のアウトプットがイメージできずに有意義な意見が出ることが少ない。プロジェクトのできるだけ早い段階で、ある程度のデザインの方向性が決まっていると、質が高まることが多いし、当然クライアントはプロセスよりも最終のアウトプットを判断できることを望む。スケジュール的にも方向性だけでもある程度のコンセンサスを取っておくことがベターだ。

上記手法でデザインの方向性を言葉にすることによって大きなメリットがあるのは、デザインを見たときに「かっこいい！」と感じて、その瞬間に、戦略が吹っ飛んでしまうことを防げることだ。「いいじゃん！」という感性とビジネスゴールとリンクしているか、という確認が明文化することによって可能になる。

1月14日公開予定での第4回の後編では、5段階モデルの各工程において、ビジュアルデザインに関わる重要な要素を洗い出し、ビジュアルを構成する要素がどのレイヤーに属しているのかを説明する。