BtoBのLP制作で使える基本の構成とデザインのポイント

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

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

BtoBサービスLPのワイヤーフレーム例

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

LP構成:メインビジュアル・権威付け

要素

  • キャッチコピー
  • コンバージョンボタン(資料請求、お問い合わせ等)
  • 受賞歴など(国内シェアNo.1、導入実績500社等)

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

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

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

メインビジュアルの例

ユーザーを「ファン」に変えるカスタマーサクセスマネジメント | HiCustomer (ハイカスタマー)

SmartHR(スマートHR)|シェアNo.1のクラウド人事労務ソフト

②共感を誘う

LP構成:共感

要素

  • お客様が抱えている課題・悩み

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

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

共感エリアの例

Asales | AIが営業の業務と意思決定をバージョンアップ

Reforma PSA|株式会社オロ

③商品・サービス特長

LP構成:商品・サービス特長

要素

  • 商品画像
  • 商品の説明
  • 使用するメリット

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

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

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

***

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

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

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

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

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

SPEEDA|企業・業界情報プラットフォーム

BtoB掛売り決済・請求代行サービス「Paid(ペイド)」

Sansan - 法人向けクラウド名刺管理サービス

④お客様の声・導入事例

LP構成:お客様の声・導入事例

要素

  • クチコミ、事例紹介
  • お客様の写真
  • 取引企業のロゴ

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

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

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

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

No.1勤怠管理・シフト管理システム「ジョブカン」

メール管理・メール共有システムのメールワイズ|チームワークを支えるサイボウズ

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

LP構成:契約までの流れ・料金

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

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

社員研修・人材育成eラーニング - Schoo(スクー)法人・企業向けサービス

株式会社カタセル | キーマンとの商談獲得ならカタセル

Todoist – 最高の ToDo リスト&タスク管理アプリ

Dropbox Business

⑥よくある質問

LP構成:よくあるご質問

要素

  • 質問文
  • 回答文

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

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

よくある質問エリアの例

いいデザインは、提案力とヒアリングから。 | 株式会社ビーワークス

クラウドサイン|Web完結・印紙税0円の電子契約サービス

⑦CTA

LP構成:CTA

要素

  • ボタン・リンク・フォーム
  • CTAコピー

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

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

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

CX(顧客体験)プラットフォーム KARTE(カルテ)

文字起こし・議事録作成サービス|MOJIMOJIくん

SARDINE(サーディン) | 小規模エージェントに特化したクラウド求人データベース

まとめ

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

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

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

***

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

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

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

私たちGlatchはコーポレートサイト制作を得意とするWeb制作事務所です。
お気軽にご相談・お問い合わせください。