BtoBのWebサイト構成の考え方とは？制作時に必要なページ一覧

BtoBの製品・サービスサイトを作る場合、どんなページをそろえればいいのでしょうか？

この記事では、これからBtoBのサイトを作ろうと思われている方、または、リニューアルを検討されている方に向けて「BtoBサイトを作るなら、これだけはそろえておきたいページ」について解説します。

サイト設計の考え方についてまとまった下記の資料も合わせてご覧ください。

■あわせてよく読まれている資料
→BtoBマーケティングのためのサイトリニューアルガイド

→リード獲得を増やす “サービスサイト”立ち上げの4つの手順

Webサイト構成とは

Webサイト構成とは、Webサイトの設計図のことです。

Webサイトの設計図は「サイトマップ」と「ワイヤーフレーム」に分かれており、この2つの設計図を組み合わせることでWebサイトができあがります。それぞれについて詳しく見ていきましょう。

Webサイトの全体の構成：サイトマップ

サイトマップとは、サイト全体のページ構成を地図のように配置決めをしたものです。検索エンジンや訪問ユーザーに、サイトの内容をわかりやすく伝える役割を担っています。

一方、サイトマップとよく似た構造の「ディレクトリマップ」が存在します。ディレクトリマップは、Webサイトの制作関係者に構造を共有するために作成するため、各ページの内容を詳細にまとめているものが大半です。

検索エンジンや訪問ユーザー向けのサイトマップは、ページのタイトルや階層などを簡単にまとめた構造になっています。

Webサイトのページ単位の構成：ワイヤーフレーム

ワイヤーフレームとは、Webページのレイアウトを決めるための設計図です。ぱっと見ただけで、ニュース欄やコンテンツ、メニューなど、どこに何を配置するのかわかるものになっています。

ワイヤーフレームの役割は、実際のデザインやコーディング前に、Webサイトの見た目の骨組みを決めることです。

Webサイト構成におけるサイトマップの重要性

Webサイト構成におけるサイトマップはどのような役割を果たすのでしょうか？

サイトマップを用意しておけば、必要なページの内容や数を明確に決められます。内容重複の回避や、類似ページをまとめられたりするので、情報がきちんと整理されたWebサイトを作成できるでしょう。

情報が整理されたWebサイトは、訪問者へ余計なストレスを与えないため、途中離脱の回避に寄与します。

また、サイトマップがあることで、Webサイトを評価する検索エンジンのクローラーが、サイト内容やページをチェックしやすくなります。

サイトマップは、訪問者にとってもサイト管理者にとっても重要な役割を果たすのです。

Webサイト構成におけるサイトマップの作り方

サイトマップの作り方を詳しく解説します。

サイトマップ作り方①目的の明確化

まず、Webサイトの目的を明確化しましょう。「誰」に「何を」伝えるためのWebサイトなのか、訪問者にどのようなアクションを取ってほしいのか、など事前に設定してください。

目的が明確になれば、それを達成するためにはどのようなページを作成する必要があるのか、洗い出せます。

サイトマップ作り方②必要ページを決定

目的を明確化した後は、Webサイトに掲載すべき必要なページを決定しましょう。まずは必要と思われるページを一気に書き出し、各ページの果たす役割は何なのかを考えてみてください。

役割まで書き出した後は、作成したいWebサイトに本当に必要な情報なのか、を判断し取捨選択していくと良いでしょう。競合他社のWebサイトを参考にするのも一つの手段です。

サイトマップ作り方③ページを分類

必要ページを羅列した後は、それぞれを分類・グループ分けをしましょう。会社概要、サービス案内、採用情報などが挙げられます。

サイトマップ作り方④ページ階層を決定

それぞれのグループのページ階層を決定していきます。「トップページに持ってくるもの」「二階層目に持ってくるもの」など、ツリー状にページの構成を作成していきます。

この時、階層を増やしすぎると、サイトを訪れた人が情報にたどり着きづらくなってしまうので、極力3階層までにとどめるようにしてください。

サイトマップ作り方⑤各ページのURLを設定

各ページのURLを設定します。番号を割り振り、URLの最後に設定しても良いですが、「top」や「service」などに設定しておくと、更新の時などに楽になります。

サイトマップ作り方⑥サイトマップを送信する

作成したサイトマップの構成要素が揃ったら、Excelやツールを使ってサイトマップを作成し、Google Search ConsoleからサイトマップのURLを入力して送信します。

Webサイト構成におけるワイヤーフレームの重要性

