BtoBサイトのデザインにおける6つのポイント|参考になる成功事例も紹介

この記事の監修者

粟飯原 匠 |CEO

ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。

BtoBサイトの目的別サイトマップ 

デザインのポイントを紹介する前に、まずは「サイトマップ」についてご紹介します。サイトマップとは、ウェブサイトの構造を分かりやすく示したものです。BtoBサイトを制作するときは、サイトに載せる情報を整理するためにサイトマップを作成します。

BtoBサイトを制作する目的によって、制作するサイトマップのパターンが異なるため、ここでは目的別におすすめのサイトマップのパターンを紹介します。BtoBサイトを制作する主な目的は、以下の3つです。

  • 信頼感の獲得
  • 認知の獲得
  • お問い合わせの獲得

それぞれの目的別に、おすすめのサイトマップのパターンを確認していきましょう。

1.  信頼感の獲得

まずは、信頼感の獲得を目指してBtoBサイトを制作する場合におすすめなサイトマップを見ていきましょう。

信頼感の獲得

ユーザーからの信頼獲得を目指してBtoBサイトを制作する場合、シンプルなサイトマップになることが多いです。サイトに載せるべき要素は以下の6つになります。

  • トップページ
  • 会社概要
  • 特徴・強み
  • 事業内容
  • お問い合わせ
  • 完了ページ

これらの要素のほかに、404ページとプライバシーポリシーを追加すれば、BtoBサイトの構成要素が揃います。ユーザーに知ってもらいたい会社の情報を追加していくイメージでサイトマップを作ってみてください。

2. 認知の獲得

次に、BtoBサイトを制作してユーザーからの認知度を高めたい場合におすすめなサイトマップのパターンを紹介します。

認知の獲得

ユーザーの認知度を高め、集客を成功させたい場合は以下の要素を含むサイトマップを制作しましょう。

  • トップページ
  • 会社概要
  • 特色・強み
  • 事業内容
  • 各事業の詳細
  • コラム
  • コラム詳細
  • お問い合わせ
  • 完了ページ

このほかに、404ページとプライバシーポリシーの設置も必須です。

BtoBサイトの制作目的が集客である場合におすすめなのが、コラムページの設置です。事業と関連性の高い記事をサイトに掲載することで、SEOによる集客を期待できます。

また、サイトを訪れた人にサービス内容をアピールするには、各事業の詳細説明ページが必要です。展開しているサービスの内容や特色を分かりやすく説明しましょう。

事業を複数展開している場合は、それぞれの専用ページを制作するのもおすすめです。

3. お問い合わせの獲得

BtoBサイトへのお問い合わせ獲得を目指している場合におすすめのサイトマップは以下の通りです。

お問い合わせの獲得

基本的な構成要素は、認知の獲得を目指す場合のサイトマップと同じです。この構成にCVRを高める施策を追加することで、お問い合わせの増加を目指せます。

CVRを目指す施策としては、以下のような方法があります。

  • ファーストビューにお問い合わせボタンを設置して導線を簡略化する
  • フォームをむき出しの状態にして問い合わせのハードルを下げる
  • 実績を明記して信頼度を高める
  • ポップアップ/追従CTAを設置してクリック率の向上を目指す
  • お問い合わせページのナビゲーションを削除して離脱を防ぐ
  • 担当者の写真を載せて信頼度を向上させる

CVRの向上方法については、以下のYouTube動画にて詳しく紹介しています。詳しく知りたい方はぜひチェックしてみてください。

BtoBサイトをデザインする際のページ別のポイント

BtoBサイトのデザインは、企業のイメージを決める重要な役割を担っています。そのため、デザインを制作する際は以下のポイントを意識してください。

  1. トップページ
  2. 特徴・強みページ
  3. サービス詳細ページ
  4. 事例・実績ページ
  5. 機能ページ(サービスサイトの場合)
  6. ブログ一覧・詳細ページ
  7. お問い合わせページ
  8. サンクスページ
  9. ヘッダー
  10. フッター

