近年のUIデザインでは、不必要な要素を省き、機能性に焦点を当てるのがトレンドになってきています。デザインの機能面はプロダクトの成功への鍵である一方、その機能面をサポートするという意味で、ビジュアルへの細かい配慮も同じくらい重要です。
この記事では、シャドウなどの視覚的な要素がどのように処理された情報を伝達するものなのかを見ていきましょう。
UIの進化 : 疑似3Dからウルトラフラットデザイン
インターフェイスにおける奥行きの幻覚
ユーザーの見るスクリーンは平らですが、デザイナーやエンジニアたちはスクリーン上の全ての物が3Dにみえるように多大など労力を割きました。疑似3D効果（シャドウ、グラデーション、ハイライト）は、ユーザーが操作可能な動作をひと目でわかるようにするために昔から使われてきました。
このような3D効果は、インターフェイスに奥行きの幻覚をもたらし、ユーザーがビジュアル的なヒエラルキーを理解し、どの要素がお互いに作用し合っているかの理解を促します。
- 浮き上がって現れる要素は、強調されているように見えます。このテクニックは、ボタンを表すものとしてよく使われています。
- 沈んで（若しくは、へこんで）見える要素は、記入できるように見えます。このテクニックは、記入フィールドを表すものとしてよく使われています。
Windows 95 のダイアログボックスでは、シャドウとハイライトを使うことで3Dエフェクトを作り出せることを示しています。
ボタンは浮き上がって見え、フィールドは沈んで見えます
「スキューモーフィズム」は、このアイデアを発展させたものです。それぞれのUIの要素が、実世界の物質を再現したような意匠となっている、いわば模倣の言語です。
デジタルの世界では、スキューモーフィズムは多くの場合Appleの製品（特に7以前のiOS）と関連付けられ、Appleの製品をみることによって、それがデジタルデザインにおいてどう見えるのかの良い事例となっています。
Appleの「ニューススタンド」アプリのデザインを見てみましょう。スキューモーフィックな本棚は、三次元の「棚」と木目のテクスチャで構成されており、本棚というメタファーにより、ユーザーがインターフェイスをどのように使うかを直感的に理解できます。
Apple iOS6のニューススタンド。シャドウとテクスチャが現実のものを表すように作られています。
しかし、初期の疑似3D GUIとスキューモーフィズムは、しばしば扱いにくいインターフェイスをよく生み出していました。GUIは重たく、視覚的に混乱するものになる傾向にありました。
シャドウを取り除くと要素を見つけづらくなる
どんなものにもリアクションというものがあるものですが、デジタルデザインの世界では、「フラットデザイン」がスキューモーフィズムに対するリアクションでした。スクリーン上のどんな物も、本当の意味で三次元にはなれないのだから、架空のデコレーションを取り去ってしまって、機能性に焦点を絞ればいいのではないか？ というのがフラットデザインの意味するところです。
三次元のデザインやスキューモーフィズムとは異なり、オリジナルのフラットデザインは、実世界の見かけですら再現しようしません。文字どおりフラットです。クリック可能な領域や入力可能な領域を示す、光源が当たるモノがないので、シャドウがつきません。
Windows 8のマイクロソフトの「メトロデザイン」をちょっと見てみましょう。
Windows 8 UI は、ウルトラフラットデザインの一例です。
全てがフラット過ぎるように見え、実際「Change PC settings（PCの設定を変更）」などはクリックできるボタンというよりは、テキストラベルに見え、結果として多くのユーザーが、このオプションを見落としてしまいます。
ユーザーがこのようなGUIを見落としたり、間違って解釈したりしたりするときは大抵、要素があまり区別されていないか、動作可能であると視覚的に気付かれにくいことが理由となります。
従来のGUI デザイナーが、ウルトラフラットデザインとは対照的にオブジェクトにディテールを持たせたり、実行性をもたせたのには理由があります。
光ったり、ボタンが浮き上がるような効果だったり、または、入力フィールドが空であることを表すシャドウの挿入は総称してシグニファイアといいますが、アプリによって多少の変化はあっても、ユーザーは大抵の場合以下の２つの仮定をおきます：
- 強いシグニファイアを持つ要素は、おそらくクリックできる
- 強いシグニファイアがない要素は、おそらくクリックできない
フラットデザインの前と後のシグニファイアの効果 参照 : NNGroup
つまり、視覚的な区分けなどを取り除くなど、シグニファイアを欠いたフラットデザインはNGということです。
シグニファイアは、どこがクリックやタップできるかを知る為に必要なものです。知覚的な手がかりが、インターフェイスをどのように使うかを理解するのを助けます。シャドウは、どのUI要素を私たちが見ているかを人間の脳に伝えるのにとても貴重な情報なのです。
ほぼフラットデザイン
近年のデザイナーは使いやすさやフラットデザインの問題に気付き始めていて、その結果、もっとバランスを持ったフラットデザインの改良したものが登場しています。
この新しい解決法は、「ほぼフラット」若しくは「フラット 2.0」と称されます。この新しいデザインスタイルは、ほぼフラットですが、UIに深みを持たせる為に、微妙なシャドウ、ハイライト、レイヤーを使用します。
Googleの「マテリアルデザイン」は、ユーザーがインターフェイスに意味を持たせ、内容の視覚的なヒエラルキーを解釈するのを促すため物理の法則を使ったフラット2.0の良い例です。シグニファイアを残したまま、視覚的なシンプルさを保っています。
Android GUIの強力なZ深度
シャドウとエレベーション
最新のインターフェイスはより階層付けられていて、z軸をうまく活用しています。この方法は、インターフェイスに深度を与え、その体験をより実体的なものにします。
そしてシャドウこそがこの深度を演出し、画像や要素をページから浮き立たせます。これらは、邪魔になることなくデザインに面白味を与え、ユーザーがインターフェイスの意味を理解するのを助けます。
シャドウがついているところは、クリックできる要素であることを示しています。
シャドウは要素のヒエラルキーをユーザーに伝えるのを助けます。２つのオブジェクトを区別することを助けたり、またあるケースでは、あるオブジェクトがもう一つのオブジェクトの上にあるということの理解を促したりします。
シャドウなしでは、鮮やかな丸い円が、背景とは分かれていることを示すものが何もありません。
シャドウは、動作の方向性などを視覚的に示します。
シャドウは、オブジェクトのエレベーションが上がるにつれて、だんだん柔らかく大きくなり、エレベーションが下がるにつれて、だんだん固く小さくなります。
エレベーションは、z軸に沿った２つの面の相対的な深さや距離のことを指します。シャドウは、エレベーションと切っても切り離せない関係にあります。
マテリアルデザインでの２つのオブジェクトに対する複数のエレベーションの測度
ユーザーがクリックできるか確信のないときは、クリックやタップした後すぐに、安心させる必要があります。ここで、エレベーションが登場します。オブジェクトのエレベーションが、シャドウの有無を決定します。
ボタンを押下の際の、浮かび上がる演出。 参照 : materialup
カードはアクティブな状態を示しています。
まとめ
ユーザーの目的を邪魔する可能性のある、強いシャドウや派手なグラデーション、複雑なライティングエフェクトは使うべきではありません。しかしながら、さりげないシャドウやその他の「ノンフラット」なユーザーインターフェイスは、重要な情報の価値をもち、インターフェイスのシグニファイアとなるものなので、有用です。
ユーザーはシンプルで理路整然としたものを好みます。デザイナーは人間の知覚を誘導できるようなインターフェイスをデザインしなければなりません。近年のインタラクションデザインの成功事例を見ればわかりますが、成功するのはこのような基礎を忠実に盛り込んでいるものばかりです。