Webサイト構成時にワイヤーフレームがあるとどのようなメリットがあるのでしょうか？

ワイヤーフレームを作成しておけば、掲載内容を整理できます。整理されたWebサイトであれば、訪問ユーザーがサイト内でスムーズに情報にたどり着けるため、ユーザーにストレスを与えません。

また、効率的にデザイン作業に取り組めるだけでなく、完成後のWebサイトをイメージしやすいので完成物と想定物の乖離を防ぐ、という役割を果たします。

Webサイトは3部構成にする

制作するWebサイトのワイヤーフレームは、3部構成にしましょう。どのような3部構成にするのか、詳しく解説します。

Webサイト構成要素①ファーストビュー

ファーストビューとは、検索結果で出てきたページをクリックし開いたときに、パソコンやスマホの画面で最初に表示されるエリアのことです。

ファーストビューで必要情報をすべて伝えきることは不可能でしょう。

そのため、Webページをスクロールしてもらうために、ターゲットに響く訴求を見つけ、魅力的なファーストビューを作成する必要があります。

Webサイト構成要素②本文

本文は、ファーストビューに続く、コンテンツの中核を担う部分です。

商品やサービスの紹介や解説を、わかりやすく丁寧に記載しましょう。文章は簡潔に、いかにターゲットのニーズを満たしているかを伝えるとより効果的です。

Webサイト構成要素③クローズ&CTA

クローズ文は、Webページの内容を締めくくり、訪問者に次のアクションを促す部分です。

CTAは「Call To Action」の略語で、「お問い合わせ」や「資料請求」などの行動（アクション）を起こすためのボタンなどがあります。ターゲットが次のアクションを起こしたいと思った時に、ストレスにならないようわかりやすい場所に設置しましょう。

三部構成は、ファーストビューで心を捉えて、本文で詳細を伝え、クローズ&CTAで訪問者から自社へアプローチしてもらうための動線です。

Webサイト構成における重要なポイント

Webサイト構成における、おさえておくべき重要なポイントは3つあります。

Webサイト構成ポイント①階層を深くしすぎない

Webサイトを構成する時は、階層を深くしすぎてはいけません。

各カテゴリーの階層は、基本的に3階層以内にとどめておきましょう。あまり深くなりすぎると、訪問者がWebサイト内で情報を探しにくくなります。

Webサイト構成ポイント②1ページ1テーマ

Webサイトの構成の際は、1ページに対して1テーマを記載することを意識してください。

1ページ内に複数の情報があると、訪問者は混乱します。訪問者へ適切に情報を伝えるために、「1ページ1テーマ」をベースにWebサイトを構成しましょう。

Webサイト構成ポイント③動線を意識する

Webサイトを構成する時は、訪問者の「動線」を意識しましょう。

訪問者がどのようにサイト内を移動するかを意識することにより、訪問者にとって最適にWebサイト内の情報を配置できます。欲しい情報へストレスなくアクセスできることは、Webサイトを構成する上で非常に重要なポイントです。

BtoBのWebサイト構成で必要となる基本ページ一覧

BtoBサイトを作る場合、そろえておきたいのは以下の10項目です。

・トップページ
・サービスページ
・ストレングス（強み）ページ
・導入事例ページ
・よくある質問ページ
・お知らせページ
・料金ページ
・ブログ
・お役立ち資料
・お問い合わせフォーム

これらがそろっていれば、Webマーケティングで成果がでる「BtoBサイトの型」はできたと言えます。それぞれのページの役割について、解説します。

Webサイト構成で必要なページ①トップページ

トップページの役割は「このサイトは何のサイトか」「何のサービスを行っているのか」を明確に伝えることです。

ユーザーは、はじめからトップページに着地するケースばかりではありません。サイト内の他ページに着地し、トップページに遷移してくるケースも多くあります。どんなユーザーが見ても「ここは何のサイトなのか」をすぐにわかるようにするのが、トップページの役割なのです。

また、トップページを見て「もっと知りたい」と思ったユーザーに対して、適切な導線（リンク）を提示するという役割もあります。

▼トップページについて、詳しくはこちら
BtoBサイト制作の型・トップページ編

▼あわせてチェックしたい、グローバルナビゲーションについてはこちら
BtoBサイト制作の型・グローバルナビゲーション編

Webサイト構成で必要なページ②サービスページ

サービスページは、「サービスコンセプト」と「何ができるサービスなのか」を網羅的に説明するページです。

