ドロップシャドウ（英: Dropshadow）は、今どきのウェブサイトやユーザーインターフェースにおいて重要なデザイン要素です。
整理された長方形にドロップシャドウを適用することで、奥行き感と階層づくりに役立ちます。
使い方によっては、ユーザーに楽しさや高揚感を演出できる効果的なデザインテクニックと言えます。
ここでは、SketchやFigma、Adobe XDといったデザインツールをつかって、より美しいドロップシャドウを作成する小技テクニック、ヒントをご紹介します。
より美しいドロップシャドウを作成するデザインの小技テクニック、ヒントまとめ
小技1 – ソフトにしよう
デザインツールのデフォルト設定のドロップシャドウを利用するのは控えましょう。その代わりに、ドロップシャドウの不透明度を5〜25%ほどに調整し、ぼかしをきつく設定してみましょう。
小技２ – 複数のドロップシャドウを利用しよう
デザイン要素と背景の距離感をよりリアルに表現するには、ひとつのレイヤーに複数のドロップシャドウを適用してみましょう。
ボーナステク: このテクニックはCSSで表現することができます。実際にどのようにドロップシャドウを適用するのか、多くのサンプル例を掲載したこちらの記事も参考にしてみましょう。
小技３ – 真っ黒は使わないようにしよう
ドロップシャドウに真っ黒（#000000）を使用するのは避けるべきです。よりリアルなドロップシャドウの見た目を表現するには、デザイン要素の背景や周囲の色使いに基づきた配色を選ぶようにしましょう。
小技４ – 別のレイヤーをドロップシャドウとして使用しよう
よりデザイン性を高めたいときには、レイヤーを複製して元のレイヤーの下に置くと、より自然でナチュラルなドロップシャドウを演出できます。
ボーナステク: このときに、複製し背景に移動したレイヤーは、ぼかしを最大にし、サイズを若干小さくするのがポイント。
小技５ – 奥行き感を加えよう
光の当たる方向を考慮してドロップシャドウを配置し、一部を光っているように見せてみましょう。前面のレイヤーの不透明度を下げ、ほんの少しだけ境界線を追加すると、より奥行き感のある雰囲気を表現できます。
小技６ – くっきり鮮明にしよう
2段階で変化するグラデーションカラーを境界線に追加することで、ドロップシャドウを強調できるお手軽テクニック。
小技７ – 画像の背景をぼかしてみよう
画像を複製し、背面のレイヤーに移動させ、ぼかしを放射するように追加することで、より自然な色合いのドロップシャドウを演出できます。
小技８ – ドロップシャドウのお役立ち便利ツール
オンラインツールを利用することで、より手軽に本格的なドロップシャドウを作成することができます。以下のツールも今後の参考にしてみてはいかがでしょう。
- neumorphism.io – 本格的なニューモーフィズムスタイルを作成できる無料オンラインツール
- brumm.af/shadows – 複数のレイヤーを重ねて超リアルなドロップシャドウをCSSで作成でき、コピペも自由
- Soft UI – ダークモードにも対応したドロップシャドウを作成できるジェネレーター
- neumorphic.design – 円形や長方形などの基本的な図形シェイプと色を選んだら、サイズやぼかし、ハイライトなどを細かく調整できるニューモーフィズム・スタイル作成ツール
ニューモーフィズム・スタイル、そしてそこから進化したグラスモーフィズ・スタイルについて詳しく紹介した記事はこちら。
参照元リンク : How to Make Badass Shadows by Buninux – Prototypr.io
