Webサイトでテキストや画像を目立たせるの「ドロップシャドウ」を使うことがありますが、
ドロップシャドウは下手に使うと必ずダサくなってしまうのです。
ではダサいドロップシャドウとはどういったものなのかなど、
ドロップシャドウの使い方や役割について詳しく見ていきましょう。
強すぎるドロップシャドウはダサい
ダサいドロップシャドウの見本と言えるのが「強すぎるドロップシャドウ」で、
Webサイト制作初心者や素人がやってしまいがちなパターンです。
実際にプロのWebデザイナーでも、サイトのキーワードとなるテキストを
目立たせるためにドロップシャドウをかけることがあります。
しかしテキストにかけるドロップシャドウが強すぎると「Excelか何かで
適当に作ったのでは？」と閲覧者に疑われるダサいものとなってしまいます。
またドロップシャドウを強くかけたテキストは悪目立ちしますから、
サイトのキーワードなのに閲覧者にその意図が伝わりにくくなるのです。
テキストを読みにくくするドロップシャドウはダサい
テキストにかけるドロップシャドウは本来テキストを読みやすくするためのものですが、
反対に読みにくくなるようなドロップシャドウのかけ方はダサいです。
会員登録したサイトにログインする際、ロボットでないことを証明するのに
画面に表示された6文字程度の半角英数字の入力を求められることがあります。
その画面に表示される半角英数字には、
あえてダサいドロップシャドウがかけられています。
ダサいドロップシャドウをかけることで文字を読みにくくして、
ロボットに判別できないようにしているわけです。
ロボットに判別させない手段として用いられていることからも分かるように、
ダサいドロップシャドウはかえってテキストを読みにくくしています。
テキストが読みにくいWebサイトはすぐに離脱されるので、
閲覧者に伝えたいことがちゃんと伝わりません。
Webサイトを作る大きな目的の1つが閲覧者に情報を伝えることですから、
ダサいドロップシャドウはWebサイトにとってマイナスでしかないのです。
背景色と系統が違う色のドロップシャドウはダサくなりがち
ダサいとは言い切れませんが、
背景色と系統が違う色のドロップシャドウをかけるとダサくなりがちです。
ドロップシャドウは言わば「影」であり、「影＝黒」のイメージからWebサイトの
背景色に関わらず黒のドロップシャドウをかけてしまうことが少なくありません。
黒のドロップシャドウ自体は悪くないのですが、
背景色とのコントラストによっては黒が悪目立ちしてダサくなってしまうのです。
どんなWebサイトでも黒のドロップシャドウを使うのではなく、
Webサイトに馴染む色のドロップシャドウを使うことを意識するのが重要です。
対象物と離れすぎているドロップシャドウはダサい
テキストや画像などのドロップシャドウをかける対象物とドロップシャドウの距離が
離れすぎているとダサくなります。
対象物とドロップシャドウを離せば離すほど、
より対象物を浮かび上がらせる効果が期待できます。
しかしドロップシャドウが離れるとドロップシャドウの主張が強くなり、離れすぎると
対象物の印象が薄くなるほどドロップシャドウの主張が強くなってしまうのです。
またテキストの場合はドロップシャドウが離れすぎることで可読性が低くなる、
要するに読みにくくなってしまいます。
対象物を目立たせるためのドロップシャドウなのに、
離れすぎることで逆に対象物を目立たなくしてしまっているわけです。
ドロップシャドウの位置や向きが変だとダサい
ドロップシャドウはテキストや画像などの対象物につける影で、
その影の位置や向きがおかしいと違和感を覚えてダサいとなってしまいます。
影は基本的に光源の反対側にできるものですが、
Webサイト上には影を作る光源となるものはありません。
しかしハッキリとした光源が無い場合には、
人間は上または左上から光が当たっているのが自然と感じるとされているのです。
明確な光源が無いWebサイト上でも同様で、
画面の上または左上に光源があると閲覧者は感じています。
画面の上または左上から光が当たっているにも関わらず、対象物の上や左上に
影であるドロップシャドウがかかっていると違和感からダサいとなってしまうわけです。
ドロップシャドウの役割
ダサいドロップシャドウにならないようにするには、
まずドロップシャドウの役割をしっかりと理解しておく必要があります。
ドロップシャドウは「奥行きを表現する」のが1つの役割です。
Webサイトは平面で実際には奥行きはありませんが、ドロップシャドウをかけた
対象物は手前、かけていない対象物は奥にあるように見えます。
ドロップシャドウで疑似的に奥行きを表現することで、手前にある対象物を強調したり、
反対に奥にある対象物に興味を惹かせたりしているのです。
テキストを読みやすくする
ドロップシャドウの大きな役割としてもう1つ「テキストを読みやすくする」ことが
挙げられます。
背景色と同系統の色でテキストを入力する場合や背景とテキストの明度差が
小さい場合には、背景にテキストが溶け込んで読みにくくなります。
テキストにドロップシャドウをかけることで、
テキストが浮かび上がったように見えて読みやすくなるのです。
テキストを読みやすくするにはアウトラインを付ける方法もありますが、
アウトラインは平面的で少しポップな印象を閲覧者に与えます。
ポップな印象がWebサイト自体の方向性に合わない時には、
ドロップシャドウで同じテキストの可読性を上げる効果をつけるわけです。
ダサいドロップシャドウにならないようにする方法
ドロップシャドウの役割が分かったところで、
ダサいドロップシャドウにならないようにする方法をいくつか紹介しましょう。
ダサいドロップシャドウにしないためには、
まずドロップシャドウの「色を濃くしすぎないこと」です。
ドロップシャドウの色を濃くしすぎると適当に作った印象を閲覧者に与えてしまいます。
またドロップシャドウ自体が悪目立ちして、
目立たせたいドロップシャドウをかけた対象物が目立たなくなってしまいます。
ドロップシャドウの色をどの程度濃くするか、
どの程度ぼやかすかはWebサイトごとに変わりますし、加減が難しいです。
色んな濃さやぼかし具合を試して、自分で客観的にWebサイトを見た時に
違和感を覚えない濃さやぼかし具合を見つけてください。
背景色と同系統の色でドロップシャドウをかける
Webサイトの背景色と同系統の色でドロップシャドウをかけると
ダサいドロップシャドウになりにくいです。
ドロップシャドウは対象物の「影」ですから、どうしても黒を使いたくなります。
もちろん黒でも構わないのですが、黒は色として強いので違和感を覚えない濃さや
ぼかし具合の調節が簡単ではありません。
背景色と同系統の色であれば、
細かい調整をしなくても背景に馴染んでくれるので悪目立ちしにくくなります。
明るい色のドロップシャドウでおしゃれに
背景と同系色でない明るい色でドロップシャドウをかけることで、
Webサイト自体をポップでおしゃれなイメージにできます。
例えば明るめの緑色、少し色のトーンを抑えた黄色、オレンジなどで
ドロップシャドウをかけてみてください。
Webサイトの方向性に合った色でないと違和感を覚えるだけですが、
方向性が合っていればかなりポップでおしゃれな印象に変わります。
ただ背景と同系色でない色をドロップシャドウに使うにはカラーセンスが問われますし、
色をたくさん使うとそれはそれでダサくなりがちです。
カラーセンスにあまり自信が無い、Webサイト制作の経験が浅いといった場合は
無難に背景と同系色でドロップシャドウをかけるのがベターです。
対象物とドロップシャドウの距離を縮める
対象物とドロップシャドウが離れるとダサくなりがちなので、
対象物とドロップシャドウの距離はできるだけ縮めましょう。
特にテキストはドロップシャドウが離れていると可読性も落ちるので、
テキストのドロップシャドウはできるだけ近付けた方が良いです。
使用する編集ソフトによって方法が違うので具体的には言いにくいですが、
例えば1～2px離すとか距離を5%以下にするといった具合です。
実際に色々な距離でドロップシャドウをかけて、
テキストが読みやすくドロップシャドウが悪目立ちしない距離を探ってみてください。
ドロップシャドウをかけない
テキストにかけるドロップシャドウは読みやすくするためのもので、
そのままでも読みにくくないならドロップシャドウをかけないのも1つの方法です。
例えばテキストの色を背景色と反対色にする、テキストの位置や大きさを変える、
アウトラインをつけるなどで読みやすくするのです。
そのままでも読みにくくないのであれば、
わざわざダサくなる恐れがあるドロップシャドウをかける必要はありません。
距離や方向、ぼかし具合などの細かい調整も不要ですし、特にカラーセンスも
問われないので特にWebサイト制作の経験が浅い人にはおすすめです。
テキストの下に四角を入れる
ドロップシャドウの代わりに四角をテキストの下に入れる方法もあります。
背景とは違う色で背景が少し透けて見える四角を作って、
テキストを入れたい位置に配置します。
配置した四角の上にテキストを入力すれば、
ドロップシャドウやアウトラインをつけなくてもテキストが読みにくくなりません。
四角は背景に合わせて色や透過率、形を変えると、
違和感なく背景に馴染むので悪目立ちしなくなります。
色や透過率の調整は必要ですが、ドロップシャドウほど手間はかかりませんから
特にWebサイト制作初心者におすすめです。
まとめ
ドロップシャドウは上手く使うと非常に効果的ですが、
下手に使うとただただダサくなってしまう恐れがあります。
特に経験の浅い人には諸刃の剣ですから、ここで紹介したことを参考に
ダサいドロップシャドウにならないように気を付けてください。