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

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

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

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

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

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

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

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

 

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

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

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

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

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