ホームページの制作には様々な手間がかかりますが、実際のデザインや実装に入る前の準備で手を抜かないことが大切です。この記事では、ホームページ作成で重要な「ページ構成（サイト構造）」と、「レイアウト構成」に関して、考え方や注意点を解説します。ホームページの作成や構成の見直しを検討しているという場合は、ぜひ役立ててください。
→構成変更もブロック編集で崩れず簡単！ノーコードCMSのBiNDupを30日間無料体験
ホームページ作成で重要なふたつの構成
ホームページ作成で重要な役割のある、2種類の構成について解説します。
ホームページの構成はなぜ重要なのか
構成は、ホームページの仕上がりや読みやすさなど、ページユーザーの使い勝手に直結する事柄です。わかりやすい構成にすると、CVRの向上が期待できるだけでなく、検索エンジンからの評価アップにも効果があります。
ページ構成（サイト構造）
ページ構成とは、ホームページ全体の構成です。一般的に、ページ構成は複数のページで構成されています。トップページを起点とし、各ページの詳細に推移できる作りの場合、ページ構成はツリー型のような階段層になっています。
レイアウト構成
レイアウト構成とは、ホームページを構成する要素の配置です。ユーザーにとって使いやすいホームページにするには、デザインを整え、階層に無駄のないレイアウト構成の作成が重要です。
構成要素の特徴については、後で詳しく解説します。
→構成変更もブロック編集で崩れず簡単！ノーコードCMSのBiNDupを30日間無料体験
ページ構成（サイト構造）を考える際の4つのポイント
ページ構成(サイト構成)の作成に先立ち、考えるべきポイントを解説します。
必要なページ（要素）を洗い出す
例えばコーポレートサイトでは、次のようなページ(要素)が考えられます。
- トップページ
- 会社概要(名前・場所・理念・従業員数・取引先など)
- サービスの内容
- お知らせ
- 採用情報
- よくある質問
- お問合せ(電話番号・メールアドレス)
必要なページが不明な際は、複数の競合他社のホームページを参考に要素を選ぶのも良いでしょう。
ページをカテゴライズする
洗い出したページ要素をカテゴライズし、どのようにページに振り分けるかを検討します。同じカテゴリに分類できるものはまとめ、グループ分けしましょう。
たとえば、サービスの紹介とサービスの内容は類似した要素になるため集約できます。どのグループにも属さないページは保留とし、構造が決まってからグルーピングしてください。
カテゴリごとに階層構造をつくる
カテゴライズしたページ（要素）をユーザーにどのような動線で見せるのか、各グループの情報量や重要度に応じて上下関係を決めます。
たとえば、採用情報カテゴリなら各部署の個別紹介のページの上に、人材育成の理念や求職者に向けたメッセージページを配置できます。階層構造の制作過程で、ページの削除や追加も可能です。
全体の構成を確認する
階層構造が決定したら、サイトマップを作成し、ページ全体の最終確認や調整を行います。ページ数が多い場合は、すべて書き出す必要はありませんが、階層は一目で把握できる形で整理しておくと管理しやすくなります。
→構成変更もブロック編集で崩れず簡単！ノーコードCMSのBiNDupを30日間無料体験
ページ構成を考える際の注意点
ページ構成を考える際、何に配慮すればよいのでしょうか。注意点を解説します。
ツリー型の構成を意識する
ツリー型の構成とは、ある階層のひとつのデータから、複数のデータが下位階層に枝分かれして配置されるデータ構造です。ツリー型の構造にすると、サイト管理がしやすくなる、ユーザーが求める情報にたどり着きやすくなるメリットがあります。また、SEOを意識したホームページの戦略としても、ツリー型の構成は有効です。
階層を深くしすぎない
ツリー型の構成のメリットを最大限に活かすには、階層を深くしすぎない点がポイントです。深すぎる階層は、ユーザーが知りたい情報を探しにくくなるためストレスの原因になります。また、検索エンジンにも検知されにくく、SEOの効果としても薄れます。ホームページの階層は、トップページから深くても3～4クリック程度にしましょう。
→構成変更もブロック編集で崩れず簡単！ノーコードCMSのBiNDupを30日間無料体験
ページ構成（サイト構造）図の作成方法
ページ構成(サイト構造)図の作成方法に関して、ツールの利点やおすすめの場面と一緒に解説します。
エクセル
図形を用いなくても構成図が作成でき、セルを加えるだけでコンテンツの追加や編集ができます。ホームページのリニューアルが必要になっても、対応しやすい点がメリットです。50～100ページほどの、情報量の多いホームページの作成場面でも一括管理ができます。
マインドマップ（XMind）
サイト構造を放射線状で繋げるだけなので導入しやすく、初期段階のメモとして直感的な情報整理に役立ちます。また、作成したそれぞれのトピック名は、リスト形式で管理できます。豊富なテンプレートがあるため、作業時間を短縮したい場合におすすめのツールです。
→構成変更もブロック編集で崩れず簡単！ノーコードCMSのBiNDupを30日間無料体験
レイアウト構成を考える際の2つのポイント
レイアウト構成を考える際にはいくつかのポイントがあります。人の視線の動きやデザインの4原則の観点から解説します。
人の視線の動きを意識する
人間は横書きの文章を読む際は左上から右下へ視線を動かし、縦書きになると右上から左下に視線を動かすといわれています。したがって、ユーザーの視線の流れに即したレイアウトをすると、見やすいデザインになります。
デザインの4原則を意識して配置する
デザインの原則を意識して配置すると見やすいデザインになります。デザインの4原則とは、近接（Proximity）・整列（Alignment）・反復（Repetition）・対比（Contrast）です。
・近接の原則
関連性の高い情報を近くに、関連性の低い情報は遠くに配置すると、グループ化による情報整理で理解しやすくなります。
・整列の原則
位置を揃えて整列させ、情報の統一感をもたせるとさらに見やすくなります。
・反復の原則
同じ要素を繰り返して視認性や可読性を上げることです。文字サイズ・フォント・色などのデザインを統一するとユーザーも読みやすくなります。
・対比の原則
対比に配慮すると、要素にコントラストをもたせて注目させたい情報を強調できます。
レイアウトのイメージはこちらの記事でも詳しく解説しています。合わせてご覧ください。
→構成変更もブロック編集で崩れず簡単！ノーコードCMSのBiNDupを30日間無料体験
ホームページのパーツの主な種類
ホームページは主に5つのパーツで構成されています。ここでは、各パーツの特徴を解説します。
ヘッダー
ヘッダーは、ホームページ内の上部に位置する領域です。一般的には、サイトのロゴやタイトル、説明文などの記載があります。ページ全体の統一感をもたせるため、設置時には各ページ共通、目につきやすい共通ヘッダーはシンプルなつくりとするのが基本です。また、固定ヘッダーは、スクロール時に常時表示される特徴があり、採用する企業が増えてきています。
ナビゲーション
ナビゲーションとは、サイトの目次を指します。配置箇所は自由に決められます。ナビゲーションには、複数のページをカテゴリごとに分類して、わかりやすく整理する役割があります。ただし、ナビゲーションの項目を細かく分けすぎると、ユーザーが目的のページに辿り着くまでに時間がかかるため、注意が必要です。
コンテンツ
コンテンツは、文章や画像で構成されているページのメインになる部分です。配置箇所は自由ですが、ユーザーは基本的にコンテンツの内容を目当てにホームページを訪問することから、見えやすいようにデザインする必要があります。コンテンツの可視性を高めるため、ヘッダーやナビゲーションを一時的に非表示にするケースもあります。
サイドバー
サイドバーはコンテンツの左右もしくは両側に配置されており、記事のランキングやアーカイブ、SNSとの連携機能や広告バナーなどが入っています。操作メニューやホームページの補助的な情報の表示に用いられるケースが多く、ページを複数の列に分割して並べる、マルチカラムのレイアウトでよく使うパーツです。
フッター
フッターはページの最後に配置されている共通部分です。一般的にはコピーライト・サイトマップ・プライバシーポリシー・会社情報を掲載します。他にも、フッター内にナビゲーションを設置して、メインコンテンツ以外の付属的なページへのリンクの記載も可能です。企業情報や運営元をしっかり明記すれば、コンテンツの信頼性のアピールにも繋がります。
→構成変更もブロック編集で崩れず簡単！ノーコードCMSのBiNDupを30日間無料体験
ホームページのレイアウトの主な種類
Webデザインでいうカラムとは「段組み」の意味があり、情報を表示させる枠数を指します。ここでは、レイアウトのパターンをカラムの配置別に紹介します。
シングルカラムレイアウト
すべてのコンテンツを一列に縦に並べるレイアウトです。訴求ポイントにユーザーを集中させたい場合に適しています。ただし情報量の多いサイトでは、目的のコンテンツを探しにくくなる点に注意しましょう。
マルチカラムレイアウト
ページを2～3列に分割して並べるレイアウトです。情報量が多く回遊性のあるコンテンツでも、ユーザーに情報を認知してもらいやすくなります。ポータルサイトや検索サイト、ニュースメディアなどでよく用いられるデザインです。
カード・タイル型レイアウト
カードやタイルをならべたようなレイアウトです。写真やイラストなどのビジュアルを際立たせたい場合に利用をおすすめします。ただし、文章が主なコンテンツになるようなサイトは、レイアウトの強みを活かしきれない点に注意してください。
ホームページの制作では、構成含め準備で手を抜かないことが大切
ホームページの構成は、集客を高めるうえで重要な要素です。適切なカテゴライズと深さの階層は、ユーザーにとって使いやすいサイトになるだけでなく、SEO戦略としても有効です。
BiNDupは、国産のCMSで有料コースには専用サポートがつく、カスタマイズ性が強い制作ツールです。PCのサイトを作るだけで、自動的にスマホ表示にも最適化でき、ホームページ制作にかける時間とコストを削減できます。
POINT
- ホームページ作成で重要なのは「ページ構成（サイト構造）」と、「レイアウト構成」
- パーツ名や構成のカラムパターンを覚えておくと、Webデザイナーとの話がスムーズに
- 準備段階で必要な要件を洗い出し、それを備えたCMSの活用で、その後の制作と運用が簡単になる