この記事でわかること
- サイトマップは「ページ一覧」ではなく、訪問者の動きを考える設計図だとわかる
- 新規サイトとリニューアルで、情報設計の進め方がどう違うかがわかる
- AIでたたき台を作れる範囲と、人が判断する範囲がわかる
Webサイトのリニューアルを検討し、複数の制作会社から提案書を取り寄せたとします。提案書を見比べていると、多くの場合「サイトマップ」や「ワイヤーフレーム」という言葉が出てきます。
サイトマップはサイト全体の構成図、ワイヤーフレームは各ページのページ内の構成図です。なんとなく意味はわかっても、なぜその工程が重要なのかまでは見えにくいかもしれません。
この記事では、Webサイト制作における情報設計の考え方を整理します。ページをどう並べるかだけでなく、訪問者がどのように動き、どこで問い合わせや資料請求につながるのかを考える工程です。
Webサイト制作の全体像はAIでWebサイトを作る完全ガイドで扱いました。前段の企画・要件定義はAIでWebサイトを作る前に考えることで取り上げています。この記事では、その次の段階である情報設計を深掘りします。
サイトマップを考える前に、発信全体での役割を整理する
情報設計と聞くと、まずサイト内の構造をどう作るかを考えがちです。ただ、その前に、自社の情報発信全体の中でWebサイトがどんな役割を持つのかを整理しておく必要があります。
自社の発信は、Webサイトだけで完結しているわけではありません。SNS、メルマガ、Googleビジネスプロフィール、名刺、パンフレット、紹介など、訪問者との接点は複数あります。
最新情報はSNSで伝えるのか。詳しいサービス説明はWebサイトに集約するのか。実績や事例はどこまで載せるのか。こうした役割を決めないまま設計を始めると、Webサイトに情報を詰め込みすぎて、訪問者が迷いやすくなります。
まずは、Webサイトで担う情報と、ほかの発信で担う情報を分けて考えます。そのうえで、サイト内の構造を設計していきます。
サイトマップは「訪問者の動き方」を考えるためのもの
サイトマップというと、トップページの下にカテゴリがあり、その下に個別ページが並ぶツリー図を思い浮かべる方が多いかもしれません。見た目としてはその通りですが、重要なのはページの並びそのものではありません。
本来のサイトマップは、訪問者がどこから入り、どのページを見て、どこに進んでほしいのかを整理するためのものです。
たとえば、「会社概要」をメニューの先頭に置くのか、「サービス」を先頭に置くのかで、訪問者の目に入る順番は変わります。「事例」をサービスページの下に置くのか、独立したページにするのかでも、読み進め方は変わります。
ページを並べる前に、訪問者の動きを言葉にしてみる工程が要ります。誰が、どこから来て、何を知り、最終的にどの行動を取るのか。この流れを考えることで、サイトマップは単なるページ一覧ではなく、導線を考える設計図になります。
新規サイトでは、仮説で訪問者の動きを描く
新規でWebサイトを作る場合、まだアクセスデータがありません。そのため、訪問者の動きは仮説で組み立てることになります。
AIでWebサイトを作る前に考えることで整理したターゲットや目的をもとに、どのような流れでサイトを見てもらうかを考えます。
どこから流入するのか。最初に見るページはどこか。次に知りたくなる情報は何か。最終的に問い合わせ、資料請求、予約など、どの行動につなげたいのか。
この一連の流れを想定し、ページ構成に反映します。
新規サイトの場合、この設計はあくまで仮説です。最初から完璧な構成を作ろうとする必要はありません。公開後に実際のアクセス状況を見ながら、ページの追加や導線の見直しを行う前提で設計します。
リニューアルでは、GA4の実データを見てから設計する
既存サイトをリニューアルする場合は、想像だけで設計を進めないことが大切です。すでにサイトがあるなら、実際に訪問者がどう動いているかを確認できます。
GA4（Google Analytics 4）やSearch Consoleを見ると、次のようなことがわかります。
- どのページが多く見られているか
- どこから流入しているか
- どんな検索語句で来ているか
- どのページで離脱が多いか
- 訪問者がどの順番でページを見ているか
「見てほしいページ」と「実際に見られているページ」は、必ずしも一致しません。データを見ずにサイト構成を変えてしまうと、よく見られていたページへの導線をなくしてしまうことがあります。
特に、検索から流入しているページや、問い合わせ前によく見られているページは注意が必要です。デザインを新しくするだけのつもりでも、ページ構成やURL、内部リンクを変えることで、成果につながっていた流れを崩してしまう場合があります。
ただし、GA4のデータを正しく読み解くには、ある程度の知識と時間が必要です。社内で判断が難しい場合は、外部の力を借りる選択肢もあります。アクセス分析の進め方はAIでWebサイトのアクセス分析で扱っています。
重要なページは、目立つ位置に置く
訪問者は、サイトの中を細かく探してくれるとは限りません。問い合わせや事例など、見てもらいたい重要なページは、グローバルメニューに入れる、トップページの目立つ位置に置くなど、自然と目に入る場所に配置します。
階層を作りすぎないことも大切です。カテゴリを細かく分けすぎると、訪問者も管理する側も全体像をつかみにくくなります。10〜20ページ規模のサイトであれば、トップ・主要ページ・個別ページの2〜3階層程度に収めるのが扱いやすい形です。
また、導線はメニューだけで作るものではありません。本文中の内部リンクも、訪問者の動きを支える重要な要素です。
サービス紹介を読んだ人は、次に事例を見たくなるかもしれません。事例を読んだ人は、料金や問い合わせ方法を知りたくなるかもしれません。その流れに合わせて、本文中に関連ページへのリンクを置きます。
リンクがないページや、次に進む先がわからないページは、そこで訪問者の動きが止まりやすくなります。ページを作って終わりではなく、ページ同士をどうつなぐかまで設計に含めます。
ワイヤーフレームで、各ページの骨組みを決める
サイトマップがサイト全体の構造を整理するものなら、ワイヤーフレームは各ページの中身を整理するものです。
どこに見出しを置くのか。どの順番で説明するのか。問い合わせボタンをどこに置くのか。写真や事例、料金、よくある質問をどの位置に入れるのか。デザインに入る前に、ページ内の要素と流れを決めておきます。
ワイヤーフレームを作る目的は、見た目を固めることではありません。ページの役割と、訪問者に取ってほしい行動を明確にすることです。
全ページ分を細かく作る必要はありません。まずは、トップページ、主要なサービス紹介ページ、問い合わせ前によく見られるページなど、重要なページに絞って作るとよいです。
この骨組みがあると、デザインや実装の段階で迷いが減ります。文章を作る人、デザインする人、確認する人の認識もそろえやすくなります。
AIでたたき台は作れる。最終判断は人がする
サイトマップやワイヤーフレームのたたき台は、AIでも作れます。前段の企画・要件定義で整理したターゲット、目的、サービス内容、自社の強みなどをAIに読み込ませて、構成案を出してもらうことは十分可能です。
たとえば、次のように依頼できます。
以下の内容をもとに、Webサイトのサイトマップ案を作成してください。重要なページは、メニューやトップページの目立つ位置に配置する構成にしてください
このように依頼すると、一般的な構造としては使いやすい案が返ってきます。他社サイトのURLを参考として読み込ませ、構成の傾向を整理することもできます。
ただし、AIが出した案をそのまま採用するのは危険です。
自社の訪問者が実際にどのような順番で情報を見たいのか。問い合わせ前に不安に感じることは何か。福島や岩手のお客様と首都圏のお客様で、確認したい情報に違いはあるのか。こうした細かな判断は、過去の問い合わせ内容や商談でのやり取り、現場で聞いてきた声がなければ見えてきません。
AIは、一般的な構造を作るのは得意です。一方で、自社ならではの事情や、実際のお客様の迷いまでは自動で判断できません。
AIの案は、考えるための出発点として使います。最終的にどのページを残し、どの導線を重視し、どの順番で見せるかは、人が判断する必要があります。
まとめ
情報設計は、Webサイト制作の中でも後戻りがしにくい工程です。ここで方向を間違えると、デザインや文章を整えても、訪問者が動きにくいサイトになってしまいます。
まずは、Webサイトが自社の発信全体の中でどんな役割を持つのかを整理します。そのうえで、訪問者がどこから入り、どのページを見て、どこに進んでほしいのかを考えます。
新規サイトでは仮説をもとに設計し、公開後に見直します。リニューアルでは、GA4やSearch Consoleのデータを見て、今ある導線を壊さないように確認します。
AIは、サイトマップやワイヤーフレームのたたき台を作るうえで役立ちます。ただし、その案が自社の訪問者に合っているかを判断するのは人です。
まずは、自社サイトの導線を紙に書き出してみてください。トップページからどこへ進めるのか。重要なページは目に入りやすい位置にあるか。問い合わせ前に見るべきページへ自然につながっているのか。
書き出してみるだけでも、足りないページやつながっていない導線が見えてきます。情報設計は、そこから始められます。
Q&A
Q. サイトマップやワイヤーフレームは、必ず制作会社と一緒に作る必要がありますか？
A. 必ず制作会社と一緒に作る必要はありません。AIでたたき台を作り、自社で整理することもできます。ただし、訪問者の動きを考える部分や、GA4のデータを構造に反映する部分には、経験や時間が必要です。たたき台は自社で作り、最終的な構造は制作会社と相談する、という進め方もあります。どこまで自社で行い、どこから外部に相談するかを最初に決めておくと、依頼範囲や見積もりも整理しやすくなります。
Q. 今のサイトのGA4をまだ見たことがありません。どこから確認すればよいですか？
A. 最初は、「レポート」の中にある「エンゲージメント」から「ページとスクリーン」を見てみます。どのページが多く見られているかを確認できます。次に、「集客」の中にある「ユーザー獲得」を見ると、検索やSNSなど、どこから訪問者が来ているかがわかります。まずはこの2つを見るだけでも、今のサイトでどのページが入口になっているのか、どのページがよく読まれているのかをつかめます。