この記事の監修者
BtoBサイトのデザインは、配色やレイアウトを決める前に、誰が何を判断するために見るページなのかから決まります。
この記事の結論
PENGINでは、見た目を整えるより先に、サイトの目的と閲覧者の判断を整理します。そのうえでページごとに「必要な情報」と「次の行動」を決め、最後にデザインへ落とします。以下で紹介する目的別サイトマップは、あくまで代表的なパターンの例示であり、すべてのBtoBサイトに必須の固定構成ではありません。
どのページを用意するかという構成そのものはBtoBサイトに必要なページ｜検討段階から逆算して構成を決めるにまとめています。
デザインを刷新する範囲と費用の関係はサイトリニューアルの費用相場｜料金の内訳と予算別にできることを解説で解説しています。
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：トップページ
BtoBサイトのトップページでは、以下の5つのポイントを抑えましょう。
- CTAを設置する
- 信頼感につながる企業ロゴを掲載する
- 実績を掲載する
- 強みが伝わるコピーを設置する
- サービス内容を明確にする
サービス内容や社風、実績が一目で伝わるようなトップページを目指しましょう。また、社員の写真を掲載して信頼度を高めたり、追従型のCTAを設置したりする施策もトップページとの相性が良いためおすすめです。
2：特徴・強みページ
特徴・強みページでは、以下のポイントを抑えましょう。
- CTAを設置する
- 強みが伝わるテキストを設置する
また、他社との違いを記載したり、図解を用いてわかりやすく説明することも重要です。サービス内容を記載して、特徴ページからの集客も狙っていきましょう。
3：サービス詳細ページ
サービス詳細ページのポイントは以下の2点です。
- LPのようなページ構成を目指す
- QUESTの法則を活用する
また、メインビジュアルには以下の6つの要素を取り入れましょう。
- CTAを設置する
- むき出しのフォームを設置する
- 信頼感につながる企業ロゴを掲載する
- 実績を掲載する
- 強みが伝わるコピーを設置する
- サービス内容を明確にする
お問い合わせフォームを画面遷移のない状態で設置すると、次の画面へ進む手間が減り、離脱を抑えられる場合があります。判断の分け方はBtoBサイトのCVR改善方法を参考にしてください。また、サービス内容の説明に図解を用いてイメージを可視化することで、具体的な情報をユーザーに伝えられます。
4：事例・実績ページ
事例・実績ページでは以下の4つのポイントを抑えましょう。
- CTAを設置する
- サムネイル画像を設定する
- ピックアップ事例と新着事例を分けて紹介する
- カテゴリごとの絞り込み検索機能を設置する
事例・実績の紹介ページでは、サムネイル画像を設定することでユーザーの関心度を高められます。また、事例ごとにカテゴリを設定することで、知りたい情報を調べやすい「ユーザーファースト」なページになるでしょう
また、記事を開かなくても社員数や業界などの属性を一目で分かるようにする工夫も重要です。
5：機能ページ（サービスサイトの場合）
サービスサイトを制作する場合は、機能ページを工夫することも大切です。機能ページでは、次の点を確認します。
- CTAを設置する
- 目的が伝わるテキストを設置する
- 導入事例やメンバーなどで人の写真を使用して信頼感を醸成する
- サービス内容を明確にする
機能ページでは、ファーストビューのテキストをフォントサイズや背景色で目立たせることも大切です。集客力をCVRの向上を目指す場合は、ユーザーの目に留まりやすくなるような工夫を意識しましょう。
また、「押し付け感」のないデザインにすることも重要です。カラーやフォント、ボタンデザインを調整して、ユーザーにストレスを与えない見た目を目指してください。
6：ブログ一覧・詳細ページ
BtoBサイトのコラム一覧・詳細ページでは、以下の3つのポイントを抑えましょう。
- CTAを設置する
- 人気コラムと新着コラムを分けて掲載する
- カテゴリごとの遷移ボタンを設置する
BtoBサイトにおいて、コラムはSEOによる集客を獲得する手段の一つです。特定のジャンルにおいて強みがある場合は、ぜひコラムページを設置してみてください。
7：お問い合わせページ
お問い合わせページは、CVRに直結する箇所です。制作する際は以下のポイントを確認しましょう。
- CTAを設置する
- むき出しのフォームを設置する
- 問い合わせ内容ごとのページを作成する
- 実績を掲載する
- 強みが伝わるコピーを設置する
- サービス内容を明確にする
行動してほしいお問い合わせページでは、画面遷移のないフォームを設置する方法があります。
別ページへ移動せずに入力できるフォームを設置することで、ユーザーの問い合わせに対する心理的なハードルを抑えることができます。
また、お問い合わせページには社員の顔写真や実績、提供サービスを掲載しましょう。
8：サンクスページ
サンクスページは、ユーザーが登録や問い合わせを行った後に表示されるページのことです。サンクスページでは、以下のポイントを意識しましょう。
- 登録・問い合わせの完了を明記する
- その後の流れを簡単に説明する
- その他のサービスをおすすめする
サンクスページでは、「ありがとうございました！」などの文言を大きく表示させ、ユーザーに登録・問い合わせの完了を知らせるのが一般的です。ユーザーにとってわかりやすいデザインを意識しましょう。
また、その後のフロー（連絡方法や連絡するまでの日数目安）を明記したり、その他のサービスを提案するのもおすすめです。
9：ヘッダー
BtoBサイトのヘッダーには、以下の3つの要素を取り入れましょう。
- 会社ロゴ
- CTAボタン
- 各ページへの遷移ボタン
会社ロゴは、どのページからでもトップページに遷移できるような仕組みにするために欠かせない要素です。また、ヘッダーにCTAを設置することで、ユーザーの好きなタイミングで問い合わせや登録を行うことができます。
各ページへの遷移ボタンも設置しましょう。また、カーソルを合わせるとページごとの詳細情報が表示される仕組みは、掲載ページが多いサイトで有効な場合があります。
10：フッター
フッターには、以下の要素を掲載しましょう。
- 会社案内
- 事業紹介
- サービス詳細
- 問い合わせフォーム
また、詳細内容を紹介しているページに遷移するためのテキストリンクを設定しておくことで、ユーザーは目的のページを探しやすくなります。
会社概要などの情報はヘッダーに設置することが望ましいです。
BtoBサイトのCVRを上げる10の施策
CVR（コンバージョンレート）とは、CVの達成割合を示す指標のことです。BtoBサイトのCVRを上げたい場合は、以下の施策を試してみてください。
小規模に試せる施策もありますが、効果を判断できるまでの期間は、流入数・CV数・改善幅によって変わります。それぞれ詳しく見ていきましょう。
トップページ
トップページはサイトの顔とも言える重要な要素の一つです。まずはトップページのCVR向上施策について紹介します。
ファーストビューにCTAを設置する
トップページのファーストビューにCTAを置くかどうかは、訪問者がその時点で何を申し込むのか理解できているかで判断します。なお、検索や広告から下層ページへ直接流入する読者も多いため、トップページをすべての訪問者が通るとは限りません。
CTAを作成しても、ユーザーの目に留まりにくい箇所に設置してしまったら、CVRの向上は見込めません。CVRの向上には、CTAの活用が欠かせないのです。
トップページには、読者の検討段階に合うCTAを用意します。追従型のCTAは、本文の閲覧やモバイルでの操作を妨げていないかを確認したうえで検討します。CTAの決め方はSEO記事のCTA設計でも整理しています。
ファーストビューにお問い合わせフォームや資料ダウンロードフォームを設置する
ファーストビューにお問い合わせフォームや資料ダウンロードフォームを設置する方法もあります。ただし、フォームを露出させれば必ずCVRが上がるわけではありません。すでに申し込む内容を理解している読者が多いページでは有効な一方、説明が必要な商材では、判断材料を先に見せた方がよい場合もあります。
ユーザーにとっても手軽に問い合わせ・資料ダウンロードを実行できるため、ストレスなくサイトを利用できるはずです。
ただし、お問い合わせフォームや資料ダウンロードフォームは、いくつか工夫すべきポイントがあります。制作時には、以下の6つのポイントを意識してください。
- ナビゲーションを設置しない
- むき出しのフォームを設置する
- 実績を掲載する
- 強みが伝わるコピーを設置する
- サービス内容を明確にする
- 人の写真を使用して信頼感を高める
また、記入内容をわかりやすくする工夫も必要です。記入負担の低いフォームは、CVRの向上につながります。
CTAのポップアップを設置する
CTAのポップアップとは、ページを開いた時に表示されるCTAの専用画面のことです。設置を検討するときは、本文の閲覧やモバイルでの操作を妨げていないか、閉じる操作が分かるか、表示頻度が過剰でないかを実際に確認します。
ほかの情報をシャットアウトしつつ、CTAだけを見せられるため、CVR向上を目指せます。
実績や取引した企業ロゴを設置する
トップページに実績や取引した企業ロゴを設置しましょう。実績や企業ロゴは、ユーザーに信頼感・安心感を与えます。
また、実績情報が依頼の決め手となる場合も多いため、トップページやフォームページにセットで掲載することをおすすめします。
資料（お役立ち資料やセット資料を用意する）
CVRの向上には、お役立ち資料やセット資料の活用がおすすめです。無料でダウンロード・提供できる資料を用意することで、ユーザーにより詳しいサービス内容を案内することができます。
また、無料でできる資料請求はユーザーにとっても申し込みハードルが低いため、CVRの向上には非常に効果的です。企業側からしても営業チャンスになるため、ぜひ資料を作成してみてください。
資料請求のフォームやポップアップCTAの設置もおすすめです。
フォームページ
フォームページは、フォームに到達した読者が送信まで進めるかを左右します。ここでは、フォームページのCVR向上施策を紹介します。入力前・入力中・送信直前のどこで止まるかはEFOによるフォーム離脱の改善方法で詳しく扱っています。
他のページへの遷移を削除する（グローバルナビゲーションとフッターへの導線を削除する）
フォームページでは、入力に関係のない導線を減らすことを検討します。ただし料金・サービス内容・プライバシーポリシーなど、送信を判断するために必要な情報への導線は残します。サイトのさまざまな場所に移動できる遷移ボタンの設置は、通常のページでは満足度向上に有効です。
しかし、フォームページにおいては、遷移ボタンは離脱率を高める要因となります。フォームの入力率を高めるために、遷移ボタンは削除することをおすすめします。
資料をチラ見せする
CVRの向上には、資料のチラ見せが有効です。資料の一部をサイト内で閲覧可能にすることで、その後の内容が気になったユーザーからの問い合わせを狙えます。
冒頭数ページを公開するだけでも、十分にCVR向上を目指せます。ユーザーに提供できる資料がある場合は、ぜひこちらの施策を実行してみてください。
導入実績を掲載する
フォームページには導入実績を掲載しましょう。導入事例や導入企業のロゴを掲載することで、ユーザーの信頼度が高まります。
導入実績が申し込みや問い合わせのきっかけとなることも多いです。導入実績は積極的に掲載しましょう。
スタッフの写真を掲載する
フォームページにスタッフの写真を掲載することで、ユーザーの信頼感や安心感を高めることができます。実際に業務を担当する人物を確認することで、よりサービスの内容を具体的にイメージできることもあります。
ユーザーからの信頼を獲得し、CVRを向上させたい場合は、フォームページにスタッフの写真を掲載してみてください。
グローバルナビゲーション（導線を最適化する）
CVRの向上には、グローバルナビゲーションの最適化が有効です。グローバルナビゲーションとは、Webサイトのすべてのページに表示され、ユーザーを主要なコンテンツに誘導するリンクのことです。
グローバルナビゲーションを最適化することで、ユーザーは目的のページに自由に移動しやすくなります。問い合わせや資料請求が目的のユーザーも、すぐに申し込みフォームページに遷移できるため、意欲減退による離脱を防げるのです。
また、使用感の良いサイトはユーザーからの信頼度を高めます。結果として、CVRの向上につながることもあるでしょう。
CVRの向上を目指すなら、グローバルナビゲーションの最適化を目指してみてください。
PENGINがご支援したBtoBサイトの成功事例
PENGINがこれまでに支援したBtoBサイトの成功事例を3つ紹介します。
株式会社Pro-D-use【LP・コーポレートサイトリニューアル】
株式会社Pro-D-use様は、カスタマイズ前提のコンサルティング会社です。領域を限定せずにマーケティングの強化や組織構築など幅広くサポートされているのが特徴です。
全体のCVRに課題を感じているとのご相談を受け、LPとコーポレートサイトのリニューアルを実施しました。
事業コンサルティング事業に抱かれがちな堅いイメージを柔和できるよう、会社ロゴのカラーに合わせてポップな印象となるように全体のトンマナを調整しました。
株式会社Pro-D-use様 コーポレートサイトリニューアルの詳細はこちら
株式会社AdOps【コーポレートサイトリニューアル】
株式会社AdOps様は、成果報酬型のマーケティング支援会社です。戦略設計から施策の実行と改善まで総合的にサポートされています。
コーポレートサイトを刷新したいと、PENGINにご依頼いただきました。モノクロでクールな印象を与えつつも、レイアウトや丸いオブジェクトで動きのあるレイアウトを作り、堅苦しくなりすぎない印象となるようにリニューアルしました。
株式会社AdOps様 コーポレートサイトリニューアルの詳細はこちら
株式会社Chi-Full【コーポレートサイト制作】
株式会社Chi-Full様は、WEBマーケティングを始めとして、BtoB/BtoCの集客・販売支援や
人材リソースの課題解決など幅広い事業を展開している会社です。
コーポレートサイトの制作をPENGINにご依頼いただきました。「十人十色」というキーワードをベースに、スタイリッシュな装飾の中にカラフルな色使いをすることで、ブランドイメージを表現しました。
株式会社Chi-Full様 コーポレートサイト制作の詳細はこちら
他社のBtoBサイトを、サイトの種類別およびデザイン面の観点からまとめて確認したい場合は、BtoBサイトの成功事例をご覧ください。
BtoBサイトのデザインに関するよくある質問
最後にBtoBサイトのデザインに関するよくある質問を3つ紹介します。
-
Q.BtoBサイトとBtoCサイトの違いは？
-
Q.BtoBサイトの基本的な構成は？
-
Q.BtoBサイトを改善するときのポイントは？
BtoBサイトのデザインにおけるポイントを抑えて、自社の魅力が伝わるサイトを作ろう
BtoBサイトを制作するときは、分かりやすいファーストビューにしたり信頼できる実績を載せたりなどのポイントを意識したデザインにすることをおすすめします。加えて、CTAの位置やユーザーにとってスムーズな導線を意識するとCVRを向上させることも可能です。
会社のサイトを制作する際、本記事で紹介したデザインにおけるポイントや成功事例が参考になれば幸いです。
デザインの方向性が決まったら、次はサイト全体の構成と進め方です。既存サイトの作り替えから検討する場合はBtoBサイトリニューアルの進め方、他社がどう見せているかを確かめたい場合はBtoBサイトの成功事例もあわせてご覧ください。制作そのものをご相談いただく場合は、BtoBサイト制作で支援範囲と進め方を紹介しています。
