BtoBサービスのトップページやLPに使える基本の構成をまとめました。

1ページの中にどんな要素を・どんな順序で並べればよいか、以下のワイヤーフレームを使用しておさらいしようと思います。

①メインビジュアル・権威付け

サイトの一番上は何のサイト・サービスかすぐ分かるようなコピーやリード文、イメージ等を載せます。（上記ワイヤーのキャッチコピーは抽象的でダメな例ですが…）
CVボタンを含めファーストビュー内に収めると良いです。

要素が多い場合は、目線があちこちに行ってしまうのを防ぐために無理に詰め込まず、優先度の低いものをファーストビュー下に落とすことを検討します。

ちなみに権威付け部分でよく使われる素材は、「wreath、リース、花輪、月桂冠」あたりの言葉で検索すれば出てきます。

メインビジュアルの例

②共感を誘う

「こんなお悩みはありませんか？」とターゲットが抱えている課題や悩みを提示し、共感を呼びます。

ワイヤーにはイラストを3つ並べていますが、3つ同じようなイラストになるのであれば、そもそも置く必要があるのか？は考えたいところです。

共感エリアの例

③商品・サービス特長

見出し例としては「〇〇を使えば解決できます」、「〇〇が選ばれる3つの理由」等となります。

商品・サービスのスペックを羅列するのではなく、どんな悩みをどのように解決できるか＆解決できる理由を伝えます。
説明文を長々と並べただけでは分かりにくく読まれないので、文章は簡潔にし、理解の助けになるようであればグラフやイラストを活用します。

特にBtoBのLPでは購入に至るまでに複数人が関与し、より慎重に購入を検討されるため、感情に訴えるよりも、費用対効果やお客様の事業にどんなメリットが生まれるかを合理的に伝えることが重要です。

***

またワイヤーでは画像と文章を左右交互に配置していますが、そのレイアウトってどうなの？といった内容の記事が参考になります。

• 情報を含んだ画像は整列型のレイアウトでもジグザグ型のレイアウトでもうまく機能する。
• 装飾のための画像は縦に並べよう。
• ユーザーはリストの最初の画像から残りの画像を無視するかどうかを判断するため、最初の列に使う画像の情報価値には特に注意を払おう。

参考： 画像とテキストのジグザグ型レイアウトは、流し読みの効率を下げる

他にも、ここのエリアではパソコンとサービス画面スクショを合成した画像をよく使いますが、画像内に文字が多く含まれると見出し等の文章と競合する、等の検証もされているので是非読んでみてください。

商品・サービス特長エリアの例

④お客様の声・導入事例

導入事例インタビューや取引企業のロゴを並べ、客観的意見を伝えます。

インタビュー記事を載せる場合、「株式会社○○様 導入インタビュー」のような見出しを並べるよりも、上記ワイヤーの「導入して業務の効率が上がりました」のようにインタビューを要約した見出しのほうがよりアピールできるでしょう。

インタビューを受けてくれた方の写真や具体的な実績数値があるとより信憑性が高まります。

お客様の声・導入事例エリアの例

⑤導入までの流れ・期間、料金・プランなど

その他、導入の流れや料金、サポート体制など、お客様が知りたいであろう情報も掲載し、疑問を先回りして解決してあげます。

導入の流れ・料金エリアの例

⑥よくある質問

これまでのエリアで解決できなかった不安・疑問をここで取り除いてあげます。お客様からよく聞かれる質問を掲載しておけば、問い合わせ対応の負担も減ります。

数が多い場合はアコーディオンの実装や、カテゴリーごとの分類表示などを検討します。

よくある質問エリアの例

⑦CTA

資料請求や問い合わせボタン、フォームなどのコンバージョンエリアはページ最後と、ページ途中にも挟むと良いです。

デザイン的には背景色やボタンの色に対比色を使用したり、周囲の余白を大きくすることで目立たせます。

コンバージョンエリアの例

まとめ

たくさん集客して多くの人に購入してもらえればOKなLPと違い、BtoBのLPでは即購入ではなく、資料請求やお問い合わせの後、商談などを経て契約につながるという流れが多いです。
適切なターゲティングを行って制作しましょう。

デザイン面では、英語はかっこいいので使いたくなりますが装飾程度に抑え、伝わりやすさを優先したほうが良いです。
また、コンテンツを読むのに邪魔になってしまうようなアニメーション等は避けます。

BtoBのサイトはPCサイトからの閲覧が多いですが、多忙な経営者は移動中にスマホで閲覧するかもしれませんし、業種によってはIEでの閲覧が多い場合があります。
各ブラウザ・端末で検証をしっかり行ってリリースしましょう。

***

GlatchでもBtoBのLP制作を行っています。
→お問い合わせはこちら

おまけ：BtoBのサービスLP一覧

上記で紹介した以外の、BtoBのサービスサイトやLPのリンク一覧です。

• https://backlog.com/ja/（Backlog）
• https://shirofune.com/（Shirofune）
• https://bdash-marketing.com/（b→dash）
• https://www.hai2mail.jp/（配配メール）
• https://hrmos.co/saiyo/（HRMOS採用管理）
• https://www.forcas.com/（FORCAS）
• https://wevox.io/（wevox）
• https://www.kaonavi.jp/（カオナビ）
• https://lp.fanp.me（fanp）
• https://www.600.jp/（600）
• https://www.freee.co.jp/cloud-erp/top/（クラウドERP freee）
• https://www.bebit.co.jp/usergram/（USERGRAM）