「ホームページの構成って一体何？」「ホームページ制作を任されたけれど、どのように作り始めたらいいのかわからない」とお悩みの方もおおいおのではないでしょうか。

ホームページの構成は、制作する目的を最初に決めて必要な情報を洗い出したあと、階層構造を意識したサイトマップを作るという流れです。しかし、これだけを聞いてもピンとくる方は少ないかと思います。

そこでこの記事では、ホームページの基本的な考え方や構成の作成手順、注意点などを解説します。役立つツールも紹介しているため、ぜひホームページ制作に役立ててみてください。

そもそも「ホームページの構成」とは？

「ホームページの構成」とは、どこにどのような情報があるのかをまとめた枠組みのことを指します。ホームページの設計図のようなものです。

ホームページ制作に取りかかる前には、しっかりと構成を練っておくことが大切です。そうしないと、ホームページへアクセスしたユーザーが「◯◯の情報はどこに掲載されているのだろう」と困惑してしまい、ページから離脱してしまう可能性があります。

自社サービスへのお問い合わせや商品の購入にも繋がりにくくなるでしょう。

リニューアルする際も、現在の構成を見直すことでより効果的なホームページになります。

【初心者必見】Webサイトの作成に欠かせないパーツについて

ホームページ（Webサイト）は、さまざまなパーツや機能で構成されています。そのため今後ホームページ制作に関わるなら、それが何を指すものか理解しておかなければいけません。

個々では、単語を聞いただけでは意味を理解しにくいパーツをピックアップして紹介します。

ホームページを制作するには2種類の構成が必要

ホームページを制作する際は、2種類の構成を考える必要があります。

ホームページ全体の構成

冒頭でも少し触れていましたが、ユーザーが使いやすくかつ魅力的だと感じるホームページにするには、適切な構成を作成する必要があります。そのときに役立つのが「サイトマップ」です。

サイトマップとは、ホームページ全体の構成図のことです。トップページを頂点とするツリー状になっており、各ページがどのように繋がっているかを視覚的に把握できます。

サイトマップを作成すれば、ホームページ制作に関わる全メンバーで共通認識をモテるため、適切な構成を組みやすくなるでしょう。

ちなみにサイトマップと呼ばれるものは、ホームページ制作前に作成するものの他に「HTMLサイトマップ」と「XMLサイトマップ」の2種類があります。前者はユーザー向けに作成するページのこと。校舎は検索エンジン向けのファイルのことです。

Web ページ単体での構成

ホームページの構成も大切ですが、Webページ担体の構成も同じくらい大切です。ここで使うのが、ページ単位の構成図である「ワイヤーフレーム」です。

ワイヤーフレームを作ることで、ページ上のどこに何のコンテンツを配置するのかを整理できます。デザイン作業に入る前に完成図をイメージできるため、メンバー間の認識のズレをなくせるのが良い点です。

その後のデザイン作業やコーディング作業もスムーズに進められ、修正も発生しにくいでしょう。

ホームページ構成の作成手順

ホームページの構成（サイトマップ）は、以下の手順で作成します。構成の適切な作り方を知っているかどうかで、ホームページがもたらす効果も変わってくるでしょう。

1．ホームページの制作目的を明確にする

構成を作る上で非常に大切なのが、ホームページを制作する目的を明確にすることです。どのような目的を設定するかによって、必要なコンテンツの内容や量が変わります。

反対に、目的が曖昧なまま構成を作り始めると、途中で軸がブレて目的を果たしにくいホームページになってしまうため注意が必要です。

ホームページ制作の目的と同時にターゲットとなるユーザーも考えておくと、ニーズに適した構成が作りやすくなります。

2．目的達成に必要なページを洗い出す

次に、目的を達成するために必要なページ（コンテンツ）を洗い出します。

この段階では、まだ情報のまとまりや階層構造を気にする必要はありません。ホームページの目的やターゲットを念頭に置きつつ、なるべくたくさん書き出しましょう。

例えばコーポレートサイトなら、「会社概要」「企業理念」「事業内容」のようなコンテンツが必要です。あまり思いつかない場合は、同業他社のホームページを参考にするとコンテンツの漏れを見つけられます。

3．ページをグループ分けする

必要なページを洗い出したら、似たようなコンテンツをまとめてグループ分けしていきます。

先程と同じようにコーポレートサイトの構成を考えた場合、「会社概要」「企業理念」はどちらも会社自体に関するものなので同じグループに。「サービスA」「サービスB」「サービスC」のように提供しているサービスが複数ある場合は、すべて同じグループにまとめます。

