UIデザインガイドライン

マテリアルデザイン|No.03:Light and shadows|日本語解説

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

この記事では、Google社提供の「マテリアルデザイン」ガイドラインの「Light and shadows(光と影)」の概念について学ぶことができます。

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

Material Design : Design section “Light and shadows”
URL:https://material.io/design/environment/light-shadows.html

この記事の前提

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

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

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

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

“Light”と”Shadow” の概要とその関係性


出典:Material Design : Design section “Light and shadows”
URL:https://material.io/design/environment/light-shadows.html#light

マテリアルデザインでは「仮想の2つの光(Light)」がSurfaceを照らしており、その2つの光によって、2種類の「影(Shadow)」が生成されます。
そして、片方の光だけでは「Light and shadows」としては成り立たず、「2つの光を同時に使用すること」がガイドライン上でルールとして規定されています。

上の図は、その2つの光がSurfaceに当たることによって生成された影を示しています。

1つ目の光 ”Key light”


出典:Material Design : Design section “Light and shadows”
URL:https://material.io/design/environment/light-shadows.html#light

1つ目の光である「Key light」は、メインの光であり、「Key shadow」と呼ばれるシャープな影を作ります。

2つ目の光 “Ambient light”


出典:Material Design : Design section “Light and shadows”
URL:https://material.io/design/environment/light-shadows.html#light

2つ目の光である「Ambient light」は、あらゆる角度から照らしている光のことあり、そこから生まれる「Ambient shadow」は、ぼんやりとした影を生成します。


出典:Material Design : Design section “Light and shadows”
URL:https://material.io/design/environment/light-shadows.html#light

なお、上図のように影が見えにくい暗い背景においても、「Light and shadows」の概念を適用するルールとなっています。
それでは次に、影の特徴について解説します。

”Elevation” による”Shadow”の変化


出典:Material Design : Design section “Light and shadows”
URL:https://material.io/design/environment/light-shadows.html#shadows

「Shadow」の見え方は、上図のようにSurfaceのElevationによって変化します。
逆に言い換えますと、Surfaceのサイズが変化しても、SurfaceのElevationが変化しなければ、Shadowは変化しません。

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

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

どうして ”Light and shadows” の概念をUIに取り入れている?


出典:Material Design : Design section “Light and shadows”
URL:https://material.io/design/environment/light-shadows.html#shadows

Google社のユーザー調査によりますと、「Light and shadows」の概念をUIに取り入れることによって、弱視の方に対して以下の効果が得られたことがわかっています。

  • UIデザインを表示したときに、それぞれのコンポーネントを簡単かつ迅速に見つけることができる。
  • コンポーネントにShadowを使用すると、「コンポーネントを操作できるかどうか」を判断するスピードが向上した。

つまり、UIデザインとしての「見やすさ向上」を目的に「Light and shadows」の概念を取り入れています。

まとめ


出典:Material Design : Design section “Light and shadows”
URL:https://material.io/design/environment/light-shadows.html#light

繰り返しとはなりますが、マテリアルデザインでは「仮想の2つの光(Light)」がSurfaceを照らしており、その2つの光によって、2種類の「影(Shadow)」が生成されます。

そして、片方の光だけではマテリアルデザインとしては成り立たず、「2つの光を同時に使用すること」がガイドライン上で規定されています。

この「Light and shadows」は「紙(Surface)に光を当てると影が落ちる」という「マテリアルデザイン」の特徴的な概念の部分となりますので、英語原文でもぜひご確認ください。

Material Design : Design section “Light and shadows”
URL:https://material.io/design/environment/light-shadows.html#light

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

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

続きを学びたい方は

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

次のガイドラインを学びたい方は
マテリアルデザイン|No.04:Pixel density|日本語解説この記事では、Google社提供の「マテリアルデザイン」ガイドラインにおける「Understanding layout」の章と、「Pixel density(ピクセル密度)」の概念について学ぶことができます。...

一つ前のガイドラインを学びたい方は
マテリアルデザイン|No.02:Elevation|日本語解説この記事では、Google社提供の「マテリアルデザイン」ガイドラインにおける「Elevation(高さ)」の概念について学ぶことができます。...

COMMENT

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

CAPTCHA