見出し画像

[日本語]マテリアルデザイン『Light & shadows』#03

はじめに
今回は『マテリアルデザインガイドライン』の「Light & shadows(光と影)」の概念について解説していきます。

なお、この記事は私が(翻訳機能を使って)ガイドラインを読む中で、大切なポイントを抜粋したり、難しいな。。と思った箇所を分かりやすい言葉に置き換えるなど、一部個人的な解釈が含まれます。

正しい情報は下記のガイドラインをご確認ください。
引用元 Google - Material Design
URL:https://material.io/
※動画・画像データ等はこちらから引用させていただいております。

Light and shadows(光と影)とは?

マテリアル デザインでは、キー ライトアンビエントライトという2つの仮想の光がオブジェクトを照らしていて、この2つの光によって影も2つ生成されます。

マテリアル デザインの影は、このキー ライトとアンビエントライトの2つのライトによって(必ず)2つの影が生成される為、どちらか片方の光による影で表現することはありません。

Shadows

影の見え方は、オブジェクトのElevationによって変化します。
また、各オブジェクトのElevationは一貫して使用する必要があります。

(各オブジェクトのElevationについては、#02をご覧ください)
影の出現は、リスト アイテムが選択されたことを示し、 この並べ替え操作中に他のオブジェクトの前に移動できることを示します。

Shadows & Motion

・オブジェクトの形状やサイズが変わっても、Elevationが同じである場合、その影は変化しません
・オブジェクトのElevationが変わると、その影が変わります。

※Motionについてはガイドラインに動画で詳しく記載されていますので、ご確認ください。

まとめ

ガイドラインでは、15 人の弱視の参加者に 36 のインタビューを実施し、この『Light and shadows』によって、実際に『識別のしやすさ』や『操作のしやすさ』に効果が得られたと記載されています。

また、今回の「Light and shadows」の概念は「紙オブジェクト(Surface)に光を当てると影が落ちる」という、マテリアルデザインの特徴と言える部分となりますので、よく理解しておきたいところですね。

次回は『Layout』についてまとめていきたいと思います!

この記事が気に入ったらサポートをしてみませんか?