実践! WEBビジュアルデザイン 第11回「デザインプロセスを知る（前編）」
実践! WEBビジュアルデザイン 第11回「デザインプロセスを知る（前編）」
2011年3月4日
TEXT：文＝田口 亮（（株）フォーデジット）
Webデザインに必要な知識や考え方は、普遍的なものもあれば、案件やクライアントによって変化する部分もある。PCやネットの技術やトレンドの変化によっても変わっていく。そのような知識や考え方、取り組み方を学び、考えるうえで大事なことは、現場で役に立つ、実践的でリアルな知識を得ることだ。
そこで本連載では、Webデザインの現場で役に立つ、実践的なWebビジュアルデザインのトピックや考え方、取り組み方について考えていく。
デザインプロセスは、前回（第4回「戦略からビジュアルに落とし込む（後編）」）でも説明した通り、5階層のレイヤーにわかれているモデルをベースに述べているが、他のデザインファームではどうだろうか。実際にプロトタイプの捉え方や、実装のプロセスはそれぞれ違う。今回は、そのデザインプロセスについて、事例を挙げてみようと思う。
【1】J・J・ギャレット氏の5段階モデル
【戦略】【要件】【構造】【骨格】【視覚化】
このコラムでも何度も取り上げた内容ではあるが、デザインプロセスの中ではかなり一般的なものとしてとらえられている。各項目の詳しくは第4回「戦略からビジュアルに落とし込む（後編）」で述べた通りであるが、各階層が上下に影響し合いながら上層に向かうにつれて具現化が行われる。デザイン作業を全体としてとらえるだけでなく細分化し体系化したものであるために、納得性が高く、整理して進めることが可能になった。実際のプロジェクトでは明確に階層ごとに進む訳ではなく、階層を行ったり来たりしながら、インタラクション、UIデザイン、ビジュアルデザイン、情報設計などで要求を達成する手段を選択する。
このプロセスに肉付けしたり、詳細に落とし込んだデザインプロセスやワークフローを採用しているところは多いのではないだろうか。また、この開発までのプロセスの後に、運用や効果検証のプロセスが発生する。Google AnalyticsやGoogle ウェブマスター ツールなどを利用して改良を繰り返していくことになる。
【1】J・J・ギャレット氏の5段階モデル
【2】IDEOのデザインプロセス
【理解】【観察】【視覚化】【評価・改良】【実現】
世界中に拠点を構えるデザインコンサルティング会社、米IDEO社は、米Apple社の最初のマウスをつくったことがあまりに有名だ。米IDEO社のデザインプロセスは世界的に有名なので、筆者が詳しく書くまでもないが、デザインプロセスがテーマであれば紹介を欠かすことはできないだろう。【理解】はビジネスや制約事項など、取り巻く状況を理解することであり、【観察】は隠れた人々のニーズやウォンツを把握することである。
また、【視覚化】はJ・J・ギャレット氏の【視覚化】とは少し異なり、プロトタイピングといわれる行為で、見てみなければわからないことを把握するために行う。実際にものをつくることもあればストーリーボードなどの手段をとることもある。そして、次の【評価・改良】でブラッシュアップ・またはお蔵入りの作業を行い、最終的にその工程を経たものが【実現】へ向かうことになる。
米IDEO社の大きな特徴は「ラピット（高速な）プロトタイピング」と言われている。具体案として提示すること、それを評価すること、その手法が高速であるということだ。また、J・J・ギャレット氏の5段階モデルではあまりフォーカスされていない【評価・改良】のプロセスが非常に充実している。
【2】米IDEO社のデザインプロセス
【3】ゴールダイレクテッドデザイン
【調査】【モデリング】【要件確定】【フレームワークの設定】【精緻化】【開発支援】
米Microsoft社でVisual Basicを開発したAlan Cooper氏が、使う人のゴールにフォーカスする人間中心設計の観点から開発された方法論。
特徴的なのは【モデリング】のプロセスで、ペルソナ手法によってユーザを知ることである。その後に人間の本能欲求に関わるユーザーゴールの設定と、それを達成させるためのシナリオとなる。ビジュアライズされるのは【精密化】のところで、そのデザインをもとに反復を繰り返しながら組み立てていくことになる。ペルソナはなるべく実在の人物を連想させる身内などもよい。
【3】ペルソナは開発者とユーザを明確に分ける
これらは、人間中心デザインの手法に近いまたは一部なもので、それぞれ力点や手法が違うだけだととらえても大きな問題ないだろう。このプロセスを理解して、時には部分的にフォーカスし、問題解決にあたらないといけない。デザインのプロセスはどんどん細分化され、専門化されていく。すべての専門家を集めて作業することはできないが、その領域の分野の存在と必要性を理解しておくだけでも、大きな手助けになるだろう。
■デザイン現場の目線で“リアルに語る”実践! WEBビジュアルデザイン バックナンバー
>>> まとめページはこちらから！
第1回「デザインプロセスの落とし穴（前編）」
第2回「デザインプロセスの落とし穴（後編）」
第3回「戦略からビジュアルに落とし込む（前編）」
第4回「戦略からビジュアルに落とし込む（後編）」
第5回「デザインはなぜひっくり返るのか（前編）」
第6回「デザインはなぜひっくり返るのか（後編）」
第7回「優れたデザインに最適化していくワザ（前編）」
第8回「優れたデザインに最適化していくワザ（後編）」
第9回「ビジネスを理解したデザインとは（前編）」
第10回「ビジネスを理解したデザインとは（後編）」
FOURDIGIT Inc.
期待以上の結果を継続的にご提供することが FOURDIGIT Inc. のミッションです。数多くのプロジェクトで培った戦略への理解力、デザイン、技術力は多数の企業様に評価をいただいております。
【MdN Design Interactiveからのお知らせ】
MdN Design Interactiveが運営するデザイナーやWebデザイナーなど、クリエイティブ業界に特化した求人サービス【MdNの求人情報】では、2011年3月31日まで「クリエイター向け人材派遣・紹介会社登録者募集キャンペーン」を開催中です。人材派遣・紹介会社限定で、掲載料金が“最大60％OFF”になる、たいへんお得なキャンペーンです。ぜひご利用ください。
→【MdNの求人情報】はこちら!