ホームページレイアウトの基本!目的別の選び方をわかりやすく解説

この記事のレベル
初心者
(3.5)
重要度
(4.0)
難しさ
(2.0)

こんにちは、編集長のカワウソです!

はじめてホームページを作成する際、「レイアウト=単なる配置やデザイン」と考えている人は多いでしょう。

しかし、レイアウトは「ユーザーに伝えたい情報を効率よく届ける」ために、重要な意味を持ちます。

そこで今回は、基礎的な知識から目的別のおすすめレイアウトまで幅広く解説します。

カワウソ

この記事は次のような人におすすめ!

  • はじめてホームぺージを作る人
  • ホームぺージレイアウトの種類を知りたい人
  • 自社に合うホームぺージレイアウトを選びたい人

この記事を読めば、自社に合うレイアウトが選べるため、ホームぺージの目的が達成しやすくなります。

それではどうぞ!

ホームページのレイアウト作成に必要な4つのパーツ

ホームページは、大きく分けて次の4つのパーツから構成されています。

ホームぺージレイアウト構成に必要な4つのパーツ

それぞれのパーツをどこに配置するか決めることを「レイアウト」と呼びます。

ホームページを自作する場合だけでなく、Web制作会社に依頼する場合にも必要な知識ですので、覚えておくと役に立ちます。

まずは各パーツについて理解しましょう。

ヘッダー

最上部に位置するパーツを「ヘッダー」と呼びます。

ヘッダーの説明

ヘッダーには、企業やホームページのロゴ、お問い合わせへのリンクや検索フォームなどを設置するのが一般的です。

ナビゲーション

目次やメニューの役割を持つパーツが「ナビゲーション」です。

ナビゲーションの説明

ユーザーが求めている情報を探しやすいように、他ページへのリンクが配置されます。

コンテンツ

ホームぺージの中身(本文)を記載するパーツが「コンテンツ」です。

コンテンツの説明

自社の強みや商品など、ページによってさまざまな情報が記載されます。

フッター

最下部に位置するパーツが「フッター」です。

フッターの説明

フッターには、会社情報や他ページへのリンクを配置するのが一般的です。

ページを最下部まで閲覧したユーザーが次の行動に迷わないように、他のページを案内する役割があります。

ホームページでよく使われる4種類のレイアウト

ホームぺージを構成しているパーツの把握ができたら、いよいよレイアウトについて学んでいきましょう。

よく使われるレイアウトのパターンは大きく4種類に分けられます。

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

それぞれのパーツを縦並びに配置するのが「シングルカラムレイアウト」です。

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

スマホでホームぺージを閲覧するユーザーが増えている現在、需要が高いレイアウトです。

需要が高い理由の一つに、「レスポンシブWebデザインと相性が良い」ことが挙げられます。

レスポンシブwebデザインとは?

パソコン・スマホ・タブレットなど、デバイスごとに異なる画面のサイズに対応したWebデザインのこと。近年スマホでインターネットを利用するユーザーが増えたため、スマホ対応したホームぺージが必要になりました。ホームぺージを一つ用意すれば、どのデバイスにも最適化して表示してくれるため、制作コストを抑えられるメリットがあり、現在の主流となっています。

レスポンシブデザイン(それぞれのデバイスに最適化して表示する)

たとえば、次の項目で紹介する「マルチカラムレイアウト」の場合、パソコンとスマホでレイアウトを変更しなければいけません。

その点、シングルカラムレイアウトであれば、デバイスによる表示の違いが少ないため、1つのレイアウトで対応可能です。

パソコンとスマホのレイアウトが同じになる

以下、参考サイトです。

リライル会計事務所のホームぺージ

出典:リライル会計事務所

リライル会計事務所のホームぺージは、シンプルで見やすいシングルカラムレイアウトです。

タイトルや写真など、それぞれのコンテンツが大きいため、インパクトもあります。

マルチカラムレイアウト

複数のカラム(列)によって構成するのが「マルチカラムレイアウト」です。

マルチカラムレイアウト

コンテンツの隣にサイドメニューが配置されている点が特徴です。

