東京都新宿区のWeb制作会社 - ウェブラボ株式会社

スタッフブログ

奥行きのあるデザイン

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つのチェックポイント

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

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278