動きのあるLPが人気?インパクトのあるLPを制作するために
2022.6.27
LPは第一印象やユーザーを惹きつけるようなデザインを考えなければ、直帰率や離脱率、コンバージョンなどあらゆる部分に影響を与える可能性があります。そのため、デザインを考える時は、配置や配色に加え、トレンドを取り入れることもコツです。
そこで本記事では、話題性を高めるために動きのあるLPについてご紹介します。また、デザインする時に注意したい点やトレンドの取り入れ方などもお伝えするので参考にしてみて下さい。
そこで本記事では、話題性を高めるために動きのあるLPについてご紹介します。また、デザインする時に注意したい点やトレンドの取り入れ方などもお伝えするので参考にしてみて下さい。
目次
視差効果が凄い
最近では効果的なLPの制作として、動きをつけたインパクトのあるデザインが挙げられます。動きをつけるといえば動画やアニメーションが定番ですが、今最も話題性のあるデザインが「パララックス」です。
パララックスは聞きなれない言葉かもしれませんが、視差という意味を持ち、ユーザーがLPをスクロールしていくなかで、速度や立体感などをつけることで表現する方法です。
動画よりもインパクトを残しやすいため、ファーストビューに取り入れることでユーザーを惹きつけやすいとされています。また、強調したい部分がある時や、ストーリ性を取り入れたい時にもおすすめです。
おしゃれで話題性の高いパララックスですが、表示速度が遅くなることやSEO対策には向いていない、のようなデメリットな部分もあります。そのため、パララックスデザインを採用する時は、本当に強調したい箇所に取り入れるなど工夫をしてみてください。
パララックスは聞きなれない言葉かもしれませんが、視差という意味を持ち、ユーザーがLPをスクロールしていくなかで、速度や立体感などをつけることで表現する方法です。
動画よりもインパクトを残しやすいため、ファーストビューに取り入れることでユーザーを惹きつけやすいとされています。また、強調したい部分がある時や、ストーリ性を取り入れたい時にもおすすめです。
おしゃれで話題性の高いパララックスですが、表示速度が遅くなることやSEO対策には向いていない、のようなデメリットな部分もあります。そのため、パララックスデザインを採用する時は、本当に強調したい箇所に取り入れるなど工夫をしてみてください。
様々な表現の仕方を考えよう
では、LPで動きをつけたい時におすすめの表現方法をご紹介します。
動画
LPは1ページで情報を伝える必要があるため、文章や画像だけでは全ての情報が伝えられない可能性があります。そのため、動画を使って視覚的インパクトを残すことで商材の印象も強く残り、情報も多く伝えることができます。また、動画を長く見てくれるほど滞在時間も長くなるため、離脱率を減らしたい時に採用すると改善が期待できます。
動画を使う部分としては、商品の使い方や使用効果の説明、ターゲットに近い人物が使用している映像などを採用することで訴求効果を高めることができます。
ただし、動画は読み込み速度に影響がでるため、長さや使う量には気をつけてください。
また、多くのLPは商品説明などの中間部分に取り入れるケースが目立つため、ファーストビューの掴みとして採用すればクリックがしてもらいやすいです。
動画を使う部分としては、商品の使い方や使用効果の説明、ターゲットに近い人物が使用している映像などを採用することで訴求効果を高めることができます。
ただし、動画は読み込み速度に影響がでるため、長さや使う量には気をつけてください。
また、多くのLPは商品説明などの中間部分に取り入れるケースが目立つため、ファーストビューの掴みとして採用すればクリックがしてもらいやすいです。
動画のサイズや再生方法にも注意!
例えば、商材のアピール動画をファーストビューに大きく挿入したことに対し、商品説明など文章補足として動画を活用したい時はテキストに添えるように小さい動画を挿入するなど、視覚的変化を持たせてみてください。動画の使い方によってサイズを分けると見やすくなります。
また、再生方法も自動式やクリック式に分けることで、ユーザの興味を喚起できます。
自動再生の方が自然に見てもらいやすいので採用するパターンが多いですが、音ありなどににしてしまうと外出先などでは離脱されることもあるので、クリックすることで音が出るなどの工夫も忘れないようにしてください。
また、再生方法も自動式やクリック式に分けることで、ユーザの興味を喚起できます。
自動再生の方が自然に見てもらいやすいので採用するパターンが多いですが、音ありなどににしてしまうと外出先などでは離脱されることもあるので、クリックすることで音が出るなどの工夫も忘れないようにしてください。
アニメーション
LPのアクセントになるアニメーションは人気があります。
トレンド感を出したい時や強調したい時など多用したくなりますが、使い方次第でユーザーに逆効果を与えてしまうことがあるため注意してください。
アニメーションの使い方は様々ですが、よく用いられるケースはページ読み込みの間やファーストビュー、CVボタンの強調が目立ちます。特にCVボタンの強調は売れるLPになるかの分岐点。CVボタンが分かりづらいと購入意欲があっても離脱されることも考えられます。
ボタンへの強調や誘導にアニメーションを採用するとコンバージョンにも良い影響を与えられる可能性があるため、ぜひ取り入れてみてください。
トレンド感を出したい時や強調したい時など多用したくなりますが、使い方次第でユーザーに逆効果を与えてしまうことがあるため注意してください。
アニメーションの使い方は様々ですが、よく用いられるケースはページ読み込みの間やファーストビュー、CVボタンの強調が目立ちます。特にCVボタンの強調は売れるLPになるかの分岐点。CVボタンが分かりづらいと購入意欲があっても離脱されることも考えられます。
ボタンへの強調や誘導にアニメーションを採用するとコンバージョンにも良い影響を与えられる可能性があるため、ぜひ取り入れてみてください。
スクロール・エフェクト
アニメーションに似ていますが、今話題性のあるLPデザインの1つです。
パララックス・エフェクトはコンテンツごとに動きを設定することや奥行きを出す表現法。
一方、スクロール・エフェクトは名前の通り、スクロールをすることでアニメーションが作動する、コンテンツや画像が左右から出てくるなど、ユーザーの興味を喚起する表現として多くの企業が取り入れています。
スクロール・エフェクトはより動きのあるデザインになるため最後まで読み進めてもらいやすいです。さらに、一定の場所で動くアニメーションに比べ、スクロールエフェクトは誘導にも最適なため、離脱率を減らし、CV率を上げられる可能性があります。
ただし、LPをクリックした時点で購入意欲がある方や早く読み進めたい方には不向きなため、購入集客や興味を喚起する目的のLPに最適です。もし、全体的にスクロール・エフェクトを採用するときは、CVボタンの設置場所を複数用意しておくと安心です。
パララックス・エフェクトはコンテンツごとに動きを設定することや奥行きを出す表現法。
一方、スクロール・エフェクトは名前の通り、スクロールをすることでアニメーションが作動する、コンテンツや画像が左右から出てくるなど、ユーザーの興味を喚起する表現として多くの企業が取り入れています。
スクロール・エフェクトはより動きのあるデザインになるため最後まで読み進めてもらいやすいです。さらに、一定の場所で動くアニメーションに比べ、スクロールエフェクトは誘導にも最適なため、離脱率を減らし、CV率を上げられる可能性があります。
ただし、LPをクリックした時点で購入意欲がある方や早く読み進めたい方には不向きなため、購入集客や興味を喚起する目的のLPに最適です。もし、全体的にスクロール・エフェクトを採用するときは、CVボタンの設置場所を複数用意しておくと安心です。
動きのあるLPを魅力的にするコツとは?
動きのあるLPを魅力的に見せ、多くの人の目を引くようにするためには、いくつかのコツを理解することが重要です。
例として、以下のようなコツを参考にしてください。
例として、以下のようなコツを参考にしてください。
1つ目は、ジャンプ率をあげることです。
デザインに緩急をつけることで、ジャンプ率をあげることが可能です。
例えば、広告しているコンテンツの中でメインになるコピーやデザインパーツをより強調するように緩急をつけてみると良いでしょう。
例えば、広告しているコンテンツの中でメインになるコピーやデザインパーツをより強調するように緩急をつけてみると良いでしょう。
2つ目は、流れを単調にしないことです。
多くのポイントが並んでいるコンテンツはよくありますが、単純に並べているだけでは読み流されてしまう可能性が高いです。
そのため、左右ランダムに配置したり、写真を真ん中において、見る人の目を引いたりするといった工夫が必要になります。
そのため、左右ランダムに配置したり、写真を真ん中において、見る人の目を引いたりするといった工夫が必要になります。
3つ目は、コンバージョンエリアやボタンを強調することです。
ボタンの色を統一したり、コンバージョンエリアだと理解できるような背景カラーに統一したりすることが重要です。
一般的に、ボタンの色は緑が良いと言われることが多いですが、広告しているページ自体の色とのバランスもあるため、一概に緑が良いとは言えません。
そのため、ボタンをどの色にしたら最も効果が出そうか考えて色を選定しましょう。
一般的に、ボタンの色は緑が良いと言われることが多いですが、広告しているページ自体の色とのバランスもあるため、一概に緑が良いとは言えません。
そのため、ボタンをどの色にしたら最も効果が出そうか考えて色を選定しましょう。
4つ目は、余白を有効に活用することです。
余白が多ければ、見る人がスクロールする負荷が増えてしまいます。
負荷が増えないようにするためには、必要以上に余白を設けないことと、コンパクトにコンテンツを盛り込んでいくことが必要です。
余白の使い方によって見た目の印象は大きく変わるため、どのような印象を出したいかによって余白の大きさは随時変更すると良いでしょう。
例えば、高級なイメージを出したい場合には、余白がある方が伝わりやすいという特徴があります。
負荷が増えないようにするためには、必要以上に余白を設けないことと、コンパクトにコンテンツを盛り込んでいくことが必要です。
余白の使い方によって見た目の印象は大きく変わるため、どのような印象を出したいかによって余白の大きさは随時変更すると良いでしょう。
例えば、高級なイメージを出したい場合には、余白がある方が伝わりやすいという特徴があります。
5つ目は、ランディングページ全体の配色を工夫することです。
配色に悩む方は多くいらっしゃいますが、その場合には大きく3つに色を分けて考えることがおすすめです。
メインになる色・差し色として使用するサブの色・コンバージョンやボタン部分のみで使用する色の3つに分けて考えることで魅力的なデザインに仕上がるでしょう。
メインになる色・差し色として使用するサブの色・コンバージョンやボタン部分のみで使用する色の3つに分けて考えることで魅力的なデザインに仕上がるでしょう。
最後まで見てもらえるLPを作るには?
動きのあるLPを最後まで見てもらえるようにするには、以下で紹介する工夫が重要になります。
まずは、最初の3秒で見た人を引き込むことです。
LPを見た人は、最初の3秒でそのLPを読むか判断すると言われています。
つまり、最初の見た目次第でどれだけ見る人の心を掴めるかで変わってくるということです。
そこで、動きのあるLPでは効果的なアニメーションを使用すると、より伝えたいメッセージが際立つようになります。
その際には、ただ動きがあれば良いというわけではないため、伝えたいことがきちんと伝わるように工夫しましょう。
伝えたいことや与えたい印象によって多くの動きを作れる動きのあるLPの特徴を活かすことで、より多くの人を引き込めるはずです。
LPの最初で引き込めれば、次の過程として、その人に最後までLPを見てもらうことが必要になります。
ファーストビューで見る人に物事を伝えられたとしても、その後のコンテンツがつまらなければ見る人は最後まで見てはくれません。
最後まで見てもらうことはLPにおける最優先事項ではありませんが、最後まで見てもらえることで、問い合わせといった見た人のアクションにつながる可能性は高くなるはずです。
そのため、スクロールに合わせてアニメーションを起こすといった面白さが重要になります。
そのようにスクロールする楽しさがあることで、LPを最後まで見てもらえる可能性は大幅に高まるでしょう。
まずは、最初の3秒で見た人を引き込むことです。
LPを見た人は、最初の3秒でそのLPを読むか判断すると言われています。
つまり、最初の見た目次第でどれだけ見る人の心を掴めるかで変わってくるということです。
そこで、動きのあるLPでは効果的なアニメーションを使用すると、より伝えたいメッセージが際立つようになります。
その際には、ただ動きがあれば良いというわけではないため、伝えたいことがきちんと伝わるように工夫しましょう。
伝えたいことや与えたい印象によって多くの動きを作れる動きのあるLPの特徴を活かすことで、より多くの人を引き込めるはずです。
LPの最初で引き込めれば、次の過程として、その人に最後までLPを見てもらうことが必要になります。
ファーストビューで見る人に物事を伝えられたとしても、その後のコンテンツがつまらなければ見る人は最後まで見てはくれません。
最後まで見てもらうことはLPにおける最優先事項ではありませんが、最後まで見てもらえることで、問い合わせといった見た人のアクションにつながる可能性は高くなるはずです。
そのため、スクロールに合わせてアニメーションを起こすといった面白さが重要になります。
そのようにスクロールする楽しさがあることで、LPを最後まで見てもらえる可能性は大幅に高まるでしょう。
トレンドが正しいとは限らない
動きのあるLPが読まれやすいとされていますが、商材によってはシンプルなミニマルデザインが好まれることもあります。また、ターゲットや目的によっても不向きなことがあるため、まずは様々なデザインや表現方法を採用してみましょう。アニメーションやスクロールエフェクトは個性を出したいとき、また他社と差別化したいときは最適ですが、ユーザーに受けないことも考えられます。トレンドに左右されず、複数パターンのデザインでA/Bテストを繰り返して、商材やターゲットに合ったデザインを見つけ出してください。












へのお問い合わせはこちらから