コンテンツ閲覧中に、ユーザーが他のページを見たくなったとしても、サイドメニューがあればすぐに他のページを探せます。

したがって、マルチカラムレイアウトは、商品数の多いECサイトや情報量の多いニュースサイトなどで使用されるのが一般的です。

ただ、スマホサイトは画面の幅が短いため、「サイドメニュー」は表示できません。そのため、パソコンとスマホでレイアウトを組み替える必要があります。

パソコンとスマホでレイアウトが異なる

また、マルチカラムレイアウトは、サイドメニューの数によって次の2種類に分けられます。

マルチレイアウトの種類
  • 2カラムレイアウト
  • 3カラムレイアウト

それぞれのレイアウトについて詳しく見ていきましょう。

2カラムレイアウト

コンテンツの左右どちらかにサイドバーを配置し、ホームページ全体を2カラム(列)で構成する方法です。

2カラムレイアウト

以下、参考サイトです。

北欧、暮らしの道具展

出典:北欧、暮らしの道具店

「読みもの(メディア)」と「お買いもの(ECサイト)」の両方を提供する「北欧、暮らしの道具店」は、情報量が多いホームぺージです。

しかし、サイドメニューがあるため、いつでも目的のページを見つけられます。

スマホサイトだと、サイドメニューの内容はハンバーガーメニューに挿入されています。

ヘッダーも固定で追従してくるため、スマホサイトでも「操作性が高い」といえます。

北欧、暮らしの道具店のスマホサイトのハンバーガーメニュー

出典:北欧、暮らしの道具店

3カラムレイアウト

コンテンツの両隣にサイドバーを配置し、3カラム(列)でホームページを構成する方法です。

3カラムレイアウト

Yahoo! JAPANのトップぺージが3カラムです。

Yahoo! JAPANのトップぺージ

出典:Yahoo! JAPANのトップぺージ

Yahoo! JAPANはアクセスするユーザーが多い大規模ポータルサイトです。ポータルとは英語のPortalで、「入口」や「玄関」という意味があります。

インターネットブラウザを開く際、一番最初にGoogleやYahoo! JAPANなどを開く人が多いと思いますが、まさにそれらがポータルサイトです。

検索窓、ニュース、天気、占い、辞書など、ユーザーが利用したくなるサービスが豊富に取り揃えられています。

3カラムを利用すれば、目的が異なるユーザーが訪問しても、網羅的に情報を提供できます。

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

コンテンツ

コンテンツをホームページ全体に配置しているのが「フルスクリーン型レイアウト」です。

コンテンツ以外のパーツが最小化もしくは非表示にされるため、「コンテンツ」を目立たせられます。

この記事で紹介するレイアウトの中でも、一番ユーザーにインパクトを与えられるでしょう。

たとえば、沖縄県にある「古宇利島(こうりじま)」のホームぺージをご覧ください。

出典:古字利島

コンテンツが動画ということもあり、古字利島がどんなところか、一目で分かります。

また、動画がフルスクリーンで表示されるため、海の広大さが伝わってきます。

このように、写真や動画を最大限活かしたいなら、フルスクリーン型レイアウトがおすすめです。

グリッド型レイアウト

グリッド型レイアウト

複数のコンテンツをカード状に並べたレイアウトが「グリッド型レイアウト」です。

写真など多くの情報を1画面で表示できるため、視覚的に楽しく、おしゃれで遊び心を感じるホームページに仕上がります。

以下参考サイトです。

Pinterest(ピンタレスト)

出典:Pinterest-ピンタレスト

Pinterest は、レシピやインテリア、ファッションなど生活をもっと楽しくしてくれるアイデアを発見・整理するツールです。

多くの写真が同時に複数表示されるため、ユーザーは瞬時にそれらを見比べ、自分の興味が湧くものを選べます。

ホームページの目的別おすすめレイアウトを紹介

ホームページの目的によって、最適なレイアウトは異なります。

ここでは、代表的なホームぺージの種類とともに、おすすめを紹介します。

コーポレートサイト

コーポレートサイトの目的は「会社のことを知ってもらう」です。

コーポレートサイトのおすすめは「シングルレイアウト」。

