ホームページはトップページとその他のページによる複数の階層によって構成されています。構造が複雑なホームページはユーザーにとって使いにくく、求めている情報に到達できないまま離脱してしまう原因にもなりかねません。制作時には全体の構成を設計し、ユーザビリティに優れたホームページを目指すことが大切です。
本記事では、企業用ホームページを制作する上で重要な考え方となる「構成」や基本的な構成単位、構成を考える上で重要な用語について解説します。ホームページの構成を考える際の基本的な手順とあわせて見ていきましょう。
ホームページを「構成」するとは、ページ上の「どこに」「どのような」情報を掲載するのかを設計することを指します。ホームページの構成を十分に考えずに制作し始めてしまうと、ユーザーにとって求める情報を見つけにくいサイトになってしまったり、検索エンジンのクローラーに理解されにくい構造のサイトになったりしかねません。
企業ホームページには一般的に多くの情報が掲載されるため、どこに何が書かれているのかをわかりやすく整理する必要があります。ユーザーにとって見やすく使いやすいホームページを構築することは、集客や問い合わせを増やしていく上でも重要なポイントの1つです。
ホームページの構成は、「サイト全体の構成」「ページ単位の構成」の2通りがあります。まずはホームページの基本的な構成単位への理解を深めましょう。
ホームページ全体の構成とは、ページ同士の関係性のことです。家にたとえると、建物全体の構造や間取りに相当します。家を建てる際には「3LDK」「4DK」といった間取りを決める必要があるように、ホームページ全体が何ページで構成されるのか、部屋から部屋へどのように移動するのかを決めておかなくてはなりません。
ホームページの構成が複雑化すればするほど、ユーザーにとって目的の情報を探しにくいサイトになりがちです。訪問者が欲しい情報に素早くたどり着けるよう、シンプルな構造を目指す必要があります。
ページ単位の構成とは、各Webページのつくりのことです。家にたとえると、それぞれの部屋の内装やレイアウトに相当します。部屋ごとに目的や用途があるように、ホームページの各Webページも目的に合ったつくりにすることが大切です。
また、各ページが統一性に欠けていると、ホームページ全体の一貫性が損なわれたり、ユーザーにとって見にくい・操作しにくいサイトになったりしかねません。統一感のあるホームページにするためにも、ページごとのコンセプトや制作方針をそろえておくことが求められます。
ホームページの構成を考える際には、次に挙げる3つの用語を押さえておく必要があります。
各用語の意味を見ていきましょう。
階層構造とは、ページ間の親子関係のことです。もっとも上の階層を第1階層、次に深い階層を第2階層、さらに第3階層と続きます。関連性の薄いページ同士が親子関係になっていたり、階層が複雑だったりすると、ユーザーは求める情報を探しにくくなりがちです。階層を深くしすぎないようにホームページを構成し、ユーザーが理解しやすいつくりにすることは、検索エンジンのクローラーがサイト構造を容易に把握できるようにする意味においても重要なポイントといえます。
サイトマップとは、ホームページの階層構造を図示した「階層図」のことです。第1階層に「トップページ」を配置し、そこから枝分かれして各ページを配置します。
【サイトマップの例】
サイトマップを作成する際には、ツールを活用することをおすすめします。下記はサイトマップ作成に活用できるツールの例です。
ワイヤーフレームとは、線（ワイヤー）と枠（フレーム）で構成されるWebページの配置図のことです。ページ内のどこに何を配置するのかがひと目でわかるため、制作チーム内でコミュニケーションを図りやすくなります。また、社外の関係者にも制作したいサイトのイメージを視覚的に提示できるほか、修正がしやすい点が大きなメリットです。
各ページを構成する時点では、ページごとのデザインや色を詳細に決める必要はありません。まずはどのような内容のページをどう配置するのかを決めることが優先です。
ホームページの構成を考える際の基本的な手順について解説します。
はじめに、ホームページ全体の構成を考えていきます。ホームページを通じてどのような目的を達成したいのかを明確にし、目的に応じて必要なページを洗い出していきましょう。目的の代表的な例として、下記のものが挙げられます。
【ホームページの目的の例】
必要なページを洗い出したら、似た内容のページごとにグループ分けをします。グループ単位でサイトマップに配置していくとスムーズに進められるでしょう。
ホームページの設計図に相当するのが、前述した「ワイヤーフレーム」です。本来はすべてのページについてワイヤーフレームを作成するのが望ましいものの、ページ数が多い場合には主要なページについて優先的に作成するとよいでしょう。
【ワイヤーフレームを優先的に作成すべきページの例】
ホームページ全体の構成が決まったら、次に各ページのレイアウトを決めます。一般的なレイアウトパターンは下表の通りです。
|
レイアウトパターン |
特徴 |
|
カラムレイアウト |
・画面いっぱいにコンテンツを掲載するレイアウト |
|
タイル型レイアウト |
・複数のコンテンツをタイル状に配置するレイアウト |
|
マルチカラムレイアウト |
・ページ内を複数の列に分けて配置するレイアウト |
|
サイドバー固定レイアウト |
・サイドバーを常に表示させておくレイアウト |
なお、パソコン向けのレイアウトとスマートフォン向けのレイアウトは異なるケースが少なくありません。たとえば、サイドバー固定レイアウトをパソコン向けに設計した場合、スマートフォンではメニューなどが表示されない点に注意が必要です。
各ページのワイヤーフレームを作成します。この段階ではデザインに注力しすぎないようにし、情報の整理を優先して進めるのがポイントです。他ページにリンクする場合には、色分けしておくことで見やすくなるでしょう。
【ワイヤーフレームの要素】
ホームページの構成は、訪問するユーザーにとってわかりやすく操作しやすいサイトを構築する上で非常に重要なポイントです。サイトマップやワイヤーフレームを活用して、ユーザビリティを十分に考慮したホームページを制作しましょう。
なお、当社HubSpotが提供する「Content Hub」であれば、目的ごとに用意された豊富なテンプレートを活用し、自分でゼロから構成作成することなく高品質なホームページを作成できます。無料で利用できるのでぜひ気軽に試してみてください。