Lesson 12 光と影を感じさせるサイトデザイン - Webデザイン表現&技法の新・スタンダード・デザインパーツ編

2011.9.22 THU

Webデザイン
表現&技法の
新・スタンダード

Lesson 12

光と影を感じさせる
サイトデザイン

	制作・文	山田岳史（ROSTRATA）
＞	To Use	Photoshop \| Fireworks \| CSS
＞	Browser	IE \| Firefox \| Safari

光と影を表現するグラデーションやシャドウの使い方次第で閲覧者に与える印象は大きく変わる。やり方を間違えると雰囲気を台なしにしてしまうので、よく使われるポイントごとにコツを押さえておこう。

01

サイトのデザインに光と影を感じさせるときは、まず光源を明確に意識してみよう。画面上部から光が当たるのか、下部から照らし上げるのかを定義することで、細かいパーツのハイライトやシャドウの方向が決まる。１つ１つのパーツの処理に理由があることが何よりも重要だ。光源は見えない場所に設定するだけでもよいが、あえて画面内にスポット的な光源を表現することで、そのスポットが当たるキャッチコピーや商品をより印象的に見せることができる【1-1】。

【1-1】視覚的にスポットライトのような演出を当てることで視線を誘導し、更にサイト全体の光と影の方向を決定づける

02

続いてハイライトについて考えてみよう。ハイライトは物体の、より光源に近いエッジ部分に現れる。Webデザインでは文字を読むことを主な目的としているため、極端に立体的でユーザーの方向に盛り上がった表現は少ない。厚みのない物体を想定した場合、ハイライトはエッジに集中するため、光源側のエッジに1ピクセルのハイライトを加えてみよう【2-1】。また、文字が物体に対してくぼんでいるレタープレス表現も、ほんの1ピクセルのハイライトで表現することができる。閲覧できるブラウザは限られてしまうが、最近はCSS3による text-shadowを用い、レタープレス表現をする例も多く見られるようになった【2-2】【2-3】。

【2-1】物体のエッジに1ピクセルのハイライトを加える。このような細かい処理の積み重ねがサイト全体に光を感じさせてくれる

【2-2】文字の下端にハイライトをつけることで文字がプレスされているように見える

【2-3】ばかしのない白い影を下方向に1ピクセル落とす指定。簡易的な手法だが背景にうまく合わせることでレタープレスのように見せることができる

03

影は光源の方向と強さだけでなく、物体と背景との距離感にも関係している【3-1】。光が強ければ影は濃くシャープになり、光が弱ければ影は薄く柔らかいものとなる。また背景との距離が遠くなると影はぼんやりとし、近くなるとくっきりと現れる。適度な光の強さで照らされたような表現は、Webサイトの雰囲気をぐっと高めてくれる。【3-2】の1番の影は強すぎる例だ。これほど影が濃くなるような光なら、物体表面もより反射が強くなるはずであるし、サイト全体で統一したら毒々しい印象になってしまうだろう。2番のように薄い影が四方に広がってしまうと、現実味がなく不自然に見えてしまう。この中では3番が最も自然な印象を受けるだろう。応用として、【3-3】のように影を湾曲させることで、物体が部分的に反っていたり浮いているような表現ができる。広範囲に及ぶ直線的な影が単調に思えるときに、動きや遊び心を持たせるために取り入れてみよう。

【3-1】画面の上部に光源を置いて影をつけてみる

【3-2】上の2つは不自然な印象を受ける

【3-3】要素の下端にこのような影を付けることで、紙が反って浮いているように見える。要素の塗り自体にも反りを表現するグラデーションを加えればよりリアリティのある表現ができる

04

グラデーションも光と影を感じさせる要素の1つだ。私たちが現実的に目にする物で、グラデーションがかかっていない物は存在しない。この現実感覚に沿った色合いのグラデーションは、Webサイトをより印象深いものにしてくれる。グラデーションの色の変化を考えるときは、色相(Hue)、彩度(Saturation)、明度(Brightness)から成るHSB色空間を意識してみよう。カラーパレットをHSBモードに切り替えて、彩度や明度を変化させるとどのように変化するかを観察してみよう【4-1】。また、ユーザーの操作を促すためのインターフェイスデザインでは、物体の凹凸を表現するグラデーションが重要な役割を果たしている。ボタンは膨らみを持っていることで「押せそうな」主張を、くぼんでいれば「押された状態・選択された状態」を表すことができる。非常に単純な理論だが、グラデーションの品質ひとつで全体の印象は大きく変わる【4-2】。