デザインや動的な表現が立ちすぎているとコンバージョンが出づらい？？

 

たまにものすごくデザインのエッジがたったランディングページと出会うことがあります。

 

 

 

キービジュアルがかなり作り込まれている、あるいは、素材写真ではないクオリティーの高い写真でインパクトが強い。そういったランディングページは、はじめてそのページを見た人に驚きを与えます。

 

 

 

そのこと自体はとても素晴らしいことだと思いますし、参考にさせていただくことも多々あります。一方で、ページを見終わった後に、頭に内容が残っていないというケースもあります。デザインはとても素晴らしいけど、結局伝えたいことはなんだろう？？というギモンが浮かびます。

 

 

 

その理由は何かと考えると、内容以上に、デザインが立ちすぎていて、コピーやシナリオに目が向かないということではないかということだと思います。

 

 

 

動きなど技術面に関しても同様です。

 

 

 

たとえば、パララックスエフェクトなどを活用して、斬新な動きが随所で起こる作り込まれたランディングページを見たとします。その場合も素晴らしいデザインの場合と同様に、動きはすごいのですが、伝えたいことがやはり頭に入ってこないケースがあります。

 

 

 

ここが非常に難しいところです。

 

 

 

デザインを作り込むことも、斬新な動きも取り入れることも重要なことです。しかし、内容以上にそこに目が行き過ぎるとコンバージョンに結びつきづらくなる場合があります。

 

 

 

大切なことは、【内容（コピー、シナリオ）とデザインと動きのバランス】だと思います。あくまでも目的はコンバージョンをとること、そこに対して、どのようにユーザーが感じて、どのようなアクションを起こしてもらいたいのか、その必然性を踏まえたデザインと動きということになります。

 

 

 

では、「アクションさせるためのデザイン」と「アクションさせるための動き」とは何かを考えてみたいと思います。

 

 

 

 

「アクションさせるデザイン」とは

 

 

ランディングページに訪問したユーザーを飽きさせないこと、強調して見せたいコンテンツをしっかり見てもらうこと、コンバージョンつまり、ボタンを押してもらうこと、といったことになると思います。

 

 

 

たとえば、

 

 

 

ジャンプ率をあげる

 

デザインに緩急をつける。たとえば、コピーの大きさに緩急をつける。そのコンテンツで一番メインになるコピーもしくはデザインパーツをより強調するためのデザインが必要です。

 

 

流れを単調にさせない

 

3つのポイントなどが並ぶコンテンツはよくあると思いますが、単純に横に3つ並べるだけでは読み流される可能性があります。たとえば、左右にランダムに配置する、あるいは、写真を真ん中に置くことで、目が止まるようにするなどの工夫が必要になります。

 

 

コンバージョンエリアやボタンの強調

 

ボタンの色の選定や統一やコンバージョンエリアだとわかる背景カラーの選定と統一。一般的にボタンの色は緑が良いと言われることもありますが、ランディングページ自体のキーカラーとのバランスもあると思いますので、緑をキーカラーにした場合、ボタンも緑だと埋もれてしまう可能性がありますので、都度、ボタンのカラーも選定することが重要です。

※ボタンカラーの善し悪しについてはA/Bテストでの運用を行ってから判断する場合もあります。

※こちらの記事で詳細をご覧いただけます。
ランディングページのカラー戦略まとめ 

 

 

余白の活用

 

ユーザーがスクロールをする負荷が増さないように必要以上の余白は設けず、コンパクトに各コンテンツをデザインしていくことが重要かと思います。もちろん、目的に応じて、余白の使い方も変わります。
※高級なブランドイメージを出したい場合は、余白があるほうがより高級が伝わります。
※こちらの記事で詳細をご覧いただけます。
ランディングページデザインにおける「余白」の使い方

 

 

 

ランディングページ全体の配色

配色は実はかなり悩むところだと思います。その場合は、大きく3つの領域に切り分けて考えてみるのが良いかもしれません。
1.メインカラー（キーとなるカラー）
2.サブカラー（指し色として使うカラー）
3.コンバージョンカラー（コンバージョンエリアやボタン部分のみで使うカラー）
>※こちらの記事で詳細をご覧いただけます。
ランディングページのカラー戦略まとめ

 

 

 

「アクションさせる動き」とは

 

※フロントエンド技術

 

フロントエンドの技術については、デザインをより効果的に見せるための手法であり、更にUI的な観点も含まれてきます。

 

 

 

たとえば、

 

 

 

ナビゲージョンの効果的な活用

 

コンテンツが多い場合（長いLPになる場合）、見たいコンテンツにすぐに行けたり、また別のコンテンツに戻れるなど、そういった場合にナビゲーションが必要になります。たとえば、スクロール後に上部にメニューが表示されるケースや、サイドメニューと形で、スクロール後に固定表示される場合もあります。ブラウザの拡大縮小に合わせて画面内におさまるように設計します。

（参考）整体スクールのランディングページ

 

 

スライダーの活用

 

まとまったコンテンツや重複コンテンツになると、縦長にスペースをとるよりスライダーで、見せたほうが効果的なケースがあります。たとえば、体験談や事例のようなコンテンツではよくスライダーで展開させる場合があります。

（参考）企業・社員研修のランディングページ

 

 

ヘッダーの常時固定

 

問い合わせ用のボタンが入ったヘッダー部分を固定させることで、ランディングページを閲覧中のユーザーが問い合わせをしたい時にいつでもできる仕様になります。ただし、複数のコンバージョンをとりたい場合などは、固定させず各コンバージョンエリアにスクロールしてもらうケースなど、目的のコンバージョンに応じて、使い分けが必要です。

（参考）Web会議システムのランディングページ

 

 

無限ループの活用

 

イメージ訴求を強調したい場合に用いることが多い手法です。右から左に複数の写真を自動で動かす仕様です。商品の使用シーンをイメージしてもらいたい場合や、ユーザーになりそうな方々の写真を並べて、自分ごとと思ってもらいたい場合などに用います。

（参考）清掃会社一括見積もりサイトのランディングページ

 

 

パララックスエフェクトの効果的な活用

 

全面的に使用するよりは、強調したいコンテンツなどで部分的に用いることが効果的です。新商品の場合などは、“登場感”を出したい場合などに効果的だと思います。

（参考）入社案内制作サービスのランディングページ

 

 

SVG画像などの線画アニメーション技術の活用

 

線画のようにビジュアルが動く、割と先端的ではやりではある技術ですが、あくまで目的を持って使うことが重要だと思います。たとえば、たとえば、ボールペンや万年筆メーカーの筆跡の動きのような形で活用すると線画の技術とマッチして活用性があると思います。
（参考）海外サイト：LAZY LINE PAINTER

 

 

 

技術的なことは、ここには上げれないほど数多くありますので、代表的な部分に留めました。

 

 

 

あくまで重要なことは、ユーザーを迷わせないUI的な観点であったり、飽きさせないための仕掛けとしてであったり、流れの中で再度強調したいコンテンツを動かしてみるなど、大げさでない自然な動きで必要な箇所に届めるというほうがコンバージョンをとる目的に対しては効果的だと思います。

 

 

 

基本的には正解はありませんので、常に新たな技術を試しながら、実践と運用を繰り返していくことが重要だと思いますが、常に忘れてはいけないのが、コンバージョンをとるという目的に対して効果的であるかどうかという視点に尽きるかと思います。

 

 

 

これがなかなか難しいのですが、今回は、そういった観点からデザインと動的な表現（フロントエンドの技術）について考えてみました。

 

 

>> 前回の記事　ランディングページデザインにおける「余白」の使い方