TOP  >  WebService  >  視差効果を有効利用したクリエイティブなwebサイト集「21 Examples of Parallax Scrolling in Web Design」
2011年05月28日

視差効果を有効利用したクリエイティブなwebサイト集「21 Examples of Parallax Scrolling in Web Design」

webデザインにはさまざまなテイストや種類が存在し、中でも視差効果(2点の観測地点の位置の違いにより対象点が見える方向が異なること)を利用することで、より個性的な印象に仕上げることができます。そこで今回は、視差効果を有効利用したクリエイティブなwebサイト集「21 Examples of Parallax Scrolling in Web Design」を紹介したいと思います。


egopop _ Creative Studio

視差効果というカテゴリの中でも、一つの決められたパターンではなく、さまざまなアイデアや工夫によってデザインに動きが生かされたサイトの数々が紹介されています。気になったものをいくつか選定いたしましたので、以下よりご覧ください。

詳しくは以下

Nike Better World
背景の写真と正面のテキストのスクロール速度が異なることで、独特な動きを演出したwebサイト。写真のクリエイティブ性にも注目したいですね。


 

cultural solutions uk I Lincolnshire based cultural consultancy I research, planning & events management services
ポイントを動かすと、メイングラフィックになっているドット柄が動きます。シンプルなデザインのサイトですが、動きをプラスすることでより印象的に仕上げています。


 

Head2Heart
背景と、手前の雲のイラストのスクロール速度に差を付けることで遠近感が生まれ、平面のイラストに立体的なビジュアル表現が生まれています。


 

デザイン的にはシンプルでも、視差効果といった表現を加えるだけでサイトの印象をガラリを変えることができそうです。動きのアイデアの参考として是非活用してみたいですね。今回紹介したサイトの他にもたくさん紹介されていますので、気になる方は下記リンクよりどうぞ。

21 Examples of Parallax Scrolling in Web Design | Inspiration

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればこちらからご連絡ください。即刻削除いたします。
posted 04:44  |  
Category: WebService   
tag: 

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る