あえて「表層」に注目する
UIデザインはグラフィックデザインではないし、ただのスタイリングでもない。UX
こうした言い方が当たり前になってずいぶんと経ちます。逆にいうと、以前は、グラフィックデザインと同等に受け止められていたり、ビジネスドメインが軽視されていたりしたということです。それだけUIデザインやUXデザインへの理解が深まったわけです。
けれど、UIデザインには、グラフィックデザインやスタイリングという面があるのも事実です。グラフィックデザインやスタイリングといった
では、
「影」が空間を作り出す
UIデザインにおいてドロップシャドウをはじめとして多用される影ですが、ただの装飾やトレンド表現にとどまるものではありません。同書では、UIデザインを空間デザインとしてとらえるべきだと指摘します。空間デザインとしてとらえたとき、強力な道具となるのが影です。
三次元的な物体の見え方を二次元平面上に表現できるため、ユーザーの知覚に三次元空間を再構築できます。言い換えると、二次元平面上のX軸、Y軸に加えて、本来は実在しないZ軸を生み出せるのです
「影」のもたらす効果
影はさまざまな効果をもたらします。
- 実在感の付与
- 画面に
「貼り付けられた」 のではなく、デジタル空間内に 「存在する」 という感覚を生み出します。 - インタラクションの可能性の示唆
- 浮いている要素は
「押せる」 「動かせる」 「選択できる」 という期待を生み出します。 - 視線の誘導と注意の制御
- 強く深い影を持つ要素に、より多くの注意を向けられます。
- 階層構造の明確化
- 人間の脳は、影の情報から瞬時に深度マップを構築できます
（図2） 。どの要素が前面にあり、どの要素が背面にあるか。あるいは、どの要素がほかの要素を含んでいるか。こうした空間的な関係性を、言語や記号に頼らず、即座に伝えられます。
- 認知負荷の軽減
- 影による階層構造の表現を、ユーザーは無意識に理解できます。そのため、余計な認知負荷を軽減し、本来のタスクに集中できます。
階層構造を明確にする
階層構造の明確化について少し掘り下げましょう。
階層構造を示す要素の一つは、距離です。たとえば、近い距離にあるものは関係が深く、遠い距離にあるものは関係が浅いというものです。影によって、距離をコントロールできます。
二次元平面に要素を配置した場合、距離は当然、要素間のマージンのみで作られます。一方、影によってZ軸を作り出して三次元空間に配置すれば、平面上のマージンに加えて立体的な距離を生み出せます。
たとえば、Y軸で3px離れた2つの要素の距離は当然、3pxです。一方、これにZ軸で5pxの差を加えると、三次元空間での距離は約5.
三次元空間に立体的に配置することによって、要素同士の関係、階層構造をより豊かに表現できます。たとえば、重要な情報を手前に、補助的な情報を奥に配置することで、ユーザーの視線の流れを自然にコントロールできます。
こうした手法を同書では
物理的な性質と現実感
影を効果的に使うには、いくつかの配慮が必要です。まず影の物理的な性質を理解する必要があります。
現実世界で、影は共通の光源から生まれます。たとえば、太陽の下では、すべての影が同じ方向を向きます。室内で複数の光源がある場合も、一つひとつの光源に着目すれば、そこから生まれる影は同じ方向を向きます。
- すべての要素の影が同じ方向を向いている
- 高い要素ほど影が長い
- 光源からの距離に応じて影の強度が変化
こうした法則に従うことで、影に現実感が生まれ、空間全体が一貫したものとなります。反対に、次のような場合、ユーザーは無意識のうちに違和感を覚えます。
- 異なる方向を向く影が混在する
- 光源の位置と影の方向が矛盾する
- 要素の形状と影の形が一致しない
- 影の配置が重力に反する
影のもつ効果を適切に発揮できないだけでなく、UI全体の信頼性を損なうことにもつながります。
色、余白、文字、ぼかし、形……
ここで紹介したのは同書で取り上げる影のごく一面です。
どれもUIデザインでは見慣れたものばかりですが、本書