ホームページのレイアウトを改善する必要性があるものの、具体的な方法がわからないという人も少なくありません。この記事では、ホームページのレイアウトに関する基礎知識についてくわしく解説します。また、目的別のレイアウトや注意点なども解説しているため、ホームページのレイアウトを変更する際の参考にしてください。
→自由にレイアウトがカスタマイズできるノーコードCMSのBiNDupを30日間無料体験
レイアウトはユーザーに情報を伝えるために重要
ホームページのレイアウトとは、文章や画像などの情報をどの場所に配置するかを決めることです。レイアウトを工夫すれば、ホームページの見やすさ・操作性・視覚的に受け取る印象などが大きく変わります。ホームページのレイアウトを変更する際は、ユーザーにホームページの目的や情報をどのように伝えるのかを明確にしておきましょう。
→自由にレイアウトがカスタマイズできるノーコードCMSのBiNDupを30日間無料体験
レイアウトに使用する5つのパーツ
ホームページのレイアウトは、上のように5つのパーツからなります。以下では、それぞれのパーツについて解説します。
ヘッダー
ヘッダーは、ホームページの最上部のエリアを指します。ヘッダーに表示されるものは、ホームページのタイトル、企業・ブランドなどのロゴ、誘導したいリンクなどです。また、すべてのWebページに固定して表示する方法もあります。
ナビゲーション（グローバルナビゲーション）
ナビゲーション（グローバルナビゲーション）は、ヘッダー直下のエリアに配置されるパーツです。ホームページの目次やメニューのような役割を持っており、ユーザーは閲覧したいWebページを簡単に探せます。
コンテンツ
コンテンツは、Webページの中で最も広いエリアのことです。ホームページで重要なパーツのひとつで、ユーザーに伝えたい情報を表示させます。コンテンツの配置は、ホームページのレイアウトのパターンによって異なります。
サイドバー（サブナビゲーション）
サイドバー（サブナビゲーション）は、コンテンツに隣接するエリアを指します。カテゴリやアーカイブ・SNSのリンク・誘導したいWebページのリンク・広告バナーなど、ナビゲーションを補うために設置されます。
フッター
フッターは、ホームページ最下部のエリアに表示されます。運営会社の情報や利用規約、プライバシーポリシー、お問合わせページなどのリンクなどが挙げられます。フッターにナビゲーションを配置させているホームページも多く見られます。
→自由にレイアウトがカスタマイズできるノーコードCMSのBiNDupを30日間無料体験
ホームページのレイアウトパターンとは
ホームページのレイアウトには、いくつかのパターンがあります。以下では、代表的なパターンについて解説します。
シングルカラムレイアウト
シングルカラムレイアウトは、上からヘッダー・ナビゲーション・コンテンツ・フッターの順に縦に長く配置させるパターンです。カラムとは、ヘッダーなどの要素同士の段組みを意味します。シングルカラムレイアウトに適しているWebサイトは、上から下へスクロールして閲覧するタイプのスマホサイトやランディングページです。
マルチカラムレイアウト
フルスクリーン型レイアウトは、コンテンツを最大化して表示するパターンを指します。ヘッダーやナビゲーション、フッターは、最小化してシングルカラムレイアウトと同じ順番で表示されるパターンと、コンテンツ以外は何も表示させないパターンがあります。フルスクリーン型レイアウトは、ブランドサイトやギャラリーサイトにおすすめです。
グリッド型レイアウト
グリッド型レイアウトは、複数のコンテンツをカード状に並べて表示するパターンです。ひとつのWebページに複数のコンテンツを掲載でき、高画質な画像を表示させることでおしゃれな雰囲気のWebサイトを作成できます。グリッド型レイアウトは、ECサイトやスマホサイトなどに適しています。
その他のレイアウトパターン
上述したレイアウトパターンのほかに、コンテンツをカード状に並列させる「カード・タイル型」のレイアウトや、画像とテキストを重ねて配置する「ブロークングリッドレイアウト」などが挙げられます。また、従来のパターンにこだわらず、要素を好きな形で自由に配置する「フリーレイアウト」などのパターンもあります。
→自由にレイアウトがカスタマイズできるノーコードCMSのBiNDupを30日間無料体験
レイアウトを決める時に意識すべきこと
ホームページのレイアウトを決めるうえで、以下の2点を意識するようにしましょう。
デザインの4大原則
高品質なデザインのホームページには、「近接の原則」「整列の原則」「反復の原則」「コントラストの原則」があるといわれています。
- 近接の原則：関連する情報を近くに配置する
- 整列の原則：要素の始点や形状、配色などを揃える
- 反復の原則：一貫性のあるデザインにする
- コントラストの原則：優先度が高いもの、重要なものを目立たせる
4つの原則をデザインに取り入れることで、情報がすっきりと整理されたホームページを作成できます。
視線の動き
ユーザーがWebサイトを見るときの視線の動き方には、「Z型」「N型」「F型」の3種類があります。
- Z型：左から右、左下、右の順に視線がZのように移動する
- N型：右上から右下、左上、左下の順に視線がNのように移動する
- F型：左から右、一段下がって左から右の順に繰り返し視線が移動する
3パターンの視線の動きを把握し、ユーザーが自然な流れで読めるレイアウトを意識したホームページを作成しましょう。
→自由にレイアウトがカスタマイズできるノーコードCMSのBiNDupを30日間無料体験
ホームページの目的別に最適なレイアウト
ホームページを作成する目的ごとに、選ぶべきレイアウトのパターンは異なります。以下では、目的別にあったレイアウトを解説します。
企業情報を伝える場合
コーポレートサイトや企業のホームページなど、企業情報を伝える目的で作成する場合は、シングルカラムレイアウトがおすすめです。ユーザーは、企業情報をくわしく知りたくて検索しているため、必要な情報をシンプルに伝えられるシングルカラムレイアウトが向いています。また、企業イメージの訴求にも効果的です。
ブランドイメージを向上させる場合
自社ブランドのイメージアップが目的の場合は、フルスクリーンレイアウトが向いています。フルスクリーンレイアウトであれば、ブランドイメージを意識したデザインの採用によって、独自の世界観を演出できます。また、キーポイントとなるビジュアル以外の要素を極力減らすことで、ブランドイメージをユーザーに印象づけることも可能です。
店舗へ来店を促す場合
飲食店などの実店舗の集客目的でWebサイトを作成する場合は、シングルカラムレイアウトもしくはマルチカラムレイアウトがおすすめです。取り扱う商品やサービスの種類で、適したレイアウトを選ぶことが大切です。来店を検討しているユーザーに行動してもらうためには、来店の申込みボタン、店舗の案内地図、電話番号なども忘れずに設置しておきましょう。
商品やサービスを販売する場合
ECサイトなどによる商品やサービスのネット販売が目的の場合は、マルチカラムレイアウトがおすすめです。一般的なECサイトで採用されており、買い物をするユーザーはマルチカラムに慣れています。ユーザーがネットショッピングをストレスなく楽しめるように、慣れ親しんだマルチカラムレイアウトを活用したサイト設計にしましょう。
メディアやブログなど情報を発信する場合
メディアサイトやブログで記事やコラムなどを通して情報を発信したい場合は、マルチカラムレイアウトがおすすめです。情報発信向けのWebサイトでは、マルチカラムレイアウトを採用している場合が多く、ユーザーもマルチカラムの操作に慣れています。ユーザーにストレスを与えずに読んでもらううえで有効です。
→自由にレイアウトがカスタマイズできるノーコードCMSのBiNDupを30日間無料体験
レイアウトの参考になるおすすめサイト4選
ここでは、ホームページのレイアウト選びの参考になるWebサイト4選を紹介します。
MUUUUU.ORG
MUUUUU.ORGは、クオリティの高い縦長タイプのWebサイトのファーストビューを一覧で表示されているサイトで、複数のカテゴリから簡単に検索できます。主なカテゴリは、ジャンルやデザインの特徴、Webサイトの種類、メインカラーなどです。
I/O 3000
I/O 3000は、高品質なWebサイトのファーストビューをスライドショーのように流し見ができるギャラリーサイトです。ワンクリックで掲載元へアクセスできるうえに、「＋」ボタンをクリックすればファーストビューの拡大表示も可能です。
Web Design Clip
Web Design Clipは、国内外からクオリティの高いWebサイトのファーストビューを集めたギャラリーサイトです。国内外のWebサイトやスマホサイトなどがカテゴリ分けされており、特定のサイトに絞って検索できます。
bookma!
bookma!は、パソコンとスマホの2種類のファーストビューやメインカラーを同時に確認できるギャラリーサイトです。また、パソコンとスマホのどちらか一方に絞った検索や、フリーワードによる検索も可能です。
→自由にレイアウトがカスタマイズできるノーコードCMSのBiNDupを30日間無料体験
見やすいレイアウトにするために注意すべき点
ホームページをより見やすいレイアウトにするには、以下の注意点に気をつけましょう。
ユーザーファーストになっているか
ホームページは、ユーザーにとって操作しやすい、見やすい、わかりやすいレイアウトであることが重要です。読み込みに時間がかかる、閲覧中のWebページの現在地がわからないなどの問題がある場合は、レイアウトを見直す必要があります。
情報をつめこみ過ぎない
ユーザーに多くの情報を伝えたい場合でも、原則として1ページで強調するメッセージは1テーマに抑える必要があります。情報のつめこみ過ぎを防ぐためには、優先度の高いテキストや画像を絞りこむようにしましょう。
各種デバイスでの閲覧に対応しているか
ユーザーが使用するデバイスは、パソコンやスマホ、タブレットなどです。それぞれの画面サイズにあったデザインにしなければ、ユーザーが離脱する恐れがあります。レスポンシブ対応もしくは、スマホ専用のホームページを作成しましょう。
デザインの4大原則や視線の動きを意識しているか
デザインの4大原則や視線の動きを考慮しないレイアウトにすると、ユーザーにとって見づらいホームページになってしまいます。ユーザーファーストを意識したレイアウトに工夫するようにしましょう。
まとめ
ホームページを作成する際は、目的にあったレイアウトを選定する必要があります。ユーザーの離脱を防ぐためには、デザインの4大原則や視線の動きなども考慮しましょう。ホームページ制作を効率的に行うなら、CMSの利用がおすすめです。
BiNDupは、カスタマイズ性の高い国産のノーコードCMSです。また、有料コースには専用のサポートがついています。ホームページ制作でCMSの活用を検討している人は、気軽にお申込みください。
POINT
- ホームページのレイアウトは5つのパーツから構成されている
- レイアウトを作るときはデザインの4大原則や視線の動きを考慮する
- 掲載する情報は優先順位をつけて絞り、ユーザーファーストを意識する