コラム

マテリアルデザインとは?フラットデザインとの違いも解説!

2020年09月09日

マテリアルデザイン

マテリアルデザインとはGoogleが推奨する「物質的なデザイン」を指すデザイン手法のことで、ユーザーが直感的に操作ができることを目的としています。近年はスマートフォンやタブレットからWebサイトを見るユーザーも増えたことから、どのデバイスで閲覧しても最適化しやすいようにデコラティブな要素を少なくし、シンプルなデザインを基本としています。
今回はマテリアルデザインの基本やフラットデザインとの違い、またマテリアルデザインを作成する際のポイントを紹介します。

マテリアルデザインとは

マテリアルデザインとは、ユーザーが感覚でコントロールや理解ができることを目的としてGoogleが作成したデザインガイドラインのことです。
マテリアルとは「物質的な」という意味で、現実世界に存在する物体の光や影、奥行き、重なりなどをフラットなデザインに取り入れることで、視覚的に立体感のあるデザインになり感覚で操作を可能にさせることを狙いとしています。
AndroidやiOSだけでなく、Google製品やアプリのデザインにマテリアルデザインは採用され、私たちが普段利用しているWebサイトやアプリなどに浸透しています。

マテリアルデザインの特徴

①紙やインクのメタファーで成り立っている

マテリアルデザインは、Webサイトの要素を現実世界の印刷物と同じように捉え、紙(のようなもの)とインク(のようなもの)の要素で成り立っています。
紙とは、画面上のヘッダーやフッター、ボタンなどを指し、その紙の上に乗っている写真やアイコン、文字のことをインクとして表します。
現実世界の質量をデザインに落とし込むことが目的のため、物理的に不可能である表現はできないようになっています。

②現実世界のような3D空間を作り出す

実際の紙に写真などを貼り付けた際、厚み分に影ができるのと同じように、マテリアルデザインにも文字や画像、アイコンなどの要素に影を足すことによって立体的に見せます。
マテリアルデザインの影も現実世界の影と同様に要素の位置によって変化させることが必須になります。

③操作に応じて動きを持たせる

マテリアルデザインにはユーザーの操作に応じて機能的なアニメーションを持たせることが大切です。
演出的なアニメーションと違って機能的なアニメーションとは、動作に明確な意味を持たせたアニメーションのことです。
動作に意図的な意味合いを持たせることで、変化の理解や認知度を高める効果があります。

マテリアルデザイン誕生の背景

マテリアルデザインが生まれた背景には、フラットデザインとスキューモーフィズムデザインが関係しています。
マテリアルデザインと同じように、フラットデザインはシンプルで無駄のないデザイン要素を持ち、スキューモーフィズムデザインはユーザーが動作を理解しやすい要素を持っています。
実際の特徴や違いを確認していきましょう。

フラットデザインの特徴

フラットデザインは平面デザインであるため、奥行きや高さ、立体感はなく規則正しく並列されたシンプルなデザインが多く見られます。装飾を取り除いたシンプルなデザインであることから、ファイルの容量が少なく、スマートフォンやタブレットでも綺麗に見ることができる点も特徴の一つです。また一目で何がどこにあるのかがわかりやすいことから、視認性や一覧性が高いという利点もあります。
しかしデザインが規則正しく統一されていることから、目立たせたい部分がある際には不向きである点や、画面上の変化が見られないためアイコンなどがわかりにくいと言った点もあります。

マテリアルデザインとフラットデザインの違い

フラットデザインには、マテリアルデザインのような立体感や機能的なアニメーションによる意味のある動きの表現はありません。
そのため、フラットデザインのデメリットである「重要性やユーザーが取るべきアクションを表現しにくい」といった点を、マテリアルデザインはカバーしています。
また、フラットデザインにはガイドラインがないことからデザイン設計の自由度が幅広く、マテリアルデザインと似通ってしまうこともあります。
しかしカードやフローティング操作ボタンといったマテリアルデザインの特徴を取り込むことで、フラットデザインの操作がわかりづらいといったデメリットを解消することができます。
どちらか一方でのデザイン制作ではなく、双方のメリットをWebデザインに落とし込むことでユーザビリティの幅が広がるでしょう。

スキューモーフィズムデザインの特徴

スキューモーフィズムデザインとは、人々に馴染みのない新しく誕生した物を、現実にある既存の物に寄せるデザインの事を言います。
既存の物に似せることで、新しい物でも用途を想像しやすく、理解を促進させるメリットがあります。
数字を画面に入れて加減乗除ボタンを押すだけで簡単に計算ができる電卓の機能や見た目を、スキューモーフィズムデザインを用いて似せて作ることによりすぐに人々が理解できるようにしました。
一方で既存の物に似せることはアナログな物に似せることが多くなるため、デジタルの良さが発揮できない場合があります。

マテリアルデザインとスキューモーフィズムデザインの違い

