Depotからドロップシャドウとグラデーションをウェブデザインで的確に使用するためのチュートリアルを紹介します。Metaphors下記は、各ポイントを意訳したものです。使用は、より繊細によくある間違いと解決方法おわりにドロップシャドウとグラデーションの役割ドロップシャドウとグラデーションは、スペースに錯覚を生じさせるための基本的なテクニックです。Xのドックを例にとると、輝いたテーブルの上に各メニューのアイコンが浮き上がっているようにデザインされています。このオブジェクトをリアルにさせる錯覚をグラデーションとドロップシャドウで実現しています。このエフェクトはいわゆるメタファです。デザイナーはデジタルではない現実の世界のオブジェクトがそうであるように、光源と相互に作用させ、三次元のオブジェクトであるかのようにスクリーン上にそれを表現します。グラデーションとドロップシャドウは、この三次元の錯覚を引き起こすのに役立つテクニックで、ページに配置されたオブジェクトの空間の関係を示唆することができます。効果的に使用すると、この三次元の錯覚はデザインをいっそう美しくさせ、より理解を高めることができます。ドロップシャドウは、オブジェクトの表面に光源があたる際に生じます。二次元のデザインでは「上昇」というキーワードを与え、他のエレメントから突き出していたり、浮かんでいるように見せることができます。グラデーションは、一つの部分がもう一つの部分より光源により近いときに生じます。結果として、より近い部分は明るく、より遠い部分は暗く見えます(多数の光源を用いた場合は、いっそう複雑になります)。実世界での光のエフェクトをまねることで、グラデーションとドロップシャドウが比喩的なオブジェクトを生成し、想像上の光源とそれらの関係についてのインフォメーションを伝えることができます。ドロップシャドウとグラデーションの使用の注意点ドロップシャドウとグラデーションで間違った使い方をしない確かな方法は、使用しないことです。これは深刻な意味をもっています。この意見は常に考慮されるべきものです。いろいろなオブジェクトにドロップシャドウを適用することは簡単で、テキストを目立たせる必要がある際に乱用してしまうことがあります。レイアウトが退屈でないようにみせるために、構成を理解しないでカラーのフィールドにグラデーションを適用することもあります。グラデーションやドロップシャドウを使用する際は、三次元のメタファがこのデザインに本当に必要かどうかを熟考してください。使用は、より繊細にドロップシャドウの使い方ドロップシャドウを使用する際は、Photoshopのデフォルトの設定は使用しないようにします。Photoshopのデフォルトは影の色が黒すぎで、120度の角度になっています。影は光源と密接な関係をもっています。暗い部屋の中で、懐中電灯をつけたところを想像してみてください。この場合、どんなオブジェクトに対してもほとんど黒い影を生じさせることでしょう。これはオブジェクトが唯一の光源から光を阻止しているためで、そのエリアには他の光が何もないことを意味しています。それが明るい部屋のランプだと、どうなるでしょうか。ランプをオンにした場合は、オブジェクトに対して二つ目の影を生じさせ、影はかなり明るいものになるでしょう。実際にデザインにドロップシャドウを適用する際、暗いエッジのある影は一つの光源で暗い部屋を示唆し、軽くて柔らかい影は拡散した光に富んだ明るい部屋を示唆します。グラデショーンの使い方グラデショーンを使用する際には、Photoshopでは多くのしゃれたデフォルトの設定があります。これらのいくつかは素晴らしい効果を生み出しますが、そうではないものもあります。デフォルトの中で便利なのはブラックからホワイトへのグラデーションで、ブラックとホワイトを選択し自分が使用するエレメントのベースカラーに変更します。グラデーションの明るい箇所と暗い箇所のコントラストは、より高いと表面が丸く見え、ナビゲーションやボタンなどに適しています。コントラストを低くすると、フラットに見せる効果があります。リアルな世界でのカラーフィールドは一つではありません。常に数種類の光源があり、何らかの関係性を持っています。ドロップシャドウやグラデーションを使用するときは、これらの光源を常に意識し、慎重に適用するようにしてください。ある間違いと解決方法ウェブサイトには、多くの間違ったドロップシャドウとグラデーションがあります。これらは通常プロのデザイナーによってのものではありません。ここでは、おかしやすいちょっとした間違いとそれを解決する方法を紹介します。重なりあったオブジェクトオブジェクトを重ねる場合、ドロップシャドウを用いてオブジェクトの厚みを表現できます。上のキャプチャでは、ドロップシャドウは全て20pxに設定されています。これはオブジェクトの厚みが無視されており、重複によって伝えられたインフォメーションと矛盾するものです。オブジェクトの厚みに従って、ドロップシャドウを設定します。5pxとそれぞれにあった数値にします。エッジに使用するドロップシャドウエッジにドロップシャドウを使用する場合は、それが反射した光を持たない限りハードなエッジではなく、エッジの周りに微増するように表現されます。Reuters.comこの例はハードなエッジをもったサンプルです。このデザインではどこにも次元の錯覚を持っていませんが、右のサイドバーに沿ってドロップシャドウを使用しています。デザイナーはおそらく、サイドバーの階層を下げることを望んだものでしょう。これは不必要に暗いだけでなく、ユーザーの視線を集めてしまうものになってしまっています。ここでは、後ろに位置していることが最低限分かるように、軽いものにします。これにより、最下部の推移している箇所も、きれいなラインとなり、ユーザーの気を散らすことはなくなるでしょう。(W3C)時々、ドロップシャドウがこのようにロゴのボックスの下にあるように、明白な理由がないまま使用されています。このドロップシャドウは、なぜオブジェクトが遠くに配置されているように表現され、また、なぜ丸いのでしょうか?私はこれを理解しようとすると、いっそう混乱するだけです。いったドロップシャドウはページの調和を混乱させるだけなので、使用する価値がありません。異なる光源をもったグラデーションWolfram_Alphaヘッダ箇所では上部に光源があり、上から白ではじまるグラデーションが配置されています。ページのエレメントでは下部に光源があり、最下部に向かって白になるグラデーションが配置されています。これはグラデーションの光源は一緒でなくてもかまわない、と考えるかもしれません。これらは現実の世界で見るグラデーションの固有のメタファをもっているように、可能ではあるが、微妙なグラデーションです。ここでは下方の光源を取り除き、グラデーションの方向を変更し、光源を上部に統一してみました。おわりにウェブページのオブジェクトはメタファによって、本物のオブジェクトのように表現されています。デザイナーはこのメタファと現実を矛盾しなくするようには要求されません。デザインのコミュニケーションレベルにおいて、注意深く配慮することはウェブサイトをいっそう素晴らしいものにする助けとなります。したケアと一貫性がウェブサイトのユーザーエクスペリエンスを快適にし、さらに楽しくするのに役立つでしょう。