それぞれ詳しく見ていきましょう。

1:トップページ

Pro-D-use_トップページ

BtoBサイトのトップページでは、以下の5つのポイントを抑えましょう。

  • CTAを設置する
  • 信頼感につながる企業ロゴを掲載する
  • 実績を掲載する
  • 強みが伝わるコピーを設置する
  • サービス内容を明確にする

サービス内容や社風、実績が一目で伝わるようなトップページを目指しましょう。また、社員の写真を掲載して信頼度を高めたり、追従型のCTAを設置したりする施策もトップページとの相性が良いためおすすめです。

2:特徴・強みページ

Pro-D-use_特徴・強みページ

特徴・強みページでは、以下のポイントを抑えましょう。

  • CTAを設置する
  • 強みが伝わるテキストを設置する

また、他社との違いを記載したり、図解を用いてわかりやすく説明することも重要です。サービス内容を記載して、特徴ページからの集客も狙っていきましょう。

3:サービス詳細ページ

Pro-D-use_サービス詳細ページ

サービス詳細ページのポイントは以下の2点です。

  • LPのようなページ構成を目指す
  • QUESTの法則を活用する

また、メインビジュアルには以下の6つの要素を取り入れましょう。

  • CTAを設置する
  • むき出しのフォームを設置する
  • 信頼感につながる企業ロゴを掲載する
  • 実績を掲載する
  • 強みが伝わるコピーを設置する
  • サービス内容を明確にする

お問い合わせフォームを画面遷移のないむき出しの状態で設置することで、ユーザーの抵抗感を減らすことができます。また、サービス内容の説明に図解を用いてイメージを可視化することで、具体的な情報をユーザーに伝えられます。

4:事例・実績ページ

Pro-D-use_事例・実績ページ

事例・実績ページでは以下の4つのポイントを抑えましょう。

  • CTAを設置する
  • サムネイル画像を設定する
  • ピックアップ事例と新着事例を分けて紹介する
  • カテゴリごとの絞り込み検索機能を設置する

事例・実績の紹介ページでは、サムネイル画像を設定することでユーザーの関心度を高められます。また、事例ごとにカテゴリを設定することで、知りたい情報を調べやすい「ユーザーファースト」なページになるでしょう

また、記事を開かなくても社員数や業界などの属性を一目で分かるようにする工夫も重要です。

5:機能ページ(サービスサイトの場合)

Pro-D-use_機能ページ

サービスサイトを制作する場合は、機能ページを工夫することも大切です。機能ページでは、以下の

  • CTAを設置する
  • 目的が伝わるテキストを設置する
  • 導入事例やメンバーなどで人の写真を使用して信頼感を醸成する
  • サービス内容を明確にする

機能ページでは、ファーストビューのテキストをフォントサイズや背景色で目立たせることも大切です。集客力をCVRの向上を目指す場合は、ユーザーの目に留まりやすくなるような工夫を意識しましょう。

また、「押し付け感」のないデザインにすることも重要です。カラーやフォント、ボタンデザインを調整して、ユーザーにストレスを与えない見た目を目指してください。

6:ブログ一覧・詳細ページ

Pro-D-use_ブログ一覧・詳細ページ

BtoBサイトのコラム一覧・詳細ページでは、以下の3つのポイントを抑えましょう。

  • CTAを設置する
  • 人気コラムと新着コラムを分けて掲載する
  • カテゴリごとの遷移ボタンを設置する

BtoBサイトにおいて、コラムはSEOによる集客を獲得する手段の一つです。特定のジャンルにおいて強みがある場合は、ぜひコラムページを設置してみてください。

7:お問い合わせページ

Pro-D-use_お問い合わせページ

