ドロップシャドウとグラデーションの使用を的確にするためのチュートリアル

Post on:2010年1月8日

ドロップシャドウとグラデーションの役割

ドロップシャドウとグラデーションは、スペースに錯覚を生じさせるための基本的なテクニックです。

Mac OS Xのドックを例にとると、輝いたテーブルの上に各メニューのアイコンが浮き上がっているようにデザインされています。
このオブジェクトをリアルにさせる錯覚をグラデーションとドロップシャドウで実現しています。

このエフェクトはいわゆるメタファです。
デザイナーはデジタルではない現実の世界のオブジェクトがそうであるように、光源と相互に作用させ、三次元のオブジェクトであるかのようにスクリーン上にそれを表現します。

グラデーションとドロップシャドウは、この三次元の錯覚を引き起こすのに役立つテクニックで、ページに配置されたオブジェクトの空間の関係を示唆することができます。
効果的に使用すると、この三次元の錯覚はデザインをいっそう美しくさせ、より理解を高めることができます。

ドロップシャドウは、オブジェクトの表面に光源があたる際に生じます。二次元のデザインでは「上昇」というキーワードを与え、他のエレメントから突き出していたり、浮かんでいるように見せることができます。

また、グラデーションは、一つの部分がもう一つの部分より光源により近いときに生じます。結果として、より近い部分は明るく、より遠い部分は暗く見えます（多数の光源を用いた場合は、いっそう複雑になります）。

実世界での光のエフェクトをまねることで、グラデーションとドロップシャドウが比喩的なオブジェクトを生成し、想像上の光源とそれらの関係についてのインフォメーションを伝えることができます。

ドロップシャドウとグラデーションの使用の注意点

ドロップシャドウとグラデーションで間違った使い方をしない確かな方法は、使用しないことです。
これは深刻な意味をもっています。そして、この意見は常に考慮されるべきものです。

例えば、いろいろなオブジェクトにドロップシャドウを適用することは簡単で、テキストを目立たせる必要がある際に乱用してしまうことがあります。
また、レイアウトが退屈でないようにみせるために、構成を理解しないでカラーのフィールドにグラデーションを適用することもあります。

グラデーションやドロップシャドウを使用する際は、三次元のメタファがこのデザインに本当に必要かどうかを熟考してください。

使用は、より繊細に

ドロップシャドウの使い方

ドロップシャドウを使用する際は、Photoshopのデフォルトの設定は使用しないようにします。
Photoshopのデフォルトは影の色が黒すぎで、120度の角度になっています。

影は光源と密接な関係をもっています。暗い部屋の中で、懐中電灯をつけたところを想像してみてください。この場合、どんなオブジェクトに対してもほとんど黒い影を生じさせることでしょう。これはオブジェクトが唯一の光源から光を阻止しているためで、そのエリアには他の光が何もないことを意味しています。
そして、もしそれが明るい部屋のランプだと、どうなるでしょうか。ランプをオンにした場合は、オブジェクトに対して二つ目の影を生じさせ、影はかなり明るいものになるでしょう。

実際にデザインにドロップシャドウを適用する際、暗いエッジのある影は一つの光源で暗い部屋を示唆し、軽くて柔らかい影は拡散した光に富んだ明るい部屋を示唆します。

グラデショーンの使い方

グラデショーンを使用する際には、Photoshopでは多くのしゃれたデフォルトの設定があります。これらのいくつかは素晴らしい効果を生み出しますが、そうではないものもあります。

デフォルトの中で便利なのはブラックからホワイトへのグラデーションで、ブラックとホワイトを選択し自分が使用するエレメントのベースカラーに変更します。

グラデーションの明るい箇所と暗い箇所のコントラストは、より高いと表面が丸く見え、ナビゲーションやボタンなどに適しています。
また、コントラストを低くすると、フラットに見せる効果があります。

リアルな世界でのカラーフィールドは一つではありません。常に数種類の光源があり、何らかの関係性を持っています。
ドロップシャドウやグラデーションを使用するときは、これらの光源を常に意識し、慎重に適用するようにしてください。

よくある間違いと解決方法

ウェブサイトには、多くの間違ったドロップシャドウとグラデーションがあります。しかしこれらは通常プロのデザイナーによってのものではありません。
ここでは、おかしやすいちょっとした間違いとそれを解決する方法を紹介します。

重なりあったオブジェクト

オブジェクトを重ねる場合、ドロップシャドウを用いてオブジェクトの厚みを表現できます。

上のキャプチャでは、ドロップシャドウは全て20pxに設定されています。これはオブジェクトの厚みが無視されており、重複によって伝えられたインフォメーションと矛盾するものです。

解決方法は簡単です。オブジェクトの厚みに従って、ドロップシャドウを設定します。
一番深い箇所に20pxを設定し、15px, 10px, 5pxとそれぞれにあった数値にします。

エッジに使用するドロップシャドウ

エッジにドロップシャドウを使用する場合は、それが反射した光を持たない限りハードなエッジではなく、エッジの周りに微増するように表現されます。

Reuters.com

この例はハードなエッジをもったサンプルです。
このデザインではどこにも次元の錯覚を持っていませんが、右のサイドバーに沿ってドロップシャドウを使用しています。デザイナーはおそらく、サイドバーの階層を下げることを望んだものでしょう。
しかしながら、これは不必要に暗いだけでなく、ユーザーの視線を集めてしまうものになってしまっています。