リアルな「UIシャドウ」をデザインする方法

Webデザインを現実世界の見た目に近づけることで、ユーザーはデザインを理解したり、効果的に反応したりすることができます。

そこで今回は、UIで用いるシャドウを“現実的”にする方法について解説します。

UIシャドウは「3種類の影」をおさえるべし

まず、影の種類について押さえておきましょう。

▲出典：Wikipedia（パブリック・ドメイン）

影には、次の3種類があります。

• 本影（umbra）：
  物体が光源を完全に遮る場合にできる影
• 半影（penumbra）：
  物体が光源を部分的に遮る場合にできる影
• 対影（antumbra）：
  光源よりも物体の見かけの視直径が小さいため光源を全て遮ることはできず、観測者から見た物体の周囲を光源が包むように見える場合にできる影

次に、上記で紹介した影が、どのように作られるのかを見ていきましょう。

▲出典：UX Planet

上記の画像は、点光源の場合にできる影を表しています。

物体が光源の光を完全に遮っているため、濃い色の「本影」が生まれています。なお、点光源では「本影」しか生まれません。

▲出典：UX Planet

さきほどの画像では、点光源しかありませんでした。しかし日常生活の中では点光源だけでなく、さまざまな光源が存在しています。画像でも、点光源のときとは異なり、さまざまな方向に光が進んでいますよね。このように、私たちは物体に近いいくつかの光を使って物を認識するのです。

複数の光の中には、物体の一部にしか光が当たらないものがあります。この光によって、物体を部分的に遮ったときにできる「半影」ができるのです。

一方で、物体を完全に遮ったときにできる「本影」も同時にできるので、上記の画像のように「本影」のまわりに「半影」が生まれます。

なお、本影と比べて半影の色は、薄くぼんやりと見えます。

▲出典：UX Planet

物体と光の距離が変わると、影のかたちも変化します。

なお、「対影」は物体の裏にできる影のため、UI/UXデザインの場合は無視しても構いません。

▲出典：UX Planet

UI/UXにおいては、ある要素がどれだけユーザーに近いかによって、その要素の重要性が決まります。

上記の画像でも、立体的なデザインの「Signup」の方が、重要なボタンに見えるでしょう。

このように、影を活用することで、視覚的な階層を作り出せます。『Figma』のぼかしオプションを使用すると、UI要素にこのような錯覚を作ることが可能です。

▲出典：UX Planet

デフォルトでは、このXとYは、携帯電話を持っていたり、コンピュータの前に座っていたりすること前提に設定されており、このとき光源は頭の上にあることになっています。

またデザインに影を作る際には、もう1つ考慮すべき点があります。

▲出典：UX Planet

現実世界では複数の光源が物体を照らしているため、物体は複数の影を持っています。

リアリティを出すためにも、デザインには複数の影を使うのがおすすめです。

『SmoothShadow』では、Figma にある優れたプラグインで、複数の影を作ることができます。

（執筆：Samir T　翻訳：mozuku　編集：少年B　提供元：UX Planet）