マテリアルデザインはGoogleが提唱したデザインのガイドラインです。これに沿ってWebページやWebサービスの画面をデザインしていくことで、ユーザーにとって見やすくわかりやすく、直感的に操作できるUIが作れます。
本記事ではマテリアルデザインについて、フラットデザインとの対比やメリット・デメリットを解説します。マテリアルデザインで使うボタンや、UIを作るときの6つコツを、画像付きでわかりやすく解説します。
- マテリアルデザインとは何か、フラットデザインとの違い
- マテリアルデザインのメリット・デメリット
- マテリアルデザインの作り方を画像付きで解説
マテリアルデザインとは？
マテリアルデザインとは、2014年にGoogleが提唱したデザインのガイドラインです。WebサイトやWebサービスにマテリアルデザインを取り入れることで、私たちは説明を受けなくても、これらを直感的に操作できるようになるでしょう。
マテリアル（Material）は「物質」の意味であり、日本語にすると「物質的なデザイン」となります。
物質的なデザインとは、まるで現実世界で物質に触るように操作できるUI・UXを作ることです。たとえば現実世界の駅でチケットを買うとき、私たちは券売機にお金を入れ、目的の駅までのボタンを押します。
ほかにも、たとえば道端に小石が落ちていたらそれを拾い上げられます。手を離せば小石はまた地面へと落ちていくでしょう。小石を水面に投げ入れれば、波紋が生じます。
このように、私たちは現実世界での生活を通して「このような行動をしたら、次にこうなる」ということを無意識に学んでいます。
マテリアルデザインは現実世界での物理法則をデジタルな世界に取り入れることで、「画面のどこを触ったら何が起きるのか」を、直感的にわかるようにしているのです。
マテリアルデザインとフラットデザインの違い
マテリアルデザインとよく対比されるデザインとして、「フラットデザイン」が挙げられます。フラットデザインとは、その名の通りフラット（平面的）なデザインのことです。
マテリアルデザインもフラットデザインも「シンプルなデザイン」といえます。マテリアルデザインは配色やレイヤーの少なさから、フラットデザインは平面的であることから、それぞれシンプルです。
そのため両者は混同されることもありますが、「立体感があるかないか」という大きな違いがあります。ボタンに影をつけて立体的に表現するマテリアルデザインに対し、フラットデザインでは影を全くつけません。
詳しくは後述しますが、立体感のあるマテリアルデザインでは、ボタンが画面から浮き上がっているように見えます。そのため、「これはボタンだ」ということを直感的に認識できるでしょう。
しかし、スマートフォンをはじめとする画面の小さな端末だと、ボタンも小さく表示されます。重要なボタンを目立たせるためには有効ですが、小さなボタンをいくつも配置する場合、ボタンにつけた影のせいで画面が見づらくなってしまうでしょう。
このことから、フラットデザインは画面内に小さなボタン（リンク）がいくつもある場合に有効なデザインといえます。
どちらが優れているという話ではなく、用途や目的に応じて適切に使い分けることが大切です。
マテリアルデザインのメリット
マテリアルデザインの最大のメリットは、「ユーザーにとって見やすく、操作しやすい画面（UI）を作れる」ことでしょう。
現実世界の物理法則に沿って構成された画面は、物質世界に生きる私たちにとって扱いやすいです。「これは大事なボタンだ」「これを押したらこんなことが起こるだろう」と、説明を受けなくても直感的に理解できます。
たとえばGoogle Chromeでは、最も重要な要素である「検索窓」に影が付き、浮き上がっています。Google Chromeを使うのがはじめてでも、「とりあえずここを触れば何とかなるだろう」と、何となくわかるデザインです。
使い方を考えたり調べたりすることなく、何となく使えるということが、ユーザーのストレスを減らし、より良いUXをもたらします。
マテリアルデザインのデメリット
マテリアルデザインはガイドラインにより、明確なルールが定められています。これがマテリアルデザインのデメリットになることもあります。
ルールが決まっているということは、デザインに縛りがあるということです。ほかのWebサイト・Webサービスなどと似たデザインになってしまうため、差別化がしづらいと感じるかもしれません。
ルールが多いということは、覚えることも多いということです。慣れるまでは、デザイン制作に時間がかかるでしょう。ただ、ルールが明確に決まっているため、誰が作っても画一的なデザインができあがるともいえます。
ルールが明確に決まっているということは「縛りが多く差別化しづらい」というデメリットだけでなく、「デザイナーのスキルによらず、ユーザーにとって使いやすいデザインが作れる」というメリットにもつながります。
マテリアルデザインで使う3つのボタン
マテリアルデザインではボタンの種類が3つに分けられています。各ボタンの用途・目的やデザインのコツについて解説します。
フロート
フロートは画面の中でもっとも重要なボタンです。基本的に円形で、画面の最も上に影付きで表示されます。ボタンの役割はテキストではなく、アイコンを入れることで説明します。
レイズド
フロートほど重要ではないボタンには「レイズド」を使います。長方形の、画面から少し浮き上がって見えるボタンで、ボタンの中にはその役割を示すテキストを入れます。
レイズドのNG例
ボタンの中にアイコンを入れることもできますが、アイコンとテキストは垂直方向に配置したり、1つのボタンに2つのアイコンを入れたりしてはいけません。
フラット
あまり重要ではないボタンや操作メニューなどに使うボタンが「フラット」です。ボタンといっても、フロートやレイズドのような枠線はなく、影もつけません。ただ、操作によって色が変わることはあります。
フラットのNG例
フラットのボタンを作るときは、ボタンに「意味のある形」を使わないようにしましょう。たとえばボタンの役割が「キャンセル」「戻る」なのに、画像のような「右向きの矢印」の形をしていたらどうでしょうか。
右向きの矢印には「進む」のイメージがあり、ボタンの形とテキストの意味が反対になってしまいます。これではユーザーが混乱してしまうでしょう。
マテリアルデザインを作る6つのコツ
マテリアルデザインはGoogleにより、明確なガイドラインが定められています。マテリアルデザインを作るとき、まずはガイドラインを確認するといいでしょう。
ただ、ガイドラインの情報量は膨大で、一度にすべて覚えるのは難しいです。英語で書かれているのもネックです。Google翻訳で日本語に直せるものの、やはりはじめから日本語で書かれた文章よりは読みづらいでしょう。
そこで、ガイドラインを踏まえた「簡易版・マテリアルデザインの作り方」を紹介します。これから紹介する6つのコツを念頭に置いておくことで、マテリアルデザイン作成のポイントを押さえられ、ガイドラインも理解しやすくなるでしょう。
- 1．直感的に意味がわかる素材を使う
- 2．色の数を抑える
- 3．影をつけて立体感を出す
- 4．背景＋1レイヤーのデザインを意識する
- 5．画面レイアウトでは3つの構成要素を意識する
- 6．画面レイアウトでは3つの構成要素を意識するユーザーの操作を起点に、わかりやすいモーションをつける
なお、マテリアルデザインのガイドラインは下記リンクから確認できます。
1．直感的に意味がわかる素材を使う
マテリアルデザインの最大の特徴は「ユーザーにとってわかりやすく、直感的に操作できる」ことです。そのためには、直感的に意味がわかる素材を使わなくてはなりません。
ここで大切なのはボタンの作り方やアイコンの選び方です。下記リンクからボタンやアイコンについてのガイドラインを確認したり、アイコンデザインのテンプレートをダウンロードしたりできます。
2．色の数を抑える
マテリアルデザインでは色の数を抑えることで、画面の視認性を高めています。
ガイドラインでは使える有彩色は4色までと決められています。色の選び方も決まっており、1色のメインカラーに対して同じ色合いのサブカラーが2色、目立たせる部分に使うアクセントカラーが1色です。
色に関するガイドラインはこちらから確認できます。画面のどの部分にどんな色を使えばいいのかなども決まっているため、色選びのときにチェックしましょう。
3．影をつけて立体感を出す
マテリアルデザインでは画面上の素材に影をつけることで立体感を出します。どの素材に、どのように影をつけるのかが決まっています。
基本的には、影のつけ方は現実世界の物理法則に従えばOKです。詳しいガイドラインや注意点は、こちらから確認できます。
4．背景＋1レイヤーのデザインを意識する
マテリアルデザインでは「背景＋1レイヤーの画面構成」を意識します。
マテリアルデザインで画面に配置される素材には、実体があります。透明な素材や折れや曲がりのある素材は避けましょう。各要素は重ねず、背景の上にある1つのレイヤーに配置していきます。
画面の構成要素（コンポーネント）はこちらから確認できます。各コンポーネントの作り方や配置の仕方もチェックしておきましょう。
5．画面レイアウトでは3つの構成要素を意識する
マテリアルデザインでは、画面レイアウトが次の3要素から構成されます。
App bar
今表示されているのは何の画面なのかの説明、メニューや検索などの主要なアイコンと一緒に表示する場所です。
Navigation
各画面・機能にアクセスするためのメニューを表示する場所です。
Body
コンテンツを表示するための場所です。画面のほとんどを占める構成要素で、テキストやカード、ボタン、画像などで構成されています。
各要素の作り方や縦横寸法などについては、こちらで確認できます。
6．画面レイアウトでは3つの構成要素を意識するユーザーの操作を起点に、わかりやすいモーションをつける
マテリアルデザインでは、ユーザーの操作を起点に構成要素をモーションさせることで、操作が画面に与える影響を表します。
たとえばタップ・クリックした部分を中心にして画面が切り替わっていったり、スワイプに合わせてメニュー（Navigation）が表示されたりなどです。
モーションのガイドラインはこちらで確認できます。どのようなモーションがユーザーにとっての使いやすさを高めるのか、要素・目的ごとにどんなモーションをつければいいのかの動画もあります。
マテリアルデザインを意識し、ユーザビリティの高いWebサービスを
- マテリアルデザインにより直感的な操作、ストレスフリーのUXを実現できる
- マテリアルデザインには明確なガイドラインがある
- ガイドラインを確認しながら、ユーザビリティの高いUIを作ろう
マテリアルデザインには現実世界での物理法則が反映されています。マテリアルデザインで作られたUIは見やすくわかりやすく、ユーザーは説明を受けなくても直感的に操作できるでしょう。
そのためのガイドラインも明確に決まっています。はじめは覚えることや意識することが多く、大変に感じるかもしれませんが、慣れればルールに従ってスピーディーにデザインを作っていけるでしょう。
まずは本記事で解説した6つのコツを念頭に置きながら、ガイドラインの確認とデザインの試作をしてみてください。これにより、「ボタンの大きさはどのくらいだっけ？」「コンポーネントの配置や寸法は？」など、ガイドラインのどこを確認すべきかが見えてきます。
「何がわからないのかわからない」という状態に陥らないためにも、ガイドラインを効率よく覚えるためにも、実際に手を動かしてみることが大切です。本記事を参考に、マテリアルデザインに挑戦してみてはいかがでしょうか。
【関連記事】
インシデントとは？インシデント管理のよくある課題と解決策、管理方法をまとめて解説
インシデントとは、大きなアクシデントが起こる一歩手前の状態のことです。インシデントへの対応が遅れることで、情報漏えいや損害賠償などのさまざまな被害が想定されます。 本記事ではインシ...
【目的別】ヒアリングシートの作り方とテンプレート・項目作成に便利な4つのフレームワークも紹介
商談や打ち合わせ、面接などで何を聞くのかをまとめた「ヒアリングシート」を活用することで、相手の現状や要望をより深く理解できます。 本記事ではヒアリングシートを活用するメリットや効果...
Webデザインの完成見本「デザインカンプ」の作り方｜作成時に意識したいことと、作成に使えるツール5選
Webデザインの完成見本である「デザインカンプ」。WebサイトやWebページがどんなデザインになるのかを、クライアントやコーダーなどに伝えるために欠かせません。 本記事ではデザイン...
はてブU-NOTEをフォローしておすすめ記事を購読しよう