エレベーション（概要）

2024年5月30日更新

エレベーションは、ブラウザ上で表示されるコンポーネントの高さの度合いを示します。

エレベーションのデフォルト値は高さレベル0で、これはエレベーションをもたないコンポーネントのこととなります。デフォルト値をもつコンポーネントはブラウザ上で最も低く表示されます。コンテンツエリアに表示されている各種のコンポーネントの上に重なって表示されるダイアログやスナックバーなどのコンポーネントは、他のコンポーネントより高いエレベーションをもつことでオーバーレイ表示されます。

エレベーションの表現

エレベーションの表現には、ドロップシャドウとオーバーレイシェードがあります。

ドロップシャドウ

オーバーレイシェード

オーバーレイシェードは、オーバーレイの下に表示されるコンポーネントをユーザーの視線と操作を遮断するために、オーバーレイ表示の上のコンポーネントとの間に敷き詰められる透過背景です。

ドロップシャドウとエレベーション

ドロップシャドウは、ボタンやカードなどのエレベーションをもちうるコンポーネントが、その下にある背景（bodyのサーフェス）に影を落とす視覚効果です。高さレベル0の場合、それらは背景の表面上に描かれている表現となります。高さレベル1の時はドロップシャドウが強くなり、背景からわずかに浮いているように見える表現となります。疑似的な立体感を提供するドロップシャドウは、要素への注意をひいたり、可視性や階層感を高めるためによく使用されます。

ドロップシャドウの色、サイズ、透明度を調整することで、単一要素あるいは要素同士のエレベーションを演出します。

ほとんどの要素の高さは高さレベル0です。サービス全体で使用するコンポーネントがそれぞれどのような高さレベルをもつかを定義し、高さレベルに応じたStyle 1～8のドロップシャドウを適用してください。

ドロップシャドウは、ダイアログやスナックバーなど、エレベーションをもちうるコンポーネントで使用されます。ドロップシャドウの効果は下地との視覚的な高さを表現します。サービス全体で使用する各コンポーネントで必要な高さレベルに応じたスタイルを適用します。

スクリーンショット：エレベーションの見え方とその高低差を理解するための高低図を側面図として表示。上段の図はページ表面の高さレベルを示す白い長方形の上にエレベーションレベル０からレベル４までの５段階の見え方を白の正方形が左から右へ１列に等間隔で配置されている。右端からエレベーションレベル０はページ表面のレベルと同じ高さに位置し、順に高さレベルが高くなり、左端のレベル４はページ表面のレベルから最も高く浮いた感じを持つ正方形が位置している。下部の図はその見え方を側面から見た高低図。ページ表面のレベルはグレーの平行線が太い線で上部のページ表面の長方形と同じ長さで表現されレベル０として配置されている。ページ表面のレベルの点線から上に順番にレベル１からレベル４までの４つの平行線が点線で等間隔で表示され、各点線は下からレベル０からレベル４までのラベルが表示されている。上部の図で表示されている四角形の位置が各レベルに対応するように各レベル線に上部の図内の正方形の幅を持った線がグレーで表示され、レベル0からレベル４までの高低差を図式化している。

基本となる高さレベルを設定し、それを元に必要なレベルをいくつか設定します。
サービス全体で使用するコンポーネントを網羅したうえで、必要となる高さレベルを考えることで、デザインに統一感をもたらすだけでなく、高さの違いから生じる矛盾も回避できます。
多くの場合、高さのレベルの高いものはオーバーレイ表示するコンポーネントが覆いかぶさる表現のために、あるいはHover時にボタンが飛び出すような視覚効果として使用されます。

高さレベルの高低差

エレベーションをもつコンポーネントは、表示される状況によって高さレベルが相対的に変化しうることに注意してください。

必要な高さレベルの種類やその高低差はサービス全体で使用するコンポーネントが何であるかによって異なります。

高さレベルの高低差を広く取った場合と狭く取った場合では印象は異なります。サービスの目的や世界観に相応しい高さレベル設計をしてください。
ドロップシャドウのついた領域は視覚的に強調されますが、コンポーネントとその背景の境界として必要なコントラスト比を確保する目的で使用するものではありません。高さレベルは表示される状況に応じて相対的に変化しますので、ドロップシャドウがなくてもコントラスト比が確保されるようにデザインする必要があります。

高さレベルの高低差を広く取った場合

