マテリアルデザインはGoogleが提唱したデザインのガイドラインです。これに沿ってWebページやWebサービスの画面をデザインしていくことで、ユーザーにとって見やすくわかりやすく、直感的に操作できるUIが作れます。
本記事ではマテリアルデザインについて、フラットデザインとの対比やメリット・デメリットを解説します。マテリアルデザインで使うボタンや、UIを作るときの6つコツを、画像付きでわかりやすく解説します。
- マテリアルデザインとは何か、フラットデザインとの違い
- マテリアルデザインのメリット・デメリット
- マテリアルデザインの作り方を画像付きで解説
マテリアルデザインとは？
マテリアルデザインとは、2014年にGoogleが提唱したデザインのガイドラインです。WebサイトやWebサービスにマテリアルデザインを取り入れることで、私たちは説明を受けなくても、これらを直感的に操作できるようになるでしょう。
マテリアル（Material）は「物質」の意味であり、日本語にすると「物質的なデザイン」となります。
物質的なデザインとは、まるで現実世界で物質に触るように操作できるUI・UXを作ることです。たとえば現実世界の駅でチケットを買うとき、私たちは券売機にお金を入れ、目的の駅までのボタンを押します。
ほかにも、たとえば道端に小石が落ちていたらそれを拾い上げられます。手を離せば小石はまた地面へと落ちていくでしょう。小石を水面に投げ入れれば、波紋が生じます。
このように、私たちは現実世界での生活を通して「このような行動をしたら、次にこうなる」ということを無意識に学んでいます。
マテリアルデザインは現実世界での物理法則をデジタルな世界に取り入れることで、「画面のどこを触ったら何が起きるのか」を、直感的にわかるようにしているのです。
マテリアルデザインとフラットデザインの違い
マテリアルデザインとよく対比されるデザインとして、「フラットデザイン」が挙げられます。フラットデザインとは、その名の通りフラット（平面的）なデザインのことです。
マテリアルデザインもフラットデザインも「シンプルなデザイン」といえます。マテリアルデザインは配色やレイヤーの少なさから、フラットデザインは平面的であることから、それぞれシンプルです。
そのため両者は混同されることもありますが、「立体感があるかないか」という大きな違いがあります。ボタンに影をつけて立体的に表現するマテリアルデザインに対し、フラットデザインでは影を全くつけません。
詳しくは後述しますが、立体感のあるマテリアルデザインでは、ボタンが画面から浮き上がっているように見えます。そのため、「これはボタンだ」ということを直感的に認識できるでしょう。
しかし、スマートフォンをはじめとする画面の小さな端末だと、ボタンも小さく表示されます。重要なボタンを目立たせるためには有効ですが、小さなボタンをいくつも配置する場合、ボタンにつけた影のせいで画面が見づらくなってしまうでしょう。
このことから、フラットデザインは画面内に小さなボタン（リンク）がいくつもある場合に有効なデザインといえます。
どちらが優れているという話ではなく、用途や目的に応じて適切に使い分けることが大切です。
