こんにちは、デザイナーのスライです。
GWはElectric Zooに行ってきました。
アオキ最高!!Cake Me!!!

さて、前回のコラムではiOSヒューマンインターフェイスガイドラインについて書きました。
iOSを書いたならば、こちらも書かざるを得ません。

怒りのUI 第三回目「Googleのマテリアルデザインから学ぶUI設計」です。

マテリアルデザインとは

「Material Design」は、Googleが提唱しているデザインガイドラインです。

スキューモーフィズムを排したデザインは、フラットデザインに通じるものがあります。
が、マテリアルデザインには「光と影」という概念が存在します。

各要素はシンプルでありながら、フラットデザインの弱点である「押せる感」を、
「光と影」で補ったのが最大の特徴と言えます。

それでは、以下でマテリアルデザインの概念について説明していきます。

マテリアルデザインのコンセプト

「紙」と「インク」をメタファーとして設計されています。

机の上に何枚もの「紙」が重なり合っています。
紙は、「インク」によって様々なデザインが施されています。

現実世界と同じで、紙は他の紙を貫通することはできません。
X・Y軸で動かすことは可能ですが、Z軸で動かすことはできないのです。

透明なガラステーブルの下で紙を動かすことを想像すると、
イメージがつきやすいと思います。

さて、これまでマテリアルデザインのコンセプトについて説明しましたが、
次で「光と影」の概念について説明していきます。

マテリアルデザインの光と影

マテリアルデザインでは、実際に「光」を表現する必要はありません。
画面全体が光源に包まれた状態だからです。

光があれば、当然影ができます。
影は、要素が位置する高さを表現します。

全ての要素は1dpの厚さでできています。
一つ目の要素は1dp、その上の要素は2dpの位置にあることになります。

Aは最背面に位置するので、影は存在しません。
Cは2dpの位置にありますが、後ろにBがあるため、影の大きさはBと変わりません。
D（フローティングアクションボタン（以下FAB））は全ての要素よりも高い位置にあるので、
他のどの要素よりも影が大きくなっています。

このように、光と影により要素間の奥行が視認できることで、
要素と要素の階層関係を素早く伝えることが可能になっています。

また、マテリアルデザインのもう一つの特徴であるアニメーションも、
この概念があることで表現の幅が広がっています。

サンプルは、「D」を押したときのアクションを想定しています。

ボタンを押すということは、その上にあるディスプレイを押す、ということになります。
ディスプレイを押すと、ディスプレイとボタンの距離は縮まるためボタンは大きくなります。
距離が縮まると、ボタンの高さは低くなるので影は小さくなります。

各要素はシンプルでありながら、光と影があることで「material=物質的」を表現し、
直感的でストレスレスな操作感を実現しています。

さて、次でこれらマテリアルデザインの概念を、WebサイトのUI設計に落とし込んでみます。

マテリアルデザインをWebサイトへ

マテリアルデザインをWebサイトのUI設計へ落とし込む際、
レイヤーの概念と、矛盾が生じない情報設計がポイントになります。

レイヤーの概念を意識する

最も重要なのは、レイヤーの概念を意識することです。
平面で考えがちなWebサイトを、Z軸の視点を持って考えましょう。

影を付けることでコンテンツの境目が明確になり、要素間の関係が瞬時に判断できます。
また、影があることで、ユーザーはサイトのアクションを予想することができます。

サンプルでは、ナビゲーションバーの影がコンテンツの影よりも大きいです。
それは双方が異なる高さに位置していて、重なり合うことを示しています。

上記から、恐らくナビゲーションバーは追従するのだろう、とユーザーは予想ができるのです。
予想できなくても、追従した際に違和感は感じないでしょう。

矛盾が生じない情報設計をする

マテリアルデザインにおいて、最も重要な要素とされるFABは1つのみ設置可能です。
最も重要な要素が複数個あっても、それは「最も」ではなくなってしまいます。
サイトを俯瞰的に見て、矛盾が生じない情報設計を心がけましょう。

追従する最も重要な要素が二つあるということは、それは情報設計に矛盾が生じている証です。
情報設計に矛盾が生じれば、ユーザーは当然混乱してしまいます。

サンプルの左側で説明すると、ナビゲーションバーとページトップへのボタンです。
同列になっているこの二つの優先順位を明確にしたのが、サンプルの右側です。

情報設計の矛盾が解消され、スッキリしたと思います。

まとめ

マテリアルデザインは、様々なデザインガイドラインの中でも、とても洗練されたものと言えます。
紙とインクをメタファーに、ユーザーが快適に操作できるヒントが沢山詰まっています。

前回はモバイルファーストの話から、iOSのヒューマンインターフェイスガイドライン。
そして今回は、Googleのマテリアルデザインを紹介しました。

どちらも非常に優れたデザインガイドラインといえますが、勘違いしてはいけないのが、
これら全てをWebデザインに落とし込めばいいというわけではないということです。
なぜなら、どちらも一つの企業が提唱しているデザインガイドラインだからです。

Webサイトというのは、デバイスを横断したユーザーのためのものです。

例えば、Androidの標準UIでナビゲーションドロワーというものがあります。
WebサイトでこのUI設計を流用すると、Androidユーザーは違和感なく操作できますが、
iPhoneやその他端末のユーザーは戸惑うことでしょう。

不特定多数の端末で閲覧されるWebサイトにおいて、
ある特定の端末へUIを寄せるというのは、ナンセンスな話と言えます。

あくまで人が心地よく、ストレスなく操作できる理論を、
WebサイトのUI設計に落とし込むことを意識しましょう。