グーグルが提唱するマテリアルデザインにおけるユーザーフレンドリーの考え方

みなさん、こんにちは。吉積です。
今回はみんなが大好きなGoogleが提唱するマテリアルデザインの基本とユーザーフレンドリーを以下の動画を参考に説明していきたいと思います。

マテリアルデザインとは？

Googleが2014年より提唱しているデザインの考え方です。
近年のデザイントレンドとして取り上げられているので、ご存知の方は多いかと思います。
デザインのことがよくわからないという方も、下のような画面は見たことがあるのではないでしょうか？

左上に３本線のメニューボタン（ハンバーガーメニュー）があり、右下には大きな＋ボタンがある画面です。このようなデザインがマテリアルデザインの代表例です。
Googleがなぜこのようなデザインを提唱しているのか、その根本にある考え方やコンセプトを説明いたします。

マテリアルデザインが開発された背景

マテリアルデザインが開発される前の話です。数々の魅力的なサービスやアプリを世に提供しているGoogleですが、デバイスやディスプレイサイズ毎にそのデザイン、操作性が下の画像のようにバラバラでした。

これには問題がありました。デザインや操作性が違うので、ユーザーが同じサービスを使っているにもかかわらずイチから操作の仕方を覚えなくてはならないという問題です。
この問題を解決するために2011年にプロジェクトケネディというチームを発足しました。
プロジェクトケネディはサービス間でバラバラだったデザインに何らかの共通性を持たせ、異なるサービスでも同じユーザー体験を実現しようというものでした。

取り組みの一つとして一時期、Googleでは上の画像にあるようにブラウザ上部に黒いバーを設置して、そこに共通のメニューやアカウントの管理項目などを表示させていました。これによってデスクトップのブラウザでデザインがバラバラだった問題はある程度解決しました。
一方Androidでは別のデザイン体系としてHoloというデザインを開発しており、やはりデスクトップとモバイルでのユーザー体験が異なり、完全な問題解決には至りませんでした。

Googleはこの問題を自分たちのことだけではなくて、業界全体の問題ではないかと考えました。
世界ではGoogle以外にも魅力的なサービスやアプリケーションを開発している企業がたくさんありますね。AppleやMicrosoftなどが好例です。しかし、サービスや各プラットフォームにおいてユーザー体験が異なるのはいかがなものか。そこで考え出されたのがマテリアルデザインです。

マテリアルデザインの開発チームにはプロジェクトケネディのメンバーとAndroidのUIを設計者、そして多数のデザイナーが参加しました。
月日は流れ、2014年 Google I/Oでマテリアルデザインを発表しました。

上の画像を見ると、デスクトップ画面と２番目のスマホ画面の表示がほとんど同じに見えると思います。つまり、モバイルでの操作を理解していればデスクトップでも同じように使うことができます。

マテリアルデザインの4つの基本コンセプト

では、マテリアルデザインが具体的にどのようなコンセプトで設計されているのかということ説明します。マテリアルデザインには大きく4つのデザイン原則があります。

タンジブルサーフェス

ボタンに影がついているのでひと目で「押せる」ことがわかる。

紙として考えたときに重なると影がつく。

マテリアルデザインでは、画面を小さな四角い紙（英語でサーフェスという）によってできていると考えます。下地に紙があってそこに要素が乗っているイメージです。そうすることで様々な見方ができます。
紙は分かれることができます、またくっつくことも可能です。それから高さの違う紙が重なることで、上の紙が下の紙に影を落とします。
そうすることでユーザーは2つのものが乗っかっていることを理解することができます。
そして、自然な発想として、上のものをどけたその下に何かがあるだろうと説明の必要なく理解できる考え方です。
また影がつくことから、そこには高さという概念が入ってきます。マテリアルデザインでは影の大きさや強弱で違う高さを実現し、ユーザーがどこに注意を向けるべきかを一貫して知らせることができます。手前にあるものは押して欲しいボタンであり奥側にある背景などは押さなくてもいいということを簡単に知らせることができます。

印刷物のようなデザイン

キーラインを用いて要素を揃える。

グリッドレイアウトによる配置

使っている要素が紙ならば、その上のコンテンツは印刷物なのではないかという考えからマテリアルデザインには印刷物のセオリーやルールが使用されています。
グリッドレイアウトやキーラインなど昔からある良いガイドラインを用います。キーラインを設定し、そこに文字やアイコンを合わせて配置することで、綺麗なレイアウト構成が得られます。
またそれだけではなくて、デバイスが変化した時でもキーラインの位置を変えるだけで良いという柔軟性も得ることができます。

意味があるアニメーション

マテリアルデザインにおいてのアニメーションは装飾ではありません。ユーザーにとって意味のある、なんらかの情報を伝えることができるアニメーションを表現するということを決めています。
例えば手元にスマートフォンがある方はGoogleカレンダーの予定一覧で一つの予定をタップしてみてください。手前の方にぐにょっと予定の詳細が出ることがわかるかと思います。そして×ボタンを押すと、奥の方に返っていく。こういったアニメーションで、予定を押すと詳細が出る、×ボタンを押すと予定一覧に戻ります。
こうしたアニメーションで自分がしたアクションがどういった結果をもたらすのかが直感的にわかるようになっています。

アダプティブデザイン

これはマテリアルデザインが作られた目的と非常に関連しています。現代では複数のプラットフォームやデバイスがあり様々なスクリーンのサイズがあります。その中で画面サイズごとにどうやってデザインしていくのかという問題があります。それにたいしてのGoogleの回答がこのアダプティブデザインです。下の画像では同じアプリを表示しています。

スクリーンのサイズごとに表示できる要素の大きさや数には限界があります。例えば上の画像においてデスクトップやタブレットでは左には連絡先一覧が右には詳細が表示されています。一方でスマホは一覧画面だけが先にあり、項目をタップすると詳細が出るという仕組みになっています。画面サイズによって最適な見え方になるように表現しているということがアダプティブデザインの考え方です。
端的に言えばぱっと見のデザインは違っているように見えるけどもやっていることは同じと理解できるデザインになっています。

以上の4つがマテリアルデザインを構成する重要なコンセプトです。

Googleが考えるユーザーフレンドリー

Googleの理念として「10の事実」があります。

その一つめに『ユーザーに焦点を絞れば、他のものはみな後からついてくる。』といったものがあります。これはつまりユーザーにとっての利便性を第一に考えているということです。上に書いた開発背景を知るとマテリアルデザインはまさにこの思想から生まれたものだということがわかると思います。
そしてこの利便性の追求は徹底的に研究されています。それを証拠にGoogleではマテリアルデザインに関する厳密なガイドラインを明示しています。
参考資料はこちらから マテリアルデザインのガイドライン
基本的なレイアウトのことから、利き腕によってのアイコンの向きや文章の書き方まで、げんなりしてしまうほど細かなルールが決まっており、それが随時アップデートされていきます。
マテリアルデザインを知れば知るほどに「ユーザーにとって最高のウェブ体験を実現する」というGoogleの理想に向けての気概を感じることができました。
また、マテリアルデザインを作ってみたいという方のためにGoogleでは基本資料が公表されている他、アイコンやコンポーネントもウェブ上にアップされています。私もしがないフリーランスデザイナーの一人ですが、マテリアルデザインを参考に、より良いデザインを提供していこうと思っています。

参考資料

※記事中の内容や画像は【Develop】マテリアル デザインでよりよいユーザー体験を実現しようやマテリアルデザインのガイドラインより引用させていただきました。