お問い合わせページは、CVRに直結する箇所です。制作する際は以下のポイントを必ず抑えましょう。

  • CTAを設置する
  • むき出しのフォームを設置する
  • 問い合わせ内容ごとのページを作成する
  • 実績を掲載する
  • 強みが伝わるコピーを設置する
  • サービス内容を明確にする

最もユーザーに注目してほしいお問い合わせページについては、むき出しのフォームを設置することをおすすめします。

Pro-D-use_お問い合わせフォーム

ワンクリックで問い合わせが完了するフォームを設置することで、ユーザーの問い合わせに対する心理的なハードルを抑えることができます。

また、お問い合わせページには社員の顔写真や実績、提供サービスを掲載しましょう。

8:サンクスページ

サンクスページは、ユーザーが登録や問い合わせを行った後に表示されるページのことです。サンクスページでは、以下のポイントを意識しましょう。

  • 登録・問い合わせの完了を明記する
  • その後の流れを簡単に説明する
  • その他のサービスをおすすめする

サンクスページでは、「ありがとうございました!」などの文言を大きく表示させ、ユーザーに登録・問い合わせの完了を知らせるのが一般的です。ユーザーにとってわかりやすいデザインを意識しましょう。

また、その後のフロー(連絡方法や連絡するまでの日数目安)を明記したり、その他のサービスを提案するのもおすすめです。

9:ヘッダー

Pro-D-use_ヘッダー

BtoBサイトのヘッダーには、以下の3つの要素を取り入れましょう。

  • 会社ロゴ
  • CTAボタン
  • 各ページへの遷移ボタン

会社ロゴは、どのページからでもトップページに遷移できるような仕組みにするために欠かせない要素です。また、ヘッダーにCTAを設置することで、ユーザーの好きなタイミングで問い合わせや登録を行うことができます。

各ページへの遷移ボタンも必ず設置しましょう。また、カーソルを合わせるとページごとの詳細情報が表示される仕組みにすると、ユーザーにとって使いやすいサイトになるはずです。

10:フッター

Pro-D-use_フッター

フッターには、以下の要素を掲載しましょう。

  • 会社案内
  • 事業紹介
  • サービス詳細
  • 問い合わせフォーム

また、詳細内容を紹介しているページに遷移するためのテキストリンクを設定しておくことで、ユーザーは目的のページを探しやすくなります。

会社概要などの情報はヘッダーに設置することが望ましいです。

BtoBサイトのCVRを上げる10の施策

CVR(コンバージョンレート)とは、CVの達成割合を示す指標のことです。BtoBサイトのCVRを上げたい場合は、以下の施策を試してみてください。

CVR改善_10の施策

CVRは、上記のような施策によって比較的短期間で改善することができます。それぞれ詳しく見ていきましょう。

トップページ

トップページはサイトの顔とも言える重要な要素の一つです。まずはトップページのCVR向上施策について紹介します。

ファーストビューにCTAを設置する

トップページのファーストビューには必ずCTAを設置しましょう。トップページはすべてのユーザーが必ず目にする場所です。

CTAを作成しても、ユーザーの目に留まりにくい箇所に設置してしまったら、CVRの向上は見込めません。CVRの向上には、CTAの活用が欠かせないのです。

トップページには必ずCTAを設置しましょう。また、ユーザーがいつでも問い合わせを行えるように、追従型のCTAを設置するのもおすすめです。

ファーストビューにお問い合わせフォームや資料ダウンロードフォームを設置する

ファーストビューにお問い合わせフォームや資料ダウンロードフォームを設置しましょう。むき出しのフォームを設置することで、CVRは大きく向上します。

ユーザーにとっても手軽に問い合わせ・資料ダウンロードを実行できるため、ストレスなくサイトを利用できるはずです。

ただし、お問い合わせフォームや資料ダウンロードフォームは、いくつか工夫すべきポイントがあります。制作時には、以下の6つのポイントを意識してください。

  • ナビゲーションを設置しない
  • むき出しのフォームを設置する
  • 実績を掲載する
  • 強みが伝わるコピーを設置する
  • サービス内容を明確にする
  • 人の写真を使用して信頼感を高める