スクリーンショット：上部に高さレベルを視覚化した図と下部にその高低差を理解するための高低図を側面図として表示。上部の図はページの表面の高さレベルを表す一つの白い長方形が配置され、その長方形の上の中央部に約半分の面積にあたる一つの白い長方形がドロップシャドウを付けて配置されている。そのため上部の長方形はページ表面から大きく浮き上がっているように見える。下部の図は上部で示されたページ表面のレベルを上部のページ表面の四角形と同じ幅で濃いグレーの太い平行線で表示され、そのグレー線と接する平行線が点線で描かれている。そのページ表面のレベルの上部に、レベル１を表す平行線がやや大きめな間隔を持って描かれ、全体としてページ表面の高さを基準としたレベル１の高さを示す高さの側面図となっている。レベル１の平行線の左端にはL1のラベルが表示され、上部の図で示された中央の四角形が同じ幅を持った薄いグレーのやや太い線でレベル1の平行線に接する形で配置されている。その側面図はページ表面レベルの上方に置かれた四角形の配置が高さレベルを大きく取った状態の高低図となっている。

UIに十分な余白が与えられている場合に使用します。視覚的に適度な強調を与えたり、Hover時の注意を喚起することができます。

高さのレベルの高低差を狭くとった場合

スクリーンショット：上部に高さレベルを視覚化した図と下部にその高低差を理解するための高低図を側面図として表示。上部の図はページの表面の高さレベルを表す一つの白い長方形が配置され、その長方形の上の中央部に約半分の面積に当たる一つの白い長方形がドロップシャドウを付けて配置されている。そのため上部の長方形はページ表面からやや浮き上がっているように見える。下部の図は上部で示されたページ表面の四角形が同じ幅を持った濃いグレーの太い平行線で表示されている。そのグレー線と接する平行線が点線で描かれ、その上部にページ表面のレベルから上へ順に、レベル１とレベル２を表す平行線がやや狭い間隔で等間隔に点線で引かれ、全体としてページ表面の高さを基準としたレベル１とその上のレベル２の２段階の高さの違いを示す側面図となっている。レベル１とレベル2の平行線の左端にはL1と、L2のラベルが表示され、上部の図で示された中央の四角形が同じ幅を持ったやや薄いグレーの太い線でレベル1の平行線に接する形で配置れれているが、その上のレベル2の平行線には何も置かれていない。その側面図はページ表面レベルより高いが、低いレベル1に置かれた四角形の配置が高さレベルを低く取った状態としての高低図となっている。

システムや管理画面など、情報やUI要素が過密になる場合は高低差を狭くして視覚表現を最小限にすることで見るべきデータやUIの操作に集中できるようにします。

固有の高さのレベル

高さレベルが0のコンポーネントの表面上に、直接接地するコンポーネントの高さレベルは0となります。ただし立体感のあるコンポーネントやHover時に高さのレベルを変えるコンポーネントはあらかじめそれ以上の高さレベルを確保して他のコンポーネントの高さレベルを設計してください。

立体感のあるコンポーネントの場合

スクリーンショット：上部に高さレベルを視覚化した図と下部にその高低差を理解するための高低図を側面図として表示。上部の図はページの表面の高さレベルを表す一つの白い長方形が配置され、その長方形の上の中央部の左右に白い正方形が一つずつ並んで配置されている。左の正方形はドロップシャドウが無く、グレーの外枠線のみで表示されているので、ページ表面と同じ高さレベルとして表示されている。右の正方形はその４つの縁から正方形の内部に沿うように陰が施され、上面の縁が丸みを帯びているように見え、それ自体が厚みを持つような表現が施されている。下部の図は上部で示されたページ表面の四角形と同じ幅を持った濃いグレーの太い平行線で表示されている。そのグレー線と接する平行線が点線で描かれ、点線の左端にL0のラベルを配置し、高さレベル0を形成している。その点線の上から間隔を持った、もう一つの平行線が点線で引かれ、レベル1の高さを形成している。レベル１の点線の左端にはL1のラベルが表示され、全体として２つの高さレベルを示す座標となっている。上部の図で示された左側の外枠線のみの四角形がL0の点線上にやや薄いグレーで表示され、右側の内に陰を持った四角形は、ページ表面レベル0を底辺にレベル1の点線までそれ自体で高さを持ったグレーの色面として表示され、上部の角が丸みを帯びている立方体として表示されている。

