ホームぺージを開設するなら今!

国内シェアNo.1のレンタルサーバー
\エックスサーバーのお得な情報/

※ 2023年10月時点、 W3Techs調べ。

ホームページレイアウトの基本!種類や選び方を分かりやすく解説

\この記事をシェアする/

カワウソ

当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。

【2023年7月7日更新】より記事の理解が深まるように、関連記事を設定しました。

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

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

「ホームページのレイアウトって何?どんな種類があるの?」と悩んでいませんか?

そこで今回は、ホームページレイアウトの基礎知識はもちろん、種類や選び方を分かりやすく解説します。

カワウソ

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

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

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

それではどうぞ!

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

レイアウトとは、ホームページのパーツをどこに配置するのかを決めること。
または、その配置パターンを指します。

ホームページは、一般的に次の4つのパーツから構成することが多いです。

これらのパーツは、ホームページを自作する場合だけでなく、外注する場合にも必要な知識です。
ぜひこの機会に理解を深めましょう。

それでは、それぞれのパーツについて解説します。

なお、すでに知っているという方は、「ホームページでよく使われる4種類のレイアウト」まで読み飛ばしてください。

ヘッダー

ヘッダーは、一般的にホームページの最上部に位置するパーツを指します。

ヘッダーには、以下の要素を配置することが多いです。

ヘッダーの構成要素の例
  • 企業やサービスのロゴ
  • 資料請求やお問い合わせのボタン
  • 検索フォーム
  • ナビゲーション
ホームページに適したロゴとは?作り方やお役立ちサイトを紹介

なお、ヘッダーについては、以下の記事で詳しく解説しています。

【2023年最新版】参考にしたいヘッダーデザイン集

ナビゲーション

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

ナビゲーションには、他のページへのリンクを設置します。

ナビゲーションがないと、ユーザーが目的のページを探しづらくなるでしょう。
その結果、ユーザーがホームページから離脱してしまうかもしれません。

ユーザーが目的のページを見つけられるように、ナビゲーションを設置しましょう。

なお、他のページに共通して表示するものを「グローバルナビゲーション」と呼びます。
詳しくは、以下の記事で解説しているので、あわせてチェックしてみてください。

グローバルナビゲーションとは?作り方のポイントやデザイン例を解説


コンテンツ

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

カワウソ

ここではコンテンツ(情報)そのものではなく、掲載するエリア(場所)として捉えてください。
コンテンツとは?意味や種類を分かりやすく解説

たとえば、トップページには「自社の強み」や「ニュース(お知らせ)」などを記載することが多いです。

トップページにすべての情報を掲載してしまうと、とてつもなく長いページになってしまいます。
そのため、トップページには概要だけを載せて、詳しい情報は下層ページを案内するのがよいでしょう。

詳しくは、以下の記事で解説しています。

トップページとは?ホームぺージ作りで意識すべきポイント

フッター

ホームページの最下部に位置するパーツが「フッター」です。

フッターの説明

フッターには、ページを最下部まで閲覧したユーザーが次の行動に迷わないように、サポートする役割があります。

会社情報はもちろん、他ページへのリンクを中心に掲載しましょう。

詳しくは、以下の記事で解説しているので、あわせてチェックしてみてください。

【2023年最新版】参考にしたいフッターデザイン集

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

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

ホームページによく使われるレイアウトは、大きく以下の4種類に分けられます。

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

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

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

シングルカラムレイアウトは、「レスポンシブデザイン」と相性がよいため、スマホユーザーが増えた近年では、よく見かけるようになりました。

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

パソコン、スマホ、タブレットなど、デバイスごとに最適化したページを表示できるデザインのこと。作るホームページが一つだけのため、製作にかける時間やコストを抑えられるメリットがあります。

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

レスポンシブデザインについては、以下の記事で詳しく解説しています。

スマホ対応ホームページの作り方!初心者向けに分かりやすく解説

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

その点、シングルカラムレイアウトであれば、デバイスが異なってもレイアウトが大きく変わることがないため、ホームページを作りやすいのです。

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

なお、弊社『エックスサーバー』のホームページでも、シングルカラムレイアウトを使用しているので、ぜひ参考にしてみてください。

エックスサーバーのトップページ

マルチカラムレイアウト

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

マルチカラムレイアウト

特徴は、コンテンツの隣にサイドメニュー(サイドバー)を配置する点。
サイドメニューがあれば、ユーザーがコンテンツ閲覧中に他のページを見たくなったとしても、すぐにアクセスできます。

その利点から、マルチカラムレイアウトは、商品数の多い「ECサイト」や情報量の多い「ニュースサイト」などで、使用されることが多いです。

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

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

サイドメニューをスマホサイトで扱う方法は、主に以下の2つです。

サイドメニューをスマホサイトで扱う方法2つ
  1. ページ下部に入れる
  2. ハンバーガーメニューに入れる

詳しくは、以下の記事で解説しているので、あわせてチェックしてみてください。

【2023年最新版】参考にしたいサイドバーデザイン集

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

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

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

2カラムレイアウト

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

2カラムレイアウト

たとえば、弊社『エックスサーバー』では、マニュアルページにこの2カラムレイアウトを使用しています。

エックスサーバーのマニュアルページ

前述のとおり、サイドメニューがあることで、マニュアル閲覧中に他に気になることが出てきても、検索窓から探したり、他のページに直接アクセスしたりが可能です。

カワウソ

このように、トップページはシングルレイアウト、下層ページは2カラムレイアウトといったように、併用しているホームページも少なくありません。

3カラムレイアウト

3カラムレイアウトは、コンテンツの両隣にサイドメニューを配置し、3カラム(列)でホームページを構成する方法です。

3カラムレイアウト

たとえば、『Yahoo! JAPAN』のトップぺージが3カラムです。

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

『Yahoo! JAPAN』は、日本最大級のポータルサイト。
ポータルとは、英語のPortalで「入口」や「玄関」という意味があります。

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

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

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

コンテンツ

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

コンテンツ以外のパーツを、非表示もしくは最小化する分、「コンテンツ」を大きく見せられます。
そのため、画像や動画を画面いっぱいに表示させるなど、インパクトを出したいときにおすすめです。

とはいえ、ヘッダーやフッターなどのパーツを非表示もしくは最小化する分、ユーザーにとってはホームページの全体像(構成)が把握しづらいデメリットも。

下層ページの存在にユーザーが気付かないおそれもあるので、ページ数の多いホームページで使用するときは、注意しましょう。

グリッド型レイアウト

グリッド型レイアウト

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

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

参考に、『Pinterest』のホームページを見てみましょう。

Pinterest(ピンタレスト)

▲出典:Pinterest-ピンタレスト

『Pinterest』は、レシピ、インテリア、ファッションなどの「生活をもっと楽しくしてくれるアイデア」を発見および整理できるサービスです。

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

【ホームページの種類別】おすすめレイアウトと参考事例

ここからはホームページの種類(目的)ごとに、おすすめのレイアウトを紹介します。

ホームページの種類
  • コーポレートサイト
  • ブランドサイト
  • サービスサイト
  • ECサイト

カワウソ

主には、創業期の企業向けの内容となっています。レイアウトの選定に正解はないため、あくまでも参考程度にしてください。

コーポレートサイト

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

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

創業期など初めて作るコーポレートサイトは、情報量がそこまで多くないため、サイドメニューはなくても構いません。
多くの場合、シングルカラムレイアウトでも、ユーザーは他のページに問題なくたどり着けるでしょう。

また前述のとおり、シングルカラムレイアウトであれば、スマホ対応のホームぺージを作りやすいです。
そのため、ホームページ初心者の方には向いています。

以下、参考事例です。

長谷川酒造株式会社

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

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

まず、ファーストビュー(最初に表示される画面領域)のキャッチコピーと写真が印象的ですよね。
一目見て「お酒を扱う会社のホームページ」であると分かります。

コーポレートサイトの目的は、会社のことを知ってもらうこと。
ファーストビューで、自社のことを明確に伝えることが重要です。

コーポレートサイトとは?目的や役割、掲載内容を詳しく解説

今回のテーマであるレイアウトに注目してみましょう。

シングルカラムレイアウトであるため、ファーストビューはもちろん、コンテンツエリアの写真も大きく表示されており、インパクトがありますね。

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

ホームページに書かれているとおり、「手作業へのこだわり」が写真からもひしひしと伝わってきます。

そのほか、追従型のヘッダーなど、ユーザーが迷わないための工夫にも注目してみてください。

ブランドサイト

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

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

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

以下、参考事例です。

IG証券

▲出典:IG証券

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

「目に映るあらゆるものを、投資対象に。」というメッセージとともに、飛び込んでくる写真がインパクト大。
ページをスクロールすると動画が再生され、よりそのメッセージを表現した世界観に没入します。

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

なお、ホームページの動画については、以下の記事で詳しく解説しています。

ホームページに動画を載せるメリットやデメリット!埋め込み手順も解説

サービスサイト

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

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

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

サービスサイトでは、ヘッダーやフッターに「電話番号」を表記したり、「お問い合わせ」ボタンを配置したりするのがおすすめ。
そうすれば、ユーザーがサービスに興味を持ったときに、すぐにアクションを取れます。

以下、参考事例2つです。

Smart HR

▲出典:Smart HR

クラウド人事労務ソフト『Smart HR』のホームぺージには、シングルレイアウトカラムが使用されています。

サイドメニューがない分、それぞれのコンテンツが大きく表示されていて、見やすいですよね。

▲出典:Smart HR

見やすいホームページは何が違うのか!?押さえるポイントを紹介

また、ヘッダーには「お問い合わせ」や「お役たち資料」のボタンがあります。
追従型のヘッダーなので、ユーザーはすぐにそれらのボタンを見つけることが可能です。

ホームページに使うボタンのポイント3つ!設置方法や素材も紹介

また、フッターには他ページへのリンクが網羅されています。
これなら、ユーザーが情報探しに迷う心配もありません。

▲出典:Smart HR

このように、情報が多いホームページでシングルカラムレイアウトを使用する場合は、サイドメニューがない分、ヘッダーやフッターを工夫しましょう。

Aflac

▲出典:Aflac(アフラック)

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

このホームページを訪問するユーザーには、保険の契約前の方もいれば、契約済みの方もいます。
どちらのユーザーが訪問しても困らないように、サイドメニューに「保険をご検討の方」と「ご契約者の方」のリンクが設置されていますね。

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

たとえば、ヘッダーを固定しても同じことはできますが、可視範囲が狭くなってしまうでしょう。
サイドメニューであれば、固定していてもコンテンツの邪魔になりにくいです。

近年は、横長のワイド型モニターが流行しているため、理にかなったレイアウトだと言えます。

ECサイト

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

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

ECサイトには「マルチカラムレイアウト」がおすすめ
サイドメニューがあれば、ページ閲覧中にほかの商品も探せます。

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

以下参考サイトです。

北海道 北釧水産

▲出典:北海道 北釧水産

『北海道 北釧水産』のECサイトの特長は、商品ページに魅力的な写真が多く並んでいること。

当然その分ページが長い訳ですが、サイドメニューから、このお店の商品ラインナップを確認できます。

▲出典:北海道 北釧水産

これなら、ほかの商品と比較しながら、ショッピングが楽しめますよね。

蟹一つとっても、種類やサイズなどが豊富な『北海道 北釧水産』のホームページだからこそ、「選べる」楽しみがあるのです。

レイアウトから参考ホームページを探せるギャラリーサイト

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

そこで、レイアウトから参考の企業ホームページを探せる「ギャラリーサイト」を2つ紹介します。

レイアウトから探せるギャラリーサイト
  • SANKOU!
  • WebDesignClip

自社に合うレイアウトを見つけるために、ぜひ参考にしてみてください。

SANKOU!

▲出典:SANKOU!

『SANKOU!』は、パソコンサイト(画面)とスマホサイト(画面)の切替ができるギャラリーサイト。

2023年7月現在、数にして約3,000以上の国内のホームページが掲載されています。
また更新性が高いのも魅力の一つです。

『SANKOU!』には、参考のホームページを効率的に探すために、カテゴリが複数用意されています。
レイアウトのカテゴリには、以下が用意されていますよ。

SANKOU!のレイアウト関連カテゴリ
  • レスポンシブ
  • 1カラム
  • 2カラム
  • 横スクロール
  • 一部横スクロール
  • グリッドレイアウト
  • スプリットレイアウト

ここで言う「1カラム」は、この記事で紹介した「シングルカラムレイアウト」のことです。

そのほか、ビジネスの業種やホームページの種類などからも探せるので、ぜひ参考にしてみてください。

WebDesignClip

▲出典:WebDesignClip

『Web Design Clip』は、国内と海外のホームページを取り扱うギャラリーサイト。
こちらも複数のカテゴリが用意されており、参考のホームページを探しやすいのが魅力です。

レイアウトについては、「TYPE_A」~「TYPE_F」までの計6種類が用意されています。

▲出典:WebDesignClip

気になる方は、画面右上にあるハンバーガーメニュー(三本線のアイコン「≡」)から、確認してみてください。

なお、ギャラリーサイトは以下の記事でも紹介しています。

【2023年最新版】ホームページデザインの参考になるギャラリーサイト12選

まとめ

今回は、ホームぺージのレイアウトの基礎知識はもちろん、種類や選び方について解説しました。

まとめ
  • レイアウトとは、「ホームページの基礎パーツの配置パターン」のこと
  • ホームぺージでよく使われるパーツとレイアウトは、それぞれ「4種類」がある
  • レイアウトの選定は、「ホームページの種類や目的」を参考にするのがおすすめ
  • レイアウトの選定に迷う場合は、「ギャラリーサイト」を参考にする

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

それでは、素敵なホームページの完成を願っております。

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

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

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

12月19日12時まで、サーバー利用料金が最大30%オフとなる『冬のトク割キャンペーン』を開催中です!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

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

※ 2023年10月時点、W3Techs調べ。

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

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

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

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

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

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

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

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

URLをコピーしました!