Webサイトの役割と設計：集客の受け皿をつくる｜Webマーケティング概論 第4回

サイトの4つの役割

会社のWebサイトには、主に次の4つの役割があります。

この4つは、カスタマージャーニーの段階とも対応しています。初めて来た人はまず①②を見て、比較・検討の段階では③を探し、最後に④で行動します。自社のサイトに、この4つがそれぞれそろっているかを確認してみましょう。

情報設計：迷わせない構造をつくる

サイトの使いやすさを左右するのが、「どのページを、どんな階層で、どうつなぐか」という構造です。これを情報設計（インフォメーション・アーキテクチャ）と呼びます。

基本は「木」の形

多くの会社サイトは、トップページを根元にした木のような構造になっています。

• トップページ
• サービス（サービスA／サービスB／料金）
• 導入事例（事例一覧／個別の事例）
• お役立ち情報（記事一覧／個別の記事）
• 会社情報（会社概要／代表あいさつ／採用）
• お問い合わせ

この形で大切なのは、どのページからでも、2〜3回のクリックで目的のページに行けることと、今どこにいるかが分かることです。ページの上部に「トップ ＞ サービス ＞ サービスA」のような道しるべ（パンくずリスト）を置くと、訪問者も検索エンジンもサイトの構造を理解しやすくなります。

入口はトップページとは限らない

ここで一つ、大切な事実があります。訪問者の多くは、トップページからではなく、検索や広告、SNSから直接、個別のページに入ってきます。ブログ記事から入る人もいれば、事例ページから入る人もいます。

だから、すべてのページが「最初に見られるページ」になりうると考えて設計します。どのページにも、「この会社は何をしているのか」「次にどこを見ればよいか」「どうやって問い合わせるか」が分かる要素（ヘッダーのメニュー、関連ページへのリンク、問い合わせボタン）を置いておきましょう。

主なページに載せるもの

トップページ：3秒で「誰の、何のための会社か」を伝える

訪問者は、最初の画面を見て数秒で「読むか、帰るか」を決めると言われます。トップページの最初の画面（ファーストビュー）では、次の3つが伝わることを目指します。

1. 誰のための会社・サービスか（ペルソナ）
2. 何をしてくれるのか、何が得られるのか（価値）
3. 次に何をすればよいか（ボタン）

よくある失敗は、会社のスローガンやきれいな写真だけで、何の会社か分からないトップページです。「未来を、ともに。」というコピーは美しいですが、初めて来た人には何も伝わりません。

サービスページ：疑問に先回りして答える

サービスページには、ペルソナが抱く疑問に、聞かれる前に答えておきます。「何ができるのか」「ほかと何が違うのか」「いくらかかるのか」「どう進むのか」「どんな会社が使っているのか」。料金を載せないと決める場合でも、「料金の目安」や「料金が決まる要素」を書いておくと、問い合わせのハードルが下がります。

事例・お客様の声：「自分ごと」にしてもらう

事例は、比較・検討の段階で最も読まれるページの一つです。業種や規模、課題ごとに分けておくと、訪問者は「自分に近い事例」を見つけやすくなります。数字の成果だけでなく、「導入前にどんな悩みがあったか」を書くと共感されやすくなります。

問い合わせ・申し込み：入力の負担を最小にする

最後の一歩で離脱が多いのが、問い合わせフォームです。項目が多すぎる、必須項目が分かりにくい、送信後に何が起きるか分からない、といった点が離脱の原因になります。フォームの改善は第11回で詳しく扱います。

スマートフォンと表示速度

今や多くのサイトで、スマートフォンからの訪問が大きな割合を占めます。パソコンで見てきれいなだけでなく、スマートフォンで読みやすく、押しやすいかを必ず確認しましょう。Googleも、主にスマートフォン向けのページの内容をもとにインデックスと評価を行う「モバイルファーストインデックス」に移行しています。

表示の速さも重要です。ページの表示が遅いと、内容を見る前に帰ってしまう人が増えます。画像のサイズを小さくする、不要な機能を減らすといった基本的な対策で、改善できることが多くあります。

よくある誤解：デザインを新しくすれば成果が出る

「サイトが古いからリニューアルしたい」という相談はとても多いのですが、見た目を新しくしただけでは成果が変わらないことも少なくありません。成果を左右するのは、ここまで説明した「誰に、何を、どの順番で伝え、どう行動してもらうか」という中身と構造です。リニューアルの前に、今のサイトのどこで人が離れているのかを解析で確かめると、無駄な作り直しを避けられます。

