【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。

## 概要
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e44a8829-9d3e-1136-83a7-ebc16e790a07.png)

みなさんは、このドロップシャドウを見てどう思いますか？
ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、
あまり綺麗なドロップシャドウとは感じないですよね？
　

この記事では、**これが発生する原因** と **綺麗なドロップシャドウの使い方**を解説していきます。
この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう！



## ドロップシャドウが綺麗にならない原因
### 1. デザインを3次元として捉える
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/74ca7dca-3cda-3a2e-257b-bf14665d3fdd.png)

UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。

例えばUIだと、
ベースとなる平面に、カードの平面が重なっていたり、
カード平面の上に画像やボタンといったオブジェクトが置かれています。

このように、UIやグラフィックデザインは２次元で作られているのではなく、
**各平面・オブジェクトがZ軸上に重なること**で作られています。

そのため、UIやグラフィックデザインを3次元として捉えることが
ドロップシャドウをダサくしない第一歩です。


### 2. ドロップシャドウの役割について理解する
`1. デザインを3次元に捉える`の説明で既に察している方はいると思いが、
一度、ドロップシャドウの役割を理解しましょう。

まずは、この画像をご覧ください。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/2ef59ee3-0c4d-546a-db54-732bd3dfbd09.png)

*セレクトボックスの選択肢*や*ドロップダウン*、ダイアログなどによくドロップシャドウは用いられています。

これらのUIは、他のオブジェクトよりz軸上に一段高く見えませんか？

セレクトボックスのUIより選択肢のUIのようが高く見えたり、
アイコンボタンのUIよりドロップダウンのUIの方が高く見えたり、
ほかのUIよりダイアログの方が高く見えたりしますよね!?

このようにドロップシャドウを用いたUI・グラフィックデザインでは、
ドロップシャドウを用いたオブジェクトが、他のオブジェクトよりz軸上に1段高く見え、階層を変える効果があります。

つまり、**ドロップシャドウを用いることで、意図的に階層を変えている役割がある**ということです。


### 3. ドロップシャドウが綺麗にならない理由
ドロップシャドウには、意図的に階層を変えている役割があるからこそ、
一定のルールを決めてドロップシャドウもちゃんと設計することが必要です。

ルールが決まっていないから、その場のノリでドロップシャドウが生まれ、
ドロップシャドウの色が濃くなったり、ドロップシャドウの向きが変な方向になり、ダサくなります。

つまり、ドロップシャドウの色が濃くなったり、ドロップシャドウの向きが変な方向になるのを防ぐには

:::note
**結論**
ファイル構造やCSS設計と同じように、一定のルールを決めてドロップシャドウもちゃんと設計する
:::

というわけです。



## 綺麗なドロップシャドウの作り方
ここまでは、ドロップシャドウがダサくなる原因を解説してきました。

ここからは、どうすれば綺麗なドロップシャドウになるかを解説していきます。

### 1. `box-shadow`について理解する
ドロップシャドウを設計する前に、まずは`box-shadow`について理解しておきましょう。

`box-shadow`の基本形はこんな感じです。

```CSS
/* box-shadow: offsetX offsetY blur-radius spread-radius color; */
.sample {
  box-shadow: 1px 2px 3px 4px red;
}
```

それぞれの値について解説していきます。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/0be4c5a4-5d15-7514-9393-289fd2113f0f.png)


+ `offsetX`
    + ドロップシャドウを**X軸方向**にどのくらい移動させるかを決める値
    + デフォルト : 0px
+ `offsetY`
    + ドロップシャドウを**Y軸方向**にどのくらい移動させるかを決める値
    + デフォルト : 0px
+ `blur-radius`
    + ドロップシャドウにどのくらいの**ぼかし**をつけるかを決める値
    + デフォルト : 0px
+ `spread-radius`
    + ドロップシャドウの**サイズ**をどのくらい変えるかを決める値
    + デフォルト : 0px
+ `color`
    + ドロップシャドウの**色**を決める値

これらの値を一定のルールに則って、指定することドロップシャドウを作成することができます。


### 2. `box-shadow`の値の役割を理解する
<!--ワイヤーフレーム・ラフスケッチ等を参考に階層の数-->

ドロップシャドウを設計する前に`box-shadow`のそれぞれの値が、
ドロップシャドウにどのような役割があるか解説していきます。

#### `offsetX` と `offsetY`の役割
`offsetX` と `offsetY`の役割は、**光の向き、影が落ちる向きを決めること** と**階層作ること**にあります。
　
##### 【光の向き、影が落ちる向きを決めること】
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/429ac06b-37b1-66e3-0ca7-3c2db10f08f2.png)
UIやグラフィックデザイン上に使うドロップシャドウでは光の向きを揃えることが原則です。
そのため、複数のドロップシャドウでは、`offsetX` と `offsetY`の正負、変化量は揃えておきましょう。
　
##### 【階層作ること】
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e9763857-7d1a-826e-a8e8-3bb72244f32c.png)
UIやグラフィックデザイン上に使うドロップシャドウでは
上の画像のように`offsetX` と `offsetY`の値が増えることで、1段階層を高く表現することができます。
そのため、UIやグラフィックデザイン上に使う階層分の`offsetX` と `offsetY`の値を用意しておきましょう。

