Material Designについて整理し直す

2018/12/24

Android開発をしていると「Material DesignってAndroid向けのUIコンポーネントでしょ?」という気がしてくるのですが、これって正しくないんですよね。ちゃんと理解するためにMaterial Designについて整理し直してみました。

Material Designとは?

Google謹製のデザインガイドラインです。

公式サイトのIntroductionによると

Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.

とのこと。直訳すると「優れたデザインの古典的な原則に技術や科学の革新を組み合わせたビジュアル言語」という感じでしょうか。

2014年に初めて発表され、その後も継続的にブラッシュアップされています。直近だとGoogle I/O 2018で大きなアップデートがありました。とは言え、「現実世界をモチーフにしたCross-platformなデザインガイドライン」という基本的なコンセプトは初出から変わっていません。

現実世界がモチーフ

ディスプレイという平面の中に現実空間を持ち込みます。現実空間なので2Dではなく3D。影や質量が存在します。

そして、配置されるコンポーネントは「紙」と「インク」をメタファーにして構成されます。

「紙」なので並べると間に隙間ができます。重ねると影ができます。重なり具合によって影の表現も変わります。

コンポーネント上に描画される諸々(テキスト、アイコン、写真などなど)は「インク」です。紙にインクが印刷されているイメージです。

また、ユーザー操作に対するインタラクションやコンポーネントのアニメーションも物理法則を意識して定義されています。

現実世界をモチーフにすることでユーザーに対して直観的で一貫性のあるUIを提供する、というのがMaterial Designの意図するところです。

プラットフォームに依存しない

特定のプラットフォーム向けではなく、Cross-platformな言語です。Android専用というわけではありません。モバイル専用というわけでもないため、スマホの小さい画面だけでなくタブレットやPCの大きな画面も考慮されています。

もちろん各プラットフォームでMaterial Designを実現するためにはライブラリの力を借りることになるわけですが、大事なのはプラットフォームが変わってもルールは変わらない、ということ。

プラットフォームが変わってもユーザーに一貫した体験を提供できます。

コンポーネント集ではない

ボタンやリスト、ダイアログなどの各種コンポーネントが定義されており、どうしてもそこに目が行きがちですが、Material Designはコンポーネント集ではなくvisual languageです。

レイアウト、タイポグラフィ、配色、サイズ指定、アニメーションなど、デザインに関する様々なルールが定義されています。

参考URL




おススメ