企業がホームページで、商品やサービスの魅力を不特定多数のユーザーにアピールしたい場合、レイアウトを意識することが重要です。
自社のWebサイトから商品や、サービスを多くのユーザーに購入してもらうためには、競合他社との差別化を図り集客力を高める必要があります。ホームページレイアウトの工夫を凝らすことで、ユーザーがページを閲覧した時に見やすい、扱いやすいと感じて差別化や集客力の向上に繋がるでしょう。
この記事では、ホームページレイアウトの基礎基本や基本原則の重要性についてと、参考になる5つのサイトなどについて解説していきます。
どのようなホームページレイアウトが好ましい？
ホームページにおけるレイアウトとは、各ページ内に入っている情報を、どこにどのように配置やデザインするのか決めることです。情報と言っても文字だけではなく、写真やイラストなども含まれています。
レイアウトは、ユーザーがページを閲覧した時に見やすい、扱いやすいと思われるようにすることが重要です。ユーザー目線に立って、ホームページのレイアウトを行うことが商品やサービスのCV率の向上に繋がります。
ホームページのレイアウトを構成する基本パーツ
ホームページにおけるレイアウトについて触れましたが、具体的にはどのような構成になっているのか疑問を持つのではないでしょうか。構成する基本的なパーツを知ることで、自社のホームページ制作やリニューアルに役立てられます。
この章では、ホームページのレイアウトを構成する基本パーツについて解説します。
- ヘッダー
- ナビゲーション
- コンテンツ
- フッター
ヘッダー
※引用：株式会社ビジネスサポート
最上部に位置するパーツの名称を「ヘッダー」と言います。ヘッダー部分には、一般的にホームページや企業のロゴ、キャッチコピー、お問い合わせボタンなどを設置します。
Webサイト内のどのページを閲覧しても、ヘッダーは同じ内容が表示されるものです。ァーストビューと言って、ユーザーがホームページを訪れた時に最初に閲覧するところなので、インパクトを与えられるようなものに仕上げることが大切です。
ナビゲーション
※引用：株式会社ビジネスサポート
ホームページを訪れたユーザーに対して、どこにどのような情報が記載されているのか探しやすくすることで、短時間での直帰や離脱を防ぎます。そのためには、ホームページの目次・メニューの役割がある「ナビゲーション」の設置が重要です。
ナビゲーションは、ヘッダーナビゲーション、グローバルナビゲーション、ヘッダーメニュー、メインメニューなどとも呼ばれていますが、基本的な意味は同じです。
コンテンツ
※引用：株式会社トントン
Webサイトの中身の部分のレイアウトを構成するパーツが「コンテンツ」です。具体的には、ブログやニュースサイトの文章、商品やサービスのテキストや画像などがあります。
企業であれば自社商品の特徴や強み、コラム記事の情報を表示するなど、企業ごとに各ページで記載する内容やレイアウトが変わります。
フッター
ホームページ内の最下部に位置するパーツの名称が「フッター」です。ユーザーがページを閲覧した時は、画面に全ての情報が表示されているとは限りません。画面をスクロールしないと全ての情報を見られない場合もあるため、フッターを設置することでページの区切りを表せます。
ヘッダーで記載する要素
- サイトマップ
- 会社概要
- SNSへのシェアボタン
- プライバシーポリシー
その他には、上記のようなページリンクを挿入して、ユーザーがページの最下部まで閲覧した際に次の行動を迷わせないように、スムーズに次のアクションを促す役割があります。
ホームページレイアウトの種類
ホームページレイアウトで用いられている種類は色々なものがあります。基本的な種類は「シングルカラムレイアウト」、そしてマルチカラムレイアウトと呼ばれる「2カラムレイアウト」、「3カラムレイアウト」です。
シングルカラムレイアウト
※引用：株式会社アーツネットウェーブ
どんなデバイスに対しても、ヘッダーからフッターまで全部の要素が縦一列で構成されたレイアウトを表示できるものが「シングルカラムレイアウト」です。1カラムとも呼ばれています。
スマホとの相性が良い、不必要な情報が入っていない、上下のスクロールがしやすいなどの特徴があり、ランディングページによく用いられています。
2カラムレイアウト
※引用：株式会社トントン
複数のカラムで構成されるものが「マルチカラムレイアウト」と呼ばれており、そのうち2列で表示するタイプが「2カラムレイアウト」です。具体的には、ホームページ内のコンテンツの左右の片方にサイドバーを設置するものです。
シングルカラムよりも、多くの情報量をユーザーにアピールできるため、ECサイトやニュースサイトなどによく用いられています。
3カラムレイアウト
※引用：Yahoo!Japan
マルチカラムレイアウトの中で「3カラムレイアウト」もよく用いられています。ホームページ内のコンテンツの左右に、サイドバーを設置して3列でホームページを表示するものです。大手検索エンジンのYahoo! JAPANが、トップページで3カラムレイアウトを採用しています。
ホームページレイアウトは基本原則の意識が大切
ホームページレイアウトは色々な種類がありますが、Webデザインにおける基本原則を守らなければ、美しく魅せることは難しくなります。「近接・整列・強弱・反復」の4つの基本原則を意識して、美しく仕上げることが大切です。
近接(Proximity)
近接は関連する要素を近づけて、グループに分けることで情報がまとまり見やすくなります。関係性のある文字や画像を近くに配置し、グループ間の距離を一定間隔でとるようにすることで、グループの境界がすぐに分かります。
整列(Alignment)
近接でまとめたものを整列させると、すっきりとしたデザインが作れ見た目も整います。上下の整列は上揃え・中央揃え・下揃え、左右の整列は左揃え・中央揃え・右揃えに分かれます。
強弱(Contrast)
Webサイト内のページを閲覧したユーザーに対して、文章やデザインをより強調したい箇所に強弱をつけることによって、重要な情報が目立ちます。強調しすぎる箇所が多すぎると、全て目立たなくなってしまい何が重要なところなのか、わからなくなってしまうので注意が必要です。
反復(Repetition)
Webサイトデザインに反復を取り入れることで、一貫性をもたせることができます。反復は同じデザインの状態を繰り返したものです。大見出しや中見出し、文字のサイズ・フォントなどを同じデザインにすると統一感や一貫性が高まります。上記はデザインの4大原則とも呼ばれており、相手に伝わるわかりやすいデザイン作りに役立ちます。
ユーザーの目線の動きを意識する
ホームページのコンテンツを閲覧しているユーザーの、目線の動きを意識したレイアウトにすることで、ユーザーファーストかつ美しく魅せられるデザイン制作に繋がります。人の目線の動きは「Z型・N型・F型」の3パターンに分けられます。
Z型
Z型の目線の動きは、左上→右上、左下→右下の順番になる型です。ユーザーの目線が最後に右下に行くので、右下にリンクやボタンを設置することにより、ユーザーの目に止まりアクションを起こしてもらいやすくなります。ホームページの記事に画像が多く使われていたりする時にユーザーは、Z型の動きをしやすいです。
N型
N型の目線の動きは、右上→右下→左上→左下の順番になる型です。主に縦書きされている文章をユーザーが読む時は、N型の動きになりやすいです。Webやアプリではあまり見られず、新聞・雑誌・漫画など縦書きされた紙媒体のものを読む時に、ユーザーはN型の目線の動きをすることが多いでしょう。
F型
F型の目線の動きは、左上→右上→左下→右下の順番になる型です。ユーザーが文章量が多い読み物を読んだりSNSの利用、スマホやPCなどを使用した際に多く見られる目線の動きです。
スクロールビューを意識する
近年、スマホやタブレットなどのデバイスを持っている人が増えています。パソコンに比べて画面サイズが小さいので、1つのページ情報を全て見るのにスクロールができることが重要になりました。
一昔前は、ユーザーがホームページを閲覧した時にファーストビューに目的の情報が無ければ、すぐに直帰すると言われてきました。現在はSNSの普及などで、画面スクロールに対する嫌悪感が薄れており、下までスクロールするユーザーは増えています。
そのため、ユーザーの見やすさを考えて、レイアウトや余白を工夫してスクロールビューを意識することが大切です。
まとめ
企業がホームページ運営をしていく場合、コンテンツ制作で適当に文章や写真を羅列するだけでは、ユーザーファーストを意識できているとは言えません。
ユーザーが目的の情報に素早くたどり着けなかったり、ニーズにマッチしていなかったりして、扱いづらく価値の無いホームページだと思われてしまう恐れがあります。そのため、ユーザー目線を意識してホームページレイアウトを工夫することが大切です。