f-traコンバージョンアップのためのUI改善情報をお届け。EFOやCTAのハウツーなど。businesses」(=和訳:2017年のSaaSランディングページ:100以上のトップビジネスの分析)にて、SaaSサービスのランディングページを分析した結果を発表しています。いずれも幾度となくUI改善を繰り返した後の姿であろう、小規模なスタートアップからSalesforceやGoogleのような有名ブランドまで、合計100以上のランディングページを分析した非常に参考になる内容です。気になった方はぜひ元記事(英語)を御覧ください。※当ブログで紹介させていただくのは内容の一部となります。翻訳はすべて当ブログによるものです。分析したランディングページすべてのスクリーンショットが同社のPinterestで公開されており、こちらを眺めているだけでも勉強になります。英語が苦手な方はこちらをどうぞ。Pinterestのページはこちら記事は下記の8つのパートに分かれており、それぞれの特徴や傾向を分析しています。今回はおもにアイキャッチ、CTA、その他の一部からいくつかピックアップして紹介します。73%がアイキャッチに人物イメージを活用サイトを訪問した際に一番最初に目に入ることになるアイキャッチ(ヒーローセクション)は、ランディングページの印象を決める重要な要素。人間の顔は注目を集めることが証明されており、本質的に感情的ではないSaaSのようなカテゴリーでは、訪問者の間で感情を伝えたり感動させる最も効果的な方法の1つです。businessesとコメントされているとおり、とくに無機質な印象を与えがちなSaaSサービスにおいては、人物の写真はユーザーに親しみやすさや共感を与える大きな効果を持つようです。このブログで主にあつかうテーマであるweb接客やエントリーフォームの改善においても、人物イメージが大きな効果をもたらしたケースを数多く紹介してきました。アイキャッチだけでなく多方面に応用できるテクニックと言えそうです。弊社のweb接客ツールで実際に運用したキャンペーンでも、バナークリエイティブに人物写真等を加える変更で、CVRが大幅に上昇した。文言は短く簡潔に9割以上のCTAボタンが5語未満の文言で構成されているようです。日本語は英語に比べて短い文字数に多くの意味を込めることができますのでこの点では有利ですね。文言は短くしつつもアクションを明示的に表すことが重要なようです。「申し込み」よりも「2週間の無料体験版を申し込む」のほうがより具体的でアクションが明確です。ボタンの文言についてはこちらの記事も参考になります。非常に効果的なCTAボタンのための17のベストプラクティスhttps://f-tra.com/ja/blog/cta-overseas/8261ボタンを何色にするべきか分析結果によると70%以上のランディングページが緑か青を採用しているようです。詳しい内訳は下記にグラフを引用します。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/48553分の1のCTAはフォームを含む3分の1のランディングページでは、CTAの中に登録フォームの一部(またはすべて)が配置されているようです。その60%において、入力項目はひとつだけ(メールアドレスが代表的)となっています。フォームを含むことで、ユーザーに最初にアクションしてもらうハードルは上がるかもしれませんが、もしユーザーがすべてのフォームの入力完了に至らなかったとしても、メールアドレスのリード獲得となります。crazyegg.comの例。離脱しようとマウスカーソルを画面外に離すと現れるモーダルバナーの中には、会員登録フォームが含まれるランディングページの30%がチャットウィジェットを使用3割のランディングページが、代表的なweb接客施策のひとつであるチャットのウィジェットを用意しているようです。海外では特に人気のチャットウィジェット。日本でも徐々に導入が進んできています。一方で、国民性の違いか、日本人はチャットウィジェットへの反応率が海外よりも低いという説もあります。日本でのチャットウィジェットの普及の動きにも注目です。チャットウィジェットの例。businesses」より、グローバルなSaaSサービスのランディングページの最新トレンドを紹介しました。元記事をご覧になってみてください。参考記事:https://blog.chartmogul.com/saas-landing-pages-2017-analysis/ツイートこの記事が気に入ったらいいね!しようUI改善ブログの最新情報をお届けしますUI改善ブログを運営する株式会社エフ・コードではUI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。当ブログの更新情報は以下の各種アカウントから購読できます。Facebookを見るTwitterでフォローするFeedlyで購読するRSSを登録するメールマガジンを購読するブログの更新情報やセミナーのお知らせなど、UI改善に関する情報を1~2週間に1回お届けします。PM分析は結果を知る事より、分析する方が学ぶ事多いと思います。PRESSで執筆しましたEFOに関する特集記事を寄稿しています。Vol.89特集3:エントリーフォーム最適化入門2015年10月24日発売Web担当者Forumで連載中!公式Facebookページf-tra(エフトラ)について株式会社エフ・コードのマーケティングテクノロジーブランド「f-tra(エフトラ)」。現在は入力フォーム最適化(EFO)を簡単に実施できる「f-traEFO」と、ユーザーの行動喚起を促すためのUI検証する「f-traCTA」の2種類のUI改善ツールを提供しています。講演/取材/執筆についてEFOに関する講演、雑誌への寄稿、出版、取材などのご依頼は、弊社のお問合せフォームより承っております。お気軽にお問合せくださいませ。田中エフトラEFOサポートチームを統括する傍ら、EFOに関する講演、セミナー登壇、執筆などにも従事。Web担当者Forumにて連載を執筆しています。