また、記入内容をわかりやすくする工夫も必要です。記入負担の低いフォームは、CVRの向上につながります。

CTAのポップアップを設置する

トップページにCTAのポップアップを設置しましょう。CTAのポップアップとは、ページを開いた時に表示されるCTAの専用画面のことです。

ほかの情報をシャットアウトしつつ、CTAだけを見せられるため、CVR向上を目指せます。

実績や取引した企業ロゴを設置する

トップページに実績や取引した企業ロゴを設置しましょう。実績や企業ロゴは、ユーザーに信頼感・安心感を与えます。

また、実績情報が依頼の決め手となる場合も多いため、トップページやフォームページにセットで掲載することをおすすめします。

資料(お役立ち資料やセット資料を用意する)

CVRの向上には、お役立ち資料やセット資料の活用がおすすめです。無料でダウンロード・提供できる資料を用意することで、ユーザーにより詳しいサービス内容を案内することができます。

また、無料でできる資料請求はユーザーにとっても申し込みハードルが低いため、CVRの向上には非常に効果的です。企業側からしても営業チャンスになるため、ぜひ資料を作成してみてください。

資料請求のフォームやポップアップCTAの設置もおすすめです。

フォームページ

フォームページはCVRの向上を目指すなら必ずこだわるべきポイントです。ここでは、フォームページのCVR向上施策を紹介します。

他のページへの遷移を削除する(グローバルナビゲーションとフッターへの導線を削除する)

フォームページでは、他のページへの遷移を削除しましょう。サイトのさまざまな場所に移動できる遷移ボタンの設置は、ユーザーの満足度向上に有効です。

しかし、フォームページにおいては、遷移ボタンは離脱率を高める要因となります。フォームの入力率を高めるために、遷移ボタンは削除することをおすすめします。

資料をチラ見せする

CVRの向上には、資料のチラ見せが有効です。資料の一部をサイト内で閲覧可能にすることで、その後の内容が気になったユーザーからの問い合わせを狙えます。

冒頭数ページを公開するだけでも、十分にCVR向上を目指せます。ユーザーに提供できる資料がある場合は、ぜひこちらの施策を実行してみてください。

導入実績を掲載する

フォームページには導入実績を掲載しましょう。導入事例や導入企業のロゴを掲載することで、ユーザーの信頼度が高まります。

導入実績が申し込みや問い合わせのきっかけとなることも多いです。導入実績は積極的に掲載しましょう。

スタッフの写真を掲載する

フォームページにスタッフの写真を掲載することで、ユーザーの信頼感や安心感を高めることができます。実際に業務を担当する人物を確認することで、よりサービスの内容を具体的にイメージできることもあります。

ユーザーからの信頼を獲得し、CVRを向上させたい場合は、フォームページにスタッフの写真を掲載してみてください。

グローバルナビゲーション(導線を最適化する)

CVRの向上には、グローバルナビゲーションの最適化が有効です。グローバルナビゲーションとは、Webサイトのすべてのページに表示され、ユーザーを主要なコンテンツに誘導するリンクのことです。

グローバルナビゲーションを最適化することで、ユーザーは目的のページに自由に移動しやすくなります。問い合わせや資料請求が目的のユーザーも、すぐに申し込みフォームページに遷移できるため、意欲減退による離脱を防げるのです。

また、使用感の良いサイトはユーザーからの信頼度を高めます。結果として、CVRの向上につながることもあるでしょう。

CVRの向上を目指すなら、グローバルナビゲーションの最適化を目指してみてください。

PENGINがご支援したBtoBサイトの成功事例

PENGINがこれまでに支援したBtoBサイトの成功事例を3つ紹介します。

株式会社Pro-D-use【LP・コーポレートサイトリニューアル】

