UIデザインガイドライン

マテリアルデザイン|No.02:Elevation|日本語解説

この記事から得られること

この記事では、Google社提供の「マテリアルデザイン」ガイドラインにおける「Elevation(高さ)」の概念について学ぶことができます。

なお、この記事は「約4〜7分」で読める内容になっています。

Material Design : Design section “Elevation”
URL:https://material.io/design/environment/elevation.html

この記事の前提

この記事では、私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。

また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
理由は、日本語に翻訳しますと不自然な表現となるためです。
少し読みにくい部分もあるかもしれませんが、ご了承ください。

なお、この記事を読み進めるなかで、もし分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。

マテリアルデザイン|No.00:概要と構成|日本語解説この記事では、Googleが提供しているUIデザインガイドライン「マテリアルデザイン(Material Design)」の概要と、そのコンテンツ構成について学ぶことができます。...

”Elevation” とは?


出典:Material Design : Design section “Elevation”
URL:https://material.io/design/environment/elevation.html

マテリアルデザインにおける「Elevation」とは、簡単に言いますと「Surfaceの高さ」のことです。

なお「Surface」について詳しく学びたい方は、よろしければこちらの記事もご確認ください。

マテリアルデザイン|No.01:Surfaces|日本語解説この記事では、Google社提供の「マテリアルデザイン」ガイドラインにおける「Surface(サーフェス)」という概念の「デザイン概要」「Surfaceの種類」「見え方のルール」「変形のルール」「動き方のルール」などを学ぶことができます。...


出典:Material Design : Design section “Elevation”
URL:https://material.io/design/environment/elevation.html#elevation-in-material-design

そして、このElevationが変化しますと、上の図のように「Surfaceの影」もElevationの位置に合わせて変化します。


出典:Material Design : Design section “Elevation”
URL:https://material.io/design/environment/elevation.html#elevation-in-material-design

また、Surfaceの上にSurfaceが重なっている場合は、上の図のようにSurface上に影がおちます。
この影によって、それぞれのSurfaceのElevationが異なることがわかります。

それでは、次に「Resting elevation」について解説します。

”Resting elevation” とは?


出典:Material Design : Design section “Elevation”
URL:https://material.io/design/environment/elevation.html#elevation-in-material-design

「Resting elevation」とは、各コンポーネントに規定されている「止まっているときのElevation」です。

なお「コンポーネント」について詳しく学びたい方は、よろしければこちらの記事もご確認ください。

UIデザインの専門用語|「コンポーネント」とは?UIデザインにおいて使われる専門用語「コンポーネント(Component)」とは何か、を学ぶことができます。...

また、コンポーネントが同じならば、そのResting elevationも同じとなっています。
例えば、上の図の「B」のカード型のコンポーネントはそれぞれ同じElevationとなっています。

それでは次に、「Dynamic elevation offset」について解説します。

”Dynamic elevation offset” とは?

「Dynamic elevation offset」とは、「移動中のコンポーネントのElevation(つまり、移動中のコンポーネントの高さ)」のことです。

コンポーネントはユーザーの操作によって、そのElevationをResting elevationからDynamic elevation offsetへ変化させて、移動させることができます。
そして、ユーザーの操作が完了しますと、コンポーネントはResting elevationに戻ります。

また、コンポーネントは移動するときに、その他のコンポーネントとぶつかることはありません。
ぶつかるような移動をする場合は、どちらかのコンポーネントを一旦非表示にします。

なお、可能であれば、「コンポーネント同士がぶつからないようにレイアウトする」ことが望ましいと、ガイドラインでは規定されています。

それでは次に、SurfaceのElevationを表現するための「Edge」という概念について解説します。

Surfaceの “Edge” とは?


出典:Material Design : Design section “Elevation”
URL:https://material.io/design/environment/elevation.html#depicting-elevation

Surfaceの「Edge」とは、「Surfaceの輪郭(りんかく)」のことです。

「Edge」を直訳しますと「角(かど)」ではありますが、マテリアルデザインでは「輪郭」と解釈したほうが分かりやすいと思います。

基本的にSurfaceのEdgeは「影:上図①」で表現されますが、そのほかにも「それぞれのEdgeを異なる配色にする:上図②」「異なる不透明度にする:上図③」といった方法で表現することもできます。


出典:Material Design : Design section “Elevation”
URL:https://material.io/design/environment/elevation.html#depicting-elevation

その他にも、「Scrimmed background(暗い処理がされた背景)」を使用することにより、ElevationのEdgeを表現することもできます。

「Surfaceの動き」によるElevationの表現

Elevationの変化は「Surfaceの動き」によっても表現することができます。
マテリアルデザインガイドラインでは、具体的に以下の「Surfaceの動き」が解説されています。

  • Changes in shadows:Surfaceの影のサイズを変える
  • Displaying overlap:Surfaceを重ねるように動かす
  • Pushing:Surfaceを押し出すように動かす
  • Scaling:Surfaceの縦横のサイズを変える
  • Parallax:Surfaceの動くスピードを変える

それぞれの実際の動きについては、Webサイト上で動画で解説されていますので、ぜひそちらをご確認ください。

Material Design : Design section “Elevation > Motion and elevation”
URL:https://material.io/design/environment/elevation.html#depicting-elevation

各コンポーネントのElevationの初期値


出典:Material Design : Design section “Elevation”
URL:https://material.io/design/environment/elevation.html#default-elevations

すべてのコンポーネントには、「Resting elevation(止まっているときの高さ)」と「Dynamic elevation offset(移動しているときの高さ)」の初期値があります。

各コンポーネントのElevationの初期値は上の図をご参照ください。

なお、図の中の説明用語は以下の通りです。

  • Rased state:コンポーネントが移動しているときの高さ
  • Path of travel:コンポーネントが移動するときのElevationの変化量
  • Resting state:Resting elevationのこと

まとめ

マテリアルデザインにおける「Elevation」とは、簡単に言いますと「Surfaceの高さ」のことです。

そして、それぞれのコンポーネントでは「Elevationの初期値」を持っており、そのルールに従って、表示したり移動させたりすることができます。

この「Elevation」は「マテリアルデザインの考え方」として基本的な内容となりますので、英語原文でもぜひご確認ください。

Material Design : Design section “Elevation”
URL:https://material.io/design/environment/elevation.html#default-elevations

最後までお読みいただきありがとうございます。
今回の記事は以上です。

この内容がみなさんのUIデザインの勉強になりましたらうれしいです。
引き続き、UIデザインの勉強を一緒にしていきましょう。

続きを学びたい方は

なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事をご確認ください。

次のガイドラインを学びたい方は
マテリアルデザイン|No.03:Light and shadows|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Light and shadows(光と影)」の概念について学ぶことができます。...

一つ前のガイドラインを学びたい方は
マテリアルデザイン|No.01:Surfaces|日本語解説この記事では、Google社提供の「マテリアルデザイン」ガイドラインにおける「Surface(サーフェス)」という概念の「デザイン概要」「Surfaceの種類」「見え方のルール」「変形のルール」「動き方のルール」などを学ぶことができます。...

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA