マテリアルデザインでやってはいけない72のこと(間違いチェックリスト)

マテリアルデザインの間違い

マテリアルデザインでは、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をページ内にいくつも使ってはいけない

間違った例

FABを1枚1枚のカードの上においてはいけない

ガイドラインでは「基本的に1ページにつき1つだけ使う」ことが推奨されています。ただし、この基準はやや曖昧で、同じくらい重要な操作が複数ある場合には、2個以上使っても良いとされています。なんにせよ、本当に重要な操作に対してのみFABを割り当てるようにしましょう。

22 FABをフラットにしてはいけない

間違った例

フラットにしてしまう間違いの例

FABはカードなどよりも高い位置に置かれています。影をつけることで、前面に浮き出ていることを伝えましょう。

23 重要でない操作を割り当ててはいけない

間違った例

FABの間違い例

この画像のように、ユーザーにとって重要度の低い操作をFABで割り当てることはできません。重要な操作がないページでは、FABを使うのはやめましょう。

24 FABをメニューや戻るボタンとして使ってはいけない

これは間違えやすいポイントだと思います。メニュー操作が重要だと感じられる場合でも、FABをメニューボタンにしてはいけません。これらの機能は、画面上部のツールバー(アプリバー)に配置します。

25 FABに否定的な操作を割り当ててはいけない

例えば、削除ボタンにするのはNGです。これはユーザーは「誤ってタップしてしまわないか」と落ち着かなくなってしまうからでしょう。

26 FABをメインカラーと同じ色にしてはいけない

間違った例

FABの塗りつぶしの間違い

最も重要な機能を実行するためのボタンです。背景に馴染んでしまうような色使いはNGです。メインカラーとは異なるアクセントカラーを使って目立つようにしましょう。

27 FABを正円以外の形にしてはいけない

四角形や三角形にするのはNGです。また、楕円形もNGです。

28 FABに立体感を出さない

グラデーションやエンボス、ボーダーなどによる立体表現はNGです。余計な枠や囲い線をつけるのもやめましょう。

29 FABにテキストはのせない

何の操作ができるのか一目見て分かるようなアイコンを1つだけ載せます。

30 ボタンを画面の端ギリギリに配置しない

画面の端から十分に余白を取りましょう。

31 タップによりアクションの選択肢を表示させる場合、6つ以上表示しない

間違った例

タップするとメニューが表示されるfab

FABでは、タップによりアクションの選択肢を提示することができます。しかし、6つ以上の選択肢を提示するのはNGです。5つ以内におさえましょう。

32 逆に選択肢を少なくしすぎない

間違った例

選択肢を少なくしすぎない

最低でも3つは表示させます。つまり選択肢は3〜5個にするということですね。

33 表示させる選択肢の中にメニュー操作を含めない

間違った例

表示されるアクションボタンの中にメニューを表示させない

このようにメニューアクションを配置すると、ユーザーは何度もボタンを押さなければいけません。すぐにアクションが実行される選択肢のみ表示します。

34 FABをカードなどのマテリアルの下に配置させてはいけない

FABを表示する場合、他のマテリアルの下に隠れてしまわないようにしましょう。アニメーションなどにより他のマテリアルがFABと重なってしまうような場合、FABを上下左右に動かすか、非表示にします。

色の使い方について

マテリアルデザインは、基本的に(1)メインカラー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 2つ以上重ねてはいけない

間違った例

重ねてしまうのはNG

スナックバーを複数個重ねて表示させるのはやめましょう。

54 スナックバーに否定的なアクションを含めない

間違った例

否定的なアクションを含めない

スナックバーにはテキストだけでなく、何らかの操作ボタンをつけることができますが、「終了」や「キャンセル」などの否定的な操作ボタンはつけないようにします。

55 2パターン以上の操作ができるようにしない

また、操作ボタンは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で配布されているので、是非目を通してみることをおすすめします。 マテリアルデザイン日本語版ガイドライン

サルワカ