ユーザーの心を掴む！動きのあるランディングページ5選

2018年6月28日

この記事は、2016年8月10日に公開された記事を再編集しています。

ランディングページは、訪問したユーザーからのコンバージョンを目的としたページのことです。そのため、いかにユーザーの興味を引くかが重要であり、テキストや画像だけでなく、動画やアニメーションも多く活用されています。

中でも今回は、ユーザーの興味を引く「動くランディングページ」を紹介します。

動きのあるランディングページ 5選

食品に特化した、写真やビデオのコンテンツ制作会社のランディングページです。被写体となる料理やお菓子の調理過程が、高画質な写真と動画で散りばめられています。商品となるコンテンツのポートフォリオのような役割も果たしているといえるでしょう。

コンバージョンは問い合わせのためのメールアドレスが配置されています。

アメリカのサザンメソジスト大学のバスケットボールチームのランディングページです。臨場感のある試合の様子が画面いっぱいに映し出され、スクロールしていくと各選手や戦績の紹介が表示されます。

コンバージョンはチームに応募するためのアンケートフォームが設置されています。

2015年12月から2016年3月の期間に行われた、冬のイベントを紹介するランディングページです。雪とくらげの幻想的なグラフィックに、白い雪が降っています。スクロールするとイベントの概要が続き、ユーザーに世界観を伝えるため、実際の動画も埋め込まれています。

コンバージョンは、京都水族館の公式ホームページへのリンクとSNSシェアボタンが設置されています。

大阪府にある住宅メーカー、泉北ホーム株式会社のランディングページです。強みである耐力壁をアピールするため、家の中の様々な場所で、耐力壁を導入した場合のビフォー・アフターを動画で紹介しています。専門的な建築技術の説明も、視覚的な補足を加えることでユーザーの理解を促しているといえるでしょう。

コンバージョンは資料請求フォームが設置されています。

「ヒカキン」や「はじめしゃちょー」などの有名YouTuberが活躍している、UUUM株式会社のランディングページです。スクロールすると、人気YouTuberの動画とともに、UUUM NETWORKの仕組みや応募要件が解説されています。

コンバージョンは、UUUM NETWORKへの応募ボタンが設置されています。

動きのあるランディングページは、工夫次第でユーザーからの印象を強められます。例えばスクロールしていくうちにページが変化するページ構成により、自然とCTAにたどり着かせることも可能でしょう。

しかし、このような動きがある要素を盛り込みすぎるとページの読み込みが遅くなってしまうため、ユーザビリティが下がるリスクもあります。ページ読み込み速度とキャッチーさのバランスを見ながら作成しましょう。