Material Design（マテリアルデザイン）は、Googleが定めるデザインシステムです。この記事では、WEBデザイナーが知っておきたいMaterial Designの基本をまとめました。
Material Designとは？
Material Designは、Googleが公開しているデザインシステムです。
- 2014年に登場し、現在は「Material 3（Material You）」という世代
- 対象は。Android・WEB・Flutter（Google製のアプリ開発ツール）など
- どのデバイス・ツールでも、統一したデザイン・操作にするためのもの
※この記事はGoogleの公開資料をもとにしています。ガイドラインの内容や名称は更新されることがあります。
Material Designの3つの原則
現実の紙やインクのような手触りを画面に持ち込み、意味のある動きで操作の意味を伝えることを重視しています。
１. マテリアルはメタファー（Material is the metaphor）
- 画面上の面を、光や影を持つ現実の紙のように扱う
- 面には厚みと重なりがあり、影の大きさで「どの面が手前にあるか」を示す
- 面が動いたり分かれたりする様子で、要素どうしの関係を伝える
2. 大胆で、図像的で、意図的に（Bold, graphic, intentional）
- 色・大きな見出し・余白・画像を使い、情報の優先順位を一目でわかるようにする
- 装飾を足すのではなく、文字の大きさや配置で意味の強弱をつける
- 押せる場所や次に見てほしい場所へ、自然に視線を誘導する
3. モーションは意味を持つ（Motion provides meaning）
- 画面の切り替えやボタンの反応に動きをつけ、何が起きたかを伝える
- どこから開いてどこへ戻るか、動きの向きで示す
- 飾りの動きではなく、操作の手がかりになる動きにする
具体的な数値や仕組み
単位
- 余白や部品の大きさは、解像度が違う端末でも同じ大きさに見える「dp（密度非依存ピクセル）」を使う
- 文字は、ユーザーの文字サイズ設定に追従する「sp」を使う
余白とグリッド
- 余白や部品の大きさを、8dpの倍数（8・16・24…）でそろえる
- アイコンや文字の位置は、より細かい4dpのグリッドに合わせる
- 一定の間隔でそろえることで、画面が整い、別の端末や画面幅でも崩れにくくなる
タップする領域
- 指でタップする部品は、最低でも48×48dpを目安にする
- 見た目のアイコンが小さくても、押せる範囲を48×48dp確保し、隣の部品と十分に離す
- よく使う操作は、片手で持ったときに親指が届く画面下部に置きやすいよう、下部ナビゲーションやフローティングボタンが用意されている
文字サイズとフォント
- 標準フォントはRoboto
- 見出しから本文まで、役割ごとに大きさ（タイプスケール）が決められている
- 文字はユーザーの文字サイズ設定に合わせて拡大され、大きくしても崩れない
- 文字と背景のコントラスト比は、本文で4.5:1以上、大きめの文字や太字の見出しで3:1以上にする
本文の基準はBody Largeの16spで、役割ごとの大きさは次のように分かれています（Material 3）。
| 役割 | Large | Medium | Small |
|---|---|---|---|
| Display（大きな表示） | 57sp | 45sp | 36sp |
| Headline（見出し） | 32sp | 28sp | 24sp |
| Title（小見出し） | 22sp | 16sp | 14sp |
| Body（本文） | 16sp | 14sp | 12sp |
| Label（ボタンなどの短い文字） | 14sp | 12sp | 11sp |
色と面の高さ（Elevation）
- 色は、基準色から明るさ違いの階調を作り、背景・文字・強調で役割を分ける
- 画面の各面を、背景から浮いた紙のように積み重ね、その浮き上がりの高さを「Elevation」と呼ぶ（単位はdp）
- 高く浮いた面ほど影が大きくぼやけ、手前にあるように見える（押せるボタンやメニューは一段高くして目立たせる）
- Material 3では、影に加えて面の色味を少し変えることでも高さを表す
操作のフィードバック
- ボタンを押すと、触れた位置から広がる波紋のような反応（リップル）で「押した」ことを返す
- 処理の結果は、画面下部に短く出る通知（スナックバー）などで伝える
その他
ウェブアクセシビリティの確保を前提とした上で、さらにその先の品質を目指すための指針です。アクセシビリティについては、ウェブアクセシビリティの記事にもまとめています。
Material 3（Material You）で変わったこと
Material 3では、端末ごとに色が変わる「ダイナミックカラー」が中心になりました。
- 壁紙の色から自動で配色を作り、システム全体やアプリの色をそろえる（Material You）
- 2021年のAndroid 12から取り入れられ、ユーザーごとに見た目が変わる
- 角の丸みが大きくなり、部品ごとに丸みの度合いを選べる
- 色を「主役の色」「背景の色」など役割（カラーロール）で指定し、ダークモードに対応しやすい
よくある質問（FAQ）
Q. Material Designは何を重視していますか？
現実の紙やインクのような手触りを画面に持ち込み、意味のある動きで操作の意味を伝えることを重視しています。Googleは、マテリアルはメタファー（Material is the metaphor）・大胆で図像的で意図的に（Bold, graphic, intentional）・モーションは意味を持つ（Motion provides meaning）の3つを原則として挙げてきました。面の重なりと影で階層を示し、色や余白で情報の優先順位を伝える考え方です。
Q. タップしやすいボタンの大きさはどれくらいですか？
Material Designは、指でタップする部品を最低でも48×48dpとることを目安にしています。dpは画面の細かさが違う端末でも同じ大きさに見えるようにした単位です。見た目のアイコンが小さくても、押せる範囲を48×48dp確保し、隣の部品と十分に離すと押し間違いを減らせます。AppleのHuman Interface Guidelinesは44×44ポイントを目安にしており、数値は違いますが狙いは同じです。
Q. Material 3（Material You）は以前と何が違いますか？
端末ごとに色が変わる「ダイナミックカラー」が中心になった点が大きく違います。壁紙の色から自動で配色を作り、システムやアプリの色をそろえます。角の丸みが大きくなり、色を役割（カラーロール）で指定してダークモードを作りやすくなりました。2021年のAndroid 12から取り入れられています。