Googleが推奨する「マテリアルデザイン」とは？5つの特徴と、メリット・デメリット・作り方について解説
マテリアルデザインとは、Googleが推奨する新しいデザインの一種です。マテリアルデザインで作成されたWebサイトは、ユーザーにとって見やすく、扱いやすいとされています。
本記事では、マテリアルデザインの5つの特徴と、メリット・デメリットを紹介。マテリアルデザインを使った、ユーザービリティの高いデザインの作り方も解説します。
ノーコードで手間なく お問い合わせフォームの作成には「Tayori」
工数をかけずにお問い合わせフォームを作成したい方には「Tayori」がおすすめです。まずは無料プランからお試しください。
Googleが推奨する「マテリアルデザイン」とは？
マテリアルデザインとは、2014年にGoogleが提唱したデザインのこと。明確なガイドラインが定められたデザインであり、「見やすく、直感的に操作できるWebページ・サービス」を作ることを目的としています。
マテリアルデザインの5つの特徴
マテリアルデザインには、5つの特徴があります。
- 現実世界の物理的法則を取り入れる
- 紙とインクの要素で組み立てる
- 色の数を少なく配色する
- 影を活用して立体感を作る
- 連続性のあるアニメーション
5つの特徴は、マテリアルデザインの主要ガイドラインに則ったものでもあります。それぞれの特徴と、対応したガイドラインについて解説します。
1．現実世界の物理的法則を取り入れる
マテリアルデザインでは、画面に表示される世界に、現実世界での物理的法則を取り入れます。具体的には、物の重なり方に連動した影、質量を感じる物の動きなどです。ユーザーが普段暮らしている「現実世界の物理的法則」を取り入れることで、画面をどう操作したらいいのか、直感的にわかるようにしています。
2．紙とインクの要素で組み立てる
出典：https://material.io/design/color/the-color-system.html#color-usage-and-palettes
マテリアルデザインでは、紙とインクの要素で画面を組み立てます。わかりやすくいえば、印刷物と同じルールでデザインするということ。色のつけ方や画像の配置、余白の使い方などを印刷物に近づけることで、ユーザーは画面の情報をとらえやすくなります。
3．色の数を少なく配色する
出典：https://material.io/design/color/the-color-system.html#color-usage-and-palettes
マテリアルデザインでは、色の数を、有彩色4色までとしています。選んだ4色を使い、次にように配色します。
【メインカラー】
画面のメインとなる色で、1色だけ決めます。
【サブカラー】
メインカラーと同じ色合いで、2色まで使えます。あくまでメインカラーの補助として使いましょう。
【アクセントカラー】
目立つ部分に使う色で、ほかとは違う色合いを選びます。1色だけ決めます。
3種類の色に加え、「白」「黒」「グレー」の無彩色は、自由に使えます。
4．影を活用して立体感を作る
出典：https://material.io/design/environment/light-shadows.html#light
マテリアルデザインでは、影を活用して、画面上に立体感を作ります。
ただ影をつけるのではなく、現実世界の物理法則と同じルールで、影をつけましょう。平面である画面上で、それぞれの要素が、どう重なり合っているのかを表すのが目的です。
5．連続性のあるアニメーション
出典：https://material.io/design/motion/understanding-motion.html#principles
マテリアルデザインでは、ユーザーの操作と連続性のあるアニメーションを使います。
連続性のあるアニメーションとは、例えば「タップした部分を中心に、次の画面に切り替わっていく」「スワイプ下方向から、新しい画面や要素が出てくる」などのことです。自分の操作が画面にどんな影響を与えたのか、アニメーションで表現することで、ユーザーの理解をサポートします。
マテリアルデザインとフラットデザインの違い
マテリアルデザインとよく比較されるデザインに「フラットデザイン」があります。
フラットデザインとは、平面的でシンプルなデザインのこと。マテリアルデザインも、配色の少なさから「シンプル」といえるため、両者は混同されやすいです。
マテリアルデザインとフラットデザインの違いは、「立体感」にあります。現実世界と同じように、各要素に影をつけるのがマテリアルデザイン。一方、全く影を使わずに画面をつくるのがフラットデザインです。
マテリアルデザインを活用するメリット
マテリアルデザインを活用するメリットは、何といっても「わかりやすさ」にあります。
現実世界の物理法則に従い、画面上の世界を構築するのが、マテリアルデザインです。ユーザーは、影の付き方や各要素の動きから、画面がどう構成されているのかを直感的に判断できます。
自分の操作がアニメーションとして反映されることで、説明がなくとも、何の操作が画面にどんな影響を与えたのかがわかるでしょう。色の少なさ、配色の厳密なルールは、見やすい画面を作り出します。
マテリアルデザインのデメリット
マテリアルデザインには、厳密なデザインルールがあります。覚えることが多い、縛りが多く作成に慣れるまでデザインを設計するのに時間がかかるなどのデメリットもあります。
ただし、ルールが厳密ということは、ルールさえ覚えてしまえば作りやすいということです。
ノーコードで手間なく お問い合わせフォームの作成には「Tayori」
工数をかけずにお問い合わせフォームを作成したい方には「Tayori」がおすすめです。まずは無料プランからお試しください。
マテリアルデザインのガイドライン・作り方
出典：https://material.io/design/environment/elevation.html
マテリアルデザインは、公式ガイドラインに従いながら、次のように作ります。
1．奥行きを考える
X軸とY軸だけでなく、奥行きを表すZ軸も考えながら、デザインを作ります。画面上の各要素は、現実世界で紙のシートを重ねていくように、配置していきましょう。それぞれのシートの厚さは、1dpまでと決まっています。
2．現実世界の物理法則に従う
全てのシートやアニメーションは、現実世界の物理法則に従って作ります。例えば、現実世界の印刷物で、シートから文字がはみ出すことはありえません。下に配置したシートが、上に重ねられたシートを突き抜けるようなアニメーションもNGです。
3．アニメーションはユーザーを起点にする
ユーザーがタップしたボタンが浮き上がったり、タップした部分から波紋が広がったり、アニメーションはユーザーの操作から始まります。ユーザーが画面をスクロールし、親要素を動かしたら、子要素も連動して動きます。
また、マテリアルデザインの作り方を解説したGoogleによる公式動画も公開されています。ぜひ一度、確認してみてください。
マテリアルデザインのボタンの種類
マテリアルデザインでは、画面操作に使うボタンにも、明確なガイドラインが存在します。マテリアルデザインで使う3種類のボタンについて、使い方や特徴を解説します。
フロート型
出典：https://material.io/design/iconography/system-icons.html#icon-themes
フロート型は、画面上の最も重要な要素に割り当てられるボタンです。シートの1番上に配置され、影が付いています。基本的には丸型で、中にボタンの意味を示すアイコンを描きましょう。
持ち上げ（レイズド）型
出典：https://material.io/design/shape/shape-as-expression.html#expressing-brand
持ち上げ（レイズド）型ボタンは、画面から少し浮き上がったように見えるデザイン。フロートほどではない重要な操作に使います。
長方形で、中にはボタンの意味を示すテキストを書きます。ホバー操作で浮き上がったり、タップで波紋のエフェクトが出たりするものが多いです。
フラット型
出典：https://material.io/design/iconography/system-icons.html#icon-themes
フラット型ボタンは、色付きテキストで表現されるボタンです。フロート型や持ち上げ型と異なり、ボタンの枠線はありません。重要度の低いボタンや、「OK」「キャンセル」のような選択肢に使われます。
マテリアルデザインの参考になる事例
マテリアルデザインは、Googleが提唱したデザインです。参考にするなら、Googleが提供するWebページやサービスがおすすめです。
例えば「Google Maps」は、シンプルな色合いで地図を表現しているのが特徴です。各ボタンをタップすると、押した部分から波紋が広がります。スワイプで地図を移動したり、画面下に隠れていた「その場所の最新情報」を引き上げて、表示したりできます。
「Google Chrome」でも、よくアクセスするWebページは、持ち上げ型ボタンで表示。検索結果に表示される各Webページへのリンクは、青いテキストで書かれたフラット型ボタンです。
マテリアルデザインを取り入れてみよう
マテリアルデザインは、見やすく、直感的な操作にこだわったデザインです。マテリアルデザインを取り入れたWebサイトやサービスは、自然とユーザービリティの高いものになるでしょう。
Googleの各サービスが、「説明されなくても何となく使える」ものであることを考えると、マテリアルデザインの効果がわかるのではないでしょうか。
マテリアルデザインは縛りが多く、最初は大変かもしれません。しかし、裏を返せば、一度覚えてしまえばデザインを作りやすいということです。まずは、ガイドラインを確認してみてはいかがでしょうか。
ノーコードで手間なく お問い合わせフォームの作成には「Tayori」
シンプルで使いやすいお問い合わせフォームを作成したい方には「Tayori」がおすすめです。デザインの変更もクリック一つでできるので、お問い合わせフォームの作成に工数をかけたくない方にぴったりです。まずは無料プランからお試ししてみませんか？