創業期など、はじめて作るコーポレートサイトは情報量がそこまで多くないため、サイドメニューは必須ではありません。

多くの場合、サイドメニューがなくても、ユーザーは他のページに問題なく辿り着けるでしょう。

むしろ、サイドメニューがない分、コンテンツを大きく見せられたり、特定のコンテンツにユーザーを集中させられたりします。

また先述の通り、シングルレイアウトであれば、スマホ対応したホームぺージを作りやすいです。制作時間やコストも抑えられるため、おすすめです。

以下、参考です。

長谷川酒造のホームぺージ

出典:長谷川酒造株式会社

自社の掲げるビジョンや商品の価値を分かりやすく伝えるため、キャッチコピーやイメージ画像をメインコンテンツに配置したシンプルな構成になっています。

とはいえ、「ヘッダー(ナビゲーション)」や「フッター」もあり、トップぺージのみならず、他のページにも容易にアクセスできます。

ブランドサイト

ブランドサイトの目的は「ブランドのことを知ってもらう」や、「ブランドの価値や信頼性を伝える」です。

ブランドサイトには「シングルカラムレイアウト」もしくは「フルスクリーン型レイアウト」がおすすめ。

商品やサービスのイメージを画面いっぱいに表示すれば、ユーザーにブランドイメージを印象付けられます。

以下参考です。

IG証券のホームぺージ

出典:IG証券

コンテンツがほぼ全面を占める構成になっており、ナビゲーションなどのパーツは最小限に留められています。

「THE NEW STANDARD 投資の常識を、ぶっ壊せ」というメッセージとともに、飛び込んでくる写真がインパクト大です。

ページをスクロールしていくと、動画が再生されたり、「投資とは、何か。」というメッセージが出現したりします。

まさにIG証券というブランドを表現するホームぺージといえます。

サービスサイト

サービスサイトの目的は「サービスのことを知ってもらう」「サービスに申し込んでもらう」です。

サービスサイトには「シングルカラムレイアウト」もしくは「マルチカラムレイアウト」がおすすめ。

どちらでも構いませんが、ユーザーが情報を探しやすい設計にしましょう。

とくにサービスサイトにおいては、ヘッダーやフッターに「電話番号」を表記したり、「お問い合わせ」や「申し込み」のボタンを配置したりしましょう。

そうすれば、ユーザーがサービスに興味を持った際、すぐにアクションが取れます。

以下参考を2つ紹介します。

Canon キャノンビズアテンダ株式会社のホームぺージ

出典:Canon キャノンビズアテンダ株式会社

コンサルティング業を営むCanon キャノンビズアテンダ株式会社のホームぺージには、シングルレイアウトカラムが採用されています。

ページ数は少なくありませんが、フッターに他のページへのリンクが網羅されているため、情報が探せないといったことはありません。

Aflac(アフラック)のホームぺージ

出典:Aflac(アフラック)

保険を販売するAflacのホームページには、マルチカラムレイアウト(3カラム)が採用されています。

訪問するユーザーは、保険の契約前の方もいれば、契約済みの方もいます。どちらのユーザーが訪問しても困らないように、サイドメニューにリンクが設置されています。

また、サイドメニューが固定されているため、ユーザーが「資料請求したい」と考えたとき、すぐにアクションが取れます。

ヘッダーを固定しても同じことはできますが、可視範囲が狭くなってしまいます。

サイドメニューであれば常に表示させていても、コンテンツの邪魔になりません。

近年は横長のワイド型モニターが流行しているため、上手く合理性を取ったホームぺージといえます。

ECサイト

ECサイトとは、インターネット上で商品を販売するホームページのことです。ECは英語のelectronic commerceの略で電子商取引と訳されます。

ECサイトの目的は「商品を購入してもらう」です。

ECサイトには「マルチカラムレイアウト」がおすすめです。

ヘッダーに「ご注文方法」のリンクや「お買い物かご」のボタンがあれば、はじめて利用するユーザーにとっても使いやすいでしょう。

また、商品選びに迷っても、サイドメニューからすぐに他の商品を探せます。

以下参考サイトです。

