クリエイティビティ炸裂！動きのあるランディングページ5選
- 2016年8月10日
- 3,932
2015年卒、2年目ライター。
知っていると得する情報を発信していけるよう、日々精進します！
毎日の業務の中で気になったことを綴っているブログ、Twitterともに毎日更新しています。よろしければそちらもチェックしてみてください。
>> 執筆記事一覧はこちら
ランディングページは、広告バナーやテキストリンクから訪問したユーザーに何かしらの成約をしてもらうことを目的としたページを指します。
成約に持っていくためには、いかにユーザーの興味を引くかが重要であり、テキストや画像だけでなく動画やアニメーションを活用したページも多数存在します。
今回は、動的な要素を駆使してユーザーの興味を惹く設計をされている国内外のランディングページをご紹介します。
ランディングページを作成する場合はもちろん、コンテンツを企画・制作する方も参考にしてみてください。
1.キリンメッツスペシャルサイト
キリンメッツのランディングページです。
スクロールをしてくと、さまざまなアニメーションやCM動画が表示されます。
原色を基調としている点や所狭しと「Mets」という文字が並んでいる点など、見ている人の記憶に残りやすいインパクトの強いランディングページです。
2.Bagigia
Bagigiaというバッグのランディングページです。
ページの一番下にチャックが表示されており、スクロールしていくとチャックが飽くのと同時に次のアニメーションが表示されます。
ページの中心で商品が回転したり、手書き風のフォントを利用していたりと遊び心溢れるページに仕上がっています。
独特なデザインの商品であることも相まって、見る人の興味を強く惹くランディングページです。
4.Trippeo
経費管理アプリの「Trippeo」のランディングページです。
出張先でかかる経費をまとめて管理してくれる様子が、ページ中央に配置されているスマートフォンの中でアニメーションで再現されています。
英語のWebサイトですが、このアニメーションがあることでどのようなアプリなのかがすぐに理解でき、見ている人に使ってみたいと思わせる工夫が施されている事が分かります。
3.クロマリズム
映像制作会社の、株式会社クロマリズムのランディングページです。
白を基調としたシンプルなデザインですが、万華鏡の中身のようなパーツがBGMに合わせてまるで踊っているように散りばめられており、映像制作会社ならではのハイクオリティなアニメーションを楽しむことができます。
見に来た人が知りたいであろう情報をコンパクトに分かりやすくまとめてあり、クリエイティビティを感じさせるランディングページです。
4.UUUM NETWORK
「ヒカキン」や「はじめしゃちょー」などの有名YouTuberが参加している、UUUM NETWORKのランディングページです。
「好きなことで 生きていく」というキャッチフレーズをそのまま表現しているような動画が配置されており、見ている人の心を捉えて離さない、魅力的なランディングページです。
5.Every Last Drop
人間が1日の生活の中で使用している水の量を、スクロール操作で進むアニメーションで表現しています。
水を商材として扱う会社が作成したページのようですが、このページ内では商材に言及してはいません。
SNSでの拡散を目的としているようで、Facebook上で24,000以上のいいねがついています。
まとめ
どのページも、非常に高いクリエイティビティが発揮されており、英語で作成されたページであってもアニメーション等だけである程度内容を把握できます。
商品やサービスの購入、申し込みなどをしてもらうことだけを目的にするのではなく、見たユーザーが思わずシェアしたくなるようなページ設計になっていることもポイントです。
ただ、動的な要素を盛り込みすぎるとページの読み込みが遅くなってしまうため、ユーザビリティが下がるリスクもあります。
ページ読み込み速度とキャッチーさのバランスを見ながらの作成を心がけましょう。
ランディングページでは、いかにユーザーの興味を惹き付けて短時間で商品やサービスの魅力を伝えることができるかがカギとなります。
より成果につながるランディングページを作成するためにも、今回ご紹介したページを参考にしてみてはいかがでしょうか。
このニュースを読んだあなたにオススメ
LPOとは
ランディングページの目的を理解しよう
無料で高品質なLP（ランディングページ）を作れるテンプレート8選
このニュースに関連するカリキュラム