• サービスについて、より詳しく知りたいユーザーのニーズに応える
• 製品・サービスが「誰の、どんな問題を、どう解決してくれるのか」全体像を知ってもらう

という役割を持っています。

▼サービスページについて、詳しくはこちら
BtoBサイト制作の型・サービスページ編

Webサイト構成で必要なページ③ストレングス（強み）ページ

ストレングスページとは、サービスの強みについて紹介するページです。ユーザーの悩みをどう解決できるのか、他社サービスとの違いなどを説明します。

• 競合サービス・他社との差別化ポイントを伝え、問い合わせを後押しする
• サービスページで全体像を知ったユーザーに、さらに深く知ってもらう

という役割があります。サービスページは網羅的な説明ページ、ストレングスページは悩み解決のために特化した説明ページ、という違いがあります。

▼ストレングスページについて、詳しくはこちら
BtoBサイト制作の型・強みアピール編

Webサイト構成で必要なページ④導入事例ページ

導入事例ページは、商品・サービスを導入した顧客が、活用して満足している様子を紹介するページです。

顧客は、「自社のニーズに合っているか」を判断するための事実を求めています。実際のユーザーの声は、客観的で信頼性の高い情報として受け入れやすいものです。BtoBサイトで最も読まれているコンテンツは「機能紹介」と「導入事例」とも言われており、必ず用意しておきたいページになります。

▼導入事例の書き方については、以下の記事で解説しているので、ぜひ参考にしてみてください。
→効果的な導入事例の書き方とは？弊社の構成テンプレートで解説

Webサイト構成で必要なページ⑤よくある質問ページ

よくある質問ページは、ユーザーの疑問を解消し、サービス理解を深めてもらうページです。商談時によく聞かれる質問をいくつかに分類し、Q&A形式で掲載するとよいでしょう。

よくある質問ページを作るメリットは、以下のようなものがあります。

• Q&A形式なので、的確にポイントを伝えることができる
• ユーザーに伝えたいことを、さりげなく自然に掲載できる
• 安心感を与えることができ、商品・サービスを購入してくれる可能性が高まる
• 関連ワードがSEO（検索ワード対策）にも良い影響を及ぼす
• スタッフのサポートツールとしても活用できる

Webサイト構成で必要なページ⑥お知らせページ

お知らせページは、商品・サービスに関連するニュースを掲載するページです。ニュースの種類としては、セミナー・イベント開催／プレスリリース／メディア掲載／導入リリース／製品情報
などがあります。

お知らせページがあることで

• 商品・サービスが更新されている印象を与えられる
• 「最新の状態の情報を見ている」という安心感、信頼感につながる

というメリットがあります。

逆に、更新日が古いと不安につながるので、こまめな更新が難しい場合は「設置をしない」という選択肢もあるでしょう。

Webサイト構成で必要なページ⑦料金ページ

料金ページは、サービスプランや価格を掲載するページです。価格を公開することで、見込み顧客に社内で検討を進めてもらいやすくなります。

企業によっては価格を公表したくないこともあると思いますが、そのような場合でも「プラン・料金を知りたい」というニーズに応えるページは用意しておくことをオススメします。

例えば、「料金について、詳細はお問い合わせください」と案内があるだけでも、「知りたい」というニーズが達せられ、離脱せずにお問い合わせにつながる可能性があるからです。

Webサイト構成で必要なページ⑧ブログ

ブログでは、自社製品・サービスの「将来の顧客」であるユーザーに向けて、情報発信をすることができます。

ユーザーが興味をもちそうな情報・キーワードを含んだブログ記事を書くことで、オーガニック検索から流入してくるユーザーとの接点を増やすことができます。

BtoCサイトのブログでは、月100本程度記事を公開することも珍しくありません。ですが、BtoBサイトのブログでは、専用メンバーを確保することが難しく、それほど記事更新できないケースも多いでしょう。まずは、週1本、月4本程度でも発信を続けることで、自社に「コンテンツ」という資産を持つことができます。無理のない範囲で、始めてみることをオススメします。

Webサイト構成で必要なページ⑨お役立ち資料

ブログを読んでいるユーザーは、すぐに「お問合わせ」に至るケースは少なく、まずは情報収集としてサイトに訪れるケースが多いです。そこで、「お問い合わせ」の前のステップとして、ユーザーにとって役立つ情報（ホワイトペーパー）を資料として用意しておきましょう。資料をダウンロードしてもらう際に顧客情報を取得することで、将来顧客になるかもしれないユーザーとつながることができます。

