デザイナーはテキストにドロップシャドウは使うな！

デザイナーはテキストに（ダサい）ドロップシャドウは使うな【上手な使い方】

フォトショップには「ドロップシャドウ」という影をつける機能があります。※パワポでは「文字の影」ですね。

この「影をつける機能」はフォトショップやパワポの罠です。

簡単に文字を見えるようにする罠です。（しかし実際には読みにくく、うまく使わないとあなたのデザインはダサくなっていまいます）

ダサいドロップシャドウ

この記事ではフォトショップで「ドロップシャドウをつけること」について注意点と上手な使い方をお教えします。

テキストに使ってはいけない理由【ダサい＝見づらい】

文字は白地に黒が一番です。これが一番「読みやすい」配置です。

この読みやすさを崩す理由はありません。初心者のうちはこのことに気づかず、文字にシャドウを入れ、境界線（文字の枠線）を入れ、文字の色を入れ。。。。なんかわかならいけど目立つから完成！みたいな状況になってしまうわけです。

これはよくある認証の画像です。

グラデーションにドロップシャドウの文字

あなたがロボットでないことを証明するアレですね。ドロップシャドウ、ついてますね。グラデーションもついてますね。ロボットに見分けがつかないようにしているのです。つまり、このドロップシャドウは「見にくくするため」に使われているのです。

あなたの身の回りを見てください！

オシャレだな、かっこいいなと思うものにあなたが付けたような影がついてますか？きっと付いていないはずです。

ドロップシャドウを入れている場合

雑誌やバナーなんかは写真にテキストを入れることも多いですね。

情報が多い写真や、どの色のテキストも合わない場合ってあります。

また最近のWEBページはドロップシャドウを入れることも流行しているようです。（デザインに合うように使用しているので、使い方に注意が必要）近年は柔らかいグラデーションも流行っているので「柔らかい」感じを出すためでしょう。

ドロップシャドウのきれいな使いかた（テキストのきれいな入れかた）

以下の項目でどれかで解決する場合もありますし、解決しない場合は組み合わせてやってみることも大事です。

1.入れない

これが一番ですので、入れない方法を考えます。具体的には文字の色を変えたり、配置を変えたり。試行錯誤することが大切です。伝わるように考えるのはデザイナーの仕事ですので時間をかけましょう。ドロップシャドウをどうしようかと考えるよりも、入れない方法に時間をかけた方がデザイン的にもシンプルで良いです。

文字配置と写真の大きさ、角度を変える

2.四角を文字の下にいれる←オススメ！

これが手っ取り早いです。最近は動画でもこの手法が多く使われてます。しかし少しポップな印象になりますので下地に合うように形を変えたり、透明度うすくすることも検討しましょう。

背景に四角を入れて薄くする

3.ギリギリのドロップシャドウを入れる（少し難しいです）

全体像やテキストの周りを見ながらギリギリいい感じのドロップシャドウを入れます。これは経験の部分が多いので少し難しいです。参考までに、距離を5%以下で他の数値は試行錯誤します。透明度も落とします。後は効果をオーバーレイや乗算にすることも効果的です。色は背景素材の近い色がいいでしょう。

ギリギリのシャドウを入れる＆描画モードを乗算でなじむように

4.下地（背景）の彩度や明るさを調整する

下地の彩度や明るさを変えても雰囲気やイメージが合っているなら調整しましょう。

背景の彩度や明るさを変える トーンカーブと色相・彩度がオススメ

5.筆ツールで直接、影や光を書く

ドロップシャドウという機能にこだわらず、直接ブラシツーツで影を描いていまいましょう。機能の数字を触るより筆や消しゴムツールを使った方が自然な感じが出ますし、何よりはやいです。不透明度は下げて少しずつ描くとやりやすいですよ。

ブラシツール/消しゴムツールで直接描く

6.関連記事【シャドウを一切使わず文字を見せるテクニック】

ドロップシャドウを使わず、元の写真を加工するテクニックです。

写真素材自体をブラシでちょこっと加工します。

写真に文字を配置した時のプロの技【写真加工のテクニック】

7.関連記事【写真を活かしてスマートな帯を敷くテクニック】

写真をマスクなどで消す方法は、よくありません。

帯を敷いて文字配置したほうが綺麗なデザインになることもあります。

写真をグラデーションでぼかすのはNG【初心者やりがち】

まとめ

初心者がハマりやすいドロップシャドウの罠ですが、ドロップシャドウは、ただの「機能」ですので使いかたが大事です。または、使わないように考えるのもデザイナーの仕事です。

（関連記事）【デザイナーはテキストに境界線（文字の枠線）も使うな】

デザイナーはテキストに境界線（文字の枠線）も使うな

（発展記事）【あえて境界線を使うテクニック】

デザイン（素材）を強調させるために境界線を使うテクニックです。

境界線を使ったテクニック【結構使えるオリジナルのテクニックです】