ケーススタディ：「会社案内」から「顧客の入口」へ

ある部品加工の町工場（従業員30名）のサイトは、トップページに社長のあいさつと工場の外観写真があり、その下に「会社概要」「設備一覧」「アクセス」が並ぶ、いわば紙の会社案内をそのままWebにした形でした。新しい取引先からの問い合わせは、年に数件しかありませんでした。

このサイトを、4つの役割と情報設計の考え方で見直すと、次のような課題が見えてきます。

さらに、購買担当者は「アルミ 切削 試作 短納期」のような具体的な言葉で検索することが多いため、加工の種類や素材ごとにページを分けると、検索からの入口が増えます。トップページの最初の画面は、「試作1個から量産まで。〇〇加工の相談はこちら」のように、誰の何のための会社かが一目で分かる言葉に変えます。

サイトを「会社が言いたいことを並べる場所」から、「顧客が知りたいことに答え、次の一歩を用意する場所」に変える。これが、受け皿としてのサイト設計の基本です。

もう一歩深く：サイトマップとワイヤーフレーム

サイトを新しくつくるときやリニューアルするときは、いきなりデザインから始めず、まず2つの設計図をつくるのが一般的です。1つはサイトマップで、どんなページがあり、どうつながっているかを木の形で書いたものです。もう1つはワイヤーフレームで、各ページにどんな情報を、どの順番で載せるかを、線と四角だけの簡単な図で表したものです。この2つの段階で、ペルソナの目線に立って「この順番で読めば疑問が解けるか」を確かめておくと、デザインに入ってからの手戻りが大きく減ります。

この記事の監修者に相談できます

監修者の田中磨生が代表を務める株式会社Abinで、ご相談をお受けしています。

相談無料ツギノテ編集部に相談する→

サイトは「公開してからが本番」

サイトは、完成した時点がゴールではありません。紙のパンフレットと違い、Webサイトは公開した後に、反応を見ながら何度でも直せます。むしろ、直し続けることで成果が上がっていくメディアです。

公開後に続けたいことは、大きく3つあります。

1. 数字を見る：どのページがよく見られ、どこで人が帰っているか、問い合わせはどのページから来ているかを、月に一度は確認する（第12回）。
2. 情報を足す：新しい事例、よくある質問、お知らせなどを追加する。情報が更新されているサイトは、訪問者にも「活動している会社だ」という安心感を与えます。
3. 小さく試す：ボタンの文言、見出しの言葉、情報の順番などを少しずつ変え、反応が良くなったかを比べる（第11回のCRO）。

そのためにも、制作会社に頼まなくても社内で文章や画像を更新できる仕組み（CMS）を選んでおくことが大切です。更新のたびに外注が必要なサイトは、次第に更新されなくなり、情報が古くなっていきます。

よくある失敗とその避け方

実務ではこう使う

自社サイトを、次のチェックリストで点検してみましょう。

1. トップページの最初の画面で、「誰の、何のための会社か」が分かるか
2. 4つの役割（信頼・理解・納得・行動）に対応するページがそろっているか
3. 記事や事例など、どのページからでも問い合わせへの道があるか
4. スマートフォンで見て、文字が読みやすく、ボタンが押しやすいか
5. 問い合わせフォームの項目は必要最小限か

制作やリニューアルを外部に頼む場合は、デザインの好みよりも、これらの考え方を共有できるかで選ぶのがおすすめです。参考：ホームページ制作会社おすすめ比較、ホームページ制作の成功事例

この回のまとめ

• Webサイトは、すべての集客施策の「受け皿」。サイトが整うと、集客の成果が底上げされる。
• サイトの役割は、信頼を得る・理解してもらう・納得してもらう・行動してもらう、の4つ。
• 構造は木の形で、2〜3クリックで目的のページへ。どのページも「最初に見られるページ」になりうる。
• トップページは数秒で「誰の、何のための会社か」を伝え、サービスページは疑問に先回りして答える。
• スマートフォンでの見やすさと表示速度は、成果の前提条件。見た目だけのリニューアルでは成果は変わりにくい。

確認テスト

次回予告

次回は、サイトに人を連れてくる代表的な方法「SEO」の基本を学びます。検索エンジンがどうやってページを見つけ、並べているのかという仕組みから、SEOで取れる成果と取れない成果までを整理します。

参考資料

• Google 検索セントラル「モバイル ファースト インデックスに関するおすすめの方法」（2026年11月12日確認）
• Google 検索セントラル「パンくずリスト（BreadcrumbList）の構造化データ」（2026年11月12日確認）