販促担当者のためのデジタルマーケティング情報メディア|baXooka[バズーカ]

最後まで見てしまう!パララックスを活用したランディングページ事例10選

皆さん、こんにちは。バズーカ運営チームのキムです。

既存のLPをリニューアルするにも、新商品のLPを制作するにも、どのように自社商品の魅力を効果的に伝えられるか?とみなさん日々頭を悩ませているかと思います。

LPの中でも特に注目してほしい部分に「動き」をつける手法は様々ありますが、今回は「パララックス」を取り入れたランディングページをご紹介いたします。

企画立案の際にぜひ参考になさってください。

まずは、「パララックス」って何?

もともと「パララックス(parallax)」は「視差」という意味の英単語で、「観察者の位置の変化によって対象物の位置がずれて見えること」を示します。

これを、ページの移動を示す「スクロール(scroll)」と合わせると、ウェブ制作によく使用する「パララックススクロール」という手法になり、略して「パララックス」と呼ばれることが一般的です。

ウェブページには背景イメージや商品画像、見出しなどの色々な要素があり、スクロールすると順にページ下部の情報が見えますね。「パララックス」は、ページの何ピクセルの範囲までスクロールすれば、どの要素がどんなスピードで動くかを個別に設定し、ページを見る人に「奥行」があるように見せることです。

パララックスを利用すると、普通のウェブページとは違う情報の伝え方ができますし、「自分の操作で動いている!」というインタラクティブな面白さを訪問者に与えることができるため、特にキャンペーンサイトや販促用ランディングページで盛んに取り入れられています。

ここから、国内外でパララックスをうまく活用してついつい最後までスクロールしてしまうランディングページの事例を紹介していきます!

日本国内の事例

①「はじめての泉北ホーム」ー泉北ホーム/建設業のLP事例

senhoku-home.jpg

戸建ての注文住宅を手掛ける泉北ホーム社の、初めて会社名を知った人に向けたランディングページです。

背景では道路を走る車の動きをパララックスで見せ、車の動きを目で追いながらスクロールさせていくと、同社の特徴や選ばれている理由などをQ&A方式で自然と読んでしまうように設計されています。

信頼感を得られ、ページの途中から最後まで複数のコンバージョンポイントを設けてあり、最後のボタンは心理的ハードルが低い「資料請求」「見学」としている点も参考になりますね。

ちなみに僕は職業柄もあってか、上から下まで2度見してしまいました!

②「SIGMAXYZ RECRUIT 2018」ーシグマクシス/コンサルティング会社 新卒採用ページ事例

sigmaxyz.jpg

こちらは、新卒採用のリクルートページです。最初に会社のイメージを伝える全面動画を配置し、「VISION」「WORK」など項目内容によってページが切り替わるように見せるパララックス効果でコンテンツを区切って配置しています。

更に各コンテンツには全画面サイズの画像多きなイメージや動画を背景に使って、インパクト感も与えています。

新卒採用の時期になると、就活中の学生さんは何十社も採用ページを見ながら比較検討しますね。その中で、より強く同社を印象づけることに成功しているのではないかと思います。

③「ペルソナ5」ーアトラス/ゲーム会社 キャンペーンサイト事例

persona5.jpg

「ペルソナ」という人気ゲームシリーズ新作のランディングページです。背景にゲームプレイ動画を固定配置、ページのコンテンツはスクロールに合わせて飛び出るような動きをつけ、疾走感と迫力を演出しています。

ナビゲーションやリンクボタンも感覚的にデザインされ目を引き、このシリーズならではの世界観を効果的に伝えています。

僕のようなおじさんは、どこを押したらいいかわからなくなることもありましたが(笑)、商品のメインターゲットが10代~20代の若年層なので有効ではないかと思います。

④「プレミアム・プレゼンテーション」ーディフォット/プロダクトデザイン会社のLP事例

difott.jpg

設計の図面を持ち運ぶ時に利用する「図面専用ケース」のランディングページ。風呂敷をモチーフにした商品のデザインを、パララックスとイメージの透明度を調整することで見事に表現しています。

スクロールに合わせて商品の使い方がわかってくる仕組みで、建築士が「クライアントに図面を提案する時の新しい見せ方ができる」というコンセプトを効果的にアピールしていますね!

⑤「はみ出しプロジェクト」ー湖池屋✕新しい学校のリーダーズ/食品メーカーのキャンペーンサイト事例

hamidashi-pj.jpg

ダンスヴォーカルユニット「新しい学校のリーダーズ」と株式会社湖池屋のポテトチップススナック商品とのコラボ企画によるキャンペーンサイトです。

