leango
UI/UXレビュー動画

B2BサイトのCVR改善事例|LeanGo自社HP魔改造の回遊導線・CTAを解説

この動画でわかること

B2BサイトのCVR改善策を、LeanGoの自社HP魔改造を実例に解説。B2Bサイトで効く導入企業ロゴのモーダル化、無料トライアル訴求、サイドバー目次による回遊率改善まで、CVR改善ツールDejamを提供するLeanGo代表がBtoBサイト改善の具体策を公開。

B2BサイトのCVR改善|LeanGo自社HP魔改造の概要

この動画では、CVR改善ツール「Dejam」を提供するLeanGoが、自社のB2Bサイトに加えた改修を、UI/UXとCVR(コンバージョン率)改善の観点から解説している。

結論として、B2BサイトのCVR改善はデザインの刷新ではなく、1ページの中でユーザーを離脱させずに情報を届ける導線設計で決まる、と整理されている。

「B2Bサイトはいじりようがない」と言われがちな前提に対し、デザインに数百万円を投じる前にやれることがあるとして、

・導入企業ロゴの見せ方(遷移させずモーダルで見せる)
・無料トライアルの訴求セクション追加
・機能一覧の絞り込みとタブ切り替え
・サイドバー目次による回遊率の改善
・CTA文言の統一
・アップデート情報の機能ページへの自動連携
・新機能「導入の流れ」による疑似体験

という7つの施策が、実際の画面を見せながら順に解説されている。


この動画の重要ポイント5つ

・導入企業ロゴはクリックで遷移させず、モーダルで事例を見せて1ページ内にコンテンツを内包する
・「悩むより導入した方が早い」無料トライアル訴求セクションを追加し、CTA文言を全ページで統一
・サイドバー目次(ページ内アンカー)を追加したところ回遊率が上がった
・毎週のアップデート情報を機能ページへ自動で流し込み、ロングテール流入と更新頻度を同時に確保
・新機能「導入の流れ」で機能説明を疑似体験に変え、最後の1ステップを無料トライアルへ接続


導入企業ロゴのUI/UX改善|B2Bサイトで遷移させずモーダルで見せる

B2Bサイトの多くは、ファーストビュー付近に導入企業のロゴをカルーセルで流している。ただし動画内では、そのロゴがクリックできないか、クリックできても事例ページへ遷移してしまう作りが一般的だと指摘されている。

遷移先の情報がユーザーにとって有益であれば問題ないが、誤タップの可能性もあり、遷移した先で離脱してしまうパターンもある。

そこでLeanGoの自社サイトでは、ロゴをクリックするとモーダルが開き、その企業で何をやったのかが表示されるようにした。興味があれば事例へ、あるいは料金プランや無料相談へ進める導線を、モーダルの中に収めている。

この作りの利点は、1ページの中に適量のコンテンツを内包できる点にある。ページ遷移を挟まずにコンテンツ量を確保できるため、離脱率を抑えながらSEO上のコンテンツボリュームも稼げる、と説明されている。どこで読むのをやめているかはヒートマップで確認できる。


無料トライアル訴求セクションの追加|「悩むより試した方が早い」

次に追加されたのが、無料トライアルを訴求するセクションである。B2Bサイトでは無料プランやトライアルを用意していても、それが意外と知られていないケースが多い。

動画内では「この通り自信があるから無料でお試し」「正直、悩むより導入した方が早い」という強気のコピーを、あえてセクションの前面に置いたと説明されている。背景には、無理に導入してもらっても解約されるだけで、悪い評判が広がることも避けたいという考え方がある。

さらにこのセクションには主要機能ごとのボタンが並び、「どれを試したいですか」という問いに答える形で問い合わせへ進める。B2Bサイトでは、LPを作りたい人とABテストをしたい人でニーズがばらつくため、入口の時点で分岐させる設計になっている。


機能一覧の絞り込みとタブ切り替え|B2Bサイトで全部見せる必要はない

機能一覧ページには全機能が並んでおり、検索性が悪いという課題があった。タブ切り替えで絞り込めるようにはしていたものの、そもそも全部を見せる必要はないのではないか、という整理をしている。

そこでトップページには特によく使われる主要機能だけを前に出し、タブで切り替えられるようにした。各機能には詳細ページへの導線と、無料で試せることを併記している。

多機能なツールを扱うB2Bサイトほど、機能を網羅的に並べたくなる。ただし情報量が増えるほど画面は読みにくくなり、離脱の要因になる。動画内では、コンテンツを追加すること自体ではなく「追加の仕方」に工夫の余地があると述べられている。


サイドバー目次で回遊率を上げる|1ページで一通り分かる状態にする

オウンドメディアの記事に置かれている目次を、B2Bサイトのサービスページへ横展開したのがサイドバーメニューである。ページ内アンカーになっており、押すと該当セクションまで移動する。

