はじめに
「Webサイトを作りたいけれど、どのページを用意すればいいの？」
「トップページや会社概要、問い合わせページは必要だと分かるけれど、どんな順番で配置すればいいの？」と迷っていませんか。
サイト制作を始めようとしても、必要なページを洗い出したり、ページ同士のつながりを決めたりする段階で手が止まってしまうことがあります。
この記事では、Webサイトの基本的なページ構成例から、構成を決める具体的な作り方、作成時に確認したいポイントまで順を追って説明していきます。
Webサイトのページ構成とは？
Webサイトのページ構成を考えるときは、サイト全体のページ構成と、1ページごとの情報配置を分けて整理することが大切です。
ここでは、サイト全体を整理する「サイトマップ」と、各ページのレイアウトを整理する「ワイヤーフレーム」に分けて説明します。
サイト全体の構成は「サイトマップ」で整理する
サイトマップは、Webサイトに必要なページと、それぞれのつながりを整理するために使います。
トップページから下層ページまでの階層をまとめておくと、サイト全体の構成が分かりやすくなります。
公開前に作成しておけば、必要なページの抜けや重複にも気づきやすいでしょう。
各ページ内の構成は「ワイヤーフレーム」で整理する
ワイヤーフレームは、見出しや画像、文章、ボタンなど、ページ内の配置を整理するために使います。
情報をどの順番で見せるかを決めておくことで、完成後のレイアウトをイメージしやすくなります。
制作前に作成しておくと、必要な情報を確認しながらスムーズに進められるでしょう。
ワイヤーフレームを実際にどう作ればよいか迷った場合は、基本的な作り方や必要な要素を確認しておくと進めやすくなります。
▶ Webサイトのワイヤーフレームとは？作り方や基本構成を解説
Webサイトの基本的なページ構成例
Webサイトには、訪問者が必要な情報を探しやすくするために、目的に応じたページを用意します。
ここでは、企業サイトでよく使われる6つのページを取り上げ、それぞれの役割を順に説明します。
トップページ
トップページは、Webサイト全体の内容を案内する入口となるページです。
会社やサービスの概要を掲載し、商品・サービスや会社概要、お知らせなどの主要ページへ移動できるようにします。
訪問者が目的の情報を見つけやすいよう、分かりやすい導線を意識して構成しましょう。
商品・サービスページ
商品・サービスページは、提供している商品やサービスについて詳しく紹介するページです。
特徴や料金、利用方法などを掲載し、申し込みや問い合わせを検討するために必要な情報をまとめます。
複数の商品やサービスがある場合は、内容ごとにページを分けると探しやすくなります。
会社概要ページ
会社概要ページは、会社名や所在地、代表者名、設立年月日などの基本情報を掲載するページです。
会社について知りたい訪問者が必要な情報を確認できるよう、項目ごとに分かりやすく整理します。
事業内容や連絡先なども必要に応じて掲載しておくとよいでしょう。
実績・事例ページ
実績・事例ページは、これまでに提供した商品やサービスの実績を紹介するページです。
実施した内容や案件の概要などを掲載すると、具体的なサービス内容をイメージしやすくなります。
実績が複数ある場合は、1件ずつ分けて紹介すると内容を確認しやすいでしょう。
お知らせページ
お知らせページは、企業からの最新情報を訪問者へ伝えるためのページです。
新商品やサービス、休業日、イベントなどの情報を、公開日やタイトルとともに掲載します。
新しい情報を定期的に追加することで、訪問者が最新の動きを確認しやすくなります。
お問い合わせページ
お問い合わせページは、訪問者が企業へ質問や相談を送るためのページです。
氏名やメールアドレス、問い合わせ内容など、回答に必要な項目を分かりやすく用意します。
送信後は完了画面を表示し、正常に受け付けられたことを確認できるようにしましょう。
Webサイトのページ構成を作る手順
Webサイトのページ構成を作るときは、いきなりページを配置するのではなく、サイトで達成したい目的から必要なページを整理していきます。
ここでは、目的の設定からページの洗い出し、分類、階層の決定まで順を追って説明します。
サイトの目的を決める
サイトを作る前に、まずWebサイトで達成したい目的を決めます。
「問い合わせを増やす」などの目的に加えて、件数のような確認できる数値も設定すると、必要なページを考えやすくなります。
最初に目的を明確にしておけば、サイトに必要な情報も整理しやすいでしょう。
必要なページを洗い出す
目的が決まったら、訪問者が目的を達成するために必要なページを書き出します。
それぞれのページに掲載する情報や役割を確認し、目的に合わないページは候補から外していきます。
必要なページをあらかじめ整理しておくと、制作途中での抜けも防ぎやすくなります。
関連するページを分類する
必要なページを洗い出したら、掲載する情報や役割が近いページをグループごとにまとめます。
たとえば、商品に関するページや会社情報に関するページなど、内容に合わせて分類すると関係性が分かりやすくなります。
分類しておくことで、次にページの階層を決める作業も進めやすくなるでしょう。
ページの階層を決める
ページを分類したら、トップページを起点に2階層目、3階層目と配置を決めていきます。
目的のページまで何度も移動する構成になっていないか確認し、必要以上に階層が深くならないよう調整します。
最後にページ同士のつながりも確認し、訪問者が迷わず移動できる構成に整えましょう。
各ページ内の構成を決めるポイント
各ページの構成を決めるときは、訪問者がページを開いてから必要な情報を理解し、次の行動へ進める順番を考えることが大切です。
まずファーストビューでページの内容を伝え、その後にメインコンテンツを分かりやすい順番で配置します。
最後に問い合わせや申し込みにつながるCTAを適切な位置に設置し、ページ内の情報を整理していきます。
ファーストビューでページの内容を伝える
ファーストビューには、ページを開いたときに内容が伝わるよう、タイトルや要点を分かりやすく配置します。
訪問者が「何について説明しているページなのか」をすぐに理解できれば、目的の情報があるか判断しやすくなります。
タイトルと実際の内容がずれないよう、掲載する情報もそろえておきましょう。
メインコンテンツを分かりやすい順番に並べる
メインコンテンツは、訪問者が上から自然に読み進められる順番で配置します。
最初に概要を伝えてから詳しい情報へ進むなど、内容を理解しやすい流れに沿って見出しや本文を並べましょう。
関連する情報を近くにまとめておくと、必要な内容も探しやすくなります。
問い合わせや申し込みにつながるCTAを配置する
CTAは、問い合わせや申し込みなど、訪問者に次の行動を促したい場所へ配置します。
内容を確認したあとなど、行動を決めやすい位置にボタンを置くと、次のページへスムーズに進みやすくなります。
「お問い合わせ」「申し込む」など、クリック後の行動が分かる文言にしておきましょう。
CTAをどこに置けばよいか迷う場合は、配置場所やボタンの作り方もあわせて確認しておきましょう。
▶WebサイトのCTAとは？効果的な配置場所や作り方を解説
Webサイトのページ構成で注意するポイント
Webサイトのページ構成を決めるときは、訪問者が必要な情報へ迷わず移動できる状態にすることが大切です。
ここでは、ページの階層、ページ間の導線、ページ数の3つに分けて注意点を説明します。
ページの階層を深くしすぎない
ページの階層は、トップページから目的のページまでの移動回数を考えながら決めます。
階層が深くなりすぎると目的の情報へたどり着きにくくなるため、関連するページはできるだけ近い階層にまとめましょう。
構成を決めたあとは、実際に各ページまでスムーズに移動できるか確認します。
目的のページへ移動しやすい導線を作る
訪問者が必要な情報へ進めるよう、関連するページへのリンクを分かりやすい位置に配置します。
リンクには移動先の内容が伝わる文言を使うと、クリックする前に何が確認できるのか判断しやすくなります。
実際にページ間を移動しながら、途中で導線が途切れていないか確認しましょう。
必要以上にページを増やさない
新しいページを追加するときは、既存のページにまとめられないかを確認します。
似た内容を別々のページにすると情報が分散し、訪問者が必要な情報を探しにくくなることがあります。
ページを追加する場合は、既存ページと内容が重複していないか確認してから作成しましょう。
まとめ
Webサイトのページ構成は、サイト全体を整理する「サイトマップ」と、各ページの内容を整える「ワイヤーフレーム」に分けて考えると分かりやすくなります。
まずサイトの目的から必要なページを洗い出し、関連するページをまとめながら、階層や導線を整えていきましょう。
ページ数を増やしすぎず、訪問者が目的の情報へスムーズにたどり着けるか確認することも大切です。
制作前に構成をしっかり整理しておけば、訪問者にとって分かりやすく、制作も進めやすいWebサイトにつながります。
