更新日2024年11月13日

Webデザインにシャドウを取り入れる時のポイントいろいろ

要素に加えれば、画面に立体感をもたらすシャドウ。なんだか最近シャドウを取り入れたデザインをよく見かけるので、今回はシャドウを使う時の注意点やコツをまとめてみようと思います。

If you took a 3 year break from UI design, now you're all caught up: pic.twitter.com/4pdL17dXaF
— Dylan Jones (@tDJ) March 2, 2016

この Tweet にも描かれているとおり、1 年周期でシャドウの扱いが変わっていますね。2014 年は影なしの完全フラットデザイン。2015 年はロングシャドウ。そして 2016 年はこれから紹介するぼんやりふんわりシャドウ。

CSS で実装するシャドウの基礎

通常のシャドウ

要素にシャドウを加えるのはとっても簡単！基本的には box-shadow: 横の距離縦の距離ぼかしの大きさシャドウの色; で OK。

div {
  box-shadow: 5px 5px 5px #999;
}

透明度を調整

色はカラーコードの他、RGBA で透明度の指定もできます。書き方は rgba(Rの値, Gの値, Bの値, 透明度) です。色のついた影にしたい時、背景色や背景に画像を使っている場合は、カラーコードで指定するより、透明度を使った方が楽で綺麗に表示されます。下の例では半透明の茶色を影にしています。

div {
  box-shadow: 5px 5px 5px rgba(102, 68, 0, 0.5);
}

マイナス値で逆方向

通常右下に表示されるシャドウですが、横や縦の距離にマイナスの値を指定すると左や上にシャドウを表示できます。

div {
  box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.5);
}

影の長さ

4 番目の値を記述すれば、影の長さを指定できます。ぼかしの値と調整しながらうまく使わないと、野暮ったいデザインになってしまうので注意。

div {
  box-shadow: 10px 10px 25px 15px rgba(0, 0, 0, 0.5);
}

内側の影

さらに、最後に inset を加えると、要素の内側に影を加えられます。浮き上がらせるのではなく、ポコンとへこませた表現に。

div {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) inset;
}

シャドウを取り入れる際の注意点

続いてデザインする時に気をつけたいポイントも見てみましょう。

1. 多用しない

フラットデザインをベースに、目立たせたい画像や動画等の要素にのみシャドウを加えている Web サイトが目立ちます。シャドウを加えるなら全体のバランスが大事！「ここぞ！」という時に使いましょう。

2. 充分に余白を取る

シャドウを加えると、どうしても要素の周りが暗くなってしまうので、密度の多いデザインでは画面全体が暗く沈んで見えてしまいます。たっぷりと余白をとった上で、シャドウが重なり合わないように使うのがポイントです。

3. 通常テキストには使用しない

テキストには text-shadow というプロパティーを利用しますが、20px 以下で表示されるような通常のテキストにシャドウを加えると、かなり読みづらくなってしまします。加えるとすれば大きい文字サイズの見出し等のみにしておきましょう。

実践してみよう

CSS シャドウの基礎がわかったところで、さっそく使ってみましょう！

ふんわりシャドウ

冒頭で紹介した通り、昨今では薄めの影をふんわり加えるデザインが多いです。透明度を 0.1〜0.5 あたりまで薄くし、ぼかしを加えるといいですね。

div {
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}

濃いめの立体的シャドウ

他より目立たせたい要素には、思い切って影の長さやぼかしをたっぷりととり、他より浮かんで見えるように表現してみてもいいでしょう。もちろん、上記注意点で挙げた通り、余白やバランスを見ながら実装しないと見栄えが悪くなってしまいます。

div {
  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.4);
}

組み合わせると面白い

上記ふたつのシャドウを組み合わせて、通常ではうっすらとしたシャドウ、カーソルを合わせると濃い目のシャドウにし、アニメーションも加えちゃうとなかなか面白い効果になりますよ。下の例では transition でふんわり動きをつけ、カーソルを合わせるとシャドウが広がり、transform: scale で要素をやや拡大しています。

div {
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}
div:hover {
  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.4);
  transform: scale(1.05, 1.05);
}