立体感のあるコンポーネントは設置面はレベル０ですが、厚みを持つためコンポーネント自体のサーフェスはレベル1になります。

Hover時の高さのレベルを確保する場合

スクリーンショット：上部に高さレベルを視覚化した図と下部にその高低差を理解するための高低図を側面図として表示。上部の図はページ表面の高さレベルを示す一つの白い長方形が配置され、その長方形の上に左右に一つずつ白い正方形が並んで配置されている。左の正方形は弱いドロップシャドウが施され、ページ表面からやや浮いている感じ、右の正方形はより強いドロップシャドウが施され、ホバー時のページ表面からより浮いた感じが表現されている。下部の図は上部で示されたページ表面の四角形と同じ幅を持った濃いグレーの太い平行線で表示され、そのグレー線と接する平行線が点線で引かれ、更にその上に等間隔に2つの平行線が点線で描かれている。各平行線の左端に下からL0、L1、L2のラベルが表示され、ページ表面のレベル0、レベル1、レベル２までの３段階の高さの違いを示す側面図となっている。上部の図で示された左側の弱いドロップシャドウの四角形がレベル1の点線上に上部の正方形と等幅でやや薄いグレーで表示されている。右側の強いドロップシャドウの四角形は、ノーマル時の状態が上部の正方形と等幅でグレーの枠線でレベル１に描かれており、ホバー時の状態は等幅のグレーの塗り線でレベル２に表示されている。ノーマル時の枠線とホバー時の塗り線の間には四角形の高さレベルの移動を可視化するグラデーションの色面が施されている。

Hover時に高さを変えるコンポーネントは設置されている高さのレベルよりも少なくとも1レベル以上の高さを確保して設計します。

オーバーレイの高さレベル

ダイアログのUIコンポーネントのように、もともと表示されているコンポーネントの上方にオーバーレイ（浮いているように）表示されるコンポーネントの高さレベルは、少なくとも2段階上となります。高さレベル0のコンポーネントしか表示されていない時は高さレベル2でダイアログを表示することができますが、高さレベル1のボタンが表示されている場合は高さレベル3以上で表示する必要があります。

もともとオーバーレイ（浮いているように）表示されるコンポーネントの高さレベル

スクリーンショット：上部に高さレベルを視覚化した図と下部にその高低差を理解するための高低図を側面図として表示。上部の図はページの表面の高さレベルを示す一つの白い長方形が配置され、その長方形の上に弱いドロップシャドウを持つ小さな４つの白い長方形が左から右へ一列に等間隔で並んで配置されている。その４つの長方形の上部により強いドロップシャドウを持つ横長の大きなグレーの長方形が左端の小さな長方形の右３分の１から右端の小さな長方形の左３分の１を覆いかぶさる形で配置され、最下部のページ表面のレベル、また、その上の４つの長方形の高さレベルからは大きく浮いた感じで表示されている。下部の図は上部で示されたページ表面の四角形と同じ幅を持った濃いグレーの太い平行線で表示されている。そのグレーの太線に接する平行線が点線で描かれ、点線の左端にL0のラベルを配置し、高さレベル０を形成している。レベル０の平行線の上にレベル１からレベル4までの４本の平行線が等間隔で点線で描かれ、各線の左端にレベル１を示すL1からレベル4を示すL4までのラベルを表示し、ページ表面のレベル0からレベル4までの５段階の高さの違いを示す側面図となっている。上部の図で示された薄いドロップシャドウを施された４つの四角形がレベル１の平行線に上の図の四角形と等幅でやや濃いグレーの線で均等に配置されている。上の図の強いドロップシャドウを施された横長の長方形が輪郭線を持ったグレーの太い線で、レベル２を超えてレベル３の平行線上に配置されているため、それ自体が固定的な高さのレベルを持っていることが表現されている。

この作例の場合、他のコンポーネントが高さレベル1に表示されていますので、ダイアログコンポーネントはその二段階高い、高さのレベル3以上に配置されます。

高さレベルの基準

コンポーネントの高さレベルは直下にあるコンポーネントの高さレベルによって相対的に確定するパターンと、常に固定の高さレベルを維持するパターンとがあります。

常に固定の高さレベルを設定する場合は、サービス全体で使用するコンポーネントと表示される状況を把握したうえで固定の値を設計してください。

エレベーションをもつコンポーネントを一定の基準に基づくように設計することで、デザインに統一感をもたらし学習効率を高めます。ただし、過度なエレベーション定義は避けてください。高低差をもつことで理解が容易になるUI構造の場合にだけエレベーションを設定します。