Pro-D-use_トップページ

株式会社Pro-D-use様は、カスタマイズ前提のコンサルティング会社です。領域を限定せずにマーケティングの強化や組織構築など幅広くサポートされているのが特徴です。

全体のCVRに課題を感じているとのご相談を受け、LPとコーポレートサイトのリニューアルを実施しました。

事業コンサルティング事業に抱かれがちな堅いイメージを柔和できるよう、会社ロゴのカラーに合わせてポップな印象となるように全体のトンマナを調整しました。

株式会社Pro-D-use様 LP改善の詳細はこちら

株式会社Pro-D-use様 コーポレートサイトリニューアルの詳細はこちら

株式会社AdOps【コーポレートサイトリニューアル】

AdOps_トップ

株式会社AdOps様は、成果報酬型のマーケティング支援会社です。戦略設計から施策の実行と改善まで総合的にサポートされています。

コーポレートサイトを刷新したいと、PENGINにご依頼いただきました。モノクロでクールな印象を与えつつも、レイアウトや丸いオブジェクトで動きのあるレイアウトを作り、堅苦しくなりすぎない印象となるようにリニューアルしました。

株式会社AdOps様 コーポレートサイトリニューアルの詳細はこちら

株式会社Chi-Full【コーポレートサイト制作】

Chi-Full_トップ

株式会社Chi-Full様は、WEBマーケティングを始めとして、BtoB/BtoCの集客・販売支援や

人材リソースの課題解決など幅広い事業を展開している会社です。

コーポレートサイトの制作をPENGINにご依頼いただきました。「十人十色」というキーワードをベースに、スタイリッシュな装飾の中にカラフルな色使いをすることで、ブランドイメージを表現しました。

株式会社Chi-Full様 コーポレートサイト制作の詳細はこちら

BtoBサイトの成功事例15選

先ほど紹介したポイントを満たしている15のBtoBサイトを紹介します。

会社名参考にしたいポイント
株式会社マネーフォワード・ファーストビューに設置されたCTA
株式会社リクルート・求めている情報にアクセスしやすいヘッダー
株式会社セールスフォース・ジャパン・アクションへのハードルを下げるCTA
株式会社キーエンス・ファーストビューに設置された検索窓
・多数のCTAが用意された追従型メニュー
サイボウズ株式会社・分かりやすく整理されたヘッダー
・豊富な事例紹介
株式会社ベーシック・多様なニーズに対応したCTA
ナブテスコ株式会社・イメージしやすい製品紹介
・VRショールームの掲載
プラス株式会社・一目で理解できるファーストビュー
・イメージしやすいソリューション紹介
株式会社 Global Japan Corporation・ファーストビューに掲載されたイメージ動画
アスクル株式会社・商品を探しやすいサイトデザイン
株式会社kubell・ファーストビューに設置された資料ダウンロードのフォーム
株式会社アドミュース・ファーストビューで明確化されたターゲット
株式会社イムラ・ニーズに合ったサービス紹介ページへ誘導
N T Tテクノクロス株式会社・ヘッダーにアンカーリンク設置
・CTAに綺麗に繋がる導線
シンカ株式会社・全体的にシンプルなサイト構成

それぞれ詳しく解説するので、ぜひデザインの参考にしてください。

株式会社マネーフォワード

マネーフォワード_トップページ

株式会社マネーフォワードは、個人向けの家計簿サービスや企業向けの会計ソフトなどを展開している会社です。

ファーストビューに「資料ダウンロード」と「無料で使ってみる」のCTAが設置されており、サイトを訪れたユーザーがすぐに行動に移せるデザインになっています。

また、同じくファーストビューに「利用事業者数 35万事業者突破!」と実績が分かりやすく記載されているのも特徴です。アイキャッチの下にもマネーフォワードのソフトを利用している企業が多数掲載されており、ユーザーの信頼を獲得しやすい構成になっています。

