マテリアルデザインのメリット
マテリアルデザインの最大のメリットは、「ユーザーにとって見やすく、操作しやすい画面(UI)を作れる」ことでしょう。
現実世界の物理法則に沿って構成された画面は、物質世界に生きる私たちにとって扱いやすいです。「これは大事なボタンだ」「これを押したらこんなことが起こるだろう」と、説明を受けなくても直感的に理解できます。
たとえばGoogle Chromeでは、最も重要な要素である「検索窓」に影が付き、浮き上がっています。Google Chromeを使うのがはじめてでも、「とりあえずここを触れば何とかなるだろう」と、何となくわかるデザインです。
使い方を考えたり調べたりすることなく、何となく使えるということが、ユーザーのストレスを減らし、より良いUXをもたらします。
マテリアルデザインのデメリット
マテリアルデザインはガイドラインにより、明確なルールが定められています。これがマテリアルデザインのデメリットになることもあります。
ルールが決まっているということは、デザインに縛りがあるということです。ほかのWebサイト・Webサービスなどと似たデザインになってしまうため、差別化がしづらいと感じるかもしれません。
ルールが多いということは、覚えることも多いということです。慣れるまでは、デザイン制作に時間がかかるでしょう。ただ、ルールが明確に決まっているため、誰が作っても画一的なデザインができあがるともいえます。
ルールが明確に決まっているということは「縛りが多く差別化しづらい」というデメリットだけでなく、「デザイナーのスキルによらず、ユーザーにとって使いやすいデザインが作れる」というメリットにもつながります。
マテリアルデザインで使う3つのボタン
マテリアルデザインではボタンの種類が3つに分けられています。各ボタンの用途・目的やデザインのコツについて解説します。
フロート
出典:アプリバー: 下部 - マテリアル デザイン
フロートは画面の中でもっとも重要なボタンです。基本的に円形で、画面の最も上に影付きで表示されます。ボタンの役割はテキストではなく、アイコンを入れることで説明します。
レイズド
出典:ボタン - マテリアル デザイン
フロートほど重要ではないボタンには「レイズド」を使います。長方形の、画面から少し浮き上がって見えるボタンで、ボタンの中にはその役割を示すテキストを入れます。
レイズドのNG例
ボタンの中にアイコンを入れることもできますが、アイコンとテキストは垂直方向に配置したり、1つのボタンに2つのアイコンを入れたりしてはいけません。
出典:ボタン - マテリアル デザイン
フラット
出典:形状について - マテリアルデザイン
あまり重要ではないボタンや操作メニューなどに使うボタンが「フラット」です。ボタンといっても、フロートやレイズドのような枠線はなく、影もつけません。ただ、操作によって色が変わることはあります。
フラットのNG例
出典:形状について - マテリアルデザイン
フラットのボタンを作るときは、ボタンに「意味のある形」を使わないようにしましょう。たとえばボタンの役割が「キャンセル」「戻る」なのに、画像のような「右向きの矢印」の形をしていたらどうでしょうか。
右向きの矢印には「進む」のイメージがあり、ボタンの形とテキストの意味が反対になってしまいます。これではユーザーが混乱してしまうでしょう。