基準の可変性

スクリーンショット：上部に高さレベルを視覚化した図と下部にその高低差を理解するための高低図を側面図として表示。上部の図はページ表面の高さレベルを示す一つの白い長方形が配置され、その長方形上の中央部に大小二つの白い長方形が積み上げられた形で配置されている。下に配置された大きな長方形はページ表面の平面の約２分の１の面積を持ち、ドロップシャドウが施されている。上部の小さな長方形は下の長方形２分の１で、こちらもドロップシャドウが施されている。双方のドロップシャドウの強さは同じ強さで表現されているが高さレベルは視覚的に小さな長方形を最上位とし、その下に大きな長方形、最下位にページ表面として表示されている。下部の図は上部で示されたページ表面の四角形と同じ幅を持った濃いグレーの太い平行線で表示されている。そのグレーの太線に接する平行線が描かれ、その上部に等間隔に2本の平行線が描かれ、平行線の左端にレベル1を示すL1のラベルとレベル２を示すL2のラベルが表示され、ページ表面、レベル１、レベル２の３段階の高さレベルを形成している。上部の図で示された下のドロップシャドウ付きの大きな長方形は薄いグレーの太線でレベル1の点線に接するかたちで配置されている。一方、上部の図のドロップシャドウ付きの小さい長方形は薄いグレーの太線でレベル2の点線に接するかたちで配置されいる。双方の長方形自体が持つドロップシャドウが表す高さレベルは同じだが、その直下に配置されたオブジェクトや面のレベルの高さを基準として変化し、全体的な高さレベルでは異なる高さに位置することがあることを表示している。

高さレベル1のオブジェクトを下地にし、その上にあるオブジェクトに高さレベル1分の高さを与え、レベル2の高さレベルを与えている例。レベル2の高さレベルに位置するオブジェクトはレベル1のオブジェクトを下地にした条件でレベル2の高さレベルを維持します。

基準とドロップシャドウのスタイル

スクリーンショット：上部に高さレベルを視覚化した図と下部にその高低差を理解するための高低図を側面図として表示。上部の図はページ表面のレベルを示す一つの白い長方形が配置され、そのページ表面の上の中央部にページ表面の面積の２分の１ほどのもう一つの白い長方形が強いドロップシャドウを持って配置されている。強いドロップシャドウを持った長方形は下のページ表面から浮いた感じが強く出ている。下部の図は上部で示されたページ表面の四角形と同じ幅を持った濃いグレーの太い平行線でページ表面が配置されている。そのグレーの太線に接する平行線が描かれ、その上部に等間隔に2本の平行線が配置され、平行線の左端にレベル1を示すL1のラベルとレベル２を示すL2のラベルが表示され、ページ表面、レベル１、レベル２の３段階の高さレベルを形成している。上部の図で示されたドロップシャドウ付きの長方形は薄いグレーの太線でレベル１を超え、その上部のレベル２の点線に接する形で配置され、ドロップシャドウの強さの度合いと高さレベルとの関係を示している。

通常の高さレベル０を下地にし、その上にあるオブジェクトにレベル2の高さを与えた場合。高さレベル2のオブジェクトに適用しているドロップシャドウのスタイルが、高さレベル1のオブジェクトが間にある場合とは異なることに注意してください。

オーバーレイシェードの高さレベル

オーバーレイシェードは、オーバーレイ表示以外のコンポーネントの中で最も大きな高さレベルをちょうど覆うように敷き詰められ、オーバーレイシェードの表面を高さレベルは0にリセットします。オーバーレイシェード上に表示されたエレベーションを持たないコンポーネントはリセットされた高さレベルの0に、またエレベーションを持つコンポーネント高さレベル1以上のドロップシャドウを適用します。

オーバーレイ表示されるコンポーネントがモーダル展開される場合に使用して、親要素への視線や操作を遮断します。オーバーレイシェードに覆われたアンダーレイの要素を操作することはできません。
※オーバーレイシェードはモードレスダイアログの表示時には使用できません。

原則、親要素側の画面全体に敷き詰めますが、画面全体の範囲をコンテンツボディの範囲内と定義することは可能です。

