UI Design : Material Design とは？？

Material Design が発表されてから、Google謹製のInboxやGmailからhatenaブログのAndroidアプリなど対応したアプリが増えてきた印象があります。

Introduction - Material design - Google design guidelines

今後Androidアプリを作るうえで、意識しなければならないデザイントレンドだと思うので、一回りしてみました。

Material Designの解釈

Design Languageを理解するために、まずはIntroductionとWhat's Material ? にさっと目を通しました。 僕の印象としてはこれまでAppleが得意だったSkeuomorphic Designと最近のトレンドだったFlat Designの中間くらいの概念を提案しているのかなと思いました。

Skeuomorphic DesignとFlat Design

Skeuomorphicでは、実際にユーザの周りに既に存在しているモノの物理的な特徴などを再現することで、親しみやすさや理解しやすさを助けるようなデザインをしていましたが、Flatでは大きく舵を切って必要な情報そのものにフォーカスして、それ以外の概念をなるべく取り除くようなミニマルな表現になりました。

Flat Designでは情報を情報としてそのまま扱うため、必ずしも我々の生活している世界のルールが適用されない側面があると思っています。 従って、時にわかりにくい表現や挙動も起こりえます。

近年Flat Designが広まりつつあるのはモバイルコンピュータの普及によってユーザの多くが情報世界に触れる機会が増え、そのような理解しやすさのベースとなる経験知が変化したことで、必ずしもSkeuomorphicのような、ある種冗長な表現をしなくてよい土壌ができたということが背景にあると思います。

その中間にあるMaterial Design

Material Designは、「そうはいっても、ある程度身の回りにあるモノの特性に沿った挙動や表現をした方がいいんじゃない？」という提案をしていると思います。その提案の答えが「Material」です。

「Material」は我々の活動している3次元世界におけるオブジェクトの動作をそのまま模倣することが求められています。 光によって影ができ、必ず1dp以上の厚さを持ち、UI上は見えにくいけど画面から垂直にZ軸を持って階層構造を構成します。 動作（アニメーション）やMaterial同士の関係は物理的な特徴に倣います（衝突時に突き抜けないなど）。

かといって、Skeuomorphicほど過度に実際のモノを模倣しません。 例えばテキストが記載されたオブジェクトは、あくまでも抽象的なオブジェクトとしての振る舞いだけを行い、「紙」のように意味を持った特別な物理特性を倣うことはMaterial Designでは要求されていません。

従って、Skeuomorphicに比べると非常にシンプルで本質的なコンテンツたる「情報」の邪魔をしないという意味でFlatに近いですが、 Flatほど情報をそぎ落とさずに、抽象的に物理的な模倣をすることでSkeuomorphic的な理解しやすさを提供する、という世界観ではないかと思います。

どうやって実装するのか？

Android Frameworkとしてのサポート状況をLollipop SDKの様子をちゃんと見ていないですが、Material Designを実装するための外部ライブラリが下記にまとまっていました。

いろいろ要素がありますが、ボタンやプログレスなど多岐にわたるパーツを提供しているのは「Material Design Library」のようです。

navasmdc/MaterialDesignLibrary · GitHub

このライブラリを中心に、ないものを他で補完するのがよさそうです。気になるのは影の深さとか、アニメーションとか微妙なデザインの違いがライブラリ差分ででたりしないのかなというあたりでしょうか。

次回、これを使ってFloating Buttonなどいくつか触ってみたいと思います。