ホームページデザインを考える③～ホームページレイアウトの基本とポイント
前記事ではデザインについて、カラーやタイポグラフィといったポイントについて解説しました。
前記事：ホームページデザインを考える②～カラーとタイポグラフィ
ホームページの見やすさ・使いやすさは「レイアウト設計」で大きく変わります。
構成するパーツやレイアウトの型を理解し、情報を整理して配置することが大切です。
今回は、ホームページの代表的なレイアウトパターンから、視線の流れや余白の使い方など、実際にご自身のホームページに活かせる設計のポイントをまとめてご紹介します。
１．ホームページ5つの基本パーツと特徴
まずホームページ5つの基本パーツとそれぞれの特徴、掲載されることが多い内容などをご紹介しましょう。
ホームページは、
- ヘッダー
- グローバルナビ
- サイドエリア
- メインコンテンツ
- フッター
といった基本パーツで構成されています。
それぞれの役割や特徴を理解することがレイアウト設計の第一歩です。下記に簡単に各パーツについて解説します。
①ヘッダー
ホームページ上部のことを指します。
ホームページ内どこでも同じ内容が表示されるため、アイキャッチ効果が狙えるパーツです。
会社のロゴやお問い合わせ、商品キャッチコピーなどを設置するケースが多いです。
②グローバルナビ
メニューバーのことを指します。
主要なページへリンクさせるために設置されるパーツです。
メインメニュー・ヘッダーメニューと呼ばれることもあります。
③サイドエリア
メインコンテンツの右端か左端あるいは両端に配置されます。
ホームページの内容によって、最新記事・人気記事・SNSのシェアボタンなど適したページのリンクを設置します。
④メインコンテンツ
ホームページの主要部分です。
ページの内容によって表示させるコンテンツが変わります。
⑤フッター
メインコンテンツ下部のことを指します。
会社概要・サイトマップ・プライバシーポリシーなどを設置しているホームページが多いです。
２．レイアウトの基本パターン
ここからは、ホームページレイアウトの基本パターンとして、代表的な5つのレイアウトパターンを解説します。
レイアウトの型を知っておくと、情報整理がぐっと楽になります。パターンそれぞれの特徴を解説しますので、目的に合わせて最適なレイアウトを選びましょう。
２-１．シングルカラムレイアウト
まずはシングルカラムレイアウトです。
カラムとは「列」のことで、シングルカラムはサイドエリアをなくしてパーツを１列に並べるレイアウトです。
LP（ランディングページ）にもよく使用されます。
端末が異なってもレイアウトが大きく変わることがないため、レスポンシブデザインと相性がよく、近年のスマホユーザー増加傾向に対しても対応できます。
サンプルサイト：https://web.gogo.jp/osusume-0075/pages/
２-２．マルチカラムレイアウト
マルチカラムレイアウトは複数のカラム（列）で構成されるレイアウトです。
２カラムか３カラムが主流になっています。
サイドエリアにいつでもアクセスできるため、回遊性を高めたいホームページに用いられます。
スマホでは画面幅が狭いため、同じレイアウトを保持せず異なるレイアウトになることがほとんどです。
サンプルサイト：https://web.gogo.jp/CP1488774745180/pages/
２-３．グリッドレイアウト
グリッドレイアウトはグリッド（格子）状に分割したレイアウトです。
グリッドに沿ってコンテンツを配置、規則性が生まれるため情報を見やすく掲載できます。
また、多くの情報を一画面で表示することも可能です。
レスポンシブデザインと相性がいいとされています。
サンプルサイト：https://web.gogo.jp/CP1470190970539/pages/
２-４．ブロークングリッドレイアウト
ブロークングリッドレイアウトは、あえて規則性を崩したレイアウトです。
背景からテキストをずらす、画像を重ねるなどの手法が用いられています。
独創性を表現でき、ユーザーにインパクトを残すことが可能なレイアウトです。
規則性を崩したレイアウトですが無秩序にはせず、ワンポイントに絞って要素を外して揃えて表示する箇所も作るなど、統一感も必要です。
サンプルサイト：https://web.gogo.jp/osusume-0046/pages/
２-５．ノングリッドデザインレイアウト
ノングリッドデザインレイアウトは、ブロークングリッドよりもさらに規則性を崩したレイアウトです。
異なるサイズの画像を重ねる、上下左右すべての余白に変化をつけるなどの手法を用い、整列や反復というルールに縛られず自由に要素を配置します。
オリジナリティやインパクトの強いホームページが制作できますが、その分難易度がやや高めのレイアウトです。
サンプルサイト：https://web.gogo.jp/osusume-0047/pages/
３．デザインを設計する際のポイント７個
ここまでホームページの要素とレイアウトについて解説しましたが、それ以外にもホームページのデザインを設計するのに意識しておきたいポイントがあります。
見た目だけでなく、ユーザーが快適に情報を得られる工夫について、７個の具体的なチェックポイントを見ていきましょう。
３-１．ファーストビューを意識する
ファーストビューとは、ホームページを開いた際に、スクロールせず最初に表示される領域全体のことです。
ホームページを最初に見たとき、求める情報がすぐに見つからないような乱雑なデザインだとストレスを感じ、ユーザーは離脱してしまいがちです。
整ったデザインや興味を促すメッセージにできるように意識するようにしましょう。
最初に目に入る部分で興味を引けるかが重要です。
ファーストビューでは、以下のような情報を含めるように検討しましょう。
- 何の会社・商品なのか一目でわかる
- 他社との違いが明確化されている
- 実績・表彰を掲載している
- 購入・問い合わせ・申込がわかりやすい
- 閲覧者が得られるベネフィット（利益・恩恵）がわかる
３-２．視線の動きには法則がある
人の視線は「Z型」「F型」に動くことが多く、それを意識すると情報配置が効果的になります。
Fの法則
- 文章始めを縦に読み、気になる部分があれば水平に読んでいくパターン
- ボリュームのあるテキスト・メッセージを読ませたい場合に有効
Zの法則
- 左上から水平に読み、視線を下にずらすという流れを繰り返すパターン
- ユーザーに読ませたいコンテンツがある場合は、Zの流れに合わせて作ると訴求しやすい
３-３．情報の優先順位を明確にする
重要度に応じて大きさや配置を変えることで、伝えたい情報が自然と目に入ります。
優先したい情報こそ、目立つような色や位置にデザインしましょう。
そのため、何を優先すべきなのか順位付けは事前に行うようにします。
たとえば、成約することを優先するとしたら、申込や購入ボタンを目立つ色にするなどです。
優先順位を設けておくと、ホームページ全体が見やすくなり、スッキリとした印象を与えられます。
３-４．シンプルなレイアウト・テキストを心がける
要素を詰め込みすぎず、シンプルさを保つことで見やすさが向上します。
常にシンプルに伝えられるようなレイアウト・テキストを心がけましょう。
必要以上に情報を盛り込みすぎると、かえって見づらくなってしまう場合もあります
デザイン中にレイアウトやテキストを客観的に見るようにして、シンプルかつ的確に伝えられているかを確認することが大切です。
３-５．ナビゲーションでわかりやすく導く
サイト内で迷わせない工夫は、ユーザー体験の質を高めます。
ユーザーにとって使いやすいホームページは滞在率・回遊率も高くなります。
ナビゲーションはユーザーの知りたい情報をまとめられる便利なツールです。
ホームページを作成する中で、どのような情報があればユーザーの目的を達成できるのかを考え、リンク集としてナビゲーションに組み込むようにしましょう。
３-６．配色・文字に一貫性をもたせる
ホームページ全体をキレイに見せるには、配色・文字に一貫性をもたせることが重要です。
全体の統一感があると、信頼感と使いやすさが増します。
たとえば清潔なイメージなら青を基調とした配色として、目立たせたい色は赤で統一するなど、ページ全体の要素にルールを設けましょう。
ただし、関連する全てのホームページに一貫性を持たせる必要はありません。
目的別サイト・LP・ブログなどがあれば、それぞれで定めたルールに沿って一貫性をもたせられれば構いません。
３-７．余白を適切に取る
余白は「空き」ではなく「デザインの一部」です。情報を際立たせる効果があります。
多くの情報がびっしりと隙間なく詰め込まれているページは、閲覧者の見る気を失わせてしまいます。
画面の圧迫感をなくし、情報のまとまりを区切る役割として、「間」が必要です。
強調したいコンテンツは、周りに余白を多く取ると、より際立たせることができます。
また、同じ目的や性質を持つ情報は近づけて配置し、他のコンテンツとの距離を開けることで、それらは違う情報であると閲覧者に認識させることができます。
４．まとめ
今回は「ホームページのデザインを考える」として、デザインの基本やポイントについて解説してまいりました。
- デザインは目的のための「課題解決」
- デザインの４大原則「近接」「整列」「反復」「対比」を活用して見やすく分かりやすく
- 色の三属性「色相」「彩度」「明度」で色を効果的に使う
- 文字をうまく扱うことでホームページ全体の見栄えをよくし読みやすくする
- レイアウトの基本パターンを利用して洗練されたレイアウトに
- その他、デザインを設計する際には「ファーストビュー」「視線の動き」「情報の優先順位」「シンプルなレイアウト・テキスト」「ナビゲーションの活用」「配色・文字の一貫性」「適切な余白」などの要素もポイントになる
デザインは特別な技術ではなく、原則を理解し活用すれば誰でも実践できます。
ホームページの制作においては何をホームページで達成したいかがとても重要です。
本記事のポイントを参考に、ぜひこれらを自分のホームページに取り入れてみましょう。