株式会社リクルート

リクルート_トップページ

株式会社リクルートは、人材領域をはじめとする幅広い事業を手がけている会社です。その中で、個人の転職支援や企業への人材紹介を実現するための転職エージェントサービスである「リクルートエージェント」を提供しています。

リクルートエージェントのサイトはヘッダーが整理されているのが特徴で、「料金・費用」「選ばれる理由」などユーザーが知りたいことにすぐアクセスできる構造になっています。

リクルート_料金表

他の採用サービスと比較した表も掲載されており、リクルートエージェントの特徴や利用がおすすめな企業が一目で分かるようになっています。ユーザーに表を見てもらうことで滞在時間を延ばす目的もあるでしょう。

株式会社セールスフォース・ジャパン

セールスフォース・ジャパン_トップページ

株式会社セールスフォース・ジャパンは、顧客管理ソフトウェアである「セールスフォース」を提供している会社です。

セールスフォース・ジャパンのファーストビューには「無料トライアル」「製品デモ」といったCTAが設置されています。「無料」や「デモ」などの文言があると、ユーザーがアクションを起こすハードルを下げられます。

また、ヘッダーに「業種別のソリューション」というメニューが設置されており、業種ごとのサービスページへ遷移することが可能です。金融サービスや小売など、各業種のソリューションにスムーズにアクセスできます。

株式会社キーエンス

キーエンス_トップページ

株式会社キーエンスは、ファクトリー・オートメーション用のセンサを中心として測定器や画像処理機器などの企画・開発・製造を行っている会社です。

キーエンスのサイトは製品検索や資料請求を主目的としたBtoB向け構成で、ファーストビューに検索窓が設置されています。アイキャッチのすぐ下にもセンサやマイクロスコープなど多数の商品ラインナップが掲載されており、サイトを訪問したユーザーがすぐに商品を探せるようになっています。

ファーストビューの右下には追従型のメニューが設置されているのも特徴です。追従型のメニューには「価格・見積」「お問い合わせ」といった様々なCTAがあり、ユーザーの好きなタイミングでアクションを取れるようになっています。

サイボウズ株式会社

サイボウズ_トップページ

サイボウズ株式会社は、グループウェアサービスの「サイボウズOffice」や業務アプリが作れる「キントーン」などを提供している会社です。

サイボウズOfficeのサイトはヘッダーが整理されており、「かんたん便利な機能」や「手頃な価格」など行きたいページにすぐアクセスできるようになっています。

サイボウズ事例

豊富な事例が見やすく紹介されているのも参考にしたいポイントです。トップページの事例紹介のセクションでは「業務のスピードアップ!」「効率が上がった!」など成果ごとにタブで切り替えられるようになっています。それだけでなく、担当者の写真と企業名を掲載して実際にもらった口コミ・感想であることが分かるデザインになっているのも特徴です。

株式会社ベーシック

株式会社ベーシック_トップページ

株式会社ベーシックは、BtoBマーケティングを支援する「ferret」やBtoBマーケティングのコンサルティングサービスである「ferretソリューション」などを展開している会社です。

ferretのサイトは「無料デモ」「ご相談・お問い合わせ」など多様なニーズに対応したCTAが設置されており、ユーザーがアクションを取りやすい設計になっています。

提供しているサービスをイラストと一緒に分かりやすく紹介しているのも特徴です。ステップごとにどのような支援を受けられるのかを視覚的に把握できるようになっています。

ナブテスコ株式会社

ナブテスコ_トップページ

ナブテスコ株式会社は、自動ドアや鉄道車両用ブレーキなど多様な分野で生産を行っている機械メーカーです。

自動ドアの生産を行っている「ナブコ」のサイトは、自動ドアの種類が画像と一緒に掲載されており、ユーザーがイメージしやすいデザインになっています。

ナブテスコ_ショールーム

