【マテリアルデザイン】重なり順の考え方とコンポーネントの高度早見表

マテリアルデザインの重なり順の考え方

マテリアルデザインでのコンポーネント(=デザインを構成する部品)の重なり順の考え方と高度の値についてまとめておきます。

1. 高度・重なり順についてのルール

イベントにより高度が変わる

フォーカスにより高度が変わる

マテリアルデザインでは「ホバー時(カーソルを当てたとき)」や「フォームへの入力時」に、コンポーネントが浮き上がるような表現がよくされます。

レスポンシブ高度

このようなイベントにより変化する高度は「レスポンシブ高度」と呼ばれます。

ただし、何でもかんでも浮き上がるようにするのはNGです。

レスポンシブ高度をつかうべきもの

フローティング操作ボタン フローティング操作ボタン

浮き出しボタン(静止高度) 浮き出しボタン

カード(選択時) カード

検索バー(静止時) 検索バー

同じイベントで浮き上がる高さは一定

hover時には同じだけ浮き上がる

別のコンポーネントであろうと、同じイベントに対して「浮き上がる相対的な高さ」は一定です。たとえば、ボタンでもカードでも「ホバー時に浮き上がる高さ」は変わりません。

イベント終了後はもとの高度に戻る

イベントが完了もしくはキャンセルされたら(例えばカーソルが離れたら)、本来の静止高度に戻ります。

すり抜けたり、ぶつかったりするのはNG

高度の干渉は避ける

イベントにより浮き上がる際に、上部に位置するコンポーネントにぶつかったり、すり抜けたりしてはいけません。

ぶつかる前にどちらかのコンポーネントを非表示にしたり、別の位置に移動させたりすることで干渉を避けましょう。

高度は親要素に対する相対値

注意したいのは、ガイドラインで決められた高度は「親要素に対する相対的な値」ということです。つまり親要素の高度が高くなれば、その分だけ子の高度が高くなります。

コンポーネントの高度早見表

前述の通り、マテリアルデザインでは、各コンポーネントが置かれる高さが決まっています。ガイドラインでは英語の図しか無かったため、日本語に翻訳したものを作りました。

それぞれの高度

高度一覧 拡大して見る

「右ドロワー」などは横長となっていますが、これは「画面を覆う面積が大きい」コンポーネントであることを表しています。また、カードやフローティング操作ボタンなどは、タップやクリック時(押下時)に浮き上がります。そのときの高さも薄く表示されているわけですね。

画像付

見慣れないコンポーネント名も多いかと思うので、画像付きで高度を表にまとめます。

高度(dp) コンポーネント
24 ダイアログ Component 17 ダイアログ、選択ツール
16 ナビゲーションドロワー モーダル底部シート ナビドロワー&右ドロワー、モーダル底部シート
12 フローティング操作ボタン(押下時) フローティング操作ボタン(押下時)
9 サブメニュー サブメニュー(開くごとに+1dp)
8 メニュー カード(選択時) 浮き出しボタン(押下時) メニュー、カード(選択時)、浮き出しボタン(押下時)
6 フローティング操作ボタン スナックバー フローティング操作ボタン、スナックバー
4 アプリバー アプリバー
3 更新インジケーター スクロール時の検索バー 更新インジケーター、検索バー(スクロール時)
2 カード(静止時) 浮き出しボタン(静止高度) 検索バー(静止時) カード、浮き出しボタン、検索バー
1 スイッチ スイッチ

高さが明確に決まっているとデザインがしやすいですね。マテリアルデザインの詳しい作り方は、こちらの記事を読んでみてください。

サルワカ