マテリアルデザインでは、Googleにより作り方のガイドラインがしっかりと決められています。しかし、ルールがかなり多いため、どうしても間違った表現をしてしまいがちです。今回はマテリアルデザインでやってしまいがちな間違いを72個、淡々と紹介していきます。WEB制作、アプリ制作時のチェックリストとしてご活用ください。
重要なルール
1 マテリアルから文字をはみ出してはいけない
マテリアルから文字や画像をはみ出して表示させるのはNGです。文字はマテリアルの上に印刷されているのだととらえましょう。
2 マテリアルに厚みをつけてはいけない
厚みのをつけるような表現をしてはいけません。どの構成部品も紙で作られているのだと考えましょう。
3 文字に立体感を出してはいけない
エンボスやグラデーションにより立体感を出していけません。
4 要素同士をすり抜けさせてはいけない
物理法則に反するような動きをつけてはいけません。
5 文字に影をつけてはいけない
あくまでも文字はインクでマテリアル上に印刷されている、というイメージですね。
6 マテリアルをてきとうな順番で重ねてはいけない
ガイドラインでマテリアルごとに置かれるべき高度が決まっています。高度の考え方と、それぞれのマテリアルの高度は、こちらの記事で詳しくまとめています。
カードの使い方について
マテリアルデザインにおけるカードとは、関連性のある情報をまとめた紙のことです。詳しくは「カードの使い方のルール」で解説しています。
7 カードの中に立体的なボタン（浮き出しボタン）を載せない
デザインが重たくなってしまうためです。カードの上にのせることができるのはフラットボタンだけです。
8 カードに折り目をつけてはいけない
デザインにアクセントを加えたくても、折り目をつけてはいけません。
9 カードを折りたたんではいけない
アニメーションの過程でカードを折りたたむのもNGです。
10 複数のコンテンツを並べるときに何でもかんでもカードを使わない
例えばこのような「均一的かつ少量な内容」を複数並べる場合にはカードを使うのは好ましくありません。デザインがしつこく感じられてしまうからです。
このような場合にはリストを使うのが適切です。ただし、均一的な内容でも、掲載する文が4行以上になる場合には、カードを使います。
11 画像ギャラリーにカードを使わない
画像一覧を表示するようなページで、1つ1つの画像に影をつけると重く感じられてしまいます。影なしのグリッド形式などで表示しましょう。
このように画像ギャラリーにはシンプルなグリッドスタイルを用います。
12 カードの角を丸くしすぎてはいけない
カードであることが分かるように、角に丸みをつけすぎないようにしましょう。
13 カードの角を直角にしてはいけない
ただし、直角にしてはいけません。2〜4px程度の丸みをつけましょう。
14 関連性が薄い内容を1枚のカードに載せない
1枚のカードにつき、1テーマとしましょう。
15 カードには重要度の低い情報をのせてはいけない
例えばこのようにタグなどを多数のせるのはNGです。
カードは情報への入口として使います。そのため重要な情報だけをのせて、詳細は遷移先に載せましょう。
16 カード内でスクロールできるようにしてはいけない
カード内にコンテンツが収まりきらない場合は、カードのサイズを大きくするか、収まりきらない部分を非表示にするなどして対応します。
ボタンについて
マテリアルデザインで使うボタン種類と使い方については、こちらの記事で解説しています。
17 厚みをつけない
影でのみ奥行きを表現します。ボタンに厚みをつけてはいけません。
18 グラデーションor多色の塗りにしない
このような控えめなグラデーションもやめましょう。また、ストライプにしたり、ボーダーで囲うのもNGです。シンプルな単色の塗りにしましょう。
19 テキストだらけの中 で、フラットボタンを使わない
マテリアルデザインでのフラットボタンとは、テキストだけのシンプルなボタンのことです。
このようにまわりに文字が多い中でテキストボタンを配置すると、どこがボタンなのか分からなくなってしまいます。
このようなケースでは、浮き出しボタンを使うのが適切です。ボタンであることが一目見て分かります。
逆にカードの上では浮き出しボタンを使わずに、フラットボタンを使います。
20 テキストだけを反応領域にしない
フラットボタンを使うときにも、テキストの周辺をタップしても反応するようにします。ただし、タップ可能領域を広げすぎてもいけません。
フローティング操作ボタン（FAB）について
フローティング操作ボタンは、マテリアルデザインの象徴とも言えるこのような円形のボタンのことです。FAB（Floating Action Button）と略されます。
21FABをページ内に２つ以上使ってはいけない
このような間違いは実際によく見かけます。しかしガイドラインでは「1ページにつき1つしか使うことはできない」とされています。
22 FABをフラットにしてはいけない
FABはカードなどよりも高い位置に置かれています。影をつけることで、前面に浮き出ていることを伝えましょう。
23 重要でない操作を割り当ててはいけない
この画像のように、ユーザーにとって重要度の低い操作をFABで割り当てることはできません。重要な操作がないページでは、FABを使うのはやめましょう。
24 FABをメニューや戻るボタンとして使ってはいけない
これは間違えやすいポイントだと思います。メニュー操作が重要だと感じられる場合でも、FABをメニューボタンにしてはいけません。これらの機能は、画面上部のツールバー（アプリバー）に配置します。
25 FABに否定的な操作を割り当ててはいけない
例えば、削除ボタンにするのはNGです。これはユーザーは「誤ってタップしてしまわないか」と落ち着かなくなってしまうからでしょう。
26 FABをメインカラーと同じ色にしてはいけない
最も重要な機能を実行するためのボタンです。背景に馴染んでしまうような色使いはNGです。メインカラーとは異なるアクセントカラーを使って目立つようにしましょう。
27 FABを正円以外の形にしてはいけない
四角形や三角形にするのはNGです。また、楕円形もNGです。
28 FABに立体感を出さない
グラデーションやエンボス、ボーダーなどによる立体表現はNGです。余計な枠や囲い線をつけるのもやめましょう。
29 FABにテキストはのせない
何の操作ができるのか一目見て分かるようなアイコンを1つだけ載せます。
30 ボタンを画面の端ギリギリに配置しない
画面の端から十分に余白を取りましょう。
31 タップによりアクションの選択肢を表示させる場合、6つ以上表示しない
FABでは、タップによりアクションの選択肢を提示することができます。しかし、6つ以上の選択肢を提示するのはNGです。5つ以内におさえましょう。
32 逆に選択肢を少なくしすぎない
最低でも3つは表示させます。つまり選択肢は3〜5個にするということですね。
33 表示させる選択肢の中にメニュー操作を含めない
このようにメニューアクションを配置すると、ユーザーは何度もボタンを押さなければいけません。すぐにアクションが実行される選択肢のみ表示します。
34 FABをカードなどのマテリアルの下に配置させてはいけない
FABを表示する場合、他のマテリアルの下に隠れてしまわないようにしましょう。アニメーションなどにより他のマテリアルがFABと重なってしまうような場合、FABを上下左右に動かすか、非表示にします。
色の使い方について
マテリアルデザインは、基本的に（１）メインカラー1色、（2）サブカラー1〜2色、（3）アクセントカラー1色、（4）白・黒・グレイ・半透明色で構成されます。詳しくは次の記事が参考になるはずです。
35 アクセントカラーを本文などメインコンテンツの色に使ってはいけない
文章の基本色をアクセントカラーにするべきではありません（基本的に黒色にするのが良いでしょう）。
36 アクセントカラーを大面積を塗るのに使ってはいけない
アクセントカラー広い面積で使うべきではありません。本当に重要な部分にのみ使います。
37 メインカラー上で目立たないようなアクセントカラーを選んではいけない
このようにメインカラーにより存在感が弱まってしまうアクセントカラーを選ぶのはNGです。目立つ色にしましょう。
下部ナビゲーションについて
「下部ナビゲーション」とはページの下部の固定されるナビゲーションメニューのことです。
38 1〜2個しか項目のない場合には使わない
3つ以上項目がある場合にのみ下部ナビゲーションを使いましょう。
39 逆に6つ以上の項目を並べない
あまりにも多くの項目を並べるとタップミスを誘発していまいます。多くとも5個以下におさえましょう。
40 下部のナビゲーションはスクロールできるようにしてはいけない
スクロールにより他の項目が表示されるようにするのはNGです。
41 それぞれの項目にカラフルな色をつけない
このように各ラベルの色をカラフルにしてしまうと、現在どこを選択しているのか分からなくなってしまいます。
42 長すぎるラベルテキストは使わない
このような長いラベルテキストは使わずに、一目見て分かるような簡潔なものにしましょう。また、ラベルテキストのサイズは統一します。
43 ラベルテキストは改行しない
狭いスペースでテキストを改行すると煩雑な印象を与えてしまいます。ラベルテキストは1行におさえるようにします。
44 下部ナビゲーションを使うなら、スワイプで画面が切り替わるようにしない
下部ナビゲーションのラベルをタップしたときに、画面が切り替わるようにしましょう。
モーダル底部シートについて
モーダル底部シートとは、スマホやタブレットで下からにゅっと現れるメニューのことです。基本的にアプリで使われるものですね。
45 余計なスペースを作らない
メニューの上下に無駄なスペースが入らないようにしましょう。コンテンツ量に合わせた長さにします。
46 モーダル底部シートをアプリバーに重ねてはいけない
モーダル底部シートは、外側をタップしたときに閉じるようにします。外側のスペースが十分確保できるほどに短くしましょう。
アイコンについて
47 立体的なアイコンは使わない
カラフルなアイコンや立体的なアイコンを使うのはNGです。
48 複雑すぎるアイコンを使ってはいけない
また、形が複雑なアイコンはNGです。シンプルなもののみ使うことができます。
49 斜めから見たようなアイコンは使わない
斜めから見たような形のアイコンを使うことは推奨されていません。
このように真横から見たような形のアイコンを使いましょう。
50 顔を無生物につけてはいけない
物体など生き物でないものに顔をつけたアイコンを使うことも推奨されていません。
51 末端に丸みのあるアイコンを使ってはいけない
線の末端に丸みのついたものや、線の幅が異なるものは使わないようにします。
「細かいな」と思わずにはいられませんが、つまりはGoogleの提供しているマテリアルデザイン用のアイコン（無料・商用利用可）を使うのがいちばんということですね。
スナックバーについて
スナックバーとは、画面下部に表示される「ユーザーの操作に対して簡単なフィードバックをするためのバー」です。Google Fontsなどでも使われていますね。
52 スナックバーにアイコンを使ってはいけない
このように前後にアイコンを使用するのはNGです。シンプルなテキストだけを表示するようにしましょう。
53 ２つ以上重ねてはいけない
スナックバーを複数個重ねて表示させるのはやめましょう。
54 スナックバーに否定的なアクションを含めない
スナックバーにはテキストだけでなく、何らかの操作ボタンをつけることができますが、「終了」や「キャンセル」などの否定的な操作ボタンはつけないようにします。
55 ２パターン以上の操作ができるようにしない
また、操作ボタンは1つだけにおさえるようにしましょう。
56 スナックバーをフローティング操作ボタンの上に重ねない
スナックバーを表示させる場合は、その分だけFABの表示位置を上に動かすか非表示にします。
タブについて
タブは画面上部のこの部分のことですね。画面の切り替えのために使われます。
57 タブを複数行に分けない
このように各項目を1行ごとに表示させるのはNGです。タブ全体で1行におさえましょう。
58 タブを入れ子にしない
「親タブの下に子タブ」を配置するような入れ子構造にしてはいけません。これは知らないと間違えてしまいそうですね。
59 タブのラベルの長さをバラバラにしない
タブのラベルの長さは同じにします。ラベル内のテキストは短く簡潔なものにしましょう。
60 ラベルにテキストとアイコンを混在させない
全ラベルにアイコンを使うか、テキストを使うか、どちらかに統一するようにします。
写真の使い方について
61 ストック写真は使わない
ストック写真はなるべく使わないようにします。本物らしさに欠けるためです。他とは違う独自性とリアリティーのある写真を使いましょう。
62 どこを見れば良いのか分からない写真は使わない
重点が曖昧で、どこを見れば良いのか分からないような写真はできるだけ使わないようにしましょう。
63 特定の実写物を表現するときに、抽象的な写真を使わない
想像力に任せるものではなく、そのもの自体を具体的に表すような写真を使います。
影について
64 低い位置にあるものに大きな影をつけない
マテリアルデザインでは影により重なり順（高度）を表現します。そのため、低い位置にあるものに大きな影をつけるのはNGです。
65 ホバー・タップ時に影を小さくしない
ユーザーの操作により影を大きくすることで、ふわっと浮き上がったような見せます。
アニメーションについて
66 連続性のない動きにしない
カクカクした動きにはせず、連続性のある滑らかな動きにしましょう。
67 派手な動きにしない
ユーザーの視線をあちこちに動かして迷わせてしまうような派手な動きはNGです。シンプルなアニメーションにしましょう。
68 複数のものを様々な方向に同時に動かさない
例えば「カードを下に動かして、フローティング操作ボタンを左に動かす」のはNGです。シンプルでまとまりのある動きにします。
69 長いアニメーション にしない
なるべくユーザーを待たせないような短い動きにします。
70 アニメーションを短くしすぎない
何が起こったのか分からないほどに早い動きにはしないようにしましょう。
71 真上に動かすときに、弧を描いたような動かし方をしない
そのまま上にスライドさせます。右に動かすときにも、ぐるっとしたような動きにはせず、まっすぐ右に動かします。
72 タップにより要素を表示させるとき、関係のない場所から出現させない
例えば「画面の中心をタップすると、画面の右上からメニューが表示される」ような表現は分かりづらいためNGです。基本的にはタップした位置からメニューなどの要素を表示させるようにします。
参考
ここまでマテリアルデザインのガイドライン違反項目についてまとめてきました。マテリアルデザインの具体的な作り方については、こちらの記事でまとめています。
また、ガイドラインの日本語版はPDFで配布されているので、是非目を通してみることをおすすめします。 マテリアルデザイン日本語版ガイドライン