パララックス・スクローリング を使ったデザイン

パララックス・スクロールは、デザイナーが2次元の画面に3次元の体験を作り出すためのクリエイティブ・ツールです。パララックス・スクロール効果は、深みと奥行きを与え、ユーザーに没入感と魅力的な体験を与えることができます。これは、ブランドが常に目指していることです。

パララックス・スクロールとは何ですか？

パララックス・スクロールとは、要素が異なる速度で動いているように見えることで、3Dスクロール効果を生み出すウェブデザインの手法です。

車を運転しているときに、近くのものは早く通り過ぎ、遠くのものはゆっくりと通り過ぎるという奥行きの感覚に似ています。

パララックススクロールのパターンにはいくつかの種類がありますが、いずれもコンテンツのレイヤーを分けて使用することで、目的の効果を得ることができます。それぞれのレイヤーに異なるスクロールスピードを設定することで、ユーザーがスクロールするたびに画面内をオブジェクトが移動しているように見せることができます。

パララックス・スクロールを作ってみませんか？UXPinでは簡単に作成可能です。14日間のトライアルですぐにお試しいただけます。

パララックス・スクロールの歴史

パララックス・スクロールは、1930年代にディズニーの「白雪姫と7人の小人たち」などのアニメーション映画の手法として登場しました。1980年代初頭、ゲームデザイナーは、1981年に発売された「Jump Bug」をはじめとする2Dゲームに3D効果を持たせるためにパララックス・スクロールを使用しました。

しかし、2007年になって、Internet Explorer 6のJavascriptとCSS 2を使って、パララックス・スクロールがウェブデザインに登場しました。2011年にHTML5とCSS 3が導入されると、パララックス・スクロール効果の制作が容易になり、人気が高まりました。

現在、パララックススクロールは非常に複雑で、ウェブデザイナーは没入感のあるビジュアル体験を作り出すことができます。

パララックス・スクロールを使うタイミング

亜麻色のスクロールは、ユニークなユーザー体験を生み出す非常に効果的なツールですが、デザイナーは亜麻色のスクロールの欠点を考慮しなければなりません。悪影響を及ぼす可能性があるのです！

ページスピード

パララックス・スクロールは、特に共有ホスティングプランのウェブサイトでは、ページスピードを低下させます。Googleによると、Eコマースサイトでは2秒が限界とされています。しかし、その他のほとんどのウェブサイトでは、平均して3～6秒となっています。

では、Eコマースに関しては、どのような目標があるのでしょうか？ユーザーにウェブデザインのスキルを印象づけることでしょうか、それとも商品を売ることでしょうか？ページスピードを最適化できない限り、Eコマースやスピードが重視されるウェブサイトでは、パララックススクロールは避けた方がよいでしょう。

おすすめの記事： how to improve page speed for parallax scrolling（英語記事）

コンテンツへの影響は？

亜麻色のスクロール効果を追加する前のもう一つの疑問は、それがコンテンツにどのような影響を与えるかということです。

例えば、Collage Craftingのウェブサイトでは、デザイナーは販売店に視差効果を加えることにしました。

しかし、スクロールすると上下に切れてしまうため、一部のコンテンツが読みづらい。これでは、ユーザーはすべてのコンテンツを適切に消費することができず、良いユーザーエクスペリエンスとは言えません。

ユーザーにコンテンツを読んでもらう必要があるなら、シンプルにしましょう デザイナーがユーザーにコンテンツを提供し、かつ読みやすさを維持する方法は他にもあります。

 パララックス・スクロール 効果は、ユーザーの注意をそらしたり、迷惑をかけることはないのか？

パララックス・スクロールには、それなりの効果があります。クリエイティブエージェンシーにとっては、潜在的なクライアントにウェブデザインのスキルを印象づけるためにも意味があります。

しかし、もし私が自動車保険の見積もりを探しているとしたら、見積もりフォームにたどり着くまでに、派手なパララックス効果の中をスクロールして時間を無駄にしたいと思うでしょうか？おそらくそうではないでしょう。

ユーザーが素早く情報を求めている競争の激しい業界では、パララックス・スクロールは直帰率やコンバージョンに悪影響を及ぼす可能性があります。

常にコンテンツ、コンテクスト、そしてウェブサイトがユーザーにどのようなサービスを提供しようとしているのかを考えましょう。

優れたパララックス・スクロール　9つの例

これらのWebサイトの多くは、デザイナーがストーリーを伝えるためにパララックスをどのように使用しているかというテーマが際立っています。

紹介している例からわかるように、パララックスは強力なストーリーテリングツールになりますが、そのためには多くにおいての考慮や計画が必要です。

NIIKA

NIIKA は、オーストラリアを拠点とするクリエイティブ・エージェンシーです。主人公のイメージは、美しい抽象的なデザインに微妙な動きを加えたものです。スクロールすると、抽象的なオブジェクトがページ内を移動し、大きな動くヘッドラインがエージェンシーのサービスを表示します。

さらにその下には、背景に固定されたカスタムマップを使用したパララックス・スクロール効果があり、エージェンシーの連絡先詳細が上部にスクロールします。

NIIKA は、フッター付近にある「私たちと一緒に働きませんか」というCTAにもパララックス効果を使用しています。

NIIKA は、パララックス・スクロールに多くのコピーを使用していますが、重要な情報やメッセージを見失うことはありません。

CANN

