スタッフブログ

奥行きのあるデザイン

2008.12.10 Posted by

平面である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などで解決することができるのでこのようなレイヤーを使った奥行きをもたせるデザインも可能になります。

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

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

CONTACT

お電話でのお問い合わせ

03-5366-3277

受付時間:平日9:30〜18:30

メールフォームからのお問い合わせ

お問い合わせ(東京本社)

PAGETOP

Document資料請求

Contactお問い合わせ