デザインフェーズの初期作業 Part 3: ルック&フィールの確立（UXデザイン入門シリーズ）| アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

ユーザーフローの全体図が出来上がったら、ルック&フィールとビジュアルデザインを考え始めるべきときです。これは「視覚的文法」と私が呼んでいる、デザインに適用される視覚的なアプローチです。この記事は、『デザインフェーズの初期作業』のパート3として、ルック&フィールを伝える方法について説明します。

スマートフォン、タブレット、スマートウォッチなど、デザインの対象となるデバイスが増え続ける中、ただひとつのピクセルパーフェクトなビジュアルを展開するという考えは過去のものとなりました。
この変化し続ける環境に対応して、私たちが目の当たりにしているのは、ピクセルパーフェクトから離れ、デザインのフレーバーを伝えるためのデザイン制作物への移行です。こうしたデザイン制作物には、次のようなものがあります。

進め方は人それぞれですが、私は、この段階では、ムードボードとエレメントコラージュを組み合わせて方向性を固めています。ムードボードは、方向性を適切な範囲に収束させるのに役立ち、エレメントコラージュは、ビジュアルデザインとUIデザインのつなぎ役として機能します。

ムードボードの作成

ムードボードは、その名前が示すように、ムードを確定するものて、目標全体に適合するルックアンドフィールの方向性を定めるのに役立ちます。ムードボードは、会話を切り出す題材として有効で、議論を重ねる焦点としての役割を果たします。経験上、私は、基本的に3つから5つのムードボードを組み上げて、それぞれに異なる方向を示します。

特定のルックアンドフィールを考えていても、誰しもその経験があるように、自分の好みのオプションが顧客の意見とは一致しないことがあります。そういった場合でも大抵は、代替案があることで、様々なムードボードから異なる要素を引き出しながら、最終結果をまとめることができます。

Tiny Books向けにムードボードを作成した際、アナログ (左) とデジタル (右) のアプローチを採用した。デジタルムードボードから方向性を掴み、ヴィック・ベルはサイトのブランディングを快く作成してくれた

この段階では、おおまかなビジュアルデザインの全体像を示すのであって、ピクセルレベルのデザインに気を取られないようにしましょう。それは、多様な画面サイズが存在する現代には特に意味の無いことです。詳細なモックアップは、ワイヤフレームとプロトタイピングの段階で作成します。

ここでのポイントは、会話を進めるために使用できるデザイン制作物を作成するということです。創造性に富む議論を促進するために、異なるルックアンドフィールを適用した、いろんな種類のムードボードを用意しておくと良いでしょう。
ムードボードを構成する際は、アナログなアプローチとデジタルなアプローチの両方を考慮するようにします。100%デジタルに頼ったビジュアルの発想は、すべてが似通って見えてしまう危険があります。古くて見向きもされない雑誌を使うなど、画面の外に発想の元を探すようにすれば、デザインを尖ったものにできるでしょう。

エレメントコラージュ

ムードボードでフィードバックを集めたら、デザインコンポーネントを作成します。ビジュアルの方向性を一般的なユーザーインターフェイス要素に適用して、「視覚的文法」を定めます。

スタイルタイル手法を生み出したサマンサ・ウォーレンは、「スタイルタイルは顧客の好みや目標に関する議論の触媒である」と述べています。ルックアンドフィールについての対話をもつことに重点を置いたのが、この方法の強みです。これは時間の節約にもなり、この段階で、多様なサイズのピクセルパーフェクトな画像を作成する必要性を回避できます。
スタイルタイルは、私の経験では、顧客にこれらがビジュアルモックアップであるという勘違いをされがちです。また、私の好みは、より自由で、テンプレートに縛られないアプローチです。そのため、ダン・モールの「エレメントコラージュ」アプローチに出会った瞬間に虜になりました。

ダン・モールがReading is Fundamantalのために作ったエレメントコラージュ。様々なビジュアル要素を捕らえ、デザインの方向性に関する対話に弾みをつけるのに役立つ

Reading is Fundamentalプロジェクトにおけるデザインプロセスを詳細に記した素晴らしい投稿で、モールは、顧客をプロセスに参加させ、プレゼンテーションを対話に置き換える必要性を強調しています。エレメントコラージュは、この対話的なアプローチを促進する優れた手法です。ダン・モールは次のように述べています。

デザインについて顧客と話す際、できるだけ多くの視覚的素材を用意して、同じことについて話していることを、確認できるようにしています。私の作るスタイルタイルの亜種には、私が「エレメントコラージュ」と呼んでいる、さまざまな種類のコラージュが組み込まれています。その呼び名は、見ているものが最終デザインではなく、特に論理も順序もない異なる部品の寄せ集めだという期待を与えます。

エレメントコラージュの優れた点は、ムードボードと (開発予定の) UIコンポーネントの架け橋として機能するところにあります。構築しようとしているものの感覚を顧客に与えるために十分な柔軟性を持っています。そして何よりも、時間がかかるプロトタイプ制作に着手する前に、視覚的文法に関する合意を得る上で役に立ちます。

おわりに

UIデザインの詳細や、インタラクティブなプロトタイプの構築を始める前に、デザインの全体的なフローを固め、デザインの骨組みを整えることが大切です。デザインフェーズの最初にデザインの骨組みを確立すれば、明確な視覚的文法をより効率的につくることができます。
重要なのは、UIデザインの詳細、およびワイヤフレームとプロトタイプの作成に深入りする前に全体的な構造を確立することです。細部を検討する前に、明確なデザインの方向性、そして明確なユーザー目標を確立しましょう。初期段階から詳細に専念する必要性を抑えることで、無駄な作業を無くすことができます。

要は、必要な準備がされるまでは、細かい点に気を取られないようにすることです。

この記事はA Comprehensive Guide to UX Design: Communicating Visual Design (Part 3)（著者: Christopher Murphy）の抄訳です