一番選ばれているHTML5の電子カタログ

つくるを応援するブログ - INSPI

デザイン・アート

まだまだトレンド!?スクロールにあわせて要素が動く、パララックス効果の海外Webサイト5選

16681
views

こんにちは。今回は、海外のWebサイトのトレンドについてのお話です。近年、企業のキャンペーンサイトなどで、画面をスクロールしていくと、それに反応してそれぞれの画像が動くアニメーション効果「parallax」(パララックス=視差)を取り入れたWebデザインが海外で増えています。コトバで説明するより、実際に見ていただいた方が効果を体感できるはずです。さっそく見てみましょう。


※リンク先サイトはPCでの閲覧を推奨。スマートフォン・タブレット端末では動作しないものが多いです。

Wildlife.la - Let's get Wild http://whois.wildlife.la/

Wildlife.la – Let’s get Wild
http://whois.wildlife.la/

カリフォルニアにあるデジタルクリエイティブエージェンシーのWebサイト。イントロダクション、サービスプロセス、制作実績、企業理念と、下にスクロールするにつれて、次々と場面が展開します。背景が空から宇宙へと変わっていき、壮大な世界観を演出しています。いささか、やりすぎな感はありますが、「ウチはこれくらいできるんですよ」というのを体感してもらうのには効果的ですね。

アポロ計画を思い起こさせるようなアニメーション。

アポロ計画を思い起こさせるようなアニメーション。

往年の試作戦闘機が画面を大きく横切るシーン。

往年の試作戦闘機が画面を大きく横切るシーン。

このように、手前の画像と奥にある画像の移動速度に違いをつけて立体感を出したり、スクロールにあわせてさまざまなアニメーションを展開できるのがparallaxの大きな特徴です。

こちらはフランスのクリエイティブエージェンシーのWebサイト。スクロールバーではなく、ボタンを押すことできっちり1画面分ずつスクロールします。

業務内容紹介のコーナーでは横にもスクロールし、動きにあわせてそこでもparallax効果のアニメーションが展開。

業務内容紹介のコーナーでは横にもスクロールし、動きにあわせてそこでもparallax効果のアニメーションが展開。

このように遠景と近景の移動速度を変えて見せる方法は、20世紀末のビデオゲームで既に使われていた古典的技術ではあるのですが、それが最近になって海外のWebデザインのトレンドになっているのは面白いですね。
このparallax効果は一般にはjavascriptとCSSを使っていて、ユーザーが画面をスクロールさせた量に応じて、それぞれの要素をどれだけ、どのような速さで、どの方向に動かすかなどを動的に計算して動かしているそうです。

インタラクティブアートディレクター、Morten Strid氏のWebサイト。スクロールではないのですが、マウスの位置に応じて、絵を構成するそれぞれの立体が動くことで、奥行きを表現しています。

マウスの位置に応じて、絵を構成するパーツが動きます。

マウスの位置に応じて、絵を構成するパーツが動きます。

 

iPhoneアプリのプロモーションサイト。スクロールに応じてさまざまなパーツが集まってきて整列するアニメーションは、とってもクールな印象です。
para009para010

ガトウィックエクスプレス http://www.gatwickexpresstracks.co.uk/

ガトウィックエクスプレス
http://www.gatwickexpresstracks.co.uk/

ロンドン・ヒースロー国際空港と市内のビクトリア駅を結ぶ、ガトウィックエクスプレスのキャンペーンサイト。3組のアーティストとのコラボレーションで、路線図上のロケーションに応じて実際の列車から撮影した車窓風景のムービーが登場し、彼らの音楽とともに旅を楽しむことができます。とにかくデザインがかっこいい。

ヘッドホンのケーブルを線路に見立て、スクロールにあわせて列車が画面上から下へと走っていきます。

ヘッドホンのケーブルを線路に見立て、スクロールにあわせて列車が画面上から下へと走っていきます。

路線上の各所で車窓とミュージックを楽しめるYoutube動画が登場。

路線上の各所で車窓とミュージックを楽しめるYoutube動画が登場。

いかがでしたでしょうか。
parallax効果のデザインは、2012年に大きく流行し始めたといわれます。日本でも、企業やショップなどのWebサイトでも、parallax効果を取り入れたデザインが増えて来ました。ただ、実際に制作に携わったことのあるデザイナーにお話を聞くと、

・大きめの画像をたくさん使う場合が多いため、ページが重くなる欠点も
・画面の高さを動的に計算しつつ動かしているので、1つのページでスマートフォン、タブレット、PCそれぞれで快適に閲覧できるようにするのは難しい(それら全てに展開する場合、別建てでページを作成する必要も?)。

といった問題点もあるようです。日本ではスマートフォン・タブレットを意識した「レスポンシブ・Webデザイン」が急速に広まっているような状況で、parallaxがどこまで浸透するかは分かりません。ただ、視覚的インパクトや遊びココロでユーザーを引きつけるという点では、なかなか効果的なデザインの一つではないかと思います。利点や欠点を両方把握しつつ、上手に使ってビジュアルを演出したいところですね。


インスピはWebデザインとマーケティングの株式会社ルーラーが運営しています

佐藤勝

佐藤 勝Writer

ライター/編集者/何でも屋。Web、デザイン、映像、アート、観光などの記事執筆や、企業・団体のコンテンツ制作など、色々やらせていただいております。 INSPIでは、生活やビジネスに役立つものづくりの情報から、面白スポットやまちづくりまで、さまざまなテーマの記事をお届けします。
http://lamp-creative.com/

← 記事一覧