設計原則–視覚的階層の概要

テクノロジーとユーザーインターフェイスが変化するにつれて、ビジュアルデザインのデザインスキルの必要性は高まり続けています。 典型的なユーザーインターフェイスの新しい例が毎年出現していますが、視覚的な階層、知覚、構成に関する基本的な理解は変わりましたか？

現代の視覚の概念は、科学だけでなく心理学にも根ざしています。 その結果、ユーザーインターフェイスが絶えず変化しても、視覚情報の表示と認識の方法は変わりません。 これを考慮して、現代のインタラクションデザインは、グラフィック構成と視覚的階層の基盤を改善することは可能ですか？

視覚の基本的なルールは、意味が埋め込まれた情報を可能な限り迅速に伝達する方法を指示するため、あらゆるビジュアルデザインにとって重要です。 ただし、ビジュアルデザインはグラフィックデザインのいとこであるため、これらの標準は印刷メディア用に確立されており、デジタル用にはまだ再定義されていません。

新しい設計原理を確立する可能性のある「デジタルバウハウススクール」のようなものはまだ形成されていません。 人々は印刷とはまったく異なる方法でUIを体験するため、視覚的な階層と構成のルールは時代遅れであるだけでなく、ユーザーインターフェイスで単純に崩壊します。

ほとんどの場合、デザイナーは依然として画面を静的な2次元オブジェクトとして扱う傾向があり、インタラクティブなデザイナーにとっての課題は、デジタルメディアプロジェクトに単に印刷形式を適用するだけでなく、革新することです。 しかし、新しいデザインを進める前に、視覚的な階層、知覚、構成の基本的な理解を再検討する必要があります。

視覚的階層：インタラクティブインターフェイスの視覚的構成の新しい理解

視覚的階層とは何ですか、なぜそれが重要なのですか？ 視覚的階層とは、情報を効果的に伝達し、意味を伝えるために、コンポジション内のコンテンツをレイアウトすることです。 視覚的な階層は、視聴者を最初に最も重要な情報に導き、次に二次的なコンテンツに導きます。

サイズ、色、形、距離、比率、向きを適切に使用することで確立された構成の意味、概念、雰囲気は、視覚的な階層を決定するグラフィック要素を創造的に使用することで伝えられます。

ビジュアル階層は、訪問者の目をガイドする必要のあるランディングページであろうと、モバイルUIのナビゲーションであろうと、あらゆるタイプのビジュアルデザインにとって重要です。 すべての要素に対するユーザーの理解は、構成内の他の要素とそのコンテキストに基づいています。 構成要素は、視覚的な関係を形成し、それによってデザイン全体に視覚的な階層を確立するために、それに応じて処理されます。

視覚的階層の色

視覚的階層のルールの多くは非常に単純で平凡に見えるかもしれませんが、それらは優れた視覚的デザインの重要な基盤です。 たとえば、色はビジュアルデザインで最も影響力のあるクリエイティブな要素です。

赤十字とモノクロの十字の直接の意味を考えてみてください。 ほとんどの場合、赤十字は中立性と保護を意味します。 これは、色の使用との即時のコミュニケーションの可能性です。 色は、グループを識別するためにもよく使用されます。たとえば、3つの単色のものの中で1つの赤い十字が、どういうわけかより重要であると目立つ場合です。

明るく豊かな色は、落ち着いた色よりも目立つため、視覚的な影響が大きくなります。 インターフェースでは、色を使用して構造の感覚を示し、利用可能な相互作用を示すことができます。 単色インターフェース内の単一の色は、選択を区別でき、ユーザーがホバーしているボタンの先にあるものを示唆することさえできます。

色には、視聴者の潜在意識に明確な情報を伝えることができる意味と感情も植え付けられています。 ブランディングでは、消費者がブランドと有意義な相互作用をする前に、消費者に内臓反応を引き起こすため、色について多くの心理学的研究が行われてきました。 たとえば、青は信頼性が高く、安全で落ち着いたものとして認識されることがよくありますが、赤は刺激的であり、人々の心拍数を増加させることが知られています。 ただし、文化によって色の意味が異なる場合があります。

Webデザインでの意味のある構造的な色の使用の良い例は、The NamesforChangeサイトです。 サイトは、色を使用してその構造を即座に伝えます。 組織はデフォルトで散在していますが、トピックや色で再配置できます。

ただし、選択したトーンは、サイトの意味に関する潜在的な問題の1つを克服するのに役立ちます。 靴下やタンポンなどの日用品の募金は、売れるほど刺激的ではないため、サイトの急進的なグラフィックトーンは、必要な基本的な組織構造を確立しながら、日用品の知覚的価値を高めます。

視覚的階層のサイズ

