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

なんとなく目立たせるためにドロップシャドウを適用したり、ちょっとさみしいのでグラデーションを加えたりしていませんか?

Web designer Depotからドロップシャドウとグラデーションをウェブデザインで的確に使用するためのチュートリアルを紹介します。

Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors

下記は、各ポイントを意訳したものです。

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

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

サンプルのキャプチャ

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

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

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

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

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

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

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

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

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

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

使用は、より繊細に

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

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

サンプルのキャプチャ

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

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

グラデショーンの使い方

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

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

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

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

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

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

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

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

サンプルのキャプチャ

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

サンプルのキャプチャ

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

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

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

サンプルのキャプチャ

Reuters.com

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

サンプルのキャプチャ

ここでは、後ろに位置していることが最低限分かるように、軽いものにします。
これにより、最下部の推移している箇所も、きれいなラインとなり、ユーザーの気を散らすことはなくなるでしょう。

意味のないドロップシャドウ

サンプルのキャプチャ

World Wide Web Consortium (W3C)

時々、ドロップシャドウがこのようにロゴのボックスの下にあるように、明白な理由がないまま使用されています。

このドロップシャドウは、なぜオブジェクトが遠くに配置されているように表現され、また、なぜ丸いのでしょうか?
私はこれを理解しようとすると、いっそう混乱するだけです。

こういったドロップシャドウはページの調和を混乱させるだけなので、使用する価値がありません。

異なる光源をもったグラデーション

サンプルのキャプチャ

Wolfram_Alpha

ヘッダ箇所では上部に光源があり、上から白ではじまるグラデーションが配置されています。そして、ページのエレメントでは下部に光源があり、最下部に向かって白になるグラデーションが配置されています。

これはグラデーションの光源は一緒でなくてもかまわない、と考えるかもしれません。
これらは現実の世界で見るグラデーションの固有のメタファをもっているように、可能ではあるが、微妙なグラデーションです。

サンプルのキャプチャ

ここでは下方の光源を取り除き、グラデーションの方向を変更し、光源を上部に統一してみました。

おわりに

ウェブページのオブジェクトはメタファによって、本物のオブジェクトのように表現されています。

デザイナーはこのメタファと現実を矛盾しなくするようには要求されません。しかしデザインのコミュニケーションレベルにおいて、注意深く配慮することはウェブサイトをいっそう素晴らしいものにする助けとなります。

そうしたケアと一貫性がウェブサイトのユーザーエクスペリエンスを快適にし、さらに楽しくするのに役立つでしょう。

top of page

©2017 coliss