解析ソフトウェアを提供するChartMogul社が、ブログ記事「SaaS landing pages in 2017: Our analysis of 100+ top businesses」(=和訳:2017年のSaaSランディングページ:100以上のトップビジネスの分析)にて、SaaSサービスのランディングページを分析した結果を発表しています。
いずれも幾度となくUI改善を繰り返した後の姿であろう、小規模なスタートアップからSalesforceやGoogleのような有名ブランドまで、合計100以上のランディングページを分析した非常に参考になる内容です。気になった方はぜひ元記事(英語)を御覧ください。
※当ブログで紹介させていただくのは内容の一部となります。また翻訳はすべて当ブログによるものです。
なお、分析したランディングページすべてのスクリーンショットが同社のPinterestで公開されており、こちらを眺めているだけでも勉強になります。英語が苦手な方はこちらをどうぞ。
Pinterestのページはこちら
記事は下記の8つのパートに分かれており、それぞれの特徴や傾向を分析しています。

  • ナビゲーション
  • ページの長さとスクロール
  • アイキャッチ
  • 見出し
  • コール・トゥ・アクション(CTA)
  • ソーシャルプルーフ(社会的証明)
  • ビデオ
  • その他の所見

今回はおもにアイキャッチ、CTA、その他の一部からいくつかピックアップして紹介します。

73%がアイキャッチに人物イメージを活用

サイトを訪問した際に一番最初に目に入ることになるアイキャッチ(ヒーローセクション)は、ランディングページの印象を決める重要な要素。記事中でも、

人間の顔は注目を集めることが証明されており、本質的に感情的ではないSaaSのようなカテゴリーでは、訪問者の間で感情を伝えたり感動させる最も効果的な方法の1つです。
引用元:SaaS landing pages in 2017: Our analysis of 100+ top businesses

とコメントされているとおり、とくに無機質な印象を与えがちなSaaSサービスにおいては、人物の写真はユーザーに親しみやすさや共感を与える大きな効果を持つようです。
このブログで主にあつかうテーマであるweb接客やエントリーフォームの改善においても、人物イメージが大きな効果をもたらしたケースを数多く紹介してきました。アイキャッチだけでなく多方面に応用できるテクニックと言えそうです。

弊社のweb接客ツールで実際に運用したキャンペーンでも、バナークリエイティブに人物写真等を加える変更で、CVRが大幅に上昇した。
web接客バナーに人物の画像を利用することで、より「接客」らしくなる

CTAの90%以上が5語未満、70%近くが緑か青

文言は短く簡潔に

9割以上のCTAボタンが5語未満の文言で構成されているようです。日本語は英語に比べて短い文字数に多くの意味を込めることができますのでこの点では有利ですね。
また、文言は短くしつつもアクションを明示的に表すことが重要なようです。例えば「申し込み」よりも「2週間の無料体験版を申し込む」のほうがより具体的でアクションが明確です。
ボタンの文言についてはこちらの記事も参考になります。
非常に効果的なCTAボタンのための17のベストプラクティス
https://f-tra.com/ja/blog/cta-overseas/8261

ボタンを何色にするべきか

分析結果によると70%以上のランディングページが緑か青を採用しているようです。詳しい内訳は下記にグラフを引用します。

引用元:SaaS landing pages in 2017: Our analysis of 100+ top businesses

ボタンの色を何色にすべきかという問いには決まった解はないものの、色を検討する際にはデータが示す傾向である緑や青を積極的に取り入れてみるのが良さそうです。
ボタンの色については以下の記事でも取り上げていますので参考にしてみてください。
ボタンの色は、何色にするべき?~ケーススタディから見る、送信ボタンに最適な色とは~
https://f-tra.com/ja/blog/column/5704

ほとんどが重複または固定表示

ほとんどのランディングページにおいてCTAがページ中に何度も表示されるか、ページの一箇所に固定して表示されているようでした。
CTAはインラインで配置するだけではなく、ユーザーの目に入るよう、ページ内に何度も配置したり、強調するためのUIをセットで設置することはもはや当たり前になってきているようです。

ページ内に固定表示したバナーの例。(アサヒビール様)

セカンドアクションを用意する

ひとつのCTAのなかに、例えば「トライアル」と「デモを見る」のように2つのアクションボタンを用意しているものが多く見られたようです。
2つ目のアクションは、メインよりも心理的ハードルが低い内容を用意しておくことがセオリーのようです。

CTAボタンを2つ用意した例(Sansan様)。

2つのボタンに強弱をつけておくことや、選択肢を増やしすぎてユーザーを迷わせることのないよう配慮は必要そうです。
【EFOテクニック】主要ボタンとサブボタンは並列にせず、見た目の強弱をつけるべき
https://f-tra.jp/blog/column/4855

3分の1のCTAはフォームを含む

3分の1のランディングページでは、CTAの中に登録フォームの一部(またはすべて)が配置されているようです。またその60%において、入力項目はひとつだけ(メールアドレスが代表的)となっています。
フォームを含むことで、ユーザーに最初にアクションしてもらうハードルは上がるかもしれませんが、もしユーザーがすべてのフォームの入力完了に至らなかったとしても、メールアドレスのリード獲得となります。

crazyegg.comの例。離脱しようとマウスカーソルを画面外に離すと現れるモーダルバナーの中には、会員登録フォームが含まれる

ランディングページの30%がチャットウィジェットを使用

3割のランディングページが、代表的なweb接客施策のひとつであるチャットのウィジェットを用意しているようです。
海外では特に人気のチャットウィジェット。日本でも徐々に導入が進んできています。
一方で、国民性の違いか、日本人はチャットウィジェットへの反応率が海外よりも低いという説もあります。日本でのチャットウィジェットの普及の動きにも注目です。

チャットウィジェットの例。(楽天)

最後に

以上、海外記事「SaaS landing pages in 2017: Our analysis of 100+ top businesses」より、グローバルなSaaSサービスのランディングページの最新トレンドを紹介しました。
繰り返しになりますが、ご紹介したのはほんの1部! ぜひ元記事をご覧になってみてください。
参考記事:https://blog.chartmogul.com/saas-landing-pages-2017-analysis/