「お問い合わせ」のようにグループ分けできないコンテンツは、無理にまとめる必要はありません。単独ページとして構成に組み込みます。

なくてもいいと感じるコンテンツは、この段階で削除しましょう。

4．階層構造を意識してサイトマップを作る

最後に、階層構造を意識しながらサイトマップを作成します。トップページから枝分かれさせ、そこから各ページへつながるようにコンテンツを配置するのが一般的です。

• 第1階層：トップページ
• 第2階層：手順3でまとめたようなグループや単独コンテンツ（トップページから1クリックで到達できるページ）
• 第3階層：第2階層に属するページの下部に位置するコンテンツ

ホームページ構成のポイントや注意点

ホームページの構成を作るときには、以下の3点に注意してください。

目的は1つに絞る

構成を作るときは、必ずホームページ作成の目的を1つに絞りましょう。

「多くの人に自社商品を購入してもらえて、会社情報が豊富に掲載されていて、採用にも強いサイト」のように複数の目的を立ててしまうと、どのページに行けばいいのかユーザーが困惑してしまいます。

その結果、ホームページから離脱されやすくなり、中途半端な結果しか得られない可能性があるでしょう。
もし「見込み客の獲得」と「採用の強化」と言うように2つ以上の目的が思い浮かぶ場合は、それぞれ別のホームページを作成するのが望ましいです。

階層は多くても3～4階層までにとどめる

サイトマップの階層は、多くても3～4階層までにとどめることも大切です。階層が深いほどトップページからのクリック数が多くなるため、ユーザーが欲しい情報に到達するまでに時間がかかってしまいます。

検索エンジンにも検知されにくくなり、SEO的に良いとはいえません。

そのため、掲載すべきコンテンツが多いときはグループの数を増やしたり、1ページあたりの情報量を多くしたりしましょう。

ユーザー目線を忘れないようにする

「どのような目的を持って訪問しているか」「欲しい情報がすぐに見つけられるか」など、ユーザー目線を意識するよう心がけましょう。目的達成の鍵にもなります。

ホームページを利用する相手は人間です。企業側としては自社や現在提供しているサービスの良さを100％伝えたいと思うものですが、それらを押し出しすぎると逆効果になる可能性があります。

ユーザーが使いにくいと感じるホームページは離脱されやすく、SEOにも弱くなってしまいます。満足度の高いホームページを作るためにも、ユーザー目線は決して忘れてはいけないものなのです。

【種類別】ホームページの基本となる構成要素

ここでは、基本となる構成要素をホームページの種類別に紹介します。あくまで基本的なものなので、状況に応じて必要なコンテンツを追加しましょう。

コーポレートサイトの場合

コーポレートサイト（企業ホームページ）の基本的な構成要素は以下のとおりです。

• 会社概要
• 企業理念
• 事業内容（サービス・商品情報）
• 最新情報
• 採用情報
• お問い合わせフォーム
• プライバシーポリシー

コーポレートサイトには顧客・取引先・消費者・求職者・株主などさまざまなユーザーが訪問します。ターゲットにする相手によって必要な構成要素も変わるため注意しましょう。

サービスサイトの場合

サービスサイトの基本的な構成要素は以下のとおりです。

• サービス・商品の紹介
• 導入事例・実績
• 料金
• よくある質問
• お問い合わせ（申し込み）フォーム
• プライバシーポリシー
• 会社概要

コーポレートサイトとサービスサイトを一緒にしているところもありますが「企業名とサービス名が異なる」「複数のサービスを提供している」などの場合は、分けることをおすすめします。

通販サイト（ECサイト）の場合

通販サイト（ECサイト）の基本的な構成要素は以下のとおりです。

• マイページ
• 商品カテゴリ
• 商品ページ
• カート機能・決済ページ
• 特定商取引法に基づく表記
• プライバシーポリシー
• 会社概要

そのほか「ご利用ガイド」「お問い合わせ」などを入れても良いかもしれません。

採用サイトの場合

採用サイトの基本的な構成要素は以下のとおりです。自社の魅力だけでなく、求職者が知りたいであろう情報を入れ込みましょう。

• 企業のミッションやビジョン
• 募集要項
• 事業内容
• 代表メッセージ
• キャリアパス
• 研修制度・福利厚生
• 選考プロセス
• よくある質問・FAQ

「オフィスの様子」「社員の声」のような差別化できるコンテンツを入れるのも効果的です。

サイトマップ作成に役立つツール5選