VRのショールーム機能もあり、病院や商業施設のドアをVRで確認することが可能です。ショールームのページには「カタログダウンロード」や「商品詳細ページ」といったCTAもあり、ユーザーの離脱を防ぐ工夫もされています。

プラス株式会社

プラス株式会社_トップページ

プラス株式会社は、オフィス家具や事務用品などの製造・販売を主軸に行っている企業です。

プラス株式会社のサイトのファーストビューは、ヘッダー、キービジュアル、追従型CTAメニューという構成です。ファーストビュー左下には、資料ダウンロードを促すポップアップバナーが表示されており、ユーザーの興味を引く設計になっています。バツボタンで閉じられる仕様のため、UXを損なわずに訴求が可能です。

キービジュアルには「オフィス見学」や「オフィス移転」などの画像も含まれており、どのような会社か一目で理解しやすいです。

プラス株式会社_キービジュアル

「オフィス移転」や「オフィスリニューアル」など画像付きで分かりやすくソリューションが紹介されています。オフィス家具の製品カテゴリーも同様に画像と一緒に紹介されており、視覚的にユーザーがイメージしやすくなっています。

株式会社Global Japan Corporation

Global Japan Corporation_トップページ

株式会社Global Japan Corporationは、製品紹介動画や求人動画など動画制作を主軸に行っている企業です。

ファーストビューには、グローバル・ジャパン・コーポレーションの特徴や強みと一緒に動画も掲載されているのが特徴です。どのような動画を制作しているのかがぱっと見で分かりやすくなっています。

「顧客満足度」や「制作実績」などのこれまでの実績もファーストビューに記載されており、アイキャッチのすぐ下にも過去の取引先が多数掲載されています。取引先一覧や実績紹介、お客様の声など、セクションごとに「無料相談・無料見積り依頼」のCTAボタンを設置しているのも参考にしたいポイントです。

アスクル株式会社

アスクル_トップページ

アスクル株式会社は、オフィス用品や現場用品などを販売している会社です。

アスクルはECタイプのサイトで、ファーストビューに検索窓が設置されています。商品カテゴリも細かく分類されており、ユーザーが欲しい商品を探しやすいデザインになっています。

また、同じくファーストビューに「OUTLET」「まとめ割」といったタブが設置されていたり、アイキャッチのすぐ下に割引商品が並んでいたりと、目当ての商品以外も閲覧してもらうための工夫がされているのも特徴です。

株式会社kubell

kubell_トップページ

株式会社kubellは、中小企業向けのビジネスチャットツール「Chatwork」を提供している会社です。

Chatworkのサイトでは、ファーストビューに資料ダウンロードのフォームが設置されておりCVRを上げるための施策が実施されています。また「無料登録して使う」「話を聞いてみる」といったボタンもあり、様々なニーズに対応したCTAが設置されているのも特徴です。

Chatworkの基本機能を紹介する箇所では、動画が閲覧できるようになっています。どちらの動画も4秒〜5秒と短いうえにシンプルなアニメーションとなっているので、誰が見ても分かりやすいです。ユーザーの滞在時間を延ばす効果もあるでしょう。

株式会社アドミュース

アドミュース_トップページ

株式会社アドミューズは、IT企業と製造業向けにBtoBのサイト制作を行っている企業です。

アドミューズのサイトは、ファーストビューで「IT企業向け」と「製造業向け」に分かれています。成功事例もIT企業と製造業で分けられているため、一貫してアドミューズがターゲットにしている業種が分かりやすいのが特徴です。

ヘッダーに設置しているのは必要最低限の情報のみで、非常にシンプルに整理されています。グローバルナビゲーションも「IT企業向けWeb制作」や「製造業向けWeb制作」など極力まで少なくして、ユーザーの行動を限定しCVに繋がりやすくしています。

株式会社イムラ

株式会社イムラ_トップページ

株式会社イムラは、封筒の製造やメーリングサービスなどを行っている企業です。

