心地イイWEBデザインを実現する!さりげないドロップシャドウの使い方

ドロップシャドウのつけ方
SPONSORLINK

WEBデザインに限らずですが、いいなと思うデザインには必ずと言っていいほどドロップシャドウが使われています。

ドロップシャドウはデザインに立体感を与える最も簡単な要素ですが、ドロップシャドウのつけ方ひとつで、「素人っぽいデザイン」か「プロっぽいデザイン」かを左右する重要な要素となります。

ここでは、デザインのことよくわからないという方でも、これだけ注意しておけばそれっぽくなるテクニックを紹介したいとおもいます。

それっぽくする極意はたったひとつだけ。下記のことだけ覚えておきましょう。

ドロップシャドウ(影)はさり気なくつける

PhotoshopでもIllustratorでも、他のペイントツールでもなんでも同じなのですが、影はさり気なくつけましょう。ここではPhotoshopでの例をあげてご紹介したいと思います。

テキストにドロップシャドウを適用する

デザインしている際に、文字に影をつけようとしています。Photoshopでドロップシャドウを適用すると初期設定では、

ドロップシャドウ
描写モード:乗算
不透明度:75%
角度135°
距離:5px
サイズ5px…

となっているかと思います。デフォルトのまま適用したサンプルがこちら!

まあ、好みの問題ですがちょっと野暮ったいですね。

でもデザインが得意でない会社などで自作したチラシ、上記のようなデザインになっていませんか?

これはデザインしたっぽい気がしますが、これだと何もしない方がいい気がします。

ではこれをもう少し良くするには?

ドロップシャドウの値を下記の数値に変えてみましょう。

ドロップシャドウ
描写モード:乗算
不透明度:15%
角度135°
距離:1px
サイズ1px…

シャドウデザイン02 シャドウデザイン02_2

ええ?これ、ドロップシャドウつけている意味あるの?と思われるかもしれませんが、もちろん意味はあります。

これを入れる入れないで読みやすさが変わってきたり、少しだけ文字が浮き上がっているように錯覚するのです。

ではこの文字をさらに立体的に見えるようにしてみましょう。

上記の効果に加え、シャドウ(内側)の効果を追加します。

シャドウ(内側)
描写モード:通常
不透明度:25%
角度135°
距離:1px
サイズ1px…

シャドウデザイン03

これです!

えっ?どこが変わったのって?

わかりませんか?

…そうですか…。

では背景をつけてみましょう!

シャドウデザイン04_3

どうでしょうか?ちゃんと立体になっているのがわかります。わかりやすく拡大してみました。

シャドウデザイン05

左が立体感なしで、右がシャドウをつけた状態です。これくらい拡大しなければわからない。

でも、いいな!と思うWEBサイトのデザインはこういった処理が行われていることが多いのです。

いいデザインとは心地よさ

デザインについて語ってしまうと、論争となってしまいそうなので、あまり深くは掘り下げませんが、僕の中ではデザインは「心地よさ」なのではないかと思います。

  • なんとなくいい
  • なんとなくステキ
  • なんとなく心地いい

くらいがいいんです。いかにもデザインしました!というのはぱっと見では伝わりませんが、なんだか心地いい。「ここにシャドウがついているんですよ」と説明されてわかるくらいの方がいいと思います。

プロがつくったWEBデザインを見ていて、ドロップシャドウがガッツリついているものは見かけたことがありません。でもプレーンな状態とは何かが違う…それて何なんだろう。という目線でWEBサイトや街中を見てみるときっと新たな発見があると思います。

ぜひ、「さりげなく心地いいデザイン」というのを実感・実践してみてくださいね!

ドロップシャドウのつけ方

ブロガー専用テーマ「ハミングバード」販売中!

ハミングバードWordPressテーマイメージ
大人気アルバトロスWordPressテーマの続編登場!ハミングバードはブロガーのために作られたWordPressテーマで当サイトでも利用しているテーマです。デザインはシンプルに!見せたいところはアニメーションでさり気なく目立たせることができます。

ショートコードやCTA、ランディングページなどブログマーケティングをする上で必要不可欠な機能が揃っています。

ABOUTこの記事をかいた人

香川県(うどん県)にてフリーランスWEBデザイナー/ディレクターとして活動。小規模なWEBサイト制作を得意とし、コンセプト設計からデザイン、コーディング、撮影にいたるまでのすべてをこなします。地方の良さを全国に広めていくお手伝いをしていきたいと思っています。