ファーストビューから「え?何やってるの?」と思わせる激しいダンス動画の全面表示からはじまり、スクロールするとコンテンツ内容に合わせたメンバーの動きやアニメーションGIFが続々と出現します。

ページの「動き」を最大限活かし、「次は一体なにが出てくるだろう?」という気持ちでついついスクロールさせる仕掛けがふんだんに盛り込もれたページです。

⑥「KUUM」ーフェリシモ/雑貨・おもちゃのLP事例

kuum.jpg

フェリシモ社の商品、積み木「KUMM(クーム)」のランディングページです。

同じページの中で画面が切り替わるスライドショーのような効果で、商品のコンセプト・構成・積み木で作れるパターン例などのコンテンツを1つ1つしっかり目に留めてもらえる構成になっています。商品のカラーに合わせたページ全体の鮮やかな色づかいも印象的です。

個人的には、「積み木」という商品の特徴をより直感的に見せるため、動画コンテンツがあればもっと良いのではないかと感じます。

海外の事例

⑦「SENZ&SENZ WIFI」ーPentair/電化製品のLP事例

senz-and-senz.jpg

スタイリッシュな温度調節装置のランディングページです。電化製品のランディングページは、機能を表すために文字量が多くなりがちですが、こちらのページはパララックスを上手く活用し、商品の際立った特徴のみをコンパクトに伝えています。

まずファーストビューで、商品の一番のセールスポイントである「タッチで操作できる」という点を、スクロールに合わせたアニメーションで見せ、他商品に対する優位性がすぐわかるようにしています。

また、デザイン・操作性・アプリ連動といったその他の特徴も、ビジュアル中心に手短かつ効果的に伝えているところもポイントですね。

⑧「Gear 360」ーSamsung/スマホ用ガジェットのLP事例

gear360.jpg

スマホに取り付けると全方位の撮影ができる「360度カメラ」の特性を、パララックスを利用して印象づけているランディングページです。

スクロールしていくと商品自体がぐるっと回ったり、360度で撮った作例が現れたりして、一つのページで商品の特徴が把握できるように工夫されていますね。テキストの量を抑え、フォントの大きさでメリハリをつけているところも参考になります。

⑨「Space Needle」/観光業のLP事例

space-needle.jpg

シアトルのランドマーク、「Space Needle」というタワーのランディングページです。高さ184メートルという最大の特徴を効果的にアピールするために、普通のページとは真逆の方法で「下から上にスクロールさせる」という手法を使っています。

上にスクロールするにつれ、どんどん風景が上空の景色になっていき、まさに今タワーを登っていく感覚を味わうことができます。また、スクロール時に流れてくるアイコンをクリックすると、観光スポットやタワー施設についての詳細情報も確認できます。

「ウェブページは下にスクロールするもの」という固定観念を破って、確実に印象に残る斬新なランディングページの事例でした!

⑩「The hybrid graphic novel」ーPeugeot/自動車メーカーのLP事例

hybrid-graphic-novel.jpg

こちらの事例は「Peugeot」社のハイブリッド自動車技術を紹介するランディングページ。パララックスを利用して一つの物語を表現しています。

ハイブリッド運転中にモードを切り替えると最適なドライビングができる、という特徴をストーリーの中で表現して、車に詳しくない人でもアニメーションを鑑賞していく中でしっかりと理解できる構成になっています。

全体で見るとスクロールが長く閲覧者に負担がかかりかねないので、補助的に提供している自動スクロール機能が効果的ですね。アメコミ風のイラストと、「シュッシュッ」とページをめくる感覚で、本物のマンガを読んでいるかのような没入感が得られます。

まとめ

以上、パララックスを駆使して商品の特徴をアピールしているランディングページの事例でした。

この記事を書くために参考サイトを振り返っていると、パララックスは、ページで差別化された印象を与える有効な手段だなと改めて感じました。もちろん、なんでもパララックスを使えば良いわけではありません。

ターゲットによっては普段のスクロールと違う動きに戸惑い拒否感を抱かれる可能性もありますし、デバイスのスクリーンサイズによって意図していた動きが表現できない可能性や、作業工数による制作コスト増加という実装面の問題もあります。

ランディングページの制作には目的とターゲットをまず考えた上で、最も最適な方法を探さないと…と、教科書的な結論ですが、本当にこれが大事ですね。

「最も最適な方法」、バズーカ運営チームと一緒に考えてみませんか?ランディングページの企画・制作についてお悩みでしたら、いつでもお気軽にお問合せくださいね。

The following two tabs change content below.
baxooka
バズーカの運営チームです。 デジタルマーケティングの情報を日々更新中!よろしくお願いします!
販促の最新トレンド、事例をお届け!
メルマガ登録情報入力
必須
必須
メールアドレス 必須
会社名 必須
SNSでフォローする