【簡単解説】ホームページレイアウトの基本｜4種類のパターンも紹介

ホームページレイアウトとは

ホームページレイアウトとは要素の配置方法のことです。

何をどこに配置するかによってホームページの見やすさ・情報の伝わりやすさが異なります。不規則に要素を並べただけでレイアウトが練られていないホームページでは、ユーザーに何も伝えられずページの目的を達成できません。

ホームページの目的を明確にしたうえで、その目的に合った方法で要素を配置してください。次章ではまずホームページの構成要素を紹介します。

ホームページレイアウトを構成する4つの名称

ホームページは下記の4つの要素で構成されています。

ヘッダー

ホームページの最上部に配置される要素でサイト名やロゴ、資料請求リンクなどの重要なパーツを表示します。画面内でヘッダーの位置を固定し、下へスクロールしてもヘッダーが残り続ける仕様も一般的です。

ナビゲーション

ナビゲーションは、ホームページにある主要コンテンツへのリンクや検索窓を表示する要素です。「目次」「メニュー」とも呼ばれます。

ナビゲーションが配置されるのは主にヘッダー内やヘッダー直下、サイドメニューなどです。ナビゲーションを2つ配置する場合、大きいほうを「グローバルナビゲーション」、小さいほうを「サブナビゲーション」と言います。

コンテンツ

コンテンツは、ホームページのメインとなる要素です。サービスページならサービス紹介、メディアなら記事本文といったように、そのページの中心となるパーツが表示されます。

フッター

フッターは、主に会社概要や問い合わせなどのリンクやコピーライトをページの最下部に配置する要素です。コンテンツまでの要素で求めていた情報を得られなかった、もしくは内容に満足できなかったユーザーを適切なページへ導く意味もあります。

ホームページで一般的なレイアウトパターン4種類

4つの要素を組み合わせるホームページレイアウトの主なパターンが下記です。

シングルカラムレイアウト

シングルカラムレイアウトは、要素を上下に連なる形で配置したホームページレイアウトです。

パソコンと比べて画面が小さいスマートフォンで閲覧するユーザーが増えたことから、スッキリと見やすいシングルカラムレイアウトがより一般的になりました。企業や商品、サービスを紹介するサイトで主に利用されます。

マルチカラムレイアウト

マルチカラムレイアウトは、左右どちらかもしくは両方にサイドバーを配置したレイアウトです。ニュースサイトやポータルサイトなど情報量の多いサイトでよく用いられます。サイドバーが1つのものを「ダブルカラムレイアウト」、サイドバーが2つのものを「トリプルカラムレイアウト」と言います。

マルチカラムレイアウトの場合、スマートフォンでは視認性が悪く使いやすくありません。スマートフォン向けのシングルカラムレイアウトも用意するなど、レスポンシブデザインに対応しましょう。

フルスクリーン型レイアウト

ヘッダーやナビゲーションをなくし、コンテンツを全面に表示するのがフルスクリーン型レイアウトです。ブランドや商品の持つイメージを伝えやすく、画像や動画をメインとしたコンテンツでは特に有効的です。文章は読みづらいため文字で情報を伝えたいホームページには向いていません。

グリッド型（カード型）レイアウト

複数のコンテンツをカードのように並べた形式のレイアウトです。ユーザーが視覚的に楽しめるほか、自分の趣味に合ったコンテンツをすぐに選べるといったメリットがあります。Pinterestのような画像をメインとしたSNSや、Amazonのような多くの商品が並列されるECサイトで利用されます。

自社に合ったホームページレイアウトの選び方

自社のホームページに合ったレイアウトを選ぶ際は、次の2つのポイントを意識しましょう。

ホームページの目的に合わせて選ぶ

ホームページに適したレイアウトは、そのページの目的次第です。以下の4パターンに分けて、おすすめのレイアウトを紹介します。

コーポレートサイト：シングルカラム

参照元：キリンホールディングス

コーポレートサイトには自社のイメージを伝えることやユーザーが求める情報を届けることの両立が必要です。シングルカラムレイアウトはシンプルな構成で、画像と文字を適度に組み合わせながら発信できます。