3羽の小さな鳥の隣に座っている1羽の大きな鳥のイラストを想像してみましょう。 これ以上の情報がなくても、この単純なグラフィックは、その要素間の関係を即座に伝えます。親と子は、集合的に家族を伝えます。

従来のグラフィックデザインでは、一般的な戦略は、最も重要な要素を最大にしてから、要素を階層的に縮小することです。 サイズは、最大の要素が最初に注目を集めるため、視覚的な階層を確立します。したがって、最も重要であるように見えます。

ヘッダー、セクション、引用符などの重要な違いを示すために、テキストの本文でもさまざまなフォントサイズがよく使用されます。 画像のキャプションなどの二次的なコンテンツは、通常、テキストの本文と競合しないように小さくなっています。

Instagramなど、最も広く使用されているビジュアルインターフェイスのいくつかを検討してください。 画面上の画像や動画と競合するものはありません。ほとんどの画面の60％以上を占めています。 UIの目的は即時です。

ウェブデザインにおける視覚的階層の典型的な構造を覆す例は、アート/デザインスタジオRo/Luのポートフォリオサイトです。 彼らの珍しいサイトは最も直感的ではないかもしれませんが、それは典型的なオンラインクリエイティブポートフォリオの視覚的な配置に挑戦します。 さまざまなプロジェクトが意図的にランダム化されているため、訪問者がサイトにアクセスするたびに異なるプロジェクトが支配的であるように見えます。これにより、訪問ごとにユニークで興味深いものになります。

各プロジェクトはユニークであり、等しく重要であると考えられているため、ほとんどのクリエイティブなデザインスタジオのポートフォリオでは作業が階層的に編成されていません。 Ro / Luサイトのデザインは、訪問するたびにさまざまなレベルの関心を持つダイナミックな構成を作成し、視聴者がスタジオの広範なポートフォリオを調査することを奨励します。 その結果、デザインスタジオの折衷的で学際的な性質は、コンテンツのランダム化された表示によって表されます。

視覚的階層における整列

視覚的階層における整列は、要素を空間的に接続することによって秩序感を伝えます。 非線形小説の章と同様に、グラフィック構成で線から外れた正方形を想像してください。 単一の要素が確立された構造を壊すとき、それは構成から際立っており、それによって他の要素と比較して意味を成し遂げます。

要素が視覚グリッドから、つまり秩序感から目立たない限り、硬い構図は停滞し、視覚的に面白くないように見える場合があります。 ずれ、つまり「グリッドを壊す」ことは、グラフィック要素に視覚的な重みを与える機会です。 この概念は、デザインの視覚的階層の基本です。

従来のビジュアルデザインの原則によれば、フレームの中央に配置された要素はより重要であるように見えます。 たとえば、プライマリコンテンツまたはインターフェイス要素を中央に配置し、ナビゲーション、メニュー、およびその他のセカンダリコンテンツを横に配置しないことがよくあります。

しかし、先駆的な設計者は現状に挑戦することを好みます。 インタラクティブなデザインが基本的な視覚的階層の原則を適用し、その境界を革新的な視覚的構成に押し込むと、興味深い新しい体験が生まれます。 異なる配置を使用することにより、要素間に新しい関連付けと意味が作成されます。

たとえば、DNAプロジェクトは、一連のばらばらの階層を使用して、ミュージシャンのアルバムの創造的な構成を伝達するサイトです。 アルバムの構成と同様に、サイトの構造は複雑です。

まず、訪問者は、伝統的にアルバム形式で整列されているアルバムのトラックをクリックして音楽を聴くように招待されます。 しかし、訪問者がサイトのDNA要素を再調整できるようにすることで、アルバムのコンセプトは、一連のトラックとしてだけでなく、時間の経過とともに断片化された要素の非線形構造として伝達されます。

視覚的階層の形状

形に関しては、単純なハートの形が、ほとんどのソーシャルネットワーキングUIでの「like」の潜在的な使用法をどのようにすぐに伝えるかを考えてみましょう。 重要性やグループを確立するには、4つのサークルのうちの1つのハートを検討します。 幾何学的な形は、形が要素に個性や意味を与える特定の意味を持っているという点で色のようなものです。

インタラクティブなデザインでは、幾何学的な形はテキストよりも迅速かつ普遍的に意味を伝えるため、効率的なコミュニケーションに不可欠です。 テキストの代わりに、多くの場合単純な幾何学的形状であるアイコン（記号）は、ほとんどのナビゲーションシステムおよびUIのアナログになっています。

画像の「いいね」、ファイルのダウンロード、電話のかけ方、メッセージの確認の背後にある目的は、アイコン（幾何学的形状）で簡単かつ直接伝えられます。 この形式の効率的なビジュアルコミュニケーションは、デジタル製品が多言語で膨大な数の国際的な視聴者にサービスを提供することが多いグローバル市場でますます重要になっています。

