そもそもMaterial Designって?

Googleは2014年にMaterial Designというデザインシステムを公開しました。そして2017年1月時点で、このデザインを活用したアプリがGoogle Play上に100万以上も公開されています。

この連載では、「Material Designとは何か」「どのようにMaterial Designを利用してアプリを作るのか」を解説していきます。

なぜMaterial Designが生まれたのか

かつては「パソコン」が唯一のインターネット環境を提供するデバイスとして存在していましたが、この10年で「スマートフォン」や「タブレット」「ウェラブル端末」「コネクテッドカー」「テレビ」など、さまざまなデバイスから利用できるようになりました。

しかし一方で、Googleの「検索」や「メール」といったさまざまなアプリ・サービスは、増え続けるデバイスごとに、異なるユーザーインタフェースで提供していました。

上図は2010年当時、デバイス別にキャプチャしたGmailの画像です。それぞれのインタフェースがいかに異なるかが如実に現れています。デバイスごとにインタフェースが異なると、アプリのユーザー体験が分断されてしまい、操作方法がデバイスごとにバラバラで覚えられないという状況に陥ります。

この問題を解決するため、2011年にGoogleでUI共通化プロジェクトが始まりました。これにより、デスクトップとモバイルWeb(iOS)において、Google提供サービスのインタフェース共通化が実現しました。

ただ、このプロジェクトと時を同じく、Androidにおいて「Holo」というデザインシステムを公開しました。

その結果、GmailユーザーはデスクトップとAndroidで異なるUIを利用することになり、こうした二つの異なるUIが混在する事はサービスを利用する上での障害になりかねませんでした。

そこで社内のデザイナーを集めて、異なるデバイス間でも統合されたUIを提供するプロジェクトがスタートしました。それがMaterial Designなのです。このプロジェクトは、単に統合UIを提供するだけにとどまらず、Holo Designで外部のデザイナーやデベロッパーから「有益なプロジェクト」というフィードバックを得ていたため、オープンソースとして公開する前提でスタートしました。

Material Designを使うメリットは?

Material Designは、どのデバイスであっても共通化されたUIを実現する「クロスプラットフォーム」ですが、Android OS標準のデザインシステムであることもまた大きなメリットといえます。2014年11月リリースの「Android 5.0 Lollipop」以降で採用されており、ファーストパーティアプリ(Google製アプリ)と同じ操作方法で「ユーザーにとって馴染みやすいインタフェースになる」というメリットがあります。

では「Material Design」は、どういうデザイン意図のもとに制作されたのでしょうか? 基本的な概念として、下図における3つの要素(プリンシパル)によって構成されています。

• マテリアルサーフェス
• 印刷物のようなデザイン
• 意味のある”動き”

マテリアル サーフェス

Material Designは現実空間における「自然の原理」をデジタルデバイス空間上で表現しています。そのため各アプリは、下記のような法則で構成されます。

• アプリを構成するパーツがサーフェス(面)でできている
• 各サーフェスは異なるZ軸(奥行き)を持っている
• Z軸が高いサーフェスは、低いサーフェスに対して影を落とす
• サーフェスは移動したり拡大縮小が可能

この原理を表現したのが下記の図になります。

このように、アプリのパーツを異なるZ軸の高さを持つサーフェスとして構成する事で、アプリのヒエラルキーを視覚的に提供する事が可能になっています。また各サーフェスは、固定の幅や高さを保持せずに、状態によって変化する事が可能となります。

印刷物のようなデザイン

先ほど、Material Design を「現実空間における『自然の原理』がベース」と表現しましたが、これはサーフェス上に乗る「コンテンツ」にも同じ事が言えます。グラフィックについては、デジタルなデバイスが登場するずっと昔から、「グラフィックデザイン」や「エディトリアルデザイン」といった領域で使われてきました。Material Designはこれらのデザインシステムから影響を受けており、デジタルデバイス向けに再構築しています。

その鍵となるのが「色」です。Material Designではプライマリーカラーとアクセントカラーを設定します。プライマリーカラーはアプリケーション全体のブランディングに繋がるもので、アクセントカラーはボタンなどのインタラクションを発生させたいパーツに設定します。

右の図は、ブルーをプライマーカラーにし、ピンクをアクセントカラーに設定した例になります。

• グリッド

Material Design では、レイアウトに用いる際のグリッドを8dp(density-independent pixels)で構成します。つまり、すべてのパーツは8dpの倍数でできています。このようにグリッドに沿ってパーツを配置する事で、ユーザーがコンテンツを見やすい形で構成する事が可能となるのです。

• 画像・写真

画像や写真は、アプリを構成する上で重要な項目になります。Material Designでは大きなイメージを利用する事で、アプリのブランディングを表現できるようにしています。下図の例ではツールバーなどで利用しています。

意味のある”動き”

Material Designの世界では「動き(モーション)」も大きな意味を持ち、美しさと流動性を備えた空間的関係、機能性、意図を記述するために使用されます。例えば、現実空間では「モノ」が一瞬で位置Aから位置Bに移動することはありません。 位置が変わる際に必ず「時間」が発生しており、状態Aから状態Bに変化する際には「モーション」が行われます。

そのため、Material Designではエフェクトの為に不用意にアニメーションを使うのではなく、状態Aから状態Bに変化した事をユーザーに明示する目的でアニメーションを活用します。

こちらのカレンダーアプリの事例を見てもらうとわかるように、スケジュールの一覧をタッチすると、詳細画面がアニメーションしながら表示されます。このようなアニメーションの使い方は、「一覧」から「詳細」へと項目が遷移した事を効果的に伝えるられるため、ユーザービリティの向上に寄与します。

また細かいポイントとしては、サーフェスが移動する速度を均一にしてしまうと、過度に人工的な動きになってしまいます。そこで、徐々に加速するような移動効果をつける事で、より心地良いアニメーションエフェクトをユーザーに提供しています。

第一回は、Material Design を構成する3つの要素である

• マテリアルサーフェス
• 印刷物のようなデザイン
• 意味のある”動き”

の概念について説明しました。

次回からは具体的に、「アプリ開発において、どのようにMaterial Designが使えるか」を解説していきます。