北海道 北釧水産のホームぺージ

出典:北海道 北釧水産

北海道 北釧水産のECサイトのように、商材によっては商品詳細ページが長くなってしまうケースもあります。

それは商品の魅力を伝えるために必要なことですが、ユーザーによっては途中で他の商品を見たくなる場合もあるでしょう。

サイドメニューで他のページへの移動がしやすければ、ユーザーが離脱するリスクを軽減できます。

自社のホームページに最適なレイアウトを参考にできるサイト

ホームページのレイアウトには、セオリーこそ存在しますが正解はありません。

そこで、他社のホームページレイアウト事例をまとめている参考サイトを5つ紹介します。

最適なレイアウトのイメージをつかむために活用してみてください。

SANKOU!

SANKOU!のホームぺージ

出典:SANKOU!

「SANKOU!」は、高い更新頻度と細かい絞り込み設定で、多くのユーザーに活用されているWebデザインギャラリーサイトです。

「Webデザイン制作の参考になる国内のステキなサイト集」をコンセプトとし、さまざまな種類のホームページレイアウト事例が掲載されています。

業種別やレイアウト別はもちろん「サイトの雰囲気や配色などの抽象的な情報」からでも絞り込みが可能。

漠然としたイメージしかない場合でも、参考になる事例を見つけやすいのが魅力です。

S5-Style

S5-Styleのホームぺージ

出典:S5-Style

クオリティの高いWebサイトを中心に掲載しているWebデザインギャラリーが「S5-Style」です。

幅広いカテゴリーから絞り込みできるのはもちろん、AND検索やOR検索も可能なため、参考にしたいホームぺージを素早く見つけられます。

straightline bookmark

straightline bookmarkのホームぺージ

出典:straightline bookmark

「straightline bookmark」は、大きなサムネイルが特徴のWebデザイナー向けギャラリー・リンク集です。

2万点以上という圧倒的な数の事例を掲載しているため、「さまざまなサイトをじっくりとチェックして、参考にするレイアウトを決めたい」という人におすすめです。

MUUUUU.ORG

MUUUUU.ORGのホームぺージ

出典:MUUUUU.ORG

縦長サイトの参考事例を探している人におすすめなのが「MUUUUU.ORG」です。

2万点以上のデザインのなかから「業種」「デザイン」「カラー」「サイト」の種類で絞り込みができます。

縦長サイトに特化したWebデザインギャラリーのため、スマホ向けホームページの事例を探している人はぜひ活用してみてください。

I/O 3000

I/O 3000のホームぺージ

出典:I/O 3000

国内だけでなく海外の事例も参考にしたいという人には「I/O 3000」がおすすめです。

カテゴリによる絞り込みができるのはもちろん、スライドショーで流し見できるため、サイト上で事例元の雰囲気が掴みやすいメリットもあります。

世界的な最新トレンドを参考に、独創的なホームページが作りたいという人はぜひ活用してみてください。

まとめ

今回は、ホームぺージのレイアウトやパーツについて解説しました。

まとめ
  • ホームぺージの基本のパーツをどこに配置するか決めることを「レイアウト」と呼ぶ
  • ホームぺージでよく使われるパーツとレイアウトはそれぞれ4種類がある
  • ホームぺージの種類・目的にあうレイアウトを選ぶことが大切
  • 迷う場合はデザインのギャラリーサイトを参考にする

ぜひこの記事を参考に、自社のホームぺージの種類や目的に合う、魅力的なレイアウトを選んでください。

以上、最後まで読んでいただきありがとうございました。

安定度の高いレンタルサーバーをお探しの方へ

エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1のレンタルサーバーであり、16万社の導入実績があります。

12月9日12時まで利用料金最大30%OFFキャンペーン開催中です!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

※ 2022年10月時点、hostadvice.com調べ。

ホームページ制作を無料で依頼したい方

法人向けレンタルサーバー「Xserverビジネス」なら、
ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します!

ホームページ無料制作サービスの詳細はこちら!

Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

これから始める方はこちらのホームページの作り方をぜひご覧ください!

【初心者向け】会社ホームページの作り方を基礎から解説

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!