また多くの場合、コーポレートサイトにサイドバーは必要ありません。マルチカラムにはせず、内部リンクはヘッダーやフッターに配置すれば十分でしょう。

ブランドサイト：フルスクリーン

参照元：スナックミー

多くのブランドサイトは、ブランドのイメージをユーザーにわかりやすく届けることが目的です。ユーザーにイメージを届けるには、画像やキャッチコピーを大きく表示するのが効果的です。フルスクリーン型レイアウトであればヘッダーやサイドバーを取り除いてコンテンツを目立たせられるため、ブランドサイトに向いています。

ECサイト：マルチカラム

参照元：とまりのつけもの

さまざまな商品を販売しているECサイトでは、ユーザーが欲しい商品にすぐたどり着けるような検索性が重要です。おすすめ商品や商品一覧、キャンペーン告知などをコンテンツとしたうえで、サイドバーにカテゴリーや検索窓を配置して検索性を高めましょう。

ブログ・メディアサイト：マルチカラム

参照元：CHAGOCORO

ブログやメディアの目的はユーザーに記事を読んでもらうことです。ECサイトと同様に、ユーザーが目的の記事をすぐに見つけられる検索性の良さが欠かせません。カテゴリーや人気記事一覧をサイドバーに表示し、ユーザーが使いやすいホームページを作りましょう。

制作コストで選ぶ

レイアウトによってホームページの制作コストが異なります。基本的に、複雑な処理が不要でレスポンシブ対応も簡単なシンプルなレイアウトのほうが制作コストは安価です。「簡易的なホームページでもいいからまずはコストを抑えたい」という場合はシングルカラムレイアウトのようなシンプルな構成を選びましょう。

おしゃれなホームページのレイアウト探せるサイト3例

おしゃれなホームページレイアウトのサンプルを探す際、次の3つのサイトが便利です。

SANKOU!

参照元：SANKOU!

SANKOU!は国内のおしゃれなホームページレイアウト事例を集めたサイトです。およそ3000の事例から下記のようなカテゴリーわけに応じてサイトを探せます。

「わかりやすい・実用的」や「スタイリッシュ・洗練・モダン」など感覚的な特徴からサイトを探せることも特徴です。

MUUUUU.ORG

参照元：GRUUUUU.ORG

MUUUUU.ORGは縦長のホームページを厳選して集めている事例サイトです。モバイルファーストなホームページを制作したい方はぜひ活用してください。キーワード検索はできませんが、ホームページの種類や業種、色味のイメージでの絞り込みは可能です。

I/O 3000

参照元：I/O 3000

I/O 3000は国内と海外の両方のホームページレイアウト事例を探せるサイトです。業種や色味に加えて、アーカイブされた年でも絞り込めます。古いホームページや海外サイトも含めて幅広くサンプルを探したい方におすすめです。

まとめ｜レイアウトはホームページの目的によって決めよう

この記事ではホームページレイアウトの種類や選び方を解説しました。

目的ごとのおすすめなホームページレイアウトの例が下記です。

目的に合わせてレイアウトを選び、効果的なホームページを作成してください。

監修者のコメント

SUGI WORK

代表 杉山茂幸

山形県出身。埼玉県越谷市と山形県上山市の2拠点で活動中のフリーランス。開業5年目でSUGI WORK代表。国内・海外法人から行政案件まで経験。WEB制作をはじめ、デザイナー・エンジニア・出張撮影・ドローン空撮・取材・自社メディア運営など幅広い分野で活動中。中小企業の課題解決が得意。

詳しく見る

ホームページを作成しようと思った際に最も悩ましいのはデザインとレイアウトではないでしょうか。デザインを決めようにも、全体のレイアウトや仕様を決めないとデザインも定まらず苦慮している方も多いのではないでしょうか。現在のトレンドは記事で紹介したとおりですが、やはりスマートフォンに対応しているかどうかが重要なポイントになってくると思います。

私のお客様でもパソコンは二の次でとにかくスマートフォン向けの見栄えを良くしたいという相談はよく持ち込まれています。スマートフォンとパソコンのレイアウトの2つが破綻しないレイアウト設計を取り入れることが現代のWEB制作においてとても重要なポイントになってくるのではないでしょうか。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。