【ランディングページを「育てる」】LPOを前提としたデザイン・コーディングについて考える

広告運用をする上でも、LPO（Landing Page Optimization：ランディングページ最適化）は重要な施策のひとつです。

せっかく広告を見て商品に興味を持ったとしても、ランディングページが見づらかったりほしい情報にすぐ辿り着けなければ、ユーザーは途中で離脱してしまいます。ランディングページの改善スピードを上げるために、ブラウザ上でレイアウトやテキストなどを変更できるGoogleオプティマイズといったLPOツールを使うと、新たな制作の必要がなく広告運用者自身でパターンが作成でき、非常に便利です。

しかし、いざLPOツールでランディングページのテストを実施しようとしたら、テキストの変更ができなかったり余白がおかしくなってしまったりと思い通りにいかず、とてつもなく時間がかかってしまった……そんな経験はありませんか？

もしランディングページ制作時にすでに今後ABテストを行っていくことが決定、もしくはその可能性が高いのであれば、デザイナーやコーダーにその旨を伝えておくことをおすすめします。

本記事では、LPOを実施しやすいランディングページを作成するためにおさえておきたいデザイン・コーディングのポイントについて説明していきます。

ファーストビュー

まずはランディングページの顔である、もっとも重要なファーストビューの要素についてみていきましょう。

メインコピー

ランディングページのファーストビューでは、イメージとメインコピーを一体化した画像として実装することも少なくありません。メインコピーを画像として実装することで、Webフォントが存在しないフォントをファーストビューに使用できたり、デザイン性を高めることが可能だからです。

しかしテキストとイメージを一体化した画像で実装していると、LPOツール上でのテキストの変更はできず、メインコピーのテストを行いたい場合にはテストしたいコピーの数だけデザイナーへ画像作成の依頼が必要となってしまいます。

コピー部分はHTMLでテキストとして実装することで、LPOツール上での変更・テストが可能となります。この場合ファーストビューも含め、テストで変更する可能性のある部分にはWeb上で使用可能なフォントを使用することを関係者と事前に合意しておくとスムーズにランディングページ制作、テストを進められます。

イメージ

ランディングページのファーストビューは、広告をクリックした後に最初に目にする部分であり、ユーザーがそのサイトに滞在するかどうかは3秒で決まると言われています。コピーだけでなくどのようなイメージを組み合わせるかも成果に大きくつながる可能性があるため、積極的に改善を行っていきたい箇所です。

ファーストビューのイメージにはできるかぎり特殊なレイアウトのものを用いないようにしましょう。イメージの上にテキストが被ってしまう……などの問題がなければLPOツールでメインコピー×イメージの掛け合わせで多変量テストを実施することができます。

メインコピーとイメージの組み合わせのABテストを行った例としては、オバマ元大統領が大統領選挙の際に作成した資金調達のためのランディングページが有名です。ファーストビューに表示されるイメージとボタンの文言を変えたことで40%もコンバージョン率が増加したとされています。

要素の数

「お客様満足度〇〇%」「〇〇ランキングNo.1」「累計〇〇本突破」といった実績や「今なら○％OFFキャンペーン実施中」などの特典情報をファーストビューに入れることは多いかと思います。しかし、欲張ってファーストビューに要素を詰め込みすぎるとユーザーは混乱してしまいます。

要素の数やどの情報をファーストビューで見せるかをテストしたい場合には、各要素を独立した画像もしくはテキストとして実装しておく必要があります。

CTA

CTA（Call to Action）はユーザーのアクションに直結するため、細かな変更を加えただけでも、コンバージョン率に大きく影響を及ぼすことがあります。

ボタンの色

ランディングページにおけるベストなボタンの色は「緑」だという説が出るなど、これまで散々議論されてきました。しかし、結局最適な色はサイト全体のカラーバランスや商材の特徴、ターゲットによって変化するため、サイトごとに最適化をはかっていくことが重要です。

LPOツールによってはボタンの色や大きさを指定するCSSの変更も可能であるため、ボタン部分を画像ではなくCSSで実装することで、色や大きさ、形などを簡単にテストできるようになります。

デザイン感度が高い人がターゲットなら、サイト全体のトンマナに合わせたボタンが成果がいいかもしれませんし、とにかくボタンが目立つように補色を使用するのが効果的な場合もあります。コンバージョン率の低さがボタンが目立たないことに起因するという仮説がある場合は、CSSで立体的な装飾を追加してボタンらしくしてみたものでテストする……というような施策も考えられます。

ボタンの文言

ボタンの文言もテストする意義の大きなポイントです。クリックすると何ができるのか？をユーザーが想像しやすい文言に変更することは、コンバージョン率を上げる重要な要素となります。例えば、BtoBのランディングページの資料請求を促すボタンなら「資料請求」よりも「いますぐ資料をダウンロード」の方が、ユーザーの心理的ハードルが下がりクリックしやすいと感じるのではないでしょうか。

したがって、ボタンについてもテスト可能なように画像ではなくHTML、CSSで実装することが望ましいでしょう。

マイクロコピー

ボタンの上部などに設置することの多いマイクロコピー（例：今なら5%OFF、初回限定キャンペーン実施中、など）についても同様です。マイクロコピーの改善でコンバージョン率が1.2〜1.5倍になったという事例も存在するため、テストしやすい仕様にしておきましょう。ボタンと一体型の画像で実装してしまっている場合はボタン×マイクロコピーのパターンの分だけ画像の作成が必要になってしまいます。

コンテンツの並び替え

たとえばヒートマップを用いた結果、ランディングページの下部にあった注目度の高いコンテンツを上部に持ってくるなど、構成を最適化することにより、ユーザーの離脱率を下げたり、商品やサービスにより深く興味をもってもらったりが期待できます。

前後の繋がり

「お客様の声」と「料金プラン」の順番を入れ替えるなどコンテンツの並び替えを検討している場合には、あらかじめ順番が入れ替わっても違和感のないデザインにしておくことが必要となります。例えば、下記のようなデザインはコンテンツの順番が入れ替わると成立しなくなる場合があるので、テストを前提としたランディングページでは避けた方が無難です。

また、下図のように背景の色を交互に入れ替えてセクションの区切りを表現しているようなデザインだと、LPOツールで順番を入れ替えた時に背景色が繋がってしまい、区切りがわかりづらく読みにくいページになってしまうことが予想されます。

この場合には、少し専門的ですがセクションごとに背景色を指定するのではなく、要素の偶数番目と奇数番目で背景色を指定するなどコーディングを工夫することでも解決が可能です。

余白

要素を入れ替える場合には、余白のコーディングも並び替えに対応しやすいものにしておくとよいでしょう。セクション間の余白は必ず下部につけるように統一し、余白同士の打ち消しや被りが発生せず、並び替えた場合も余白が適切となるようにコーディングするなどの配慮があるとコンテンツを並び替える作業を楽に行うことができます。

まとめ

本当はABテストをしたいのに、費用や時間がかかるから諦めざるをえない……といった事態はなるべく避けたいですよね。運用型広告の改善と合わせてスピーディーにLPOを行っていくためには、できるだけ広告運用者自身でテストを実施していけるようなフローが理想的です。そのための下準備としてランディングページ作成時には、デザイナーやコーダーにテストの実施予定の有無、実施範囲を明確にして依頼をすることをおすすめします。

訴求軸を変えて新規のランディングページをどんどん制作していくことも大事ですが、LPOを前提とした「育てる」ランディングページという視点も取り入れてみると、新たな発見があるかもしれません。