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

スマホの特性を活かしたLP事例10選|パララックス・動画など

こんにちは、あやかです。
スマホって急速に普及してますよね。僕の周りの人でスマホじゃない人は父親くらい。

スマートフォンでインターネットを利用している人の割合は 57.9%
【出典】平成28年通信利用動向調査の結果

Googleがモバイルファーストインデックス(MFI)を公式発表してからちょうど1年ほど経過したということもあり、今回はスマホの特性を生かしたランディングページのまとめです。

パララックス編

パララックス(parallax)とは「視差」という意味で、WEBにおいてはスクロールなどの動作に応じて、画像や文字などの要素を異なるスピードで動かすことを指します。パララックスを使用することによって、視覚的に情報が目に留まりやすくなります。ユーザーの行動としてスクロールが多くなるスマホでは、特に相性が良いです。

1. クラシコ|アーバンジップスクラブ


アーバンジップスクラブ | クラシコ

白衣を展開している「クラシコ(Classico)」の「アーバンジップスクラブ」のページです。
商品を際立たせる白を基調とした清潔感のあるデザインに画像と文字が差し込むパララックスが、「アーバンジップスクラブ」のスタイリッシュさと機能性にマッチしていますね。

2. コカ・コーラ+リーデルグラス公式サイト


コカ・コーラ + リーデルグラス公式サイト – The COCA-COLA + RIEDEL GLASS

リーデルが開発した「コカ・コーラ」専用グラスのページです。
こちらは先程とは逆に黒を基調していて、洗練されたデザインになっていますね。比較的ゆっくりとしたパララックスと相まって、商品がより洗練されて見えます。

3. 日清食品|ぶっこみ飯


ぶっこみ飯

こちらは日清食品の商品「ぶっこみ飯」のページです。
私事ですがラーメンの残り汁にご飯を入れて食べることが好きです、しかも深夜は特に美味しい。そんな時に感じる背徳感を具象化したようなパララックスが特徴的なページです。

4. GIFOODS | 食べたいものをシェアしようby賢者の食卓


GIFOODS | 食べたいものをシェアしようby賢者の食卓

掲載されている料理を食べたいと思ったらSNSでシェアできる「GIFOODS」のページ。
アニメーションGIFの料理動画と併せてパララックスで出てくるキャッチコピーが印象的で、まさに「食べたい!」と思わせるページになっています。

インタラクティブ編

インタラクティブ(interactive)とは、「対話」「双方向」といった意味で、WEBにおいてはユーザーが画面を見ながら、対話をするような形式で操作する形態を指します。タップやフリック、スクロールといった動作に対応したレスポンスが魅力的です。

5. SEA BREEZE|シーブリーズ チェンジストーリー


チェンジストーリー | SEA BREEZE

SEA BREEZEのサイト内にある「チェンジストーリー」というページ。
スクロールすると物語が進んでいき、選択する内容によってストーリーが変化していきます。

例えばこちらのシーンではフリックを促すことで登場人物を動かすインタラクティブな仕様も印象的です。

6. Takumi Taniguchi Photographer|東京タワーズ


東京タワーズ|Tokyo Towers

こちらは「谷口巧」というフォトグラファーのサイトです。
「東京タワーズ」という写真集のWEB版で、それぞれの写真のタイトル名を含んだツイートがランダムに表示される仕様になっています。
東京の雑踏(ツイート)と美しい景色って感じでマッチしていて素敵なページです。

7. 株式会社コンテンツ


株式会社コンテンツ Contents Co.,Ltd.

クリエイティブなデザインが印象的な株式会社コンテンツという制作会社のサイトです。
中央にある液体か気体か分からないような物体が、サイト内のコンテンツによって変化するという仕様は非常にインパクトがありますね。

動画編

動画の情報量は単純にテキスト、写真だけの場合の5,000倍とも言われています。
【出典】情報量5,000倍!?今動画コンテンツが必要な理由その1 | GIV(ギブ)

とあるようにコンテンツとして短時間に多くの情報量を伝えることができる動画をランディングページに使用する事例も多いです。背景でイメージ動画を使用し商品やサービスの世界観を演出したりHowTo動画で商品説明をしたりと、ブランディングや購入促進まで幅広く用いることができます。

8. 大塚製薬|オロナイン公式サイト


オロナイン公式サイト|大塚製薬

こちらは大塚製薬の商品「オロナイン」の公式サイトです。
パララックスで商品を際立たせている点も印象的ですが、背景に動画を差し込むことで、商品を使用するシーンが連想しやすくなっています。

9. UNIVERSAL MUSIC JAPAN|忘れらんねえよ


忘れらんねえよ – UNIVERSAL MUSIC JAPAN

こちらは「忘れらんねえよ」というバンドのページです。
制作したMVをただ埋め込むだけではなく、行動喚起しやすいデザインになっている点が印象的です。

スマホ専用でスマホを持つ角度によってコンテンツを変えている点も面白いですね。

10. Learnweb|Motto Kawaii Lab


Learnweb

こちらは「Learnweb」というサイトの「Motto Kawaii Lab」というメイクについて紹介したページです。
それぞれのメイクのスタイルをHowTo動画で紹介し、そのメイクを使用するシーンまで紹介しています。

まとめ

ランディングページの制作に生かせる事例はありましたか?

パララックスインタラクティブな仕様、動画の活用など迷われている方はぜひお問い合わせください!それではまた次回!

The following two tabs change content below.
あやか
これは本当の話ですが、組織図の中で私だけ肩書きがありません。 実家は代々漁師で生計を立てていますが、私の代で漁師業はストップしますので、 ご先祖様に顔向けできるように、産業が大きく変わるこの時代の節目で 良い働きができたらと思っています。
販促の最新トレンド、事例をお届け!
メルマガ登録情報入力
必須
必須
メールアドレス 必須
会社名 必須
SNSでフォローする