SONICMOOV Googleページ

アイデアの参考にしたいタイプ別パララックスサイト20選

アイデアの参考にしたいタイプ別パララックスサイト20選

  • このエントリーをはてなブックマークに追加

以前にスマホ対応!パララックスサイトの作り方を当サイトで紹介しましたが、パララックスと言っても様々な表現手法があり、今回はちょっと気になる様々なクリエイティブアイデアのパララックスサイトをピックアップしてみたいと思います。

目次

高さのあるものに対しては絶大な効果Space Needle

下から上にスクロールするパララックスサイト
https://www.spaceneedle.com/home/

下から上にスクロールするタイプですが、高さのあるシアトルのSpace Needleタワーを徐々に上がっていく様と背景に思わずスクロールを巻き戻したりしたくなります。

アニメーションを真似したいLe Mugs

アニメーションを真似したいパララックスサイト
http://le-mugs.com/

マウスの追随に対して写真が動いたり、様々なコンテンツ要素を様々なアニメーションでスライドイン・アウトさせていて、参考にしたいアニメーションです。

世界観に引き込まれるBen the Bodyguard

世界観に引き込まれるパララックスサイト
http://benthebodyguard.com/index.php

ハードボイルドなキャラクターが夜の街を歩く様をまるで映画のワンシーンを描いたようなLPに仕上げられていて、画面下部のネオンによるプロダクト紹介のためのボタンデザインは最初は気づかずにスクロールで通り過ぎてしまいました。また、電車が通るなど、細かい世界観に思わず引き込まれてしまうクリエイティブなページに仕上がっています。

奥行き感を感じさせる多重スクロールFIREWATCH

多重スクロールするパララックス
http://www.firewatchgame.com/

様々な賞を受賞したゲームFIREWATCHのLPで、視差効果があるのは画面上部のイラスト部分のみですが、画面をスクロールするとまるで奥行きのあるような多重スクロールをします。奥行きを見せたい場合には参考にしたい動きです。

ブレを表現したSKUAWK

ブレを表現したサイト
http://skuawk.com/

パブリックドメイン写真サイトのトップページで画面全体でのスクロールはしないのですが、カメラを構えた写真が使われており、その写真上でマウスを動かすとカメラファインダー越しのブレを表現したようなパララックススクロールの仕方を表現しています。
シンプルですが、アイデア次第では色々と応用ができそうです。

3Dパララックス&パーティクルで見せるGALAXIA

3Dパララックス
https://www.galaxia.co/

宇宙空間を表現したページ上でマウスを動かすとそれに合わせて星も動くページとなっていて、3Dパララックスの要素が含まれているようです。さらにはパーティクルも使ったようなアニメーションに思わず「おっ」となります。

横スクロールするThe walking dead

横スクロールのパララックス
https://www.cabletv.com/the-walking-dead

個人的にお薦めの海外ドラマの一つであるウォーキング・デッドのLPです。パララックスのスクロールと言えば縦スクロールのイメージが強いですが、このLPは横にスクロールします。スマホで見るとPCでの閲覧を推奨と案内がでます。この手法を活用する場合にはスマホを横画面で見せるのがよさそうなのと、PCユーザーが主であるサービスや商品向けの見せ方がいいかもしれません。

絵を描いているようなアニメーションも Toi

ラインがアニメーションするパララックス
https://toi.io/

様々なコンテンツ要素がスライドしながら表示されるものもあれば、所々に絵を描くようなアニメーションも入ってくるコンテンツとなっています。

動くスマホの画面内もさらに動く Dave Gamache

スマホ内の画面も動くパララックス
http://davegamache.com/parallax/

Dave Gamache氏によるパララックスのサンプルです。スマホの画面が回転しながらさらに画面内の内容も切り替わる細かい芸は必見です。Mediumで解説がなされています。

動くデジタルコミックPeugeot HYbrid4 presents : The hybrid graphic novel

動くデジタルコミック
http://graphicnovel-hybrid4.peugeot.com/start.html

比較的に見かける機会がある、動きのあるデジタルコミックと言ったところの使われ方です。

下から上にスクロール Mission Timeline | Red Bull Stratos

下から上にスクロール
http://www.redbullstratos.com/the-mission/mission-timeline/

マウスホイールを回したら画面が上から下ではなく下から上にスクロールするだけで、おっ?!となってしまうのは人間の慣れに対して少しアクセントを入れるだけで変化が起きるのだなと思ったりします。ページのコンセプトにあった使い方ではないでしょうか。

パラパラ漫画を彷彿させるPitchfork

パラパラ漫画のように動く
http://pitchfork.com/features/cover-story/reader/bat-for-lashes/

スクロールすると画面上の女性がパラパラ漫画のように動きつつパララックスします。アイデア次第では女性を他のアイテムに置き換えることで色々と応用がききそうです。

モーションタイポグラフィがスタイリッシュなMélanie F

モーションタイポグラフィがスタイリッシュ
http://melanie-f.com/en/

スタイリッシュなモーションタイポグラフィとパララックスのコンボ技です。

iPhoneの画面に注目したいUrban Walks

iPhoneの画面にも注目したいパララックス
http://urban-walks.com/

スクロールで背景が動きつつも画面中央の動きにも注目したいです。

重なりを活用したクリエイティブなSUPERLIME

重なりを活用したパララックス
http://www.superlime.fr/

画像の重なりをうまく活用していて、オシャレ感を感じさせてくれます。

定番の動きMyriad

定番の動き
http://myriad.space/

シンプルなパララックススクロールなサイトのMyriadです。画面下にスクロールするたびに、テキストや画像などの様々なコンテンツがスライドインし、逆に画面下から上にスクロールするとコンテンツ要素がスライドアウトする、よく見かける定番の動きですね。

画像を重ねつつスクロールで切り替わる Cyclemon

画像を重ねつつスクロールで切り替わる
http://www.cyclemon.com/

これも比較的に定番ではないかと思いますが、2枚画像を重ねつつスクロールで画像が切り替わります。このサイトでは様々なタイプの自転車のイラストを画像に使用しており、プロダクトを見せる手法として活用するのもいいかもしれません。

変化を感じさせてくれるPORSCHEvolution

商品の変化を感じて取れるぱら
http://porschevolution.com/

これも上記と同じですが、年代ごとのポルシェをほぼ同じ位置に配置することでプロダクトの時代ごとの変化を感じせることができます。やはり、同じようなプロダクトを並べて見せるのにはもってこいの手法ですね。

動画を活用Lois Jeans

動画を活用したパララックス
http://www.loisjeans.com/es/ss2015/campaign

ファッションブランドLois Jeansのサイトで、動画も盛り込んだ作りとなっています。動画自体はブランドイメージとしての見せ方になっています。

スクロール停止時でも動きを入れる Feedmusic

スクロール停止時でも動きを入れたサイト
http://www.feedmusic.com/

全体的に動画が使われていて、画面がスクロールしない時でも写真が徐々にズームする見せ方は、ちょっとしたアクセントとして使えそうです。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

ビールが好き。 でも最近はワインと日本酒もいいなぁと思える今日この頃。

関連するSONICMOOVのサービス

Webデザイナー募集!

イラストーレーター募集!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ

Webデザイナー募集!

新着の記事

mautic is open source marketing automation