サイトマップ作成に役立つツールを5つ紹介します。それぞれ特徴が異なるため、自分が使いやすものを選びましょう

ホームページ構成ができたらページごとの構成も考えよう

ホームページの構成ができたら、ページ単位での構成も考えていきましょう。この段階では、デザインや色味について触れる必要はありません。

1．ワイヤーフレームを作るページを絞る

ワイヤーフレームは全ページ分を作るのが理想ではありますが、かなりの作業量になってしまいます。そのため、サイトマップの中からワイヤーフレームを作成するページを絞るのが現実的です。

ワイヤーフレームを作成するページは、以下のようなものを選ぶと良いでしょう。

• 主要ページ
• 目的を達成するうえで重要な役割を担うページ
• 同じレイアウトを別の場所でも使えそうなページ

2．必要なコンテンツを整理する

次に、それぞれのページで必要となるコンテンツを整理します。例えばトップページであれば、これらの要素が必要になると考えらます。

• 自社のロゴ
• キャッチコピー
• イメージ画像
• 最新情報
• SNSへのリンク

サイトマップ作成時とお内情に思いつく限りたくさんの情報を書き出しましょう。その後、本当に必要なコンテンツ家を一つひとつ確認して掲載する情報を決めます。

参考：トップページ 3つの役割と基本的な構成要素を解説 – ホームページの作り方

3．優先度を決める

掲載する情報が決まったら、そのなかで優先度の高いもの・低いものを決めます。

webページは、下へ行けば行くほど閲覧される可能性が低くなる傾向にあります。そのため達成したい目的やターゲットからコンテンツの優先度を決め、重要なものは上部へ配置してください。

4．レイアウトを決める

いよいよレイアウトを決めていきます。レイアウトはゼロから作るよりも主流のパターンから作るのが一般的です。

代表的なレイアウトは以下の4つが挙げられます。

• シングルカラムレイアウト：コンテンツを縦1列に配置するもの
• マルチカラムレイアウト：Webページを複数の列に分割し、それぞれに別のコンテンツよ配置するもの
• グリッドレイアウト：Webページを格子状に分割し、それぞれに別のコンテンツを配置するもの
• フルスクリーンレイアウト：画面いっぱいにコンテンツを表示するもの

Webサイトの目的に応じて、適切なものを選びましょう。

5．ワイヤーフレームを書く

最後にワイヤーフレームを書いていきます。慣れていない方は、まず手書きでラフ案を書いたあと、ExcelやPowerPointなどのツールを使って聖書しましょう。

先程決めた優先度とレイアウトをもとにコンテンツを配置していきますが、このとき意識したいのが「ユーザーの視線」です。ユーザーの視線は左上からそのまま右へ、そして左下へというように”Z”の形に移動する傾向があります。

求められている情報を考えながら、配置していくのが大切です。

適切なホームページ構成がわからない！そんなときは制作会社へ依頼するのもおすすめ

ここまでホームページ構成やページ構成について解説してきましたが「うまくできるか不安」「自社の場合はどうのような厚生が必要なの…？」と感じる方もいるでしょう。様々な情報を整理して完璧構成を作るのは、初診でなくても難しい作業です。

そんなときは、ホームページ制作会社へ依頼するのも一つの方法です。

例えば、PLUS SPIRALでは、起業して間もない方や初めてのホームページを作成する方向けに「スタートプラン」という制作プランをご用意しています。ホームページ構成やデザイン、スマートフォン対応など基本的な要素がすべて入っているのがポイントです。
既存ホームページのリニューアルをお考えの場合は、お客様へのヒアリングと既存ホームページの分析から、目的達成に向けたホームページ構成をご提案いたします。

ホームページ制作後は「ウェブサポートサービス」をご利用いただければ、保守・管理から更新作業、ウェブ集客のアドバイスなど継続的にサポートいたします。興味のある方はぜひお気軽にお問い合わせください。

• スタートプラン詳細や制作事例についてはこちらのページからご確認いただけます。

まとめ

ホームページの構成は、以下の手順で作成します。

1. ホームページ制作の目的を明確にする
2. 目的達成に必要なページを洗い出す
3. ページをグループ分けする
4. 階層構造を意識してサイトマップを作る

目的は必ず1つに絞り、階層構造は3～4階層目までにとどめましょう。サイトマップを作る際はExcelやPowerPoint、Xmindなど自分が使いやすいツールを選んでみてください。

また、魅力的なホームページを作るならページ構成もきちんと練る必要があります。難しい場合や十分な作業時間を確保できない場合は、制作会社への依頼も検討してみてはいかがでしょうか。