ホームページの構成はトップページとその他のWebページによる複数の階層で成り立っています。構造が複雑なホームページはユーザーにとって使いづらく、求めていた情報にたどり着けないまま離脱してしまう可能性もあるでしょう。事前にホームページ全体の構成を設計し、ユーザビリティに優れたホームページの作成を目指すことが大切です。
本記事では、企業用ホームページ作成の前提となる「構成」の考え方に加え、サイト全体の構成（サイトマップ）やWebページ単体の構成の作り方も解説しています。構成に関する基本的な考え方を理解し、魅力あるホームページの作成にお役立てください。
企業のホームページは情報が多いので、どこに何が書いてあるのかをわかりやすく整理しましょう。それにより、ユーザーにとって見やすく使いやすいホームページになり、ホームページへの訪問を集客や問い合わせにつなげる効果も期待できます。まずは、企業用ホームページ作成における構成の必要性を見ていきましょう。
ホームページの構成を考える際に、特に意識したいのが階層構造です。ホームページは、1階層目にトップページがあり、トップページの各メニューのリンクから2階層目のページに飛ぶことができ、さらに詳細な情報は3階層目のページに記載があるといったように、複雑な構造となっています。
「ホームページの構成を考える」とは、Webサイト内のコンテンツを決めて分類し、階層として構成することを意味します。企業用ホームページの場合、「会社概要」「商品案内」「導入事例」などのコンテンツが該当するでしょう。
ホームページを適切に構成するとページがもたらす効果の最大化につながります。まずは、ホームページによって達成したい企業目標や目的を明確にしてから構成を考えましょう。
ページの設計が甘かったり間違いがあったりすると、事後的に修正コストが大きくかかってしまうこともあります。リスクを減らす意味でも、事前に構成を練る作業は重要です。
ホームページは、訪問するユーザーの視点で構成を考えることが何よりも大切です。ここでは、基本的なホームページ構成の考え方をご紹介します。
ホームページを作成する目的が決まったら、それに適した構成を考えましょう。まずは、サイト全体の構成（サイトマップ）を決め、その後にそれぞれのページ構成を考えていきます。
ホームページは第1階層、第2階層といったように階層構造になっています。構造が複雑化すると、使いにくいサイトになってしまうため注意が必要です。ホームページの訪問者が欲しい情報にすぐたどり着けるように、シンプルな構造を目指してください。また、SEOの観点からも、深い階層にしすぎないことが重要です。
ホームページの訪問者が「どこから流入し、どのページを見ていて、何をしたいのか？」という動線を意識することは、構成を作るうえで重要です。自社サイトを訪問するユーザーの属性や目的を把握し、サイトを設計していきましょう。
ここからは、ホームページ全体の構成（サイトマップ）の作り方をご紹介します。
ホームページ全体の構成を決める際は、ホームページによって、どのような目的を達成したいのかを明確にすることが重要です。代表的な目的には、次のようなものがあげられます。
最終的には、これらの目的をひとつに絞ることをおすすめします。
同時に、訪問ユーザーのペルソナも考えておきましょう。ペルソナを定めることで、ユーザーニーズに適う構成が作りやすくなります。
目的とターゲットを意識しながら、自社Webサイトに必要と思われるページを書き出していきます。
必要なページを洗い出したら、似た内容のページごとでまとめ、グループ分けをしましょう。
分類した各グループを見ながら、サイトマップ（階層図）を作成します。「第1階層」に「トップページ」を設置し、そこから枝分かれさせ、各ページにつながるように作成してください。
【作成におすすめのツール】
ツールを活用すれば、サイトマップをよりスムーズに作成できます。ここでは代表的なツールをご紹介します。
〇PowerPoint（パワーポイント）
一般的なWebサイトであればPowerPointでも十分なサイトマップを作成できます。業務で日常的に使用して使い慣れているのであれば、まずはPowerPointで作成してみましょう。
〇Excel（エクセル）
PowerPointに慣れていない方には、Excelがおすすめです。縦軸と横軸を使ってカテゴリーを分け、それぞれのページ内容はセルに記入していくと整理しやすくなります。
〇XMind（エックスマインド）
XMindはマインドマップを無料で作成できるツールです。誰でも直感的に操作できるため、初心者でも利用しやすい特長があります。
〇Cacoo（カクー）
Cacooは、PowerPointと似た感覚で図の設計や描画ができるソフトウェアです。ひとつのファイルへ複数人でアクセスして、追加や修正を共同で行えます。また、Google DriveやSlackとも連携できるため、チームで進めるプロジェクトに最適です。
〇Whimsical（ウィムジカル）
Whimsicalはマインドマップを無料で作成できるツールです。ワイヤーフレーム（線や枠で作られたレイアウトの設計図）も簡単に作成できるため、汎用性に優れています。
ページ構成とは、Webページ単体の設計図のことです。
サイト全体の構成が固まったら、各Webページのどこにメニューボタンや写真、本文を配置するのか、ページ構成を作っていきましょう。
ページ構成の時点では、色やデザインや色を細かく決める必要はなく、ワイヤーフレームを作成すれば十分です。
ワイヤーフレームとは、言葉の通り、線（ワイヤー）と枠（フレーム）だけで構成される配置図のことです。ワイヤーフレームを作っておくと、ページ内のどこに何を配置するかがひと目でわかるため、チーム内でコミュニケーションが取りやすくなります。また、社外の関係者にもイメージを的確に伝えられるほか、修正がしやすい利点もあります。
効果の高いホームページを作るには、本来は全てのページのワイヤーフレームを作成することが望ましいです。しかし、ページ数が多く、全ページ分のワイヤーフレームの作成が難しい場合は、次の3点を参考に優先順位を付け、ページを選んで作成してください。
これらのいずれかを満たすページは、ワイヤーフレームの作成をおすすめします。
続いて、ページのレイアウトを考えます。初めて行う場合やレイアウトについて詳しくない場合は、次にご紹介するいくつかのレイアウトのパターンから選ぶと良いでしょう。
カラムレイアウトは、画面幅をいっぱいに使ってコンテンツを見せるレイアウトで、インパクトのある訴求をする場合に適しています。広告用のランディングページやブランド訴求の際によく使われます。
Wタイル型レイアウトは、たくさんのコンテンツをコンパクトに並べるレイアウトです。ブログ型サイトのトップページに多く使われます。
マルチカラムレイアウトは、ページ内をいくつかの列に分けて配置するレイアウトです。情報が多い場合に整理しやすく、コンテンツの強弱を付ける際に適しています。企業用ホームページで最もよく用いられるレイアウトです。
サイドバーを固定し、スクロールしても常に表示させておくレイアウトも多く使われています。ユーザーはいつでも固定されたメニューを確認できるため、目的のコンテンツにたどり着きやすい利点があります。ただし、パソコン用に設計されたサイドバー固定レイアウトは、スマートフォンでは閲覧できないことに注意が必要です。
ワイヤーフレームを書く際は、ページを次のようにいくつかの要素に分けてコンテンツを設計していきます。
デザインに凝りすぎず、あくまでも情報の整理を目的としましょう。また、他ページへのリンク部分は、色分けして清書をするとわかりやすくなります。
サイトの一番上に表示される部分は、ヘッダーやグローバルナビゲーションと呼ばれます。全ページで共通して使用されるため、サイト全体の目次として情報を整理すると良いでしょう。
メインビューは、ユーザーがページを訪れたときに、真っ先に目に入る部分です。インパクトのあるキャッチコピーや画像を入れ、ページを印象付けましょう。
ページの内容にあたるコンテンツエリアは、ページの中で最も重要な部分となります。 トップページを作る場合は訪問者の導線を意識し、コンテンツエリアには全てのコンテンツを並べないようにしてください。特にユーザーに見て欲しい情報に絞り、見せたいコンテンツから順番に並べることに留意して設計すると良いでしょう。
ページの一番下に表示される部分がフッターです。ヘッダーと同じく、全てのWebページに共通して表示されます。フッターの設置によってサイトの縦幅が長くなりますが、ホームページ内にどのようなWebページがあるのかを訪問者に知らせるため、できるだけ掲載しましょう。
訪問者に十分な価値提供ができ、満足度の高いホームページを作るためには、ホームページ全体の構成だけでなく、それぞれのページ構成もしっかりと行うことが大切です。
また、企業用のホームページは目的によって構成が変わってくるため、達成したい企業目標や目的を考慮したうえで構成を練る必要があります。
さまざまなホームページが存在するなかで、自社のホームページが埋もれないようにするために、他社にはない自社だけが提供できる独自的な価値をアピールしましょう。
本記事でご紹介したホームページの構成の考え方や作り方を活用し、魅力的で効果的なホームページ作成にお役立てください。