UIシャドウ:不透明度25%の黒いドロップシャドウが変に見える理由と、使うべき重ねシャドウ

多くのデザイナーが真っ先に選ぶ影は、不透明度25%の黒です。この強さだと、光には見えません。カードの下のシミに見えます。

良い影はほとんど見えません。影を見る前に、浮いているのを感じるものです。そこにたどり着く方法を、コピーして使える4つのトークンと一緒に紹介します。

デフォルトがシミに見える理由

Figmaのデフォルトのドロップシャドウは、不透明度25%の黒で、Yオフセットは4です。多くのチュートリアルがこれをそのまま繰り返すので広まります。ツールの初期値が、誰も決めていないデザイン判断になってしまうのです。

本物の影は柔らかいものです。光は物体の周りに回り込むので、影の縁は少しずつ消えていき、物体から離れるほど影は薄くなります。濃い影を1枚だけ置いても、そうはなりません。縁は1本、強さも1つだけで、目はそれを持ち上がった面ではなく、汚れ、つまり灰色のしみとして読み取ります。

修正1:25%ではなく8%

黒25%

黒8%、ぼかしを広く

同じカード、同じ背景です。左は影がカードの中でいちばん主張しています。右は柔らかく持ち上げるだけで、目が行くのは中身です。不透明度を下げるのが修正の半分。ぼかしを大きくするのが、もう半分です。

ぼかしを大きくすると、同じ量の影がより広い範囲に広がるので、自然と薄くなります。だから8%の広い影は、8%の狭い影より自然に見えます。まず8%から始めて、背景に対してカードが消えてしまうときだけ上げましょう。

修正2:影を2つ重ねる

1つの影に2つの仕事をさせると、どちらも中途半端になります。影を2つにすれば、役割を分けられます。

細い影は縁のすぐ下にあって、「これは面に接している」と伝えます。広い影は柔らかいハローで、「これは面から浮いている」と伝えます。2つが合わさると1つの自然な影に見えます。本物の光もそうだからです。暗い接地線と、広くて淡い減衰です。

CSSでは、2つのレイヤーをカンマで区切って1つの宣言にします。

修正3:灰色にせず、色味をつける

純黒

インク色で色味づけ

純黒を色のついた背景に混ぜると、灰色でくすんだ色になります。背景と同じ色相の濃い色で作った影なら、きれいなままです。ここでは両方の影を16%にしているので、違いは色だけです。

ルールは、パレットでいちばん暗い色であるインクを、低い不透明度で影の色に使うことです。私たちのトークンでは、インクは非常に濃いバイオレットの#1B1530です。白いページでは色味はほとんどわかりません。ブランドパネルや色つきセクションのような色のあるページでは、なじんだ影と、貼り付けたような影の差になります。

修正4:高いほど大きく

カードの上のメニューや、ページの上のモーダルのように、ものが高い位置にあるほど、光が広がる余地が増えるので、影は大きく柔らかくなります。濃くはなりません。高いものの影を濃くしてしまうと、またシミに逆戻りです。

そこで、小さく閉じたトークンのセットができます。

すべてのレイヤーでXは0、スプレッドも0で、色はインクの#1B1530です。FigmaのX、Y、ぼかし、スプレッドの欄は、CSSのbox-shadowの4つの数値にそのまま対応します。

CSSのトークン

この4つは私たちの推奨であり、プラットフォームの規定値ではありません。インク色は自分のブランドでいちばん暗い色に差し替えて、構造はそのまま使ってください。

影が効かなくなる場所:ダークモード

暗い背景に影

明るい面

影は背後を暗くしますが、暗い背景にはもう暗くする余地がほとんどありません。左では大きな影が見えず、カードがページに溶け込んでいます。右では、カードは単に明るい面になっていて、それが持ち上げているのです。

だからダークテーマでは、影をつけるのではなく、レイヤーを明るくして持ち上げます。サーフェスのランプについてはダークモードのカラーシステムの記事で、反対側のグレーについてはライトモードの背景色の記事で扱っています。

目を細めるテスト

画面に向かって目を細めるか、少し離れて見てください。それでも影が暗い形として見えるなら、強すぎます。いちばん条件の悪いモニターでカードの縁が消えるなら、不透明度を1段階上げましょう。正しい影は、直接見ると消えて、取り除くと存在に気づくものです。

FAQ

UIに最適なドロップシャドウは?

自分のインクの濃い色味を使った、2つの重ねレイヤーです。0 1px 2px、6%のような細い影と、0 8px 24px、8%のような広い影を組み合わせます。シミではなく、自然な光に見えます。

UIシャドウの不透明度はどれくらいが良い?

私たちの4つのトークンは6〜12%の範囲です。カードならまず8%から始め、縁が消えるときだけ上げましょう。よくある初期値の黒25%は、クリーンなインターフェースではまず合いません。

Figmaのデフォルトのドロップシャドウは?

黒(#000000)、不透明度25%、Yオフセット4です。ツールの出発点であって、デザインの判断ではないので、多くのデザインは変えたほうが良くなります。

影は純黒にすべき?

いいえ。ブランド色かインク色の非常に濃いバージョンを使いましょう。色のついた背景では、純黒だと影が灰色でくすんでしまいますが、色味のある影なら色がきれいに保たれます。

影で高さ(エレベーション)を表すには?

高い要素の影は、濃くするのではなく、大きく柔らかくします。XS、SM、MD、LGのような少数のトークンを使えば、インターフェースのどのレイヤーも4つの影のどれかになります。

ダークモードで影は機能する?

うまくいきません。暗くできる明るい背景がほとんど残っていないので、大きな影は消えます。代わりに、より明るい面の色を与えてレイヤーを持ち上げましょう。

CSSで重ねた box-shadow はどう書く?

1つのbox-shadow宣言の中に、カンマ区切りでレイヤーを並べます。box-shadow: 0 1px 2px rgba(27,21,48,.06), 0 8px 24px rgba(27,21,48,.08);

出典

• Figmaのデフォルトのドロップシャドウは、#000000、不透明度25%、X 0、Y 4です。チュートリアルは25%の黒では一致していますが、デフォルトのぼかしについては食い違うため、この記事では触れていません。
• #00000040は、8桁16進表記で#000000の25%です(0x40は255のうち64で、約25%)。
• 4つのトークンとインクの#1B1530(violet 900)は、UX Brainyのエフェクトスタイルです。推奨であり、プラットフォームの規定値ではありません。
• 上のカードは私たち自身の例です。色味のデモでは、16%の#4E2FB3を、16%の黒と並べています。
• このような1ルールの投稿は、UX Brainyでもっと見られます。