ホームページを制作する際は、レイアウト構成が重要です。とはいえ初めて制作にあたる場合、どこから手をつけるべきか悩みますよね。
レイアウトにはいくつかのパターンや構成パーツがあり、それらを上手く組み合わせて制作します。それだけでなく、効果的なホームページにするためには、デザインやユーザー視点の動きまで考慮しなければなりません。
この記事では、レイアウトの基礎知識からホームページの種類別のおすすめパターン、便利な参考サイトまでご紹介します。
ホームページのレイアウト構成パーツ
ホームページのレイアウトは、大きくわけてヘッダー、ナビゲーション、コンテンツ、サイドバー、フッターという5つのパーツで構成されています。
各パーツがどのような役割を持っているのか、ひとつずつ見ていきましょう。
ヘッダー
ホームページの最上部にあるパーツを「ヘッダー」と呼びます。基本的にはサイト名や企業ロゴ、問い合わせボタンなどを配置することが多いです。
ヘッダーはホームページへ訪れた際の入口とも言えるため、ユーザーにホームページ全体のイメージを印象づけるほか、大事な情報を読み取ってもらう重要な役割を持ちます。
ナビゲーション
「ナビゲーション」は、主要コンテンツ先のリンクを一列に並べたパーツのことです。ヘッダーナビゲーションやヘッダーメニュー、グローバルナビゲーションなどとも呼ばれます。
ナビゲーションの役割は、ユーザーが求める情報へいち早く誘導することです。そのため、ユーザーへ見てほしい情報や問い合わせ先などを配置します。
コンテンツ
「コンテンツ」は、ホームページのなかでもメインになるパーツです。ナビゲーション先の内容やブログの本文など、ユーザーの求める情報を伝える役割を持ちます。
コンテンツはホームページのなかでも長時間見てもらうパーツなので、ページごとに内容やレイアウトが適切になるよう意識することが大切です。
サイドバー
コンテンツの左右に配置されるパーツが「サイドバー」です。一般的には、コンテンツに関連した情報や広告バナーなどが配置されます。
サイドバーにはユーザーの興味を引く役割があり、ブログの場合は人気記事ランキングやカテゴリー一覧を配置することで、より多くのコンテンツを見てもらえるでしょう。
フッター
ホームページの最下部にあるパーツを「フッター」と呼びます。会社概要やプライバシーポリシー、SNSへのリンクなどを配置することが多いです。
フッターは、ホームページを訪れたユーザーが最後にたどり着くパーツであり、読んだ人に安心感や信頼感を与える重要な役割を持ちます。
ホームページのレイアウト基礎知識
見やすく効果的なホームページを制作するうえで、レイアウトの基礎知識を理解しておく必要があります。
ここでは、デザインの4大原則と視点の動きについて解説するので、しっかり覚えておきましょう。
デザインの4大原則
ホームページ全体のレイアウトを決める際は、以下の表でまとめた「デザインの4大原則」を意識することが重要です。
近接の原則（Proximity） |
関連する項目をグループ化する
|
|---|---|
整列の原則（Alignment） |
各要素の整列、配色などを揃える
|
反復の原則（Repetition） |
デザインに一貫性を持たせる
|
コントラストの原則（contrast） |
優先度が高いものを強調させる
|
視点の動き
ユーザーがホームページを閲覧するときの視点の動き方は、主に以下の3種類です。Z型、N型、F型という名称は、視点の動きをなぞった形からそう呼ばれています。
Z型 |
左上から右上、左下、右下の順番に視点が動く
|
|---|---|
N型 |
右上から右下、左上、左下の順番に視点が動く
|
F型 |
左から右、一段下がって左から右を繰り返す
|
ホームページのレイアウトパターン
ホームページのレイアウトパターンは、主に以下の4つです。
- シングルカラムレイアウト
- マルチカラムレイアウト
- グリッドレイアウト
- フルスクリーンレイアウト
それぞれについて解説します。
シングルカラムレイアウト
シングルカラムレイアウトは、コンテンツを重視したサイドバーのないパターンです。
ヘッダーからフッターまで各パーツを縦1列に並べて配置するため、ユーザーが1つのコンテンツに集中しやすいというメリットがあります。
ただし、ホームページに訪れたユーザーをほかのページへ誘導する機会が少なく、サイト全体の回遊率が下がってしまうことはデメリットと言えるでしょう。
マルチカラムレイアウト
マルチカラムレイアウトは、サイドバーを配置するパターンです。主に複数列の「2カラムレイアウト」や「3カラムレイアウト」などがあります。
ユーザーにサイト内を回遊してもらいやすいというメリットがあり、特に情報量の多いホームページでは真価を発揮するでしょう。一方、サイドバーによってコンテンツエリアが狭くなるため、端末によっては見づらくなることがデメリットです。
グリッドレイアウト
グリッドレイアウトは、各パーツをグリッド（格子）状に整列させるパターンです。サイト全体に適用させるよりも、トップページのみに使うといったケースが一般的でしょう。
グリッド状にすることでサイト全体に統一感が生まれるほか、ユーザーが情報を整理して見やすいというメリットがあります。ただし、すべてが均一に見えるため優先順位がつけづらく、ユーザーの視点が定まりづらいことがデメリットです。
フルスクリーンレイアウト
フルスクリーンレイアウトは、画面いっぱいにメインコンテンツを表示させるパターンです。サイトのキャッチコピーやキービジュアルを強調したい場合、ナビゲーションは目立たないように配置します。
ホームページに訪れた際に、まずキービジュアルが目に飛び込んでくるので、ユーザーに大きなインパクトを残せることがメリットです。一方で、ナビゲーションが目立たない分、サイト全体の回遊率が下がるデメリットがあります。
ホームページの種類別おすすめレイアウト
作成するホームページの種類や目的によって、適したレイアウトが異なります。
ここではコーポレートサイト、ECサイト、ブログサイト、ブランドサイトにおすすめのレイアウト案を解説するので、参考にしてみてください。
コーポレートサイト
コーポレートサイトは、企業のイメージを伝えることが目的のため、分かりやすく丁寧な印象を与えられるシングルカラムレイアウトがおすすめです。企業のことを知ってもらうためには、ユーザーがコンテンツに集中しやすいシンプルな構成が適しています。
多くの情報を伝えたいからといって、サイドバーを配置する必要はありません。コーポレートサイトでは、ナビゲーションを上手く活用するとよいでしょう。
ECサイト
ネットショップやネットオークションなどのECサイトでは、ユーザーがストレスなく欲しい商品にたどり着けることが重要です。そのため、ひとつのページで複数の情報を伝えられる、マルチカラムレイアウトが適しています。
コンテンツにはおすすめ商品やキャンペーン情報などを配置し、サイドバーにはジャンル別の一覧や検索窓を配置して検索しやすくするとよいでしょう。
ブログサイト
ブログサイトは、ユーザーに記事の内容をしっかり伝えることが目的です。コンテンツ数が多くても、見やすくわかりやすい構成にする必要があります。
ユーザーの欲しい情報に到達させるためには、マルチカラムレイアウトで作成し、サイドバーにブログ記事のカテゴリーや人気記事のランキングなどを表示させるとよいでしょう。
グリッドレイアウトを活用して、複数の記事を並べることも効果的です。
ブランドサイト
ブランドサイトは、ブランドのイメージやコンセプトをわかりやすく伝えることが目的です。ホームページに訪れたユーザーの印象に残るよう、イメージ画像やキャッチコピーが画面いっぱいに表示されるフルスクリーンレイアウトが適しているでしょう。
また、フルスクリーンレイアウトを使えば、ヘッダーやサイドバーが目立たなくなるため、コンテンツを強調したいブランドサイトにピッタリです。
おしゃれなレイアウトのおすすめ参考サイト4選
ここではホームページのレイアウト例をまとめた、おすすめ参考サイトを4選紹介します。「ホームページを製作したいけれど、なかなかイメージが湧かない」という人は、一度参考にしてみてください。
MUUUU.ORG
（出典：MUUUU.ORG）
「MUUUU.ORG（ムーオルグ）」は、縦長のホームページをまとめているギャラリーサイトです。
シングルカラムレイアウトやフルスクリーンレイアウトを活用したホームページが多数掲載されており、コーポレートサイトやブランドサイトの参考になるでしょう。
目的のイメージに絞りたい場合は、カテゴリー別に検索できます。
SANKOU！
（出典：SANKOU！）
「SANKOU！（サンコウ）」は、日本国内の“ステキなホームページ”をまとめているギャラリーサイトです。参考サイト数は約3,000種類以上あり、便利な絞り込み機能で目的のデザインをすぐに見つけられます。
また、ホームページの種類や特徴、業種、配色、レイアウトなど、条件を細かく指定して検索も可能です。
I/O 3000
（出典：I/O 3000）
「I/O 3000」は、日本国内のみならず海外のホームページもまとめているギャラリーサイトです。カテゴリーやカラー別に検索可能なほか、アーカイブから昔のホームページデザインを見ることもできます。
国内外のさまざまなホームページを参考にしたい人におすすめです。
Web Design Clip
（出典：Web Design Clip）
「Web Design Clip（ウェブデザインクリップ）」は、国内外のクリエイティブでおしゃれなホームページをまとめているギャラリーサイトです。
ランディングページやスマートフォン向けのデザインが数多く掲載されているため、レスポンシブに対応したホームページ制作にも役立ちます。
ホームページの目的に合ったレイアウトを選ぼう
ホームページ制作において重要なことは、目的に合ったレイアウトを選択することです。まずは各構成パーツの役割や、レイアウト基礎知識の理解を深めることから始めましょう。
ホームページのレイアウトパターンは主に4種類ありますが、考えなしに選んでは効果がありません。目的別に適したレイアウトを選ぶことが重要です。
ホームページ制作のイメージが湧かない場合は、デザインをまとめたギャラリーサイトも参考にしてみてください。
ホームページ制作のご相談は『株式会社Gizumo』へ
当社『株式会社Gizumo』では、ITエンジニアのプロ集団としてWEB制作からシステム開発まで幅広いご相談をいただいております。
「具体的なデザインがまだ決まっていない」「まだ予算が決まっていない」「要件定義がまだできていない」という状況であっても1から並走しサポートいたしますのでお気軽にお問い合わせください。
