ドロップシャドウとWebデザインの空間表現

Webデザインにおいて常套手段といいますかよく用いられるのがドロップシャドウ。

作業としては「対象の下に影をつける」というになりますが、その意義は単なる装飾にとどまりません。視点を変えて、といいますか本質を意識することでより高度で柔軟な表現ができるようになる、と思います。

この記事に取り上げたドロップシャドウに限りませんが、装飾表現はテクニックの模倣では十分に効果を発揮できないことも多々あると思います。なぜそのような装飾表現となったのか、という本質を考えることをお勧めします。

ドロップシャドウと空間表現

ドロップシャドウの表現としては、基本的に対象より暗い色を影として使うことかと思います。ここで重要なのは、影をつけるということが2次元ではなく3次元を表現しているという点です。つまり、

ドロップシャドウの本質は2次元に3次元を構築する

ことだと言えます。なお、2次元的な装飾として要素の周囲にぼかした色を入れるためにドロップシャドウという機能（グロー）を使うことはよくありますが、この記事ではそういった意図での利用を除外します。

各要素の3次元的位置関係

対象の影を操作することにより、意図的に「高さ」の関係性を作り上げることが可能です。

具体的に言えば、要素の輪郭に沿うように影を付ければ、背景との高さの差は小さいと説明していることになります。視覚的には「すこし浮いている」という錯覚を与えることになるでしょう。

では、対象から距離を離し、かつ大きさを小さく色を薄くした場合はどうでしょう？背景との高さの差は大きくなり、視覚的には「かなり浮いている」あるいは、「他よりも近くにあるように見える」という錯覚を与えるはずです。

つまり、ドロップシャドウを制御することでサイトに高さ、または奥行きを追加することが可能です。

要素の優先度と空間表現

仮に、特定の要素の優先度を他よりも高めたいとします。その場合は以下の方法が思いつくでしょう。

• 強い色を置く
• 線を引く/線で囲む
• サイズを大きくする

いずれも直接的な表現で力強く、効果の高い手法です。しかし、多用するとサイト全体がざわついた印象になるリスクがあります。

また、該当の要素がテキストの一部であれば良いですが、「右カラムすべて」のような面に対して優先度を上げるとなるとなかなか難しいかと思います。

こういう場合には、ドロップシャドウによる空間表現が有効な手法の１つとなるでしょう。後述しますが、ドロップシャドウはそれほど強い表現ではないからです。

遠近法の利用

なぜ、ドロップシャドウによる空間表現が有効な手法となるのか？これは非常に単純な話で、

遠近法の表現が利用できる

からです。両手にボールを持ち、片方を相手に差し出している状態をイメージしていただければ分かりやすいでしょうか。手前にあるものに意識が向かいやすいはずです。

前述したドロップシャドウの調整によって、要素が「どれだけ他から離れているか=目に近いか」を設定が可能となるのです。

補助的な表現

「高さ」という概念が利用できるようになりますと、表現の幅が飛躍的に高まります。ですが、ドロップシャドウによる空間表現は補助的な表現にとどまりやすい考えられます。なぜなら、

影は色に負ける

という結果におわることが多いからです。そもそもドロップシャドウ自体が繊細な表現ですから、彩度が高く面積の広い色面と同時に用いるとほとんど目立ちません。少なくとも、空間的な効果は減少してしまいます。

つまり、ドロップシャドウによる空間表現を用いるならば全体のバランスを入念に調整する必要があります。

色による空間表現

色による空間表現は、色の性質を利用します。色彩遠近法とも呼ばれるものですが、内容を知らずとも感覚的に用いられていることが多いかと思います。

線による遠近法

色と同様に線（枠線など）による遠近法を用いて優先度や空間を設定することも可能です。

具体的には、「線の色」と「線の太さ」を利用します。太く濃い色の線を用いれば優先度が上がり、他の要素よりも前に来ているように錯覚させることが可能です。

前述の色彩遠近法と組み合わせると更に強力になるでしょう。例えば、彩度が高く進出色の赤で太い線を作れば…。相当に目立ち、結果的に優先度が高いように見えるはずです。

対比による錯覚

空間表現する場合、重要なのは対比による錯覚を用いることです。単一の要素のみでは空間表現が成り立たたないので、

「他からどれぐらい距離があるのか」

がわかる比較対象の存在が重要です。何かより前にあると認識できなければなりませんし、「優先」という概念自体も成り立ちませんし。

Webデザインに限らず、文章でも写真でも何かしらを表現する際にはこの対比が重要になります。そして、対比を意識するのであれば全体の構成要素のバランスが重要である点もご理解いただけるかと思います。

「まずは全体を整えて凸凹をならし、次いで優先する部分を手前に持ち上げる。または、優先しない部分を奥に押し込む。」これらはバランスを整えているこそ効果が発揮されます。

結び

さすがに意味もなくドロップシャドウを使うことはないでしょうが…。この表現の3次元的な空間効果を意識すればより豊富な表現が可能になるかと思います。またはドロップシャドウを使わないことで、2次元にとどまった装飾的な印象が強いデザインも可能でしょう。

ただ、どんなセオリーや理論にも例外あることを理解していなければならないと思っています。創意工夫による発想で表現されたものの中には、どう考えても理論が破綻しているようにしか思えないのにすばらしい表現が存在するからです。

自ら発想の幅を狭める必要もないですし、否定は避けて受け入れることをお勧めします。

補足

厳密に言えば違うのですが、2次元に3次元を構成する試みは数多く存在します。ここでは名称などを挙げるにとどめますが、興味のある方は下記のワードを調べてみて下さい。Webデザインの分野以外に目を向ければ、さらに得るものがあるかと思いますので。

• エジプトの壁画
• スキアッチャート
• キュビズム
• 水墨画