【実践テクニック＃4】ドロップシャドウをグラデーション状に重ねて自然な影を表現する
過去記事でも、写真の加工やUIデザインに関する実践で使えるテクニックをまとめています、実践テクニックシリーズですが、第4回目となる今回はドロップシャドウを扱うときに有効なテクニックについてまとめてみたいと思います。デザインツールではエフェクトとして、コーディングでもCSSで何気なく使われることの多いドロップシャドウですが、少し工夫するだけで、より自然に見せることができるようになります。本記事ではドロップシャドウをグラデーション状に重ねて適用させることで見た目の変化などを考察してみたいと思います。
今すぐ使える実践テクニックの過去記事についてはこちらもぜひご覧ください。
（過去記事）
【実践テクニック＃1】複数の人物写真を並べるデザインで気をつけるポイント
【実践テクニック＃2】料理の写真を使ったデザインで気をつけるポイント
【実践テクニック＃3】1pxのハイライトとシャドウで要素を明瞭度を上げてシャープに見せる
では早速本題に入っていきます。近年ではニューモーフィズムなどの影響もありUIデザインなどでもよりリアルなドロップシャドウが使われる場面をよく見かけるようになりました。見た目がリッチで立体的になるだけでなく、要素としての存在感が増えることで、より視認性や誘引性を高めることができるというのがメリットの一つでもあります。
今回はこちらの矩形要素に対して、ドロップシャドウの適用方法別に見た目の変化を考察してみたいと思います。現状では何もドロップシャドウが適用されていない状態になりますね。背景と要素自体の色が似ていると溶け込んでしまいます。
まずは通常のドロップシャドウを適用してみます、ここでは垂直方向のみにオフセットを適用し、16pxでブラーを設定し、不透明度60%の黒色のシャドウを適用しています。パッと見る限りではそんなに気にならないかもしれませんが、特にオフセット方向を見るとシャドウ自体が太く入っていて、且つブラーの影響でぼやけたように見えています。要素の形に対して、少しシャドウがにじんでいるような印象を感じます。要素自体は実際にはシャープなアウトラインをしているので、シャドウもそれに伴って若干くっきりと見えるのが自然なのですが、全体的に均一に広がっているため要素の周りも汚く見えてしまいがちになります。やや野暮ったく見えてしまうというのも大きな特徴ですね。
そこで、少し手を加えてみましょう。先ほどのドロップシャドウは単一の効果として適用していましたが、3層に増やして適用してみます。その際には、オフセットとブラーを段階的に変化させることで、シャドウの濃さがグラデーション状に見えるようにします。また、3つ重ねる形になりますので、同じ不透明度ですとより濃くなってしまうため、単一で適用している場合と濃さが同じになるように不透明度を薄くなるように少し調整しておきます。どうでしょうか、先ほどのものと比較して、少しシャドウ部分の見た目に変化が生まれました。
デザインツールの場合では、このように一つの対象要素へ複数のシャドウ効果を適用することになります。CSSではbox-shadowプロパティなどが用いられますが、そちらでも同じように複数重ねて設定することが可能です。
続いては先ほどのものに加えて、不透明度も段階的に変化させてみます。つまり要素に近いシャドウはより濃く、要素から遠いものに対してのシャドウは薄くなるように見えます。こうすることで、光源の距離を想定した調整ができるようになりますね。ただし遠いところのシャドウは薄くなるため、背景との距離が近いように見えてしまうという状態が起こっています。
そこで、それをカバーするためにシャドウ方向へのオフセット距離を増やして、影のできる範囲が減らないようにカバーします。また不透明度を下げ過ぎてしまうとシャドウが薄くなり、見えにくくなりますので、不透明度の変化は小さくしてある程度の濃さを残しておきます。そうすると先ほどよりシャドウが伸びて、要素の存在感も出てくるようになりました。
先ほどの状態でかなり自然に見えるようになりましたが、せっかくですのでもっと滑らかなグラデーションにしてみましょう。重ねるシャドウの数を倍にして、より細かく階調に変化をつけていきます。それに伴い変化率も増やしておきます。どうでしょうか、要素の形がしっかり維持され存在感を保持しながらも、スッキリとしたグラデーションの滑らかな自然なシャドウに仕上がってきていますね。
実際に通常の単一で適用しているドロップシャドウを比較してみると一目瞭然ですね。手間がかかっている分、とても綺麗にドロップシャドウが映えており、上品な印象を受けますね。シャドウ部分の強さや濃さも均一に伸びているのではなく、要素に近い部分はくっきりと濃く、要素から離れるにつれて、柔らかく薄いシャドウになるようグラデーションがかかって見えます。
デザインツールでは面倒な部分もありますが、CSSの場合ではmixinや関数化などを行うことで、あらかじめ登録したスタイルを簡単に使いまわせるようになるので、効率よくこのようなシャドウを取り扱うためにも用意しておいて損はないですね。
今回はドロップシャドウを自然に見せるための実践で使えるテクニックについて触れてみました。手間をかけることでデザインの質は大きく変わりますので、ぜひ活用してみてはいかがでしょうか。 （こちらの記事もどうぞ） 【実践テクニック＃1】複数の人物写真を並べるデザインで気をつけるポイント 【実践テクニック＃2】料理の写真を使ったデザインで気をつけるポイント 【実践テクニック＃3】1pxのハイライトとシャドウで要素を明瞭度を上げてシャープに見せる
まずは通常のドロップシャドウを適用してみます、ここでは垂直方向のみにオフセットを適用し、16pxでブラーを設定し、不透明度60%の黒色のシャドウを適用しています。パッと見る限りではそんなに気にならないかもしれませんが、特にオフセット方向を見るとシャドウ自体が太く入っていて、且つブラーの影響でぼやけたように見えています。要素の形に対して、少しシャドウがにじんでいるような印象を感じます。要素自体は実際にはシャープなアウトラインをしているので、シャドウもそれに伴って若干くっきりと見えるのが自然なのですが、全体的に均一に広がっているため要素の周りも汚く見えてしまいがちになります。やや野暮ったく見えてしまうというのも大きな特徴ですね。
そこで、少し手を加えてみましょう。先ほどのドロップシャドウは単一の効果として適用していましたが、3層に増やして適用してみます。その際には、オフセットとブラーを段階的に変化させることで、シャドウの濃さがグラデーション状に見えるようにします。また、3つ重ねる形になりますので、同じ不透明度ですとより濃くなってしまうため、単一で適用している場合と濃さが同じになるように不透明度を薄くなるように少し調整しておきます。どうでしょうか、先ほどのものと比較して、少しシャドウ部分の見た目に変化が生まれました。
デザインツールの場合では、このように一つの対象要素へ複数のシャドウ効果を適用することになります。CSSではbox-shadowプロパティなどが用いられますが、そちらでも同じように複数重ねて設定することが可能です。
続いては先ほどのものに加えて、不透明度も段階的に変化させてみます。つまり要素に近いシャドウはより濃く、要素から遠いものに対してのシャドウは薄くなるように見えます。こうすることで、光源の距離を想定した調整ができるようになりますね。ただし遠いところのシャドウは薄くなるため、背景との距離が近いように見えてしまうという状態が起こっています。
そこで、それをカバーするためにシャドウ方向へのオフセット距離を増やして、影のできる範囲が減らないようにカバーします。また不透明度を下げ過ぎてしまうとシャドウが薄くなり、見えにくくなりますので、不透明度の変化は小さくしてある程度の濃さを残しておきます。そうすると先ほどよりシャドウが伸びて、要素の存在感も出てくるようになりました。
先ほどの状態でかなり自然に見えるようになりましたが、せっかくですのでもっと滑らかなグラデーションにしてみましょう。重ねるシャドウの数を倍にして、より細かく階調に変化をつけていきます。それに伴い変化率も増やしておきます。どうでしょうか、要素の形がしっかり維持され存在感を保持しながらも、スッキリとしたグラデーションの滑らかな自然なシャドウに仕上がってきていますね。
実際に通常の単一で適用しているドロップシャドウを比較してみると一目瞭然ですね。手間がかかっている分、とても綺麗にドロップシャドウが映えており、上品な印象を受けますね。シャドウ部分の強さや濃さも均一に伸びているのではなく、要素に近い部分はくっきりと濃く、要素から離れるにつれて、柔らかく薄いシャドウになるようグラデーションがかかって見えます。
デザインツールでは面倒な部分もありますが、CSSの場合ではmixinや関数化などを行うことで、あらかじめ登録したスタイルを簡単に使いまわせるようになるので、効率よくこのようなシャドウを取り扱うためにも用意しておいて損はないですね。
今回はドロップシャドウを自然に見せるための実践で使えるテクニックについて触れてみました。手間をかけることでデザインの質は大きく変わりますので、ぜひ活用してみてはいかがでしょうか。 （こちらの記事もどうぞ） 【実践テクニック＃1】複数の人物写真を並べるデザインで気をつけるポイント 【実践テクニック＃2】料理の写真を使ったデザインで気をつけるポイント 【実践テクニック＃3】1pxのハイライトとシャドウで要素を明瞭度を上げてシャープに見せる
