ドロップシャドウの使い方！初心者デザイナー向けに解説

みなさん、「ドロップシャドウ」という機能をご存知でしょうか。
簡単にいうと、指定したオブジェクトに影をつけることのできる機能になります。
「なんだかデザインがパッとしない…」「手軽にアクセントをつけたい」といった際に活躍する手法なので、デザインに携わる方なら知っておくと良いでしょう。

本記事では、”ドロップシャドウとは何か”といったところから、実際のサンプルを確認しながらその使い方までを学ぶことができます。
新米デザイナーさん必見の記事なので、ぜひチェックしてみてくださいね。

ドロップシャドウとは？

ドロップシャドウとは、illustratorやPhotoshopなどで使えるツールで、選択したオブジェクトに影をつけることができます。
影の位置や色やぼかし方など、細かく設定することでそれぞれ違った印象を与えることができます。
今回は、illustratorでのドロップシャドウの付け方について学んでいきましょう！

 

ドロップシャドウの効果

では、ドロップシャドウを使うことで、どのような効果が得られるのでしょうか？
2つの効果をチェックしていきましょう。

 

１、立体感のあるデザインを演出することができる

ドロップシャドウを使用することで、簡単に立体感のあるデザインを作ることができます。
２Dでのデザインと比較して、こなれた上品な印象を与えることができる手軽な方法として非常におすすめです。
「なんだかデザインがシンプルすぎてさみしいな…」と感じたら、一部のオブジェクトにドロップシャドウをかけてみるのも選択肢の1つでしょう。

 

２、テキストや画像を目立たせることができる

ドロップシャドウを使用すると、対象のテキストや画像を目立たせることができます。
特に写真の上にテキストを入れている場合など、ドロップシャドウにより可読性をアップさせることができます。
Webサイトに載せる素材にもよく使える方法なので、覚えておくと良いでしょう。

 

ドロップシャドウの効果を実際に画像で確認してみよう！

では実際に写真の上に文字入れをした画像素材を使って、ドロップシャドウの効果を確認していきましょう。
今回は、コーヒーがテーマの写真の上に「Coffee」というテキストを入れたいと思います。

 

画像１：ドロップシャドウなしの場合

では、まずはドロップシャドウなしの場合からみていきましょう。
写真の右上に「Coffee」とテキストが入っています。

背景の写真に埋もれて「Coffee」の文字が読みにくいですよね。
背景の色とテキストの色が近いため、可読性が良くないデザインになってしまうのです。
この読みにくさを、ドロップシャドウを用いて解決していきたいと思います。

 

画像２：ドロップシャドウありの場合

では続いて、ドロップシャドウを入れた場合の画像をみていきましょう。

いかがでしょうか。
先ほどの画像と比較して、「Coffee」の文字が読みやすくなったのではないでしょうか。
このように、ドロップシャドウを用いることで、テキストを目立たせて読みやすくすることができます。
また、影はぼかしを入れてさりげなくつけることで、不自然に悪目立ちすることも無くなります。

 

デザイン初心者も簡単！おしゃれなドロップシャドウをイラレで作る方法をご紹介

illustratorを使って、ドロップシャドウを入れる手順をご紹介していきたいと思います。
まずは、ドロップシャドウをつけたいテキストや画像を準備し、選択しましょう。
選択をしたら、上部のメニューから「効果」→「スタライズ」→「ドロップシャドウ 」をクリックします。
すると、ドロップシャドウの詳細を決めるためのダイアログが開きます。
ここで、お好みのドロップシャドウになるよう設定していきます。

さて、ではどのようなオプション機能があるのでしょうか。
それぞれの機能の詳細をチェックしていきたいと思います。

 

描画モード

オブジェクトに対して、どのような種類の影をつけるかを選択できます。
基本的には「乗算」というモードで問題ありません。

 

不透明度

影の透明度、つまり濃淡を変更できます。
ここのパーセンテージが高いほど、不透明度が高いつまり、濃い影になります。

 

X 軸オフセット、 Y 軸オフセット

オブジェクトと影の距離を設定できます。
X軸はオブジェクトに対して水平方向に、Y軸は垂直方向に動かすことができます。

 

ぼかし

影のぼかし具合を調整します。
影の端からぼかし効果をつけるスタート地点までの距離を数値で入力します。

 

カラー

影の色をパレットから指定することができます。

 

濃さ

影に加えるブラックの割合を設定できます。
例えば、100%に設定すると、ブラックの影が作成されます。0%に設定すると、影をつけるオブジェクトと同じ色の影が作成されます。

上記のオプションを好みの値に設定し、最後に「OK」をクリックすれば、設定した値の影をオブジェクトにつけることができます。
設定によってかなり印象が変わってくるので、是非それぞれのオプションの値を色々いじって効果を確認して見てください！

 

ドロップシャドウを使用する際の注意点

おしゃれで上品なドロップシャドウをつけるために、以下の3つの点に注意しましょう。

 

その１：背景にあった色を選択しましょう。

写真やイラストの上にテキストを入れる場合、その背景にあった影の色を選択すると良いでしょう。
先ほどの「Coffee」の画像を例にみてみましょう。

背景が落ち着いた色なのにも関わらず、このような派手な色を影として入れてしまうと、なんだかアンマッチな雰囲気になってしまいますよね。
ドロップシャドウを使用する際は、背景の色との兼ね合いを考えましょう。

 

その２：不自然にならないよう、影の濃さに気をつけましょう。

影が濃すぎると、非常に不自然なデザインになってしまいます。
少し濃すぎるかもと感じる場合は、「不透明度」と「ぼかし」の値を下げてみると良いでしょう。
ドロップシャドウを使う際は、とにかく自然になるよう意識すると、上品な印象のデザインにすることができますよ。

 

その３：むやみやたらにドロップシャドウを多用するのはやめましょう。

今回ご紹介した通り、ドロップシャドウ自体は手軽に使えて便利な機能です。
しかし、それ故に多用してしまうと”くどい”デザインになってしまいがちです。
「何故このオブジェクトに影をつける必要があるのか」といった目的を明確にしながら使用していくのが良いと思います。
また、全体のバランスも見てドロップシャドウをかけるようにしましょう。

 

まとめ

さて、今回はオブジェクトに影をつける機能である「ドロップシャドウ」についてその特徴や使用方法、注意するポイントをご紹介いたしました。
いかがだったでしょうか？
手軽にこなれたデザインを作ることができるので、覚えておきたい機能ですよね。
しかし何より重要なのは、全体のバランス。
多用しすぎることなく、影の色や濃さに気をつけながら、効果的に使用していきたいですね！