ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方

ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方をSmashing Magazineから紹介します。

5 Simple Tricks To Bring Light and Shadow Into Your Designs

以下、その意訳です。

ライトとシャドウというのは単にそこにあるだけではありません。ライトは対象物を射し、シャドウを生み出します。
形や大きさ、質感を伝え、目にする対象物の理解を深めます。

ウェブデザインでもこのライトとシャドウは非常に重要で、デザインをよりナチュラルにし、感動的で直感的なものにします。
ここに、ライトとシャドウの洗練された5つの使い方を紹介します。

A Quick Anatomy Of Light And Shadow

ライトとシャドウの構造

下の図は、ライトが左からあたっています。ハイライトはそのライトが一番強くあたっている箇所です。そして、シャドウはライトから最も遠い位置に落ちます。
ライトとシャドウを使用すると、そのイメージの質感は我々に語りかけてくるようになります。

これはウェブデザインに本当に関係があるのでしょうか？

もし、あなたがリッチな質感のインターフェイスをデザインしようとしているなら、ライトとシャドウは重要な要素です。
ライトとシャドウを使いこなすことは、デザインに奥行きを与え、ビジュアル的な刺激を生み出します。

1. Using A Light Source

光源の使い方

光源とは光を放出するもので、ライトを使用する際にはこの光源をどこに設定するかが最も重要になります。
光源の設定と同時に、ハイライトやシャドウの位置も決まります。

この光源を適切に使用することで、ウェブサイトに雰囲気を出すことができます。そして、ユーザーの視線をコントロールするのにも役立ちます。

Examples on the Web

Campaign Monitor
光源を対象物の背後に設置し、日の出のような感じを演出しています。

Icebrrg
光源を上部に設置し、ウェブサイトが水中深くにあるように演出しています。

Mike Precious
複数の光源を設置し、ビジュアル的な興味を与え、デスクランプの照明効果と関連付けをしています。

Deaxon
光源をロゴの背後に設置し、ページの中でロゴがビジュアル的に目立つようにしています。

2. Gradients

グラデーション

実世界ではあらゆるものにライトとシャドウがあり、フラットなものは極少数です。グラデーションを使うことは奥行きをあたえる素晴らしい手法で、ウェブサイトを生き生きとさせます。

グラデーションを使用する時の注意点は、使用しすぎないことです。
Photoshopで作業するなら、グラデーションはレイヤーを分けて作業してください。これはいつでも修正ができるということです。

Examples on the Web

nclud
コンテンツを分離し整理するために、グラデーションを使用しています。

CSS Ninjas
カラーの異なるそれぞれのエリアに質感を与えるために、グラデーションを使用しています。

3. Highlights

ハイライト

ハイライトの使用は、光源に最も近い対象物のエッジに配置し、シャドウとのバランスの助けとなります。
ハイライトが効果的に使われているということは、それに気がつかないくらい見落とされがちなものです。ごく小さいハイライト処理が、インターフェイスを素晴らしいものに仕上げます。

Examples on the Web

Icon Dock
目立たないハイライトのラインが、エレメントのエッジを際立たせています。

Newism
上と同じく、目立たないハイライトのラインが使用されています。

Apple
ナビゲーションの最下部のハイライトにあなたは気がつかないかもしれません。

4. Basic Shadows

シャドウの基本

ドロップシャドウは、グラデーションのようにデザインのスタンダードになりました。シャドウは正しい方法で使用すると対象物に効果的な質感と奥行きを与えることができます。
ポイントは、使い過ぎないことです。

シャドウのクオリティは対象物との距離と方向で、それはライトの方向と強さに依存します。ライトが強ければシャドウは暗くなり、ライトが柔らかければシャドウも柔らかくなります。

Examples on the Web

LinkedIn
シャドウをサイドバーの底部に配置し、質感を与えています。

Google
Googleも微妙なシャドウに投資をしています。

5. Advanced Shadows

高度なシャドウ

シャドウを多くすることで、対象物に立体的な効果を与えることができます。多いシャドウは空間を有効に使用する素晴らしい方法です。

同じコーラの缶でも、そのシャドウと陰影によって異なるポジションが与えられています。

Examples on the Web

Emotions by Mike
巧みなシャドウとライトを使用して、フラットなページを床のように演出しています。

Superkix
シャドウを使用して、ウェブサイトの上にスニーカーをフロートさせています。
ページのサイズを変更しても、シャドウはライトがシフトしているかのように動きます。

SOFA
大胆なライトとシャドウを使用して、ソファが白い背景を床にしています。