従来の印刷メディアとデジタルメディアのさまざまな相互作用モードを強調するために、実際の新聞で「芸術」セクションを検索する場合と、ほとんどのアプリで検索アイコンを使用する場合の違いを検討してください。 最近まで、ほとんどの新聞のWebサイトは、印刷されているかのようにページをレイアウトし、コンテンツをふるいにかける経験は不器用で方向感覚を失っていました。

従来のWebレイアウトを破り、Signes du Quotidien Webサイトは、基本的な正方形と円の形状を微妙な方法で使用して、訪問者にコンテンツを案内する独自の視覚的階層を提示します。 メニューはページの中央にあり、訪問者がクリックすると、サイトの4つのセクションを表す4つの色付きのドットが表示されます。 次に、訪問者はドットの1つを正方形にドラッグして、そのセクションに移動します。

視覚的階層における動き

動く要素は、停滞した要素のグループでより大きな視覚的重みをもたらします。視覚的階層の動きは、印刷では使用できない原則ですが、ビジュアルデザイナーのツールキットに確実に含めることができます。

モーションは、それ自体の直訳以外に何を伝えることができますか？ モーションは、要素を操作できる手がかりとしてUIでよく使用されます。 モーションの使用をさらに推し進めて、何かユニークなものを伝える方法として使用できますか？ ビジュアルヒエラルキーがコミュニケーションの効率だけでなく、埋め込まれた意味についてもある場合、モーションを不可欠なビジュアルコミュニケーションツールとしてどのように使用できるでしょうか。

I Rememberサイトの場合、メインインターフェイス（アニメーション化されている）は、対話を促すため、すぐに目立ちます。 モーションとインターフェイスは機能的なナビゲーションツールですが、ビジュアルデザイナーは、ウェブサイトの根本的な使命であるアルツハイマー病を伝える方法として、これらの要素が失われる可能性を利用しました。 組織が資金を調達している患者の色あせた記憶のように、ウェブサイトは積極的な相互作用なしにゆっくりと消えていきます。

情報の階層における音

サウンドは、印刷メディアでは使用できないもう1つのツールですが、階層の原則の範囲内でまだ開発されていません。 音は完全に非視覚的であるため、参照する規則はありません。 しかし、音は、気分や意味だけでなく、コンテンツを効果的に伝達するデザインツールにもなり得ます。 特定の音を運ぶデザイン要素は、相互にグループ化されている場合があり、最も大胆なものが最も重要であるように見えるか、グループからの分離を意味する場合があります。

要素に付加されたサウンドの品質は、コンテンツをすばやく識別、特性評価、または構造化するのに役立ちます。 関連する視覚的要素と対照的な音は、どのように新しい意味を伝えることができるでしょうか？

音自体は非常に複雑であるため、視覚的なものが知覚される前に、全体的なムードやデザインのメッセージが確立されます。 カラフルな背景がムードを確立するのと同じように、サウンドを背景に置いたり、モバイルのボタンのタップに応答するなど、UIでフィードバックを提供したりできます。 テクニックの原理は基本ですが、それを使用できる創造性は魔法が起こり得る場所です。

集団の創造的な仕事におけるその重要性のために、グッゲンハイムでのドイツの芸術家グループZEROの展示のために作成されたウェブサイトは、雰囲気のある背景として、またサイトをナビゲートするときのフィードバックの形として音を使用します。 太字の着信音はテーマの始まりを表す部分を確立し、3次プロジェクトは背景をクリックします。

視覚的階層の概念

視覚的な階層は単純な概念であり、理論を理解することは、適切に構造化された構成を実行する設計者の実際的な能力よりも実際には簡単です。 それにもかかわらず、優れたデザインを維持しながら新しい媒体で独創性を発揮することは困難です。

新しい媒体が常に登場し、困難な状況が衰えることはありません。まったく逆です。 現在、200を超えるさまざまな画面サイズが使用されています。 そしてそれはただの二次元のものです。 最初はインターネット、デスクトップブラウザ、次にモバイルとタブレットでしたが、今ではインタラクティブTV、IoT、ウェアラブル、仮想、拡張現実などのテクノロジーで新しい領域に移行しています。

デジタルメディアの限界を真に押し上げるデザインはまだ始まったばかりです。 うまくいけば、視覚的な階層と優れたデザインの原則がテクノロジーの急速な進歩に追いつき、デジタルメディアの経験が意味と喜びに満ちたままになることを願っています。

Toptal Designブログでさらに読む：

• 明確な視覚的階層でUXを後押し
• デザインの基礎–ビジュアル階層のガイド（インフォグラフィック付き）
• 設計原則：階層の概要
• スキャン性を向上させるためのUIデザインのベストプラクティス
• これらの成功したインタラクションデザインの原則でUXを後押しする