web creators／MdN Design Interactive共同企画

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

実践! WEBビジュアルデザイン 第1回「デザインプロセスの落とし穴（前編）」

2010年12月17日
TEXT：文＝田口 亮（（株）フォーデジット）

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

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

---

ふだんWebをデザインしていて、デザインがうまく決まらなかったり、なんとなく全体的に良くない、デザインが迷走してしまうことがある。そこで今回は、そのような“デザインでハマるツボ”をいかに回避するかについて、Web制作のビジュアルデザインの現場の目線で解説する。


■デザインが危ない！

デザインや制作は時間がなければクオリティが落ちる、という単純方程式ではないが、タイトなスケジュールだと、コーナーからセンタリングで即シュート！　みたいなやり方をせざるを得ないことも出てくる。そのようなときに落とし穴にはまってしまうことがある。つまり“ゴールがブレてしまう”ということ。意図と違ったりイマイチな方向にガンガンいってしまったりするケースで、これが今回のテーマのデザインプロセスの落とし穴である。

でき上がりを見て「こ、これは違うぞ……」という状態で、そのときにはすでに時間がなく、提出時刻もせまっていて、デザイナーのスケジュールも取れないという、最悪の状態。目の前が真っ暗。ディレクターやディレクション経験がある読者であれば、こういう経験を一度はしているのではないだろうか。

弊社の場合は、“イメージが見えてきたら、なるべく早い段階で周りのデザイナーと相談したり、ディレクターとこまめに共有することが重要”ということで、それにより短時間でできる連続的なウォークスルーを行っている。そのわずかな時間の積み重ねが落とし穴を回避する最良の手段となるのだ。


■デザイナーが取り組むべきこと

とはいえ、コミュニケーションにすべてを頼ってしまっては自分の判断力がつかない。そこで、デザイナー側で取り組むべきことを挙げよう。この手の回避策には人それぞれにやり方があるので、これらを参考にして自分なりの方法を探ってみるのもよいだろう。

【1】情報ベースで考えずに、印象ベースで考える
ワイヤーフレームを見ると、デザイナーは少なからずその情報に引きずられ、その情報を網羅することに意識がいってしまいがちだ。そこで、情報ベースのものを一回置いておいて、まずはどうやって印象を与えるか、ということにシフトして考えてみよう。そうすることで自然と思考がスイッチし、その切り替えを効果的に行うことで、アウトプットの絵が見えてくるものだ。その結果、ワイヤーフレーム自体をブラッシュアップするアイデアも出てくる。


ワイヤーを分解して0ベースで考えてみる


【2】手書きのプロトタイプ
手書きによるアプローチは大枠の方向性をつくるのに適している。当然ラフスケッチなので細かい情報は記載できないが、イメージが見えてこないことにはスケッチもできない。また、スケッチを指標とすることでデザイン作業の方向性を見失わずに、効率的なデザイン作業ができるという利点もある。


PDFにしてコメントを入れて行くこともある


【3】参考サイトを探す
これがいちばん王道なやり方といえる。ただ、あくまでも印象をつくるうえでのエッセンスとして参考にしないと、参考サイトっぽく仕上がってしまう。参考サイトのデザインを分解して、印象を形成する上で必要なエッセンスを抽出することが正しい参考サイトの用い方だ。また、上記のスケッチよりも参考サイトのキャプチャを切り貼りしてイメージを膨らませて行くやり方をしているデザイナーもいる。


参考サイトの切り貼り


【4】とはいえ日々のインプットが重要
デザインポータルサイトや海外の優れたデザインを日々見ていると、さまざまなアイデアや、ビジュアル的なアプローチ、インタラクションデザイン、UIデザインなど、が日々発信されている。このような情報を日々の中で蓄積して行くことが方向性を見いだす近道といえる。アパレルや建築、プロダクトデザインなどの他業種の実物がもつデザインをWebへどうやって盛り込めるかを考えるのもおもしろい。


弊社にある図書の一部


これらはどれも当たり前のことではあるが、こういった“積み重ね”が重要なのである。今回はいささか簡単な話になってしまったが、次回はJ・J・ギャレット氏の提唱する、ユーザーエクスペリエンス（UX）を構築するための5段階モデル（戦略、要件、構造、骨格、表層）の話を元に、もう少し深くデザインプロセスの話をしていこう。（後編はこちら）