マテリアルデザインについて知ろう
かつてはフラットデザインが流行しましたが、現在はマテリアルデザインが主流となっています。マテリアルデザインとはどんなものなのか、概要と特徴について解説します。
マテリアルデザインとは
マテリアルデザインとは、直訳すると『物質的なデザイン』です。その名のとおり、デザインを物質的・物理的にすることで、現実世界に存在する物質と同じように扱えることを目的としています。
例えばWebサイトやスマートフォンアプリに、影のついた立体的なデザインのボタンが配置してあれば、誰が見ても「これはボタンだ」と認識できます。これは現実世界に存在するボタンを私たちが知っているからです。
このように、すでに存在している物質をデザインに反映することで、誰が見ても直感的に意味が分かるよう意図したデザインがマテリアルデザインです
マテリアルデザインは2014年6月にGoogle社よりデザインのガイドラインとして発表され、現在ではGoogleが提供するサービスのほとんどに使われているほか、多くの企業でも採用されています。
マテリアルデザインの特徴
マテリアルデザインは色数を抑え、平面画面の上に立体を表示する表現を用いるのが大きな特徴です。
光や影のほか、重さなどの表現を平面のデザインに取り入れることで、フラットデザインのシンプルさに、ユーザーに向けた利便性を持たせることを意識しています。
例えばスマートフォンのアプリで二つの要素が重なって表示されたとき、下の要素に上の要素の影が入るようなデザインが、マテリアルデザインの特徴です。
なお、マテリアルデザインには厳密なルールが定められており、できるだけこのルールに則ったデザインを用いることが求められます。このルールによって自然とデザインの持つ意味が共通化され、ユーザーはデバイスやアプリが変わっても迷うことなく利用することができます。
基本の概念を押さえよう
マテリアルデザインは『紙』と『インク』の二つの要素で考えられ、これらの要素を使って平面上に物質的な立体感を持たせるデザインです。それぞれの要素について解説します。
ボタンやアイコンなどの紙要素
『紙要素』はボタンやアイコンなどを配置する土台を指し、現実世界の紙と同じように、重ねることによって厚みや影が発生するという概念を持っています。
また、紙要素は長方形か円形で表され、伸縮・回転・融合といった変形が可能ですが、多角形にすることはできません。下の要素が上の要素を貫通して表示されることもできません。基本的には現実世界の物理法則に従っている必要があります。
色などのインク要素
『インク要素』は紙要素の上に配置する文字や写真、動画などを指します。紙の上にインクを使って色や文字を表現するイメージです。
前述のとおり紙要素を多角形にすることはできませんが、インク要素で多角形を描くことで表現することができます。
画面の奥行きと影
マテリアルデザインは現実世界と同じように扱うことを目的としているため、平面上に奥行きや影を用いて3次元を表現します。
前の要素と後ろの要素がどれくらい離れているのか、距離感を影の表現で出すことで、現在どの要素がアクティブなのかを示すことが可能です。
ボタンの主な種類と使い方
マテリアルデザインにはさまざまなボタンがありますが、特に重要な3つのボタンについて解説します。
FABボタンの使い方
『FABボタン』はフローティング操作ボタン（Floating Action Button）の略で、主に重要な操作を行う目的で使われます。
FABボタンは重要であることを示すために画面の一番上に配置され、円形で影を付けることが定められています。また、直感的に操作ができるよう円の中央には文字ではなくアイコンを使います。
例えばメールやカレンダーアプリの右下に円形にプラスのアイコンで描かれたFABボタンがあれば、直感的に『新規作成ボタン』であることが分かります。
浮き出しボタンの使い方
『浮き出しボタン』は影を付けて立体感をもたせた長方形のボタンです。FABボタンほど重要ではないものの、確実にボタンであることを知らせる必要があるときに使われます。
例えばアプリのインストール画面で、アプリの説明など文字情報が多く並んでいる中に『インストール』と書かれた浮き出しボタンがあれば、ユーザーは迷うことなくインストールすることができます。
フラットボタンの使い方
『フラットボタン』は影の付いてない立体感のないボタンです。他のボタンのように目立たないため、他の要素に重ねて使うことに適しています。
ただし、ボタンであることを認識できないと周囲のテキストに埋もれてしまうおそれがあるため、色を変えるなどの工夫が必要です。
まとめ
ユーザーの利便性を重視したマテリアルデザインは現在の主流デザインであり、Googleを始め多くのサービスで採用されています。
Webサイトやアプリなど、さまざまなシーンでマテリアルデザインは活用できます。デザインを仕事にするのであれば、必ず押さえておきたいデザインだと言えるでしょう。