奥行きのあるデザイン

平面であるWebデザインにおいて、奥行きを感じさせるのは難しいことです。
影やグラデーションを使ってそれを表現するというのが最もポピュラーな方法ですが、CSSやJavascriptを使うことでまた違った奥行きの表現ができます。
視差効果を使って奥行きを感じさせるのですが、それをうまく使ったサイトがこちらです。


http://www.silverbackapp.com/


http://css-tricks.com/examples/StarryNight/

ブラウザの横幅や縦幅を変えてみると奥行きが感じられるのがわかると思います。
上記2サイトでは、複数のレイヤーにPNG画像が配置されており、CSSなどを使ってそれぞれのレイヤーを違った速度でスクロールさせるのでブラウザの幅を変えた時、動き方の違うレイヤーで視差効果を与え、奥行きがあるように見えるのです。

また、


http://weallhatequickbooks.com/

このサイトでは前面に炎のPNG画像と炎の影になる透過PNGを下に固定し、その下にコンテンツを置くことで、スクロールした時にコンテンツ部分が炎の中から出てくるかのように見えます。
上の2つのサイトのようにブラウザ幅を変えても視差効果を感じることができます。

透過PNG画像を使用する為、IE6以下のバージョンで見れないなど問題はありますがそれもJavaScriptなどで解決することができるのでこのようなレイヤーを使った奥行きをもたせるデザインも可能になります。

今回紹介したサイトのような動きや見せ方は企業サイトには向かないかもしれませんが、エンタメ系のサイトや、ブログなどといった比較的自由度の高いサイトでは使ってみても面白い効果ではないかと思います。

  • このページを共有する