マテリアルデザインのメリット

マテリアルデザインの最大のメリットは、「ユーザーにとって見やすく、操作しやすい画面(UI)を作れる」ことでしょう。

現実世界の物理法則に沿って構成された画面は、物質世界に生きる私たちにとって扱いやすいです。「これは大事なボタンだ」「これを押したらこんなことが起こるだろう」と、説明を受けなくても直感的に理解できます。

たとえばGoogle Chromeでは、最も重要な要素である「検索窓」に影が付き、浮き上がっています。Google Chromeを使うのがはじめてでも、「とりあえずここを触れば何とかなるだろう」と、何となくわかるデザインです。

使い方を考えたり調べたりすることなく、何となく使えるということが、ユーザーのストレスを減らし、より良いUXをもたらします。

マテリアルデザインのデメリット

マテリアルデザインはガイドラインにより、明確なルールが定められています。これがマテリアルデザインのデメリットになることもあります。

ルールが決まっているということは、デザインに縛りがあるということです。ほかのWebサイト・Webサービスなどと似たデザインになってしまうため、差別化がしづらいと感じるかもしれません。

ルールが多いということは、覚えることも多いということです。慣れるまでは、デザイン制作に時間がかかるでしょう。ただ、ルールが明確に決まっているため、誰が作っても画一的なデザインができあがるともいえます。

ルールが明確に決まっているということは「縛りが多く差別化しづらい」というデメリットだけでなく、「デザイナーのスキルによらず、ユーザーにとって使いやすいデザインが作れる」というメリットにもつながります。

マテリアルデザインで使う3つのボタン

マテリアルデザインではボタンの種類が3つに分けられています。各ボタンの用途・目的やデザインのコツについて解説します。

フロート

出典:アプリバー: 下部 - マテリアル デザイン

フロートは画面の中でもっとも重要なボタンです。基本的に円形で、画面の最も上に影付きで表示されます。ボタンの役割はテキストではなく、アイコンを入れることで説明します。

レイズド

出典:ボタン - マテリアル デザイン

フロートほど重要ではないボタンには「レイズド」を使います。長方形の、画面から少し浮き上がって見えるボタンで、ボタンの中にはその役割を示すテキストを入れます。

レイズドのNG例

ボタンの中にアイコンを入れることもできますが、アイコンとテキストは垂直方向に配置したり、1つのボタンに2つのアイコンを入れたりしてはいけません。

出典:ボタン - マテリアル デザイン

フラット

出典:形状について - マテリアルデザイン

あまり重要ではないボタンや操作メニューなどに使うボタンが「フラット」です。ボタンといっても、フロートやレイズドのような枠線はなく、影もつけません。ただ、操作によって色が変わることはあります。

フラットのNG例

出典:形状について - マテリアルデザイン

フラットのボタンを作るときは、ボタンに「意味のある形」を使わないようにしましょう。たとえばボタンの役割が「キャンセル」「戻る」なのに、画像のような「右向きの矢印」の形をしていたらどうでしょうか。

右向きの矢印には「進む」のイメージがあり、ボタンの形とテキストの意味が反対になってしまいます。これではユーザーが混乱してしまうでしょう。