オーバーレイシェードの高さは直下の高さレベルと同レベルとなりますが、その高さレベルの中でもっとも上にあるものとします。
オーバーレイシェードそのものによって高さレベルは0にリセットされます。
オーバーレイシェード自体は原則としてクリッカブル領域（フォーカス可能領域）ではありません。オーバーレイ表示されるコンポーネントの中にモードの状態を解除するトリガーを用意する必要があります。

オーバーレイシェードによる高さレベルのリセット

スクリーンショット：上部に高さレベルを視覚化した図と下部にその高低差を理解するための高低図を側面図として表示。上部の図はページ表面の高さレベルを示す一つの白い長方形が配置され、透過のある黒の色面がオーバーレイシェードとして全体を覆い隠している。オーバーレイシェードの表面に接した形でページ表面の面積の２分の１ほどの長方形が配置されている。下部の図は上部で示されたページ表面の四角形と同じ幅を持った濃いグレーの太い平行線でページ表面が配置されている。そのグレーの太線に接する平行線が描かれ、その上部に等間隔に2本の平行線が配置され、すべての平行線の左端にレベル０からレベル２を示すL0、L1、L2のラベルが打ち消し線で表示されている。打ち消し線L1の平行線に接する形で下に上部のオーバーレイシェードが黒の太い平行線で「オーバーレイシェード」の記述とともに描かれている。上部の図に示されたページ表面の半分の白い長方形が打ち消し線L1に接する形でオーバーレイシェードの表面上に置かれた太いグレーの平行線で配置されている。打ち消し線L1のラベルの右側に「L0（リセット値）」の表示があり、オーバーレイシェードによって高さレベルの基準がリセットされたことを表している。同様に最上レベルの打ち消し線L2の右側に「L1（リセット値）」の表示があり、オーバーレイシェードによる高さレベル基準の変更を反映している。

オーバーレイシェードは一時的に全てのコンポーネントを覆い隠し、その下層に配置された全てのUIコンポーネントへのアクセスを止めます。オーバーレイシェードは少なくとも高さレベル1以上に配置され、表示時の高さレベルはオーバーレイシェードを配置した高さのレベルを基準にリセットされます。

オーバーレイシェードの高さレベル

スクリーンショット：上部に高さレベルを視覚化した図と下部にその高低差を理解するための高低図を側面図として表示。上部の図はページ表面の高さレベルを示す一つの白い長方形が配置され、その上部に異なった高さレベルのドロップシャドウを持った２つの正方形が左右に配置されている。ページ表面とその上に配置された正方形の上部に透過のある黒の色面がオーバーレイシェードとして全体を覆い隠し、ページ表面と正方形はオーバーレイシェードの透過越しに見ることができる。オーバーレイシェイドに下に位置する右側の小さな白い正方形の上に更に小さい白い四角形がオーバーレイシェードの上に配置されている。また、ドロップシャドウを持った白い色面がページ表面の左から全体の約３分の１の面積のオーバーレイシェードを覆い隠している。下部の図は5本の平行線が点線で等間隔で配置され、各平行線の左端に下からL0、L1、L2、L3、L4のラベルが打ち消し線で配置されている。上部の図で示されたページ表面の四角形が同じ幅を持った濃いグレーの太い平行線で、打ち消し線L0の平行線に接するかたちで配置されている。上部のオーバーレイシェードによって覆い隠された左側の正方形は打ち消し線L1の平行線に接するグレーの短い線で配置され、同じく右側の正方形は打ち消し線L2の平行線に接するグレーの短い線で配置されている。オーバーレイシェードは打ち消し線L3の平行線に接するかたちでページ表面の幅を持った黒の太い線で「オーバーレイシェード」の記述とともに配置されている。上の図のオーバーレイシェードの上に位置する小さい正方形は打ち消し線L3の平行線に接するかたちでグレーの線で配置されている。更に、上の図のオーバーレイシェードを覆う色面は最も高いレベルの打ち消し線L4の平行線にグレーの線で配置されている。オーバーレイシェードによってリセットされた打ち消し線L3のラベルは「L0（リセット値０）」として表記され、打ち消し線L4のラベルは「L1（リセット値１）」として表示され、オーバーレイシェードによる高さレベル基準の変更を反映している。

オーバーレイシェードは常に最高位の高さレベルの既存コンポーネントの上に配置されます。オーバーレイシェード上に表示されたエレベーションを持たないコンポーネントはリセットされた高さレベルの0に、またエレベーションを持つコンポーネント高さレベル1以上のドロップシャドウを適用します。