イムラのサイトでは、ファーストビューに「作りたい」「送りたい」などのタブを設置しユーザーのニーズに合ったサービス紹介ページへ誘導しています。

そして遷移先のページでは、製造過程や具体的なサービス内容の下にCTAエリアが設置されており、ユーザーの動きを意識した導線が引かれているのがポイントです。サイトを訪れたユーザーを上手く「お問い合わせ」へ促していると言えます。

NTTテクノクロス株式会社

NTTテクノクロス_トップページ

NTTテクノクロス株式会社は、ソフトウェアや情報通信システムの設計・開発・運用を行っているNTTグループの企業です。

NTTテクノクロスが提供する健康管理システム「HM-neo」のサイトは、ヘッダーの情報が整理されているのが特徴です。ヘッダーのグローバルメニューにはアンカーリンクが入っており、「導入事例」「機能紹介」などユーザーが知りたい情報の箇所へすぐに飛べるように工夫されています。

ユーザーが抱えていそうな課題や悩みを列挙し、HM-neoで解決できるとアピールしている箇所も参考にしたいポイントです。ユーザーの悩みと解決策を提示したあとに「くわしい資料請求」「お問い合わせ」のCTAが設置されており、上手くユーザーを誘導しています。

シンカ株式会社

NTTテクノクロス_トップページ

シンカ株式会社は、インフラの構築事業や電気工事事業などを行っている会社です。

シンカのサイトは、「事業内容」「企業情報」「採用情報」など全体的にシンプルな構成になっているのが特徴です。必要最低限の情報を厳選し、ユーザーがどこを見ればいいのか迷う状況を作らないようにしています。

シンカについて深掘りした「SHINKAの裏シンカ」という別サイトが用意されています。インフラ事業や電気工事事業などは長期的な付き合いになるため、より具体的にシンカについて紹介し、信頼を獲得できるように工夫されています。

BtoBサイトのデザインに関するよくある質問

最後にBtoBサイトのデザインに関するよくある質問を3つ紹介します。

Q.BtoBサイトとBtoCサイトの違いは?

A.

BtoBサイトとBtoCサイトの違いは、主に以下の3つです。

違いBtoBサイトBtoCサイト
意思決定までに関わる
人数
複数人で意思決定する個人で意思決定する
リードタイムリードタイムは長めリードタイムは短め
マーケティング戦略ターゲットとなる企業や担当者に的確にアプローチする必要があるターゲットとなる消費者層に幅広くアプローチする必要がある

上記のような違いを把握したうえで、BtoBサイトの制作にあたりましょう。

Q.BtoBサイトの基本的な構成は?

A.

BtoBサイトの基本的な構成は以下の通りです。

  • ファーストビュー
  • 自社の強み
  • 製品やサービス紹介
  • 導入事例や実績
  • CTA
  • ヘッダー
  • フッター

上記以外にも、よくある質問やニュースリリースなど制作するサイトに応じて必要なコンテンツを選択してください。

Q.BtoBサイトを改善するときのポイントは?

A.

BtoBサイトを改善するときは、以下のポイントを見直してみましょう。

  • 商品紹介ページの内容が充実しているか
  • 料金ページが分かりやすいか
  • CTAが適切か
  • 表示速度が速いか

ヒートマップを活用したり、お問い合わせの内容を参照したりして改善できそうな箇所を探すという方法もあります。

BtoBサイトのデザインにおけるポイントを抑えて、自社の魅力が伝わるサイトを作ろう

BtoBサイトを制作するときは、分かりやすいファーストビューにしたり信頼できる実績を載せたりなどのポイントを意識したデザインにすることをおすすめします。加えて、CTAの位置やユーザーにとってスムーズな導線を意識するとCVRを向上させることも可能です。

会社のサイトを制作する際、本記事で紹介したデザインにおけるポイントや成功事例が参考になれば幸いです。