デザイナーの意図を伝えるための「統一」の原則 | アドビUX道場 #UXDojo
デザインの7原則は、デザイナーが最高の仕事をするためのガイドとしてずっと前から利用されてきました。デザインの7原則のひとつ「統一（ユニティ）」に焦点を当て、ビジュアルデザインの改善に役立てる方法を検討します。
デザインの7原則は、デザイナーが最高の仕事をするためのガイドとしてずっと前から利用されてきました。7つの原則それぞれがデザインの主要な特性をテーマに、ごく些細な差異がデザイン全体に大きな影響をもたらすことを示しています。
この記事では、デザインの7原則のひとつ「統一（ユニティ）」に焦点を当て、ビジュアルデザインの改善に役立てる方法を検討します。
デザインの「統一」原則とは？
「統一」は、他の6つの原則をひとつにまとめるデザインの原則で、独立したデザイン要素同士を共存させて、見た目に美しいデザインを構成するために利用できます。大きさ、コントラスト、そしてスタイルが異なるコンポーネントを組み合わせて、デザインに一貫性のある外観をもたらすのが「統一」です。
「統一」の原則を達成するには、他のデザインの原則すべてに対する配慮が求められます。そのため、デザイナーはデザイン内の全要素の評価を行って、要素同士の関係と相互作用を明確に理解する必要があります。この作業は、デザイナーの意図が正しく伝わるデザインをつくり上げるためには欠かせません。
まとめると、「統一」とは、全体を構成するパーツ間の同調です。デザイン内の各要素がパズルのように組み合わされて、あるひとつの全体的なビジョンが現出したときに統一が達成されます。
デザインの7つの原則とは何か
あなたがデザインの原則に詳しくないデザイナーだったとしても、まったく心配する必要はありません。おそらく「それが何か」を知らないまま、すでに使用していると思われるからです。
いくつもの要素を含むデザインを作成したときのことを思い出してみてください。あるタイミングでデザインを見直して、何かがうまく行っていないことに気づき、すべての要素が上手く収まるまで要素の削除や調整を繰り返したことはありませんか？その際にデザインを調整しなければならないと告げた直感は、おそらくデザインの原則に影響されています。たとえその原則を意識していなかったとしてもです。
前述の通り、デザインの原則は7つの重要な指針をまとめたもので、簡潔で説得力のある作品をつくり出す術をデザイナーに伝えます。7つの原則には、バランス、コントラスト、強調、比率、動き、パターン、そして統一が含まれます。各々の原則は、デザインの主要な要素とその属性が全体的な外観に与える影響に焦点を当てています。デザインの原則を無視すると、デザイナーがデザイン込めた意図を、それを見たり使用する人が誤解する原因になります。
「統一」の原則を詳しく説明する前に、他の6つのデザイン原則を簡単に確認しておきましょう。
バランス
グラフやチャートと同様に、デザインの構成には縦軸と横軸があります。デザイナーは主要な要素を配置する場所を決める際、これらの軸を必然的に意識します。その理由は、構成に新たに追加されることになる要素が、それぞれ固有の視覚的な重みを持っているからです。
デザイナーの仕事の一部は均衡を保つことです。そのため、通常デザイナーは、視覚的な要素を2種類の方法を使って組み立てます。まず、軸の両側に非常に類似した特性を持つオブジェクトを配置する対称的な方法、その反対に、視覚的な重みを同等に維持しながらも異なる特性を持たせる非対称的な方法です。
たとえば、Webページ内には、サイズの異なるさまざまな要素（画像、アイコン、フォント）が使われています。これらの要素を一体として機能させるには、バランスよく、見やすくなるよう、配置を戦略的に考える必要があります。
コントラスト
たいていのコンポジションは、さまざまな異なる種類の、そして対立する要素を含みます。色の組み合わせ、明暗、一連のテクスチャなどはその一種です。デザイナーは、コントラストを利用して、2つのオブジェクトを目立たせることができます。たとえば、ひとつのオブジェクトを前景に、もうひとつののオブジェクトを背景に配置して対比させるといった手法です。逆に、視覚的な深度が等しくなるよう配置すれば、オブジェクト間のコントラストを下げられます。
要素間のコントラストを生み出す方法は数多く存在します。そのため、要素同士がどのように異なるのかを理解した上で、コントラストを構成全体の中でどのように扱うかを判断することがデザイナーにとって重要です。視覚障害を持つユーザーのニーズを満たすUIには、コントラストが特に大切です。
コントラストは、ボタンに設定されているアクションを区別するためにも使用されます。「保存」のためのボタンには、「削除」に使用するボタンよりも明確なコントラストが与えられるでしょうでしょう。デザインにコントラストが適切に使われていなければ、ユーザーの体験は非常にもどかしいものになりかねません。
強調
カンファレンス会場では、講演者を目立たせるために演台が使用されます。演劇では、独演する役者にスポットライトが当てられます。デザイナーも同じく、特定のコンポーネントを視覚的に際立たせるためにさまざまな手法を使います。適切に適用されれば、強調はコンポジションの特定の領域に注意を引く有効な手段になります。
スマートフォンを手に取って、お気に入りのアプリを開いてみてください。特定のボタン、アイコン、アクションを他よりも強調するために、色、コントラスト、大きさがどのように使われているか確認してみましょう。
比率
比率とは、各オブジェクトの尺度のことです。デザイナーはさまざまな要素のスケールを調整し、オブジェクト同士の関係や視覚的な階層構造、さらには相互の距離を示すこともできます。比率によってデザイン要素を組織化し理解しやすくすれば、デザイナーの意図を表現するのに役立ちます。
この記事も、読み手が記事の構造を理解しやすいように、見出しに比率が使われています。見出しが1種類だけでもこの記事の場合は十分かもしれませんが、複数の見出しスタイルを使い細分化すれば、さらに読みやすさを高められます。比率は、読者が流し読みするための助けにもなります。
動き
アート作品を見たり、デジタル画面を操作する際、人の視線は自然にデザインの領域内を移動します。その様子を観察すれば、何を探しているのか、場合によってはどのように使おうとしているのかを理解するためのヒントを得られます。
視覚的な階層を利用した要素から要素への誘導は、デザイナーが利用できる強力なツールです。すなわち、言葉をまったく使わずに、視覚的にストーリーを示すことが可能になるのです。また、操作するユーザーにとってはナビゲーションが容易になることから、体験の改善にも役立ちます。
アイトラッキングなどのユーザーテスト手法を使用すると、特定の画面でユーザーが何を見ているのかを測定できます。その結果をみれば、ページ上のさまざまなコンポーネントがユーザー体験を支援しているのか、あるいは妨げているのかをデザイナーは判断できます。
パターン
コンポジションに要素が次々と追加されるにつれ、当然ながら要素の繰り返しが発生する可能性が高まります。要素が繰り返し使用されているのであれば、デザインに類似の感覚を与える整理方法が必要となります。これは、視覚的に一貫性を持つパターンをデザイン全体に適用することで達成されます。
より複雑なデザインでは、複数のパターンが生じることもあります。その場合は、パターン間の統一を達成するための最適なまとめ方について考えなければなりません。
デザインの統一の原則はなぜ重要なのか
「統一」は、デザインの原則の中でも、おそらく最も重要な原則と言えるでしょう。ほかのすべての原則を利用して、調和のとれた、全体が一体になったコンポジションをつくり出す道筋をデザイナーに伝える原則だからです。ほかのすべての原則が揃って効果を発揮していることに確信を持てたとき、初めて「統一」が達成されます。
一見完全に見えるデザインも、「統一」が欠けていれば、バラバラに見えたり、わかりづらさを感じ、最悪の場合は使い物にならないこともあり得るのです。統一が欠けているために要素が競って主張し合い、デザイナーが最初に意図した効果に反する体験が生じるかもしれません。ユーザーは不安と混乱を感じるでしょう。
従って、考えるべきことは「どのようにして統一を達成すればよいのか」です。
どのように統一を達成するか
統一が達成できるのはデザイン内部のパーツを調和させたときという点は、前にも触れた通りです。そのために、まず、他のデザインの原則が全体的なデザインの中でどのように使用されているかを評価します。そして、意図され、想定された効果が個々の要素に現れていることを確認します。
多くの場合に「統一」が欠けてしまう理由は、ある原則を満たすために行ったことが他の原則に反するとデザイナーが気づいていないからです。たとえば、2つのオブジェクトにコントラストを適用するために、明るさ、色、大きさを調整して、オブジェクト同士の関係を表現したとします。しかし、その際に注意を怠ると、調整した箇所がその他のコンポーネントも含めた全体的なデザインに適合しなくなる可能性があります。
従って、デザインの「統一」を確保する最適な方法は、デザイン中に一歩下がって、主要な構成要素が統一されているかを繰り返し評価することです。チームで作業をしている場合は、デザイン批評を実施して、ほかのメンバーに「統一」の観点からデザインを評価してもらうと良いでしょう。もし一人で作業しているなら、誰か知り合いに見てもらって、どのような反応を示すかを観察することができます。
UXデザインにおける統一
Webとモバイルアプリケーション間で「統一」された体験を確認するために、ヒューリスティック評価という手法が使用されることがあります。これは、ヤコブ・ニールセンのユーザビリティ10原則を活用し、UIデザインに潜むユーザビリティの問題を特定することが目的です。7つのデザインの原則に加えてヒューリスティック評価を実施することで、デザインの視覚的および体験的な統一を実現できるようになります。
また、ユーザビリティテストも体験の統一を評価するために使用されます。ユーザビリティテストは、対象のユーザーが、デザイナーが想定したとおりにユーザーインターフェースを見て操作するかを正確に測定するために実施します。想定と実際のインタラクションに不一致が見つかれば、デザイナーはどのデザイン原則で問題が生じているのかヒントを得られます。
統一の原則に関するベストプラクティス
経験豊富で成熟したスキルを持つデザイナーは、統一の原則に沿ったデザインを実現するための独自の手法を必然的に考えついているものです。その段階に至るまでは、以下のベストプラクティスが役に立つかもしれません。
新しい要素をデザインに追加する際は、デザインにすでに含まれているほかの要素との関係を決定することから始めます。
デザインを一歩下がって俯瞰し、デザイン内のパーツ同士がどのように作用し合っているかを評価します。
7つのデザイン原則のチェックリストを作成し、各原則がデザインでどのように使用されているのか、それぞれの原則が調和しているのかを評価します。
誰かにデザインを見せましょう。デザインを見たり操作した人の体験が、想定した意図と同じであるかを確認します。
おわりに
デザインは複雑なビジュアルの形態で、新しい要素が追加されるたびにその複雑さは増していきます。ですから、次にデザインに新しい要素を追加する機会があったら、次のように自分に問いかけてみましょう。「これはデザインの『統一』にどのように影響するのだろうか？全体にさらにまとまりをもたらすのか？それとも、統一を喪失させ、ユーザーを混乱させてしまうだろうか？」
この記事はWhat is the Unity Principle of Design?（著者:Dan Silveira）の抄訳です