お役立ち資料を用意することで

• 専門性をアピールでき、信頼を勝ち取れる
• 顧客の課題解決ヒントを与えると同時に、自社をアピールできる
• 将来顧客となりえる「潜在顧客」のリストがたまる

といったメリットがあります。

ホワイトペーパーについては「ホワイトペーパーについてよくある10の疑問」で解説しています。

Webサイト構成で必要なページ⑩お問い合わせフォーム

お問い合わせフォームは、コンバージョンの直前で、何かしらの情報を書いてもらうためのページです。ゴール（コンバージョン）に近い場所なので、改善した時のコンバージョンへのインパクトが大きいです。

例えば、

　Ａ．トップページからサービス詳細ページへの遷移率を10％改善
　Ｂ．入力フォームからの遷移率を10％改善

では、コンバージョンへのインパクトが違います。フォームをいったん設置したあとは、アクセス解析をしながら、改善、最適化していきましょう。フォームの最適化（EFO）については、「EFOをはじめるときの、5つのステップ」で解説しています。

Webサイトの構成作成ツール

Webサイトの構成を作成するためのおすすめツールを紹介します。

Webサイト構成作成ツール①Excel

マイクロソフト社が出している計算ソフト「Excel」。Excelはセルと呼ばれる四角の枠の中に情報を記載でき、図形を使用する必要がありません。

図形を使用すると修正や追加などに手間がかかりますが、Excelは比較的簡単に操作可能です。情報量が多いWebサイトの構成時は、特にExcelをおすすめします。

Webサイト構成作成ツール②PowerPoint

マイクロソフト社が出しているスライド作成ソフト「PowerPoint」。

PowerPointは、図形や補助線などを活用し視認性の高い構成が作成可能です。描写範囲がExcelに比べると狭いので、階層やページの少ないWebサイトの構成におすすめです。

Webサイト構成作成ツール③Adobe XD

Adobe社が出しているUI/UXのためのデザインツール「Adobe XD」。

Adobe XDは、ワイヤーフレーム、デザインカンプ、プロトタイプなども作成できるWebサイト制作におすすめのツールです。複数名と共有しながら作業できるので、チームで制作に取り組む際はぜひAdobe XDを活用してみてください。

BtoBのWebサイト制作ならferret One

弊社のferret OneはBtoBに特化したWebサイトを、その後各社がマーケティングしやすいCMSで納品します。​​​​​​BtoBマーケのプロがサイト運用者の視点で開発した圧倒的に使いやすいCMSが魅力です。

■BtoBに特化したWebサイトを作りたい
ferret Oneは長年の実績からBtoBマーケティングのノウハウが豊富。サイトマップ、ワイヤーフレームといったWebサイト構成について、リード獲得・育成の成果実証済みの成功の型でWebサイトを制作します。

■ノーコードで、とにかく簡単に、ページ作成・更新したい
「Wordpressや他社のCMSより断然使いやすい」との声を多くいただいています。

サービスサイトやLP、セミナー集客、資料ダウンロードなど、BtoBのノウハウを反映したテンプレートも多数用意されていますので、新規作成も簡単です。

Webサイト制作後の成果にこだわりたいBtoB事業者様は、ぜひferret OneでWebサイト制作・運用をご検討ください。

>ferret Oneサービス紹介資料のダウンロード【無料】はこちら

BtoBのWebサイト構成の基本を把握しよう

以上、BtoBの製品・サービスサイトを作る際に、そろえておきたいページについて解説しました。

• Webサイト構成には、サイトマップとワイヤーフレームがある
• Webサイト構成は、ターゲットに合わせた内容にする

いろいろなBtoBサイトを見ていると、ある程度この型に沿って作られているように思います。自社でサイト制作をされる際は、ぜひ参考にしてみてください。

BtoBサイトの作成・リニューアルをご検討中ならferret OneのCMSがおすすめです。

Webサイトをパワポ感覚で見たまま編集できるので、日々のちょっとした更新や施策実行を自分ですぐに行えます。ご興味のある方はぜひ資料をご覧ください。

>ferret Oneサービス紹介資料のダウンロード【無料】はこちら

​​​​​​​▼あわせて読みたい「サイト制作の型」

BtoBサイト制作の型・トップページ編

BtoBサイト制作の型・サービスページ編

BtoBサイト制作の型・グローバルナビゲーション編​​​​​​​

BtoBサイト制作の型・強みアピール編​​​​​​​​​​