CANN は、アメリカの大麻入りトニック飲料メーカーです。このウェブサイトでは、没入感のあるシームレスなパララックス・スクロール効果を用いて、ブランドストーリーを伝えています。 開発者は、このような複雑なパララックス・スクロール効果に対応できるように、CANNのウェブサイトを最適化するという素晴らしい仕事をしました。

コピーやコンテンツは読みやすく、パララックス効果でブランドが持つストーリーを伝えることができ、泡でトニックを表現しています。また、色を効果的に使い、CANNの3つのフレーバーを表現しています。

ウェブデザイナーは、CANNのストアにおいても素晴らしい仕事をしており、派手な効果を捨てて、コンバージョンのためにデザインを最適化しています。

Toy Fight

Toy Fightは、イギリスに拠点を置くクリエイティブエージェンシーです。このウェブサイトでは、トップページにシンプルかつエレガントなパララックス・スクロール効果を採用し、ページの中央には明確な行動喚起が表示されています。

Toy Fightでは、各ページにパララックス効果を用いて、ヒーローからページのコンテンツへと移行しています。このパララックス効果は、アニメーションがどこかおどけている一方で、コンテンツは会社のサービスや過去の仕事について説明しているという、まるでカーテンを開けるような巧みな演出です。

Toy Fightのウェブサイトは、パララックス・スクロールがどのようにストーリーを伝えることができるかを示す素晴らしい例です。

Garden

Garden は、数々の賞を受賞したポルトガルのデザインスタジオです。このサイトでは、美しいパララックス効果を利用して、庭の夕日を描いたヒーロー画像をスクロールしていくと日が暮れていきます。

さらにその下には、スクロールしながらスケッチしているかのような線やアイコンが現れます。繊細な効果により、Gardenのサービスやヘッドラインなどの重要な情報に目がいきます。

Smart Move

Smart Move は、スウェーデンのグレーター・オレブロ地域に専門家を誘致し、維持するための取り組みです。このサイトのトップページには、エーレブローの特徴や文化を紹介する印象的な水平方向のパララックス・スクロール効果があり、それぞれに関連するリンクが貼られています。

このパララックス効果は、自然、商業、家庭生活、娯楽、ナイトライフなど、スウェーデンの様々なシーンを巧みに表現しています。

Bertani Wines

Bertani は、イタリアのワインメーカーです。このウェブサイトでは、水平方向のパララックス効果を利用して、画像、ビデオ、コピーでブランドのストーリーを表現しています。

この効果は、水平方向と垂直方向の動きを組み合わせて、ブランド、ブドウ畑、ワインを巡る旅へと誘います。Bertani社のデザイナーは、複雑な水平視差効果と説得力のあるストーリーテリングのバランスをうまくとっています。すべてが理にかなっており、メッセージ性も際立っています。

Quentin Goupille

Quentin Goupille は、パリ出身のフリーランスのアートディレクター、イラストレーター、映像制作者です。彼のポートフォリオは、パララックス・スクロール効果を用いて、各プロジェクトの背景にあるストーリーを伝えています。

各ページはそれぞれ異なっており、Quentinはパララックス効果を使って、ユーザーを各作品の旅へと誘います。その結果、Quentin氏のストーリーテリングと創造性が印象的に表現されています。

Quentin Goupille氏のウェブサイトは、クリエイターが視差効果を利用して、自分の作品をユニークで魅力的な方法で紹介できることを示す素晴らしい例です。

Crazy About Eggs

Crazy About Eggsは、放し飼いにこだわり、鶏に健康的な農場生活を送らせることに情熱を注ぐオランダの養鶏業者です。

このウェブサイトでは、小さな要素や小見出しを紹介するために、微妙なパララックス・スクロール効果を使用しています。この会社の卵の箱は、半分までスクロールしても静止したままで、製品の利点が左右にスクロールします。

これは、ブランドを前面に押し出し、ユーザーが製品に親しみを持てるようにする、非常にクリエイティブな方法です。ユーザーは次にスーパーに行ったとき、Crazy About Eggsのパッケージに気づくことでしょう。

Kibana

Kibana は、宿泊施設、イベントスペース、庭園、マーケットなどのアウトドア体験ができるフランスのリゾート地です。

ヒーロー画像には、テキストによる紹介文を掲載しています。スクロールすると、Kibanaの美しい庭園の中に入り込み、すぐにその場にいたいと思うでしょう。

さらにスクロールすると、微妙な動きでKibanaの主要な機能や美しい画像にユーザーの注意が向けられるようになっています。フッター付近では、デザイナーが巧みなパララックス効果を使ってKibanaのチームを紹介しています。

まとめ

いかがだったでしょうか？スクロールは強力なツールですが、デザイナーはユーザーを感動させ、ストーリーを伝えるために使用する必要があります。上で紹介した例のようにパララックスを効果的に使用するには、多くの時間、コラボレーション、そして計画が必要です。

ユーザーのニーズを常に念頭に置き、ユーザーエクスペリエンスに悪影響を与えるようなパララックス効果は使用しないようにしましょう。

UXPinを使った素晴らしいUXデザイン

UXPinは強力なコラボレーションデザインツールで、プロジェクトの成功に向けてチーム全体を招待することができます。UXデザイナーはUXPinを使って、没入感のあるビジュアル体験やUIをデザインすることができます。

UXPinの14日間の無料トライアルで、美しいUXの創造を始めましょう。