本記事には広告（アフィリエイトリンク）を含みます。
こんにちは、コムたんです。サムネやデザインをPhotoshopで作ってます。
結論：190pxの文字なら、距離6〜10px・サイズ6〜12px・スプレッド20〜40%がサムネ最強の組み合わせでした！スプレッド0だけは、縮めると影が消えるので使いません。
サムネの文字装飾を作るのが仕事で、ドロップシャドウは毎回いちばん迷う設定です。縁取りは太さを決めればほぼ終わるのに、影は距離・サイズ・スプレッドの組み合わせで見え方がガラッと変わる。正直、前に作ったファイルの数値をなんとなく流用して済ませてきました。それをやめたくて、同じ文字・同じ背景で3つの値だけを振って並べてみました。
何を・どう並べたか
キャンバスは1280×720、文字は源暎きわみゴ Ultraの190px。サムネの主役になる言葉をこのくらいの大きさで置くことが多いので、ここを基準にしました。文字の色や縁取りは固定して、ドロップシャドウの値だけを1つずつ動かしています。
- 距離：0／6／10／20px
- サイズ：0／6／12／24px
- スプレッド：0／20／40%
1つを動かすときは、ほかの2つは動かさずに固定。並べた画像は原寸で見るだけでなく、スマホの一覧くらいまで縮めた状態でも見比べました。サムネは小さく表示されて初めて勝負が始まるので、原寸でキレイでも縮めて崩れるなら意味がないからです。
ちなみに以前、レイヤースタイルの設定を1つだけ変えた絵を265枚描いて、86個の見え方の指標で測ったことがあります。基準は暗い青のグラデに白縁8px、影4枚。そのとき、影の「輪郭」は変えると見た目がまったく別物になる一方、影のアンチエイリアスは差が小さく指標に出ないとわかりました。なので今回は輪郭とアンチエイリアスには触らず、距離・サイズ・スプレッドの3つに絞っています。
結果：3つの値で見えた違い
まずは距離です。0／6／10／20pxの順に並べました。
距離0pxは影が文字の真下に隠れて、縁のまわりにうっすら暗い輪ができるだけ。文字が背景に貼り付いたままで、浮いた感じはほぼ出ません。6pxと10pxは文字が一枚はがれたように浮いて、背景との間に段差ができます。20pxまで行くと影が文字から離れて、黒い文字がもう1つ後ろにあるように見えてしまう。190pxの文字だと、10pxと20pxの間が境目でした。6pxは190pxの約3%、10pxは約5%。距離は文字サイズの3〜5%に収めると、浮きつつ二重に見えない範囲に入ります。
次はサイズ。0／6／12／24pxです。
サイズ0は影のふちがくっきりしたままで、ハンコを押したような硬い影になります。6pxでふちが少しやわらかくなり、12pxで文字の下にふわっと影が溜まる感じに。24pxになると影が広がりすぎて薄まり、文字のまわりが灰色にもやっとくすみます。影を濃く見せたくてサイズを上げるのは逆効果で、広がるぶん一か所あたりの黒さは減っていきます。
最後がスプレッド。0／20／40%を並べました。
今回いちばん大事だと思ったのがここです。原寸だとスプレッド0でも影はちゃんと見えます。ところが一覧サイズまで縮めると、ぼけた部分が背景に溶けて影がほぼ消える。20%だと影の芯が残り、40%なら縮めても文字の下に黒い帯としてしっかり残りました。原寸の見た目だけで決めると0のままにしがちなので、ここはマジで縮小して確かめてほしいところです。
サムネで使う3つ／使わない物
並べた結果から、僕がサムネで使うのはこの3つです。
- 距離は文字サイズの3〜5%（190pxなら6〜10px）
- サイズは距離と同じくらい（6〜12px）
- スプレッドは20〜40%。0にはしない
逆に使わないのは、距離0（浮かない）、距離20px（二重に見える）、サイズ24px（くすむ）、スプレッド0（縮めると消える）の4つです。特にスプレッド0は、Photoshopの初期値のまま触らずに残りやすいので要注意。
不透明度は60〜80%の間で使っています。前の計測で、レイヤーの不透明度は0から100まで見え方の差がほぼ一直線に増えていきました。つまり不透明度は素直に効く値なので、影の濃さはサイズではなく不透明度とスプレッドで決めるのが扱いやすい。100%だと影が黒い塊になって縁取りの白を食いやすく、下げすぎると縮小で影が消える方向に寄ります。
設定値の早見表
| 項目 | 振った値 | サムネで使う値 | 見え方 |
|---|---|---|---|
| 距離 | 0／6／10／20px | 6〜10px（文字の3〜5%） | 0は浮かない、20は二重に見える |
| サイズ | 0／6／12／24px | 6〜12px | 0はハンコ状、24はくすむ |
| スプレッド | 0／20／40% | 20〜40% | 0は縮小で消える |
| 不透明度 | — | 60〜80% | 濃さは不透明度で素直に変わる |
| 輪郭 | 12種（前回の計測） | 線形のまま | 変えると見た目が別物になる |
| ノイズ | 0〜100（前回の計測） | 0 | 外縁がざらついて明るく見える |
| アンチエイリアス | オン／オフ（前回の計測） | どちらでも | 差はほぼ出ない |
文字が190pxより小さいときは、距離とサイズを文字サイズの比で縮めます。たとえば距離は「文字の3〜5%」で覚えておけば、文字が何pxでもそのまま計算できる。スプレッドと不透明度は比ではないので、文字の大きさが変わってもそのままの値で使っています。
ノイズは前回の計測で、0から100に上げると外縁の彩度が落ちて、明るさの指標が0.176から0.216に上がりました。見た目はざらついて明るくなるので、影を締めたいサムネではかえって弱く見えます。僕は0固定です。
影の前に縁取りを決めておく
影の数値は、縁取りの太さとセットで考えた方がうまくいきます。白縁が太いほど影は縁の外側から始まるので、同じ距離でも浮いて見える量が変わるからです。縁の太さの目安は縁取りと影の数値の記事にまとめているので、先にそっちで縁を決めてから、この表で影を合わせる順番がおすすめです。
もう1つ、前回265枚を描いたときに学んだことがあります。「この設定、何も変わらない」と思った値の中には、別のレイヤー効果が上に乗っていて隠れていただけの物や、そもそも設定が入っていなかった物が混ざっていました。影が効かないと感じたら、上にグラデーションオーバーレイが乗っていないか、描画モードが乗算になっているかを先に確認すると早いです。描画モードの違いは描画モード20種を並べた記事で比べています。
僕もずっと勘で影を付けてたので、並べてみてスプレッド0の消え方にはめっちゃ驚きましたw 原寸のPhotoshop画面でキレイに見えていても、一覧では影が無いのと同じになっていたわけです。
つまずきやすいところ
影を付けたのに、一覧で見ると影が無い
スプレッドが0になっていないか確認してください。スプレッド0の影はぼけた部分だけでできていて、縮めると背景に溶けて消えます。20〜40%に上げると影の芯が残り、小さく表示されても文字の下に残ります。原寸の画面だけで判断しないのがコツです。
影が文字の横にもう1つ見える
距離が大きすぎます。190pxの文字で距離20pxにすると、影が文字から離れて二重に見えました。距離は文字サイズの3〜5%、190pxなら6〜10pxに収めると、浮いて見えるのに二重にはなりません。
影を濃くしたくてサイズを上げたら、逆に薄くなった
サイズは影を広げる値なので、上げるほど一か所あたりの黒さは減ります。24pxでは文字のまわりが灰色にくすみました。濃さはスプレッドと不透明度で足して、サイズは6〜12pxに留めるのがおすすめです。
アンチエイリアスはオンとオフどっちがいい？
どちらでも大丈夫です。前に265枚を描いて見え方の指標を決めて測ったとき、影のアンチエイリアスは差が小さくて指標に出ませんでした。迷う時間は距離とスプレッドに回した方が、仕上がりに効きます。
影の数値で毎回迷ってる人→この早見表の値をそのまま使ってください。もう自分の数値が決まってる人→スプレッドが0になってないかだけ見直してみてください！次は影の輪郭12種を並べます。
縁取りと影の数値の目安、描画モード20種の比較、サムネ文字の詰め方も合わせてどうぞ。
この記事で使っているソフトは Photoshop です。まだ持っていない人は、Adobe公式のPhotoshopのページから無料体験で始められます。
この記事の設定をそのまま使えるレイヤースタイル（定番500種・第1集）は、BOOTHで配布しています。ショップ名は「くりねくんの研究成果」（ショップ全体）です。
コメント