design
簡単ランディングページのデザイン分析！ ～コンバージョン率最適化のヒント～
Web広告をクリックすると表示されるランディングページ（LP）。多くのランディングページにはコンバージョン（問い合わせや購入）へと繋げるために数多くの視覚的、心理的なテクニックが詰め込まれています。そんなとき、「コンバージョン率最適化（CRO）」の視点が重要になってきます。CROとは、ランディングページを徹底的に分析し、ユーザーのコンバージョンを妨げている要素を取り除くこと。この分野の専門家であるジェレミー・スミス氏が、専門家でなくてもできる初歩的なテクニックを紹介していましたので、今回はこの記事に従って、私自信がランディングページ分析を実践してみたいと思います。
ツーステップで行うランディングページ分析
スミス氏が提唱するランディングページ分析は、次の２つのステップで行えます。
直感分析 ⇒ 詳細分析
分析を行う際はメモを取ることを忘れないでください。ランディングページを見た時、最初にどんな思いが意識を駆け抜けたか、メモなしで思い出すのは難しいと思います。ランディングページの分析では第一印象が一番大事です。チャンスはたった一度きりしかありませんのでご注意ください。
ランディングページは、まずは「直感」で分析する！
直感分析は次の4つの手順を追っておこないましょう。
①何を感じましたか？
ランディングページを見た瞬間、あなたは何を感じましたか？ これは数秒の世界であり、直感がものをいいます。ここで大事なのは、わき起こる感情。心をオープンにして、感じたことをノートに書き起こしてみてください。さて、どんな感情でしたか？ ごちゃごちゃ？ すっきり？ わくわく？ 古くさい？ 怖い？
私がこのランディングページを見たときのリアクションは「お、Apple Watch！ 綺麗で洗練された感じ！ すっきりしているな！ ん、森？ 環境問題？」というものでした。このとき、分析とか、CTA（Call to Action：行動喚起）が適切か、とか、そんなのは考えもしませんでした。
とりあえずこのように簡単に書き起こしてみます。
②何が目に映りましたか？
さて、次の段階に移りましょう。ページで、一番気になったのはどこでしょうか？ それは、なぜ目立っていたのでしょうか？ あなたの目に何が映ったのかをメモしてください。アイトラッキングのソフトなんて必要ありません。意識していれば、思い出せるはずです。
まず私の目に入ったのは、中央のApple Watchです。黒とシルバーのコントラストが綺麗なので、じっと見ていても飽きません。次に右下の新しいMacBookを見て、「そういえば、新しい製品が出ていたな～」と考えていると、左にある森林の写真に目線が移りました。
このように目線と意識を言葉に表してみましょう。私自身は、意識していれば意外と簡単に出来るものです。
③何を読みましたか？
次に、あなたが読んだ文章を書きとめてみましょう。読んだものを全て書き写す必要はありません。一番注意を引いたものだけで十分です。文章は、簡単に理解できましたか？ すぐ気づきましたか？ 読んでみて、どんな感想を持ちましたか？ その気持ちや観察をメモしてください。あなたが何を読むかは、そのときにあなたが何を感じ、何を見たかに左右されます。
私が初めに読んだものは、森林の写真の中に書かれている「Apple and the Environment（Appleと環境について）」というセンテンスでした。Apple Watchの写真は他のサイトでも見る機会が多いので、それほど心が動きませんでしたが、「Appleと森林」の組み合わせには個人的に違和感を覚えたので、その意味がとても気になりました。その文字を読んだ時の私の感想は、「もしかしてAppleが環境問題に取り組んでいるのだろうか？ それにしても綺麗な写真だなー。」というものでした。
次にその下の「See our progress >（私たちの軌跡）」という文字を見て、「なるほど、一つのページにまとめられるほどしっかりとした環境問題への取り組みがおこなわれているのかな？ Appleと環境問題の関わりを見てみたい。」と感じました。Appleのキャッチコピーは、どれもシンプルな一言であり、新商品の良さを全面に押し出すものです。
ところで、私は左下二つの写真に意識が向かないことに気付きました。良く見ると綺麗な写真なのですが、第一印象はぼんやりとぼやけている印象で、横の森林の写真と比べると引きつけが弱い気がします。とはいえ、CTAは強いです。
④次に何をすべきでしょうか？
では、あなたが次にすべき、またはしたいと思う行動はなんでしょう？ ページを去りたい？ 下にスクロールする？ ボタンをクリックする？ フォームを押す？ 一番当たり前に思う反応と、その行動を妨げる要素をメモしてください。
私は何よりもまず森林の写真をクリックしてみたくなりました。もしApple Watch目当てでこのサイトへ訪れた人ならば、「Learn more（Apple Watchについて詳しく）」のボタンを押したくなるかもしれません。このページは、全体の95%くらいのほとんどの範囲がクリック可能になっており、どこにカーソルを動かしてもクリックしてしまいそうな作りになっています。とても戦略的な作りですね。
以上が、私が行った直感的な分析になります。感じたことを書き起こすだけですが、意識的にページを観察してみると意外と色々なことを考えながらページを見ていることに気付かされました。
直感分析の次は、細部を詳しく分析！
それでは細部を見ていくステップに移りましょう。このときに注意して見ておきたいポイントが３つあります。
- 立ち止まって見てみたい、と思わせるサイトになっていますか？
- そのキャッチコピーは効果的ですか？
- コンバージョンは簡単にできるようになっていますか？
この3項目を中心にして、Appleのランディングページを詳しく分析してみましょう！
立ち止まって見てみたい、と思わせるサイトになっていますか？
あなたがユーザーに最もしてほしくないこと、それは、スクロールも、クリックもしないで、ほとんど何も見ることなくユーザーがページを離れてしまうことです。このような「直帰」はどうにか食い止めたいところですよね。
見出しと画像はユーザーをそのページに留まらせる、最も重要な要素です。
では次の質問に答えてみてください。
- 見出しは見やすいですか？
- 見出しは製品やサービスが何かを説明していますか？
- 見出しはその製品やサービスをどう使うかを説明していますか？
- 見出しはメリットや特徴を説明できていますか？
- 画像は製品やサービスを補強していますか？
- 画像はあなたのメッセージを補強するものになっていますか？
- サブ見出しはありますか？
- サブ見出しは分かりやすく的確なものですか？
もちろんこれら全てを網羅している必要はありませんが、このうちのいくつかは達成出来ていることが望ましいです。
そのキャッチコピーは効果的ですか？
ランディングページの主目的の２つ目は、ユーザーを説得することです。1つ目の目的は、ユーザーを立ち止まらせることにありましたが、第2の目的は、ユーザーに、あなたの望むように考えてもらうことにあります。
ここでは、キャッチコピーについて次のようなことに注意してください。
- ユーザー、製品、サービスに合った適切な長さになっていますか？
- あなたのニーズを正しくとらえていますか？
- 製品やサービスのメリットを説明していますか？
- あなたの疑問に自然な形で答えられていますか？
- あなたの反発に対処できていますか？ その時の説得は反発に配慮したものですか？
- あなたに痛みを感じさせるものですか？ そしてその解決策を提案していますか？
Appleのランディングページは写真メインで構成されて、それぞれの写真にはシンプルかつ訴求力のあるキャッチコピーが用意されています。そのキャッチコピーは読みやすさを重視しており、商品に関する詳しい説明はなされていないものの、その部分を画像で補完しているような印象を受けました。画像にはかなりの説得力があります。
たとえば私がApple Watchの情報を得るためにこのページにたどり着いたとします。まずは写真を見てApple Watchの写真をクリックするでしょう。すると上のようなサイトに移る仕様になっています。Apple Watchを付けたライフスタイルを美しい写真で上手く説明していますね。このページでもやはりキャッチコピーは短くシンプルなものです。
コンバージョンが簡単にできるようになっていますか？
最後に、コンバージョンの要素について分析してみましょう。このステップは重要です。ユーザーが、コンバージョンするかどうかを決定づけるカギになるからです。
- そもそもコンバージョンへの喚起がないところにコンバージョンは起きません。信じられないかもしれませんが、コンバージョン喚起もCTAもないランディングページを見たことが、過去に何度もあります。それこそ、エンジンを積んでいない車と同じで、全く意味がありません。
- コンバージョン喚起は、製品やサービス、ユーザーの意図にあったものにするべきです。ランディングページはユーザーに何を求めているでしょうか？ 電子メールアドレス？ 詳細を見る？ いますぐ買う？ フリートライアルに申し込む？ これらを明確にしてみましょう。
- CTAは見てすぐわかるものにしなければなりません。色の心理学に気を配ってみましょう。CTAは色、サイズ、位置、形、テクスチャーなどで目立たせます。
Apple Watchのページを下へスクロールするとApple Watchの使い方が詳しく説明されており、最後にはCTAが用意されていました。目立つCTAとはいえませんが、サイトの雰囲気に合った、上品な仕上がりになっています。
Appleのランディングページには、画像の説得力の強さや、キャッチコピーのシンプルさ、CTAの位置やデザインなど、参考になる部分は多分にあったかと思います。スミス氏の提唱するランディングページの分析方法は、見るべきポイントが押さえられた分かりやすい指標になっておりますので、是非この記事を参考にランディングページの分析を行ってみてください。
今回のまとめ
まずは直感で思ったことを書き起こし、そのあと細部を詳しく見ていくことで、誰でも簡単にランディングページを分析できるようになっています。具体的な注目ポイントは記事に書いてあるとおりです。
バラバラにして分析するのは、もう一度組み立てるための準備だということを忘れてはいけません。ランディングページ分析でとったノートは、新しいランディングページ構築のプランになります。沢山のランディングページを分析し、それらを踏まえてどのような魅力的なページを組み立てられるかが、みなさんの腕の見せ所になります。
ペンと紙を用意して、気になる広告をクリックしてみてはいかがでしょうか？
参考文献
「A New Way to Analyze Landing Pages to Improve Conversion Optimization」
