影・エレベーション

定義

影（shadow）は、要素の後ろに落ちるぼんやりした跡のことで、その要素が画面から どれだけ浮き上がっているかを目に見えるかたちにしてくれる仕掛けです。この浮き 具合のことをエレベーション（elevation）と呼びます。影が小さく濃く、要素にぴたりと 密着していると、表面に浅く置かれているように見えますが、影が大きく、やわらかく にじんで広く散っていると、画面からずっと高く持ち上がっているように見えます。 現実の世界で物が高く浮くほど影が大きくぼやけていく仕組みを、そのまま画面に移した ものなので、わたしたちは特に説明されなくても、影を見るだけでどれが上にあるのかを 直感でつかめます。

なぜ重要か

影は単なる飾りではなく、画面のz軸の序列、つまりどれが手前でどれが奥なのかを教えて くれる合図です。モーダルやポップオーバーのように、ほかの内容の上に重なってユーザーの 注意を引くべき要素ほど、影を大きくかけてしっかり浮いて見せます。反対に、背景にじっと 置かれたカードは、影を薄くするか、いっそ外して落ち着かせます。こうしてエレベーションに 差をつけると、ユーザーはいま画面のどの要素がアクティブで、どこに集中すればいいのかを 自然に理解できます。影はまた、要素がいま押されている、あるいは浮き上がっているような 動きをそれとなく表すのにも使われ、ボタンにマウスを乗せると影が大きくなってふわっと 持ち上がる感じを出せます。ただし影は、抑えることこそが肝心です。あらゆる要素に濃い影を かけすぎると、画面が重たく散らかって見え、かえって序列が消えて、ごちゃついた印象だけが 残ってしまいます。

よくある間違い

• すべての要素に影を入れてしまうことです。カードもボタンも入力欄も、何もかもが浮いて いると、どれが本当に上にあるのかが区別できなくなり、序列が崩れてしまいます。影は 強調したい要素にだけ、惜しんで使ってこそ力を発揮します。
• 影を濃く、そして硬くかけすぎることです。黒に近く、にじみのほとんどない影は、要素の まわりに暗い縁取りのように見えてしまい、安っぽく野暮ったい印象を残します。本物の光の ように、薄くやわらかくにじむように調整してこそ自然になります。
• 浮き具合と影の大きさが互いにちぐはぐになることです。背景に貼りついているべきカードに モーダル級の大きな影をかけると、ユーザーはそのカードがなぜこんなに浮いて見えるのか 戸惑ってしまいます。要素の実際の役割に合った大きさの影を選ぶ必要があります。

実務のヒント

• 影をそのままエレベーションだと考えて、段階を前もって2〜3個だけ決めておきましょう。 たとえば浅い影はカード、中くらいはドロップダウン、高い影はモーダル、というふうに 役割ごとに組にしておくと、どの画面でも一貫した奥行き感が保たれ、どれが上に浮いた 要素なのかが一目で読み取れます。
• 影の色は、純粋な黒よりも、要素の背景色を少しだけ暗くした色を使いましょう。そこに 透明度を低めにかけ、ぼかしを大きめにとると、ずっと上品でさりげなく見えます。 濃い影を1枚かけるより、薄い影を何枚か重ねるほうが、より自然な奥行きが生まれます。
• 影だけでは境界を表しにくい明るい背景では、ごく薄い枠線をいっしょに添えて要素の輪郭を 少し補ってあげると、安定感がぐっと増します。

関連概念