通常、B2Bサイトのメニューはヘッダーに一通り置かれている。しかしページを読み進めていく中では、常に目次的なものが見えている方がよい、という判断からサイドバーを追加した。結果として回遊率が上がったと報告されている。

狙いは「この1ページを見れば一通り分かる」状態を作ることにある。あわせて、ほとんどのCTAボタンの文言を「無料トライアルを開始」に統一した。まずは使ってほしいというメッセージを、サイト全体で揃えた形である。

一方、画像を多く使う機能詳細ページでは、サイドバーを置くとコンテンツの表示領域が狭くなる。この場合はタブで切り替える方が向いている、と使い分けが示されている。


アップデート情報を機能ページへ自動連携|B2Bサイトのロングテールと鮮度対策

動画内で「社内の誰も気づいていない」と紹介されたのが、毎週のプロダクトアップデートを機能ページへ自動的に流し込む仕組みである。

アップデートのお知らせは、通常プレスリリースや新着情報として出して終わりになる。しかしアップデートがあるということは、その機能の情報が増えるということでもある。そこで、更新内容を該当する機能ページに自動で呼び込むようにした。

これには2つの効果がある。1つは、専用ページを作るほどではないロングテールの検索ニーズを機能ページで受けられること。もう1つは、ページが定期的に更新されるため、検索エンジンに対する鮮度のシグナルになることである。ABテストのように検証系のクエリは細かい派生が多く、この方式と相性がよい。

なお、このアップデート情報はページ下部に置いている。ユーザーが最初に知りたいのは主要機能の基本仕様であり、細かなアップデートは既存ユーザーや踏み込んだ運用をしている層向けだからである。B2Bサイトではお知らせを上部に置くべきかという議論になりやすいが、読者層で判断すべきだと整理されている。


新機能「導入の流れ」|B2Bサイトの機能紹介を疑似体験に変える

動画で最も時間を割いて紹介されているのが、新機能「導入の流れ」である。

B2Bサイトで機能を並べても、結局それが自社で何をしてくれるのかイメージがつきにくい。だからこそ無料トライアルを試してほしいのだが、その前段としてサイト上で疑似体験させてしまおう、という発想で作られている。

たとえばABテストを選び、対象がLPかWebサイトかを選び、悩み(改善案が思いつかない等)を選ぶ。するとローディングを挟んで改善案が自動的に提示される。そのまま問い合わせへ進むこともできるが、「フローを見る」を選ぶと導入手順のステップが始まる。

タグを設置する、ページを分析する、実装する、配信する、レポートを確認する、という手順が順に表示され、各ステップには「残り5ステップ」といった進捗が添えられている。そして最後の1ステップは「あなたがDejamを無料で試すこと」で締められる。

アニメーションの速度、次へ進むボタンの位置揃え、残りステップ数の表示といった細部まで作り込まれており、B2Bサイトのコンバージョン導線として、機能説明そのものを体験に変えた例になっている。


よくある質問(FAQ)

Q. B2BサイトでCVR改善の余地が大きいのはどこ?

A. 動画内では、デザインそのものよりも導線設計に余地が大きいとされている。導入企業ロゴやお知らせなど「置いてあるだけ」の要素をクリック可能にし、モーダルで情報を届けるだけでも、離脱を抑えながらコンテンツ量を確保できる。

Q. B2Bサイトのデザインを刷新すればコンバージョン率は上がる?

A. デザインは大事だが、それだけに数百万円を投じる判断は慎重であるべきだと述べられている。CTA文言の統一、サイドバー目次の追加、機能の絞り込みといった改修は大がかりな作り直しを伴わず実施でき、効果もABテストで検証できる。

Q. B2Bサイトのお知らせやアップデート情報はどこに置くべき?

A. 読者層で判断する。主要機能の基本仕様を知りたい新規訪問者にとって、細かなアップデートは優先度が低いためページ下部が向く。一方で機能ページへ自動連携させれば、ロングテールの検索流入と更新頻度のシグナルを同時に確保できる。


まとめ|B2BサイトのCVR改善は導線設計で決まる

この動画で紹介された施策は、いずれも大規模なリニューアルを伴わない。導入企業ロゴをモーダル化する、無料トライアルの訴求セクションを足す、機能を絞ってタブにする、サイドバー目次を置く、CTA文言を揃える、アップデート情報を機能ページへ流す、導入の流れを疑似体験させる。いずれもB2Bサイトで今日から検討できる粒度の改修である。

重要なのは、それぞれの変更が回遊率や離脱率にどう効いたかを確認することにある。ファーストビューからCTAまでの読まれ方を把握し、施策の良し悪しを検証し、LPOとして継続的に回していく流れが取れる。B2BサイトのCVR改善は、デザインの良し悪しではなく導線設計の積み重ねで決まる。

関連動画

関連記事

あわせて読みたいお役立ち資料

この動画に関連するDejamの機能