#### `blur-radius`の役割
`blur-radius`の役割は、**ドロップシャドウと背景の境界線を曖昧にすること**にあります。
ドロップシャドウと背景の境界線を曖昧にすることで、影っぽさを表現することができます。
そのため、下の画像を見ると、blur-radiusの値が増えていくほど、境界線が曖昧になり、影っぽくなると思います。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d622e970-9a6a-5ca7-f439-df935268e6c5.png)
ただ、`blur-radius`は、境界線を基準に、左右がぼかしがかかるため、
影っぽくなる見える値にするためには、`offsetX` と `offsetY`に応じて値が変える必要があります。

ポイントは、**`box-shadow`の見える部分全てにぼかしをかけること**です。

例えば、`offsetX:2px` `offsetY:2px`を指定していた時、
blur-radiusでは、4px以上を指定してあげることで、
`box-shadow`の見える部分全てにぼかしをかけることができます。


#### `spread-radius`
`spread-radius`の役割は、**光源とオブジェクトとの距離を決めること**にあります。
光源とオブジェクトが近づくと、影が大きくなり、
反対に、光源とオブジェクトが遠ざかると、影が小さくなります。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/631a751e-6ebd-48c1-24e0-f335d2f48cc1.png)
しかし、UIやグラフィックデザインでは、光源とオブジェクトとの距離は、基本変えないでデザインします。
そのため、`spread-radius`の値を固定しておくことが一般的です。

#### `color`
`color`の役割は、**影の色を決めること**と**影の濃さを決めること**にあります。
`color`は、光源の色と光源の強さを表現することができます。
　
##### 【影の色を決めること】
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/4dd54931-f6b9-1e07-cbaa-8d9f64044efe.png)
UIやグラフィックデザイン上に使うドロップシャドウでは光の色を揃えることも原則です。
そのため、複数のドロップシャドウでは、colorの**カラーコード**は揃えておきましょう。

　
##### 【影の濃さを決めること】
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d04e82a4-cd66-d4ca-6a44-9b703cbf0b84.png)
UIやグラフィックデザイン上に使うドロップシャドウでは光の強さを揃えることも原則です。
そのため、複数のドロップシャドウでは、colorの**不透明度**は揃えておきましょう。

また、ドロップシャドウが濃すぎると感じる時は、colorの**不透明度**を調整してあげてください。


### 3. ドロップシャドウを作る
ここまで理解できたら、あとはドロップシャドウを作るだけです。

作っていく順番は、

*Ⅰ. 光の向き、影が落ちる向きを決める* 
*Ⅱ. 何階層作るか決める*
*Ⅲ. ぼかし量を階層ごとに決める*
*Ⅳ. 影の色、濃さを調整する*

この順になります。
では実際に作っていきましょう。

#### Ⅰ. 光の向き、影が落ちる向きを決める
影は`落ちる`という動詞がつくので、上向きに近い *（左向き、左上向き、上向き、右上向き、右向き）* の影は不自然になります。
そのため、今回は下向きのドロップシャドウに決めました。
※ *`左下向き` `下向き` `右下向き`は、どれでも良いです。* 
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/19116f87-cf4b-7700-0938-d290f2276374.png)


#### Ⅱ. 何階層作るか決める
今回はたくさん作るのも大変なので、2パターンにしました。
実際は、UIやグラフィックデザインで何階層分のドロップシャドウを表現したいかを決めます。

2階層分なので、ドロップシャドウがいらない面を含めて、
0px → 2px → 4pxのように差が均等になるようにしています。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f2ca9157-94a6-4152-a004-61785eb30266.png)

#### Ⅲ. ぼかし量を階層ごとに決める
**`box-shadow`の見える部分全てにぼかしをかけること**を意識して、ぼかしを決めます。

`offsetY: 2px`では、4pxのぼかしをかけることで、見える部分全てにぼかしをかけることができます。
`offsetY: 4px`では、8pxのぼかしをかけることで、見える部分全てにぼかしをかけることができます。

このようにoffsetの値の2倍で見える部分全てにぼかしをかけることができます。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/5cf11259-5906-2776-24c4-7818d18933e3.png)

#### Ⅳ. 影の色、濃さを調整する
影の色はこのまま、黒にしようと思います。
そのため、色の濃さ(不透明度)だけを調整します。

`offsetY: 2px`と`offsetY: 4px`が同じ不透明度になるよう調整します。
感覚的な話になってしまいますが、9%以下だと薄くて、16%以上だと濃いと感じたので、9%と16%の間の12%にしました。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ef9bbb05-a1fc-08a9-dd56-e82dfdea0d76.png)

完成したCSSはこんな感じです。
```CSS
/* offsetY:2pxのドロップシャドウ */
.elevation2 {
  box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.12%);
}

/* offsetY:4pxのドロップシャドウ */
.elevation4 {
  box-shadow: 0px 4px 8px 0px rgba(255, 255, 255, 0.12%);
}
```

## まとめ
この記事では、これが発生する原因と綺麗なドロップシャドウの使い方を解説しまた。

どうでしたでしょうか？
これからドロップシャドウに悩むことは少なくなりそうですか？

分かりにくい点があったらコメントいただければ、追記・修正を行います。
ぜひコメントください。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510