スキューモーフィズムデザインは、現実にある物に似せて人々の理解を図るため、デコラティブなイメージが多い印象です。
一方でマテリアルデザインは、装飾を除いたシンプルなデザインでありながら人々の理解を深めています。
スキューモーフィズムデザインの「どのような行動をすれば良いのか理解しやすい」と言った点が、マテリアルデザインでは機能的なアニメーションを使用することで実現できるため、マテリアルデザインはスキューモーフィズムデザインの利点も含んでいると言って良いでしょう。
このことからマテリアルデザインは、フラットデザインの「シンプルで見やすい」といった点、スキューモーフィズムデザインの「行動や動作を行うにあたって理解しやすい」といった双方のデザインの利点を持ち合わせた新感覚のデザインと言えるでしょう。

マテリアルデザインの重要なコンポーネント

次にマテリアルデザインで使用する重要な要素について見ていきましょう。

Google マテリアルデザインのガイドライン
https://material.io/design

ボタン

ここではマテリアルデザインで使用されるボタンについてご紹介します。
ボタンには「フローティングアクションボタン」「レイズドボタン」「フラットボタン」「アウトラインボタン」「トグルボタン」の5種類があります。
強調度合いによってボタンを使い分けることが大切とされ、中でも利用されることの多い4つのボタンについてそれぞれの特徴を見ていきましょう。

フローティングアクションボタン

フローティングアクションボタンは、その画面で最も重要で一般的な動作を行うボタンです。
基本的には一つのスクリーンにつき一つ配置されていて、スクロールを行なった際でも一定の位置に表示され続けられることが多く見られます。
例えばGoogleマップであれば「現在地の確認」や「移動先の入力」、Gメールでは「メールの作成」がフローティングアクションボタンにあたります。
またフローティングアクションボタンは特に右下に置かれることが多く、これはコンテンツの可読性を最も下げないのが右下のためだと言われています。
ただしGoogleフォトのような「写真を見ること」が目的であり、行動を促進する必要がない状況では、フローティングアクションボタンの設置は不要です。

レイズドボタン

レイズドボタンは持ち上げ型ボタンとも呼ばれており、ユーザーがボタンを押す際に波紋のようなアニメーションであるリップルや、紙が浮き上がるようなアニメーションである隆起などのアクションが起きるボタンのことです。
汎用的に使用され、主に長方形で設計されています。

フラットボタン

フラットボタンとは、ユーザーがボタンを押すと色が変化するなどのインタラクションは発生しますが、レイズドボタンのような隆起などのアクションは起こりません。
汎用的に使用され、文字のみのボタンになります。

アウトラインボタン

アウトラインボタンは2018年のガイドラインに新しく追加された、文字が薄く細いグレーの線で囲まれたボタンです。
フラットボタンのようなテキストのみのボタンよりも強まった印象を、レイズドボタンのようなボタンに色や影が含まれているボタンよりも弱まった印象を与えます。

アニメーション

意味合いを持たせたアニメーションを使用し、ユーザーの操作を感覚的に行えるようなサポートをしましょう。
視覚的な動きを持たせることにより、ユーザーに操作への認識や認知がしやすくなります。
例えばタップすると紙が浮かび上がるような隆起や、水面に浮かび上がる波紋のようなリップルといったアニメーションがあり、ユーザーの注意を引くことで次の動作を施しやすくさせます。

レイアウト

マテリアルデザインにおけるレイアウトの原則は紙を模しています。
レイアウトは紙の厚みを表現し、「縫い目」(Seam)と「段差」(Step)の2種類のレイアウトがあります。
縫い目は2枚の紙が並んでつなぎ合わさったイメージで、それぞれ奥行きはつけません。2つのマテリアルはシームで縫い合わされていることをイメージさせます。シームでは、スクロールをすると2つのマテリアルが同時に動きます。
段差では紙が重なっているイメージで、重なりによる厚みを表現します。段差に応じた陰影がつくため、見た目に奥行きを出します。
重なっているだけのイメージなので、2つの紙は各々独立して動きます。
また、フローティングアクションボタンを設置する場合、段差を作成するコンテンツに関連している場合はその段差をまたぐことができ、両方のコンテンツに関連している場合は、そのつなぎ目をまたぐことが可能になります。

影によって、画面に表示されているオブジェクトの関係性や距離などを把握できるヒントになります。
例えば画面をスクロールした際に、上に移動させたのかや下に移動させたのかが影の動作によって理解できるようになります。
また音楽のプレイリストを表示させる際、リストの中から聴きたい音楽をクリックすると背面が暗くなり、聴いている音楽の題名やパッケージが表示されます。
この影の動きから表示されているオブジェクトの中で聴いている音楽の題名やパッケージが一番上に表示されてことを理解できます。

まとめ

今回はマテリアルデザインの特徴や誕生の背景、重要とされるコンポーネントについてご紹介しました。
ユーザーが直感的に操作ができることを目的としたデザイン手法であるマテリアルデザインは、フラットデザインのようなシンプルさが基調とされ、スキューモーフィズムデザインのようなユーザーの理解を促す機能的なアニメーションを用いて設計されているのが特徴です。
Googleが公表しているマテリアルデザインのガイドラインや、フォント・素材などが提供されているため、詳しく作成方法を知りたい方や一からの作成に困った方はこれらの活用をしてみるのも良いでしょう。

この記事を書いた人

QEEE編集部

QEEEmagazineはマーケター、人事、エンジニア、営業企画などの企画者に役立つコンテンツをそれぞれ領域のスペシャリストが発信していきます。

投稿一覧へ

他サービスはこちら