こんにちは、編集長のカワウソです！
はじめてホームページを作成する際、「レイアウト＝単なる配置やデザイン」と考えている人は多いでしょう。
しかし、レイアウトは「ユーザーに伝えたい情報を効率よく届ける」ために、重要な意味を持ちます。
そこで今回は、基礎的な知識から目的別のおすすめレイアウトまで幅広く解説します。
カワウソ
この記事は次のような人におすすめ！
- はじめてホームぺージを作る人
- ホームぺージレイアウトの種類を知りたい人
- 自社に合うホームぺージレイアウトを選びたい人
この記事を読めば、自社に合うレイアウトが選べるため、ホームぺージの目的が達成しやすくなります。
それではどうぞ！
目次
ホームページのレイアウト作成に必要な4つのパーツ
ホームページは、大きく分けて次の4つのパーツから構成されています。
それぞれのパーツをどこに配置するか決めることを「レイアウト」と呼びます。
ホームページを自作する場合だけでなく、Web制作会社に依頼する場合にも必要な知識ですので、覚えておくと役に立ちます。
まずは各パーツについて理解しましょう。
ヘッダー
最上部に位置するパーツを「ヘッダー」と呼びます。
ヘッダーには、企業やホームページのロゴ、お問い合わせへのリンクや検索フォームなどを設置するのが一般的です。
ナビゲーション
目次やメニューの役割を持つパーツが「ナビゲーション」です。
ユーザーが求めている情報を探しやすいように、他ページへのリンクが配置されます。
コンテンツ
ホームぺージの中身（本文）を記載するパーツが「コンテンツ」です。
自社の強みや商品など、ページによってさまざまな情報が記載されます。
フッター
最下部に位置するパーツが「フッター」です。
フッターには、会社情報や他ページへのリンクを配置するのが一般的です。
ページを最下部まで閲覧したユーザーが次の行動に迷わないように、他のページを案内する役割があります。
ホームページでよく使われる4種類のレイアウト
ホームぺージを構成しているパーツの把握ができたら、いよいよレイアウトについて学んでいきましょう。
よく使われるレイアウトのパターンは大きく4種類に分けられます。
シングルカラムレイアウト
それぞれのパーツを縦並びに配置するのが「シングルカラムレイアウト」です。
スマホでホームぺージを閲覧するユーザーが増えている現在、需要が高いレイアウトです。
需要が高い理由の一つに、「レスポンシブWebデザインと相性が良い」ことが挙げられます。
レスポンシブwebデザインとは？
パソコン・スマホ・タブレットなど、デバイスごとに異なる画面のサイズに対応したWebデザインのこと。近年スマホでインターネットを利用するユーザーが増えたため、スマホ対応したホームぺージが必要になりました。ホームぺージを一つ用意すれば、どのデバイスにも最適化して表示してくれるため、制作コストを抑えられるメリットがあり、現在の主流となっています。
たとえば、次の項目で紹介する「マルチカラムレイアウト」の場合、パソコンとスマホでレイアウトを変更しなければいけません。
その点、シングルカラムレイアウトであれば、デバイスによる表示の違いが少ないため、1つのレイアウトで対応可能です。
以下、参考サイトです。
▲出典：リライル会計事務所
『リライル会計事務所』のホームぺージは、シンプルで見やすいシングルカラムレイアウトです。
タイトルや写真など、それぞれのコンテンツが大きいため、インパクトもあります。
マルチカラムレイアウト
複数のカラム（列）によって構成するのが「マルチカラムレイアウト」です。
コンテンツの隣にサイドメニューが配置されている点が特徴です。
コンテンツ閲覧中に、ユーザーが他のページを見たくなったとしても、サイドメニューがあればすぐに他のページを探せます。
したがって、マルチカラムレイアウトは、商品数の多いECサイトや情報量の多いニュースサイトなどで使用されるのが一般的です。
ただ、スマホサイトは画面の幅が短いため、「サイドメニュー」は表示できません。そのため、パソコンとスマホでレイアウトを組み替える必要があります。
また、マルチカラムレイアウトは、サイドメニューの数によって次の2種類に分けられます。
- 2カラムレイアウト
- 3カラムレイアウト
それぞれのレイアウトについて詳しく見ていきましょう。
2カラムレイアウト
コンテンツの左右どちらかにサイドバーを配置し、ホームページ全体を2カラム（列）で構成する方法です。
以下、参考サイトです。
▲出典：北欧、暮らしの道具店
「読みもの（メディア）」と「お買いもの（ECサイト）」の両方を提供する『北欧、暮らしの道具店』は、情報量が多いホームぺージです。
しかし、サイドメニューがあるため、いつでも目的のページを見つけられます。
スマホサイトだと、サイドメニューの内容はハンバーガーメニューに挿入されています。
ヘッダーも固定で追従してくるため、スマホサイトでも「操作性が高い」といえます。
▲出典：北欧、暮らしの道具店
3カラムレイアウト
コンテンツの両隣にサイドバーを配置し、3カラム（列）でホームページを構成する方法です。
『Yahoo! JAPAN』のトップぺージが3カラムです。
『Yahoo! JAPAN』はアクセスするユーザーが多い大規模ポータルサイトです。ポータルとは英語のPortalで、「入口」や「玄関」という意味があります。
インターネットブラウザを開く際、一番最初にGoogleやYahoo! JAPANなどを開く人が多いと思いますが、まさにそれらがポータルサイトです。
検索窓、ニュース、天気、占い、辞書など、ユーザーが利用したくなるサービスが豊富に取り揃えられています。
3カラムを利用すれば、目的が異なるユーザーが訪問しても、網羅的に情報を提供できます。
フルスクリーン型レイアウト
コンテンツをホームページ全体に配置しているのが「フルスクリーン型レイアウト」です。
コンテンツ以外のパーツが最小化もしくは非表示にされるため、「コンテンツ」を目立たせられます。
この記事で紹介するレイアウトの中でも、一番ユーザーにインパクトを与えられるでしょう。
たとえば、沖縄県にある「古宇利島（こうりじま）」のホームぺージをご覧ください。
▲出典：古字利島
コンテンツが動画ということもあり、古字利島がどんなところか、一目で分かります。
また、動画がフルスクリーンで表示されるため、海の広大さが伝わってきます。
このように、写真や動画を最大限活かしたいなら、フルスクリーン型レイアウトがおすすめです。
グリッド型レイアウト
複数のコンテンツをカード状に並べたレイアウトが「グリッド型レイアウト」です。
写真など多くの情報を1画面で表示できるため、視覚的に楽しく、おしゃれで遊び心を感じるホームページに仕上がります。
以下参考サイトです。
▲出典：Pinterest-ピンタレスト
『Pinterest』は、レシピやインテリア、ファッションなど生活をもっと楽しくしてくれるアイデアを発見・整理するツールです。
多くの写真が同時に複数表示されるため、ユーザーは瞬時にそれらを見比べ、自分の興味が湧くものを選べます。
ホームページの目的別おすすめレイアウトを紹介
ホームページの目的によって、最適なレイアウトは異なります。
ここでは、代表的なホームぺージの種類とともに、おすすめを紹介します。
コーポレートサイト
コーポレートサイトの目的は「会社のことを知ってもらう」です。
コーポレートサイトのおすすめは「シングルレイアウト」。
創業期など、はじめて作るコーポレートサイトは情報量がそこまで多くないため、サイドメニューは必須ではありません。
多くの場合、サイドメニューがなくても、ユーザーは他のページに問題なく辿り着けるでしょう。
むしろ、サイドメニューがない分、コンテンツを大きく見せられたり、特定のコンテンツにユーザーを集中させられたりします。
また先述の通り、シングルレイアウトであれば、スマホ対応したホームぺージを作りやすいです。制作時間やコストも抑えられるため、おすすめです。
以下、参考です。
▲出典：長谷川酒造株式会社
自社の掲げるビジョンや商品の価値を分かりやすく伝えるため、キャッチコピーやイメージ画像をメインコンテンツに配置したシンプルな構成になっています。
とはいえ、「ヘッダー（ナビゲーション）」や「フッター」もあり、トップぺージのみならず、他のページにも容易にアクセスできます。
ブランドサイト
ブランドサイトの目的は「ブランドのことを知ってもらう」や、「ブランドの価値や信頼性を伝える」です。
ブランドサイトには「シングルカラムレイアウト」もしくは「フルスクリーン型レイアウト」がおすすめ。
商品やサービスのイメージを画面いっぱいに表示すれば、ユーザーにブランドイメージを印象付けられます。
以下参考です。
▲出典：IG証券
コンテンツがほぼ全面を占める構成になっており、ナビゲーションなどのパーツは最小限に留められています。
「THE NEW STANDARD 投資の常識を、ぶっ壊せ」というメッセージとともに、飛び込んでくる写真がインパクト大です。
ページをスクロールしていくと、動画が再生されたり、「投資とは、何か。」というメッセージが出現したりします。
まさに『IG証券』というブランドを表現するホームぺージといえます。
サービスサイト
サービスサイトの目的は「サービスのことを知ってもらう」「サービスに申し込んでもらう」です。
サービスサイトには「シングルカラムレイアウト」もしくは「マルチカラムレイアウト」がおすすめ。
どちらでも構いませんが、ユーザーが情報を探しやすい設計にしましょう。
とくにサービスサイトにおいては、ヘッダーやフッターに「電話番号」を表記したり、「お問い合わせ」や「申し込み」のボタンを配置したりしましょう。
そうすれば、ユーザーがサービスに興味を持った際、すぐにアクションが取れます。
以下参考を2つ紹介します。
コンサルティング業を営む『Canon キャノンビズアテンダ株式会社』のホームぺージには、シングルレイアウトカラムが採用されています。
ページ数は少なくありませんが、フッターに他のページへのリンクが網羅されているため、情報が探せないといったことはありません。
▲出典：Aflac（アフラック）
保険を販売する『Aflac』のホームページには、マルチカラムレイアウト（3カラム）が採用されています。
訪問するユーザーは、保険の契約前の方もいれば、契約済みの方もいます。どちらのユーザーが訪問しても困らないように、サイドメニューにリンクが設置されています。
また、サイドメニューが固定されているため、ユーザーが「資料請求したい」と考えたとき、すぐにアクションが取れます。
ヘッダーを固定しても同じことはできますが、可視範囲が狭くなってしまいます。
サイドメニューであれば常に表示させていても、コンテンツの邪魔になりません。
近年は横長のワイド型モニターが流行しているため、上手く合理性を取ったホームぺージといえます。
ECサイト
ECサイトとは、インターネット上で商品を販売するホームページのことです。ECは英語のelectronic commerceの略で電子商取引と訳されます。
ECサイトの目的は「商品を購入してもらう」です。
ECサイトには「マルチカラムレイアウト」がおすすめです。
ヘッダーに「ご注文方法」のリンクや「お買い物かご」のボタンがあれば、はじめて利用するユーザーにとっても使いやすいでしょう。
また、商品選びに迷っても、サイドメニューからすぐに他の商品を探せます。
以下参考サイトです。
▲出典：北海道 北釧水産
『北海道 北釧水産】のECサイトのように、商材によっては商品詳細ページが長くなってしまうケースもあります。
それは商品の魅力を伝えるために必要なことですが、ユーザーによっては途中で他の商品を見たくなる場合もあるでしょう。
サイドメニューで他のページへの移動がしやすければ、ユーザーが離脱するリスクを軽減できます。
自社のホームページに最適なレイアウトを参考にできるサイト
ホームページのレイアウトには、セオリーこそ存在しますが正解はありません。
そこで、他社のホームページレイアウト事例をまとめている参考サイトを5つ紹介します。
最適なレイアウトのイメージをつかむために活用してみてください。
SANKOU!
▲出典：SANKOU!
『SANKOU!』は、豊富なカテゴリと高い更新頻度で、多くのユーザーに活用されているWebデザインギャラリーサイトです。
「Webデザイン制作の参考になる国内のステキなサイト集」をコンセプトとし、さまざまな種類のホームページレイアウト事例が掲載されています。
また、画面右上の「スマホ版」をクリックすることにより、スマホサイトの一覧に切り替えられるのも嬉しいポイント。
スマホ対応したホームページを作るときも、参考になるでしょう。
スマホ対応ホームページの作り方：初心者向けにわかりやすく解説
S5-Style
▲出典：S5-Style
クオリティの高いWebサイトを中心に掲載しているWebデザインギャラリーが『S5-Style』です。
幅広いカテゴリーから絞り込みできるのはもちろん、AND検索やOR検索も可能なため、参考にしたいホームぺージを素早く見つけられます。
straightline bookmark
『straightline bookmark』は、大きなサムネイルが特徴のWebデザイナー向けギャラリー・リンク集です。
2万点以上という圧倒的な数の事例を掲載しているため、「さまざまなサイトをじっくりとチェックして、参考にするレイアウトを決めたい」という人におすすめです。
MUUUUU.ORG
▲出典：MUUUUU.ORG
縦長サイトの参考事例を探している人におすすめなのが『MUUUUU.ORG』です。
2万点以上のデザインのなかから「業種」「デザイン」「カラー」「サイト」の種類で絞り込みができます。
縦長サイトに特化したWebデザインギャラリーのため、スマホ向けホームページの事例を探している人はぜひ活用してみてください。
I/O 3000
▲出典：I/O 3000
国内だけでなく海外の事例も参考にしたいという人には『I/O 3000』がおすすめです。
カテゴリによる絞り込みができるのはもちろん、スライドショーで流し見できるため、サイト上で事例元の雰囲気が掴みやすいメリットもあります。
世界的な最新トレンドを参考に、独創的なホームページが作りたいという人はぜひ活用してみてください。
まとめ
今回は、ホームぺージのレイアウトやパーツについて解説しました。
- ホームぺージの基本のパーツをどこに配置するか決めることを「レイアウト」と呼ぶ
- ホームぺージでよく使われるパーツとレイアウトはそれぞれ4種類がある
- ホームぺージの種類・目的にあうレイアウトを選ぶことが大切
- 迷う場合はデザインのギャラリーサイトを参考にする
ぜひこの記事を参考に、自社のホームぺージの種類や目的に合う、魅力的なレイアウトを選んでください。
以上、最後まで読んでいただきありがとうございました。
ホームページの開設を検討している方へ
エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1※のレンタルサーバーであり、17万社の導入実績があります。
3月24日12時まで半額キャッシュバックキャンペーン開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にホームページ開設をご検討ください！
※ 2022年10月時点、hostadvice.com調べ。
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
【初心者向け】会社ホームページの作り方を基礎から解説
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
