【保存版】各サイトの box-shadow まとめ

はじめに

最近は google が提唱したマテリアルデザインが流行しています。マテリアルデザインのガイドラインに従っておけば、モダンでそれっぽいデザインになるので、デザインセンスのないプログラマとしては、非常にありがたいですね。

ところで、マテリアルデザインといえば影が特徴的ですが、どのくらいの影にすれば良いのか迷うことはありませんか? 私も、今回新規にサイトのデザインをするにあったって、影の付け方を迷ったため、様々なマテリアルデザインのサイトを巡回して、どんな影の付け方をしているのか調べてみました。

Google

ヘッダやカードなどは以下のように定義されています。

box-shadow: 0 2px 5px rgba(0,0,0,0.26)

アプリ一覧などのポップアップは、やや深めで以下のような定義です。

box-shadow: 0 2px 10px rgba(0,0,0,.2)

あまり関係ありませんが、2文字クラスなど、短くて読みにくいクラス名が大量に使用されていました。

TopCoder

TopCoder はマテリアルデザインというよりはフラットデザインに近く、影はやや控えめでした。

box-shadow: 0 1px 6px rgba(0,0,0,.2);

feedly

大きく分けて、以下の2つの影が使用されているようです。ボタンなど多くのものは1つめの定義が、一部のより深い影をもつ要素は2つめの定義が使用されていました。

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
box-shadow: 0 10px 20px rgba(0,0,0,0.12), 0 6px 6px rgba(0,0,0,0.16);

Materialize

.z-depth-xというクラスが定義されており、必要に応じてこれを extend しています。

0 から 5 までの 7 段階に分けて定義されていますが、ほとんどは .z-depth-1 または .z-depth-1-helf であり、それよりも深いものはほとんど使用されていません。

// Z-levels
.z-depth-0 {
  box-shadow: none !important;
}
.z-depth-1{
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.z-depth-1-half{
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.z-depth-2{
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.z-depth-3{
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.z-depth-4{
  box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
.z-depth-5{
  box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}

まとめ

いかがでしょうか。マテリアルデザインなら google のものを採用するのが良いかもしれませんが、マテリアルデザインを独自にカスタマイズしたデザインもあるようなので、イメージに最も近いサイトのデザインを参考にするのも良いでしょう。