Webマーケティングにおいて、サイト運営は重要な施策です。ホームページを制作するにあたって、構成が重要となります。
サイト構成の重要性を理解しないままホームページを制作しても、望む目的は達成できません。
「自社ホームページを作りたいけど、Webサイトの構成の決め方がわからない」
「Webサイトの構成作りを基本から知りたい」
このように考えるWeb担当者は多いのではないでしょうか。
そこで本記事では、サイト構成の基本的な考え方を紹介します。ポイントについても解説しますので、ぜひ参考にしてみてください。
【無料お役立ち資料】
お問い合わせを増やすWEBサイトの作成方法
資料内容
- WEBサイト作成の流れと説明
- 各フェーズでの重要ポイント
- 問い合わせを増やすための最終チェックリスト
- 制作後の運用方法
- 制作の進め方と注意すべき点
サイト制作を依頼する際に知っておくべき内容になっていますのでぜひ無料でご覧ください。
この記事の内容
Webサイトの構成における基本の考え方
Webサイトの構成は、「サイト構成」と「ワイヤーフレーム」の2つを軸にしています。それでは、Webサイトの構成における基本的な考え方をそれぞれ見ていきましょう。
- サイト構成図（サイトマップ）
- ワイヤーフレーム
サイト構成図（サイトマップ）
サイト構成図は、Webサイト内の内容を表すことから「サイトマップ」とも呼ばれています。
「サイト構成=サイトの地図」というイメージで良いでしょう。
サイト構成図がなければ、訪問者は知りたい情報がどこにあるのかわかりません。全てのページをチェックするのは時間がかかるため、訪問者にストレスを与え途中で離脱される恐れがあります。
そこで、サイト構成図を設置すれば、訪問者が見やすくなります。また、クローラーがチェックしやすくなるので、SEO対策としても有効です。
ワイヤーフレーム
ワイヤーフレームは、「ファーストビュー・本文・クローズやCTA」の3要素からなる、ページレイアウト構成のことです。
細い線と枠で、Webサイト全体のコンテンツやレイアウトを可視化する設計図の役目があります。
Webサイトの内容を見やすくする役目があり、訪問者が見たいページにスムーズに移動できるよう促します。
Webサイトの構成図（サイトマップ）の作り方5ステップ
続いて、Webサイトの構成図の作り方を5つのステップで解説します。
- 目的を明確化する
- 必要なページを書き出し整理する
- ページをグループ分けする
- グループごとに階層を決定する
- ページごとにURLを設定し送信する
目的を明確化する
まず、ステップ1では、目的を明確化しましょう。
目的が定まらないままWebサイトを作っても、思うような成果は得られません。
Webサイトを作成する主な目的は次の通りです。
- 問い合わせ・資料請求（販売促進）
- 商品・サービス販売（通販サイト）
- リスト取得（メール配信によるメールアドレスの取得）
- 企業のブランディング化（信頼性の獲得）
- 採用（人材マッチング）
企業によっては、複数の目的を達成したい場合もあるでしょう。しかし、1つのサイトで複数の目的を達成するのは困難な可能性があります。
複数の目標がある場合は、1サイトにつき1目標と考え、目標ごとにサイト制作を検討してください。
必要なページを書き出し整理する
次に、必要なページを書き出し整理します。
Webサイトの構成は、目的によって必要なページが異なるため、始めに必要なページを全て書き出しておきましょう。
企業のブランディング化を目的に設定した場合を例に、必要なページを紹介します。
- 会社概要
- 企業理念
- 社長のメッセージ
- 沿革
- 事業内容
- 商品案内
- サービス案内
- 採用情報
- 社員のメッセージ
- よくある質問
- 問い合わせフォーム
- プライバシーポリシー
上記は一例ですが、ここで必要なページを全て書き出し整理しておくと、Webサイトの構成を整理しやすくなります。
ページをグループ分けする
次に、書き出したページをグループ分けしていきます。
企業のブランディング化を例に、グループ分けの仕方を見ていきましょう。
| グループ | ページ |
|---|---|
| 企業情報 | 社長のメッセージ 沿革 アクセス 事業内容 |
| サービス | サービスごとのページ |
| その他 | よくある質問 採用情報 社員のメッセージ プライバシーポリシー IR イベント ニュース 問い合わせフォーム |
目的によっては該当するカテゴリがない場合もあるでしょう。分類できない場合は単独でも問題ありません。
グループごとに階層を決定する
次は、グループごとに階層を決定しましょう。
階層は、ツリー型構造を用いるため、サイトツリーとも呼ばれています。
サイトツリーが多すぎると、訪問者が知りたい情報にたどり着くのに時間がかかったり、分かりづらくなったりするので注意が必要です。
ページごとにURLを設定し送信する
最後のステップで、ページごとにURLを設定し送信します。
サイトの構成図を作成するときは、ツールを使うとスムーズに進められます。
サイトマップ作成には「エクセル」や「パワーポイント」、URLの送信にGoogle Search Consoleを使用すれば、URL検査もできて便利です。
Webページのページ構成（ワイヤーフレーム）の基本要素3つ
ここからは、Webページのページ構成の基本要素について解説します。
- ファーストビュー
- メインコンテンツ（本文）
- クロージング
ファーストビュー
ファーストビューは、訪問者が最初に目にする「スクロールせずに表示される部分」です。Webサイトの構成では、最も重要な部分と言っても過言ではありません。
- タイトル
- メニュー
- キャッチコピー
- メインビジュアル
訪問者がページを下にスクロールすれば、知りたい情報を探せます。さらに、スクロールせずに訪問者にとって有益な情報があると判断できれば、興味を持ってもらいやすくなるでしょう。
たったひと手間ですが、瞬時に判断できればサイトの評価にもつながります。
メインコンテンツ（本文）
メインコンテンツは、名前の通りWebサイトの要になる部分です。
テキストだけでなく、画像・動画・イラスト・図表などで、訪問者にわかりやすく伝え興味を惹きつける目的があります。
ただし、さまざまな要素を盛り込みすぎると、見づらくなるので見やすさも意識してください。
クロージング
クロージングは、ページを締めくくる重要な部分です。
ただ締めくくるのではなく、訪問者にアクションを起こさせるよう誘導するために、CTA(Call To Action)を設置します。
CTAとは、「行動喚起」の意味があり、コンバージョン獲得のために欠かせない要素です。
- お問い合わせ
- 資料請求
- 見積もり
- Web予約・電話予約
- メルマガ登録
- 無料相談
- 買い物カゴに入れる
CTAは、主に上記のような訴求で、目的に合わせてボタンやリンクで表示されます。
Webサイトの構成を作成する5つのポイント
では最後に、Webサイトの構成を作成するうえでおさえておきたいポイントを5つ紹介します。
- 目的から逆算して構成に反映させる
- 階層は3～4階層以内にする
- 1ページにつき1テーマに統一する
- ページの優先順位を決めておく
- ユーザー動線を意識する
目的から逆算して構成に反映させる
目的を明確化したら、そこから逆算して構成に反映させてください。
構成が目的からかけ離れていると、訪問者を目的に誘導できない恐れがあります。
コンテンツを充実させたいからといって、構成が枝分かれすると訪問者に情報を伝えづらくなるので注意が必要です。
ズレが生じないよう、構成と目的がマッチしていることを意識しましょう。
階層は3～4階層以内にする
階層は3～4程度以内にしてください。
階層が深すぎると、訪問者が知りたい情報にたどり着くまでに時間がかかります。
例えば、第2階層は1クリック、第3階層は2クリックで確認できます。第4階層では3クリックありますが、この程度なら訪問者にもわかりやすいでしょう。
4階層以上になるとクリック数も増えますし、訪問者が途中でどこまで閲覧したかわからなくなりストレスを与える恐れがあります。戻りたいと思っても、戻りにくいです。
4階層以上になる場合は、カテゴリを別途追加すると良いでしょう。
1ページにつき1テーマに統一する
Webサイトの構成は、1ページにつき1テーマに統一してください。
1ページ内に複数のテーマがあると、訪問者を混乱させる可能性があります。
1ページにつき1テーマとすれば、訪問者にとっても見やすいページになるでしょう。
ページの優先順位を決めておく
そして、ページの優先順位を決めてください。
訪問者の行動は予測できません。ページに優先順位を付けていなければ、一番見て欲しいページにたどり着く前に離脱される可能性があります。
そこで、ページに優先順位を決めておけば、一番見て欲しいページに訪問者を誘導できるでしょう。
見て欲しいページは階層上部に配置するのが有効です。
ユーザー動線を意識する
ユーザー動線を意識することも重要です。
訪問者がどんな目的でサイトを訪れ、どんな情報を知りたいのかを、ユーザー視点で考えながらサイトの構成を決めてください。
ユーザー動線を意識したWebサイトの構成を構築できれば、訪問者の満足度を高められるでしょう。
まとめ：Webサイトの構成はユーザーファーストを意識して作成しよう
Webサイトの構成を決める際は、目標を明確化することが重要です。
目標が曖昧なままWebサイトの構成を決めると、訪問者にとって見づらいサイトになる恐れがあります。
また、訪問者がストレスなくサイトを閲覧できるよう、ユーザー視点を意識することも心がけてください。
サイトの評価向上にもつながりますので、ユーザーファーストを意識し、訪問者の満足度を高める構成でWebサイトを作成しましょう。
【無料お役立ち資料】
初心者でもよくわかるお問い合わせを増やすWEBサイトの作成方法
資料内容
- WEBサイト作成の流れと説明
- 各フェーズでの重要ポイント
- 問い合わせを増やすための最終チェックリスト
- 制作後の運用方法
- 制作の進め方と注意すべき点
サイト制作を依頼する際に知っておくべき内容になっていますのでぜひ無料でご覧ください。
