こんにちは、編集長のカワウソです！
初めてホームぺージを作る際、「どうすれば見やすくなるのか分からない」と悩んでいませんか？
そこで今回は、見やすいホームぺージを作るためのポイントを10個解説します。
カワウソ
- 創業準備中の人
- 初めてホームページを作る人
- 会社のホームページがまだ無い人
- 見やすいホームページを作りたい人
この記事を読めば、デザインの原則が分かるだけではなく、誰もが見やすいホームページが作れます。
それでは、どうぞ！
目次
見やすいホームページとは？
見やすいホームページとは、ユーザーにとって情報が探しやすいホームページのことです。
なぜなら、ホームページはユーザーに情報を提供するために作られるものだからです。
ユーザーは情報が理解しづらい、探しづらいホームページを必要としません。
伝えたい情報をユーザーにしっかりと届けるために、「見やすいホームぺージ」を作りましょう。
見やすいホームページの作り方
さっそく、見やすいホームページの具体的な作り方を解説していきます。
- F型
- Z型
- 近接
- 整列
- 反復
- 対比
- フォント
- 画像・ボタン
- 配色・コントラスト
- テキスト量・ライティング
視線誘導のパターンを知ろう
まずは、ユーザーの視線に注目してみましょう。視線の動きには、おもに2つの型があります。
- F型（エフ型）
- Z型（ゼット型）
それぞれを解説します。
F型
F型は、ユーザーがホームページ内の文章を読むとき、アルファベットの「F」のような視線の動きをするという法則です。
ユーザビリティ（使いやすさ）を研究しているヤコブ・ニールセン博士の調査によって明らかとなりました。
ユーザーは左上から文章を読み始め、右に視線を移動し、徐々に左下に視線を移します。
以下、参考にご覧ください。
出典：Nielsen Norman Group logoNielsen Norman Group「F-Shaped Pattern For Reading Web Content 」
確かにアルファベットのFの形に見えます。ここから読み取れるのは以下の内容です。
- 最後まで読まれるわけではない
- 最初の見出し2つぐらいで求めている情報があるか判断される
多くのユーザーはすぐに結果を知りたいと考えています。
なかなか結論が出てこないと、ストレスを感じ、すぐに離脱してしまうでしょう。
そのため、「結論や重要なポイントから先に記述する」ことが望まれます。
文章で情報を伝える場合は、「PREP法（プレップ法）」がおすすめです。
- 結論（Point）
- 理由（Reason）
- 具体例（Example）
- 結論（Point）
最初の結論でユーザーの関心を引いたのち、理由や具体例を用いてユーザーの理解度を高めます。理解度が増したあとで再度「結論」を述べると、ユーザーが納得感を得やすくなります。
長い文章を掲載する際は、F型の視線誘導を理解し、PREP法を用いるようにしましょう。そうすれば、見やすいホームページが作れます。
Z型
Z型は、雑誌やパンフレットなどを読む際に使われます。さきほどのF型は「文章」でしたが、Z型は「画像」の視線誘導です。
とくにZ型は、情報の強度が均一であるときに効果が表れます。
画像や表・商品一覧などをレイアウトする場合にはZ型がおすすめです。
弊社エックスサーバーでも取り入れています。
また、Z型は「ファーストビュー（ホームぺージで一番最初に表示される領域）」でも利用されます。
以下参考にご覧ください。
➀ロゴ→②ヘッダー・メニュー→③コンテンツ→④登録という「Z」を意識した配置になっています。
こうすることで、初めて自社のホームぺージに訪問したユーザーでも、内容が理解しやすくなります。
重要な情報はなるべく左上に配置するとともに、視線移動を妨げないレイアウトを設計しましょう。
デザインの4大原則「近接」「整列」「反復」「対比」
次は、デザインのポイントを押さえていきましょう。
デザインには4つの原則があります。
- 近接
- 整列
- 反復
- 対比
それぞれを解説していきます。
「近接」
近接とは、関連性のあるもの同士を近くに置いて見やすくすることです。
左側のメニュー表は、パッと見てどのドリンクの価格かわかりにくいです。
一方、右側のメニュー表は、同じ要素ごとに近接しているため、関連性が理解しやすいです。
関連性のあるもの同士を近くに配置（近接）すれば、見やすいホームページを作れます。
「整列」
整列とは、画像や文字の位置をきちんと並べることです。
左側の画像や文字は、左端や上下のラインが揃っていません。
一方、右側は画像や文字が揃っており、とても見やすいです。
整列したレイアウトにすれば、統一感のあるデザインに仕上がります。
「反復」
反復とは、同じ組み合わせをくり返すことです。
左側は画像や説明の組み合わせが揃っておらず、視線が定まらないために見づらくなっています。
一方、右側はレイアウトが揃っており、見る順番に困りません。写真を見てイメージを掴んでから、下の説明を読み、気になれば詳細情報が書かれた文章を読むという流れができています。
イレギュラーなレイアウトは、ユーザーに負担をかけるため、控えるようにしましょう。
「対比」
対比とは、テキストの大きさや色などでメリハリをつけることです。
単調な印象の左側に比べ、対比を使った右側はインパクトがあってわかりやすいです。
対比をうまく使えば見やすいホームページになります。
以下参考サイトです。
出典：BIZREACH
文字や画像・色使いについて
デザインの4大原則を理解したら、次はフォントや画像・配色なども工夫をしていきましょう。
とくに大切なのは以下の4点です。
- フォントや文字の大きさ、行間など
- 画像やボタンの大きさ、位置など
- 配色・コントラスト
- テキストの量、ライティングの注意点
それぞれ解説します。
フォントや文字の大きさ、行間など
フォントを統一すれば、見やすいホームページになります。
参考例を見てみましょう。
右側はフォントの種類がバラバラ、読みにくい印象を受けます。
反対に、左側はフォントが統一されているため、読みやすいです。
読みやすさの目安は、本文のフォントサイズが16px、行間が1.5em程度です。
画像やボタンの大きさ、位置など
文字ばかりのページは見づらいため、適度に画像を入れた構成を考えましょう。
画像を入れる際は、テイストを揃えることも大切です。画質がはっきりしていて、要素が細かすぎないものにしましょう。
画像に含まれる要素が細かいと、スマホでは見づらくなるため、要注意です。
また、ボタンはクリックできることがわかるデザインにします。周りより目立つ色にすれば、ボタンの存在をアピールできます。
配色・コントラスト
配色
配色は色の「組み合わせ」です。
ベースカラー、メインカラー、アクセントカラーの3色でまとめるのがよいとされており、ホームぺージに統一感がだせます。
- ベースカラー … 最も使用する面積が多いホームぺージの基礎となる色
- メインカラー … 主張したい色。ホームぺージの印象はこの色で決まる
- アクセントカラー … 刺激や変化を与えるための色
多くの場合、メインカラーにはコーポレートカラーやブランドカラーが採用されます。
参考に弊社エックスサーバーのホームぺージをご覧ください。
ベースカラーは白、メインカラーは青、アクセントカラーはオレンジです。
コーポレートカラーは青ですが、見やすいホームぺージになるよう、ベースカラーを白にしています。
ここで注意したいのが、配色比率です。
配色比率は黄金比率である『70：25：5の法則』を心がけましょう。
この比率を守ると、ホームぺージにメリハリがつきます。
比率が同じくらいになってしまうと、どれがメインカラーか分からず、ユーザーが会社やブランドの特徴を掴みづらくなってしまいます。
メインカラーの比率がベースカラーより少ないことがポイントです。
また、アクセントカラーも多用し過ぎると、ユーザーが慣れてしまいます。時折出現するからこそ、刺激や変化を与えられます。
コントラスト
コントラストは色の「対比」です。
参考に以下をご覧ください。
左側は背景色も文字色も薄く、コントラストが弱い状態です。コントラストが弱いと視認性が悪くなります。
しかし、コントラストが強いからといって、必ず見やすくなるわけではありません。
右側は長時間見ていると、目が疲れるコントラストです。最初はよくても、ほとんどの方がそのうち「見づらい」と感じるでしょう。
つまり、パッと見て読みやすく、長時間見ても疲れにくいコントラストが望ましいと言えます。
テキストの量、ライティングの注意点
見やすいホームページを作るためには、文字情報を適切に扱うことも大切です。
伝えたいことがたくさんあると、テキストの量が多くなりがちですが、長い文章はユーザーにとって負担となります。
また、テキストが連続して塊のようになっていると非常に読みづらいです。
ライティングの際は、できるだけ文章は簡潔にまとめ、改行を多めに入れるようにしましょう。
とくにスマートフォンはテキスト量が多すぎると、画面が文字でいっぱいになってしまいます。スマホでの見やすさも心がけましょう。
その他の注意点
ユーザーに情報を正しく届けるためには、「どこに」「何の」情報があるのかを、分かりやすく提示するべきです。
ここでは、一番関連が強い「ヘッダー」と「フッター」について解説します。
- ヘッダー
- フッター
- 仮説・検証をくり返す
ヘッダー
ヘッダーはユーザーが目にしやすい部分のため、すっきりした見た目を心がけましょう。
メニューのボタンやリンクが多すぎると見づらい印象になってしまいます。
ボタンやリンクは5つを目安にし、多くとも7つ以下にしましょう。
ホームぺージの目的が「コンバージョンの獲得」の場合、ヘッダーには「連絡先」や「お問い合わせボタン」などを配置すると良いでしょう。
ヘッダーにコンバージョンの導線を設置すれば、ユーザーが探さずに済むため、コンバージョン率をアップできます。
フッター
フッターはユーザーがページを最後までスクロールした時に表示されます。
ページ下まで移動したユーザーがそのままページから離脱するのを防ぐために、フッターには他のページへのリンクを設置しましょう。
以下、参考サイトです。
テキストリンクが複数並んでいますが、カテゴリごとにまとまっているため見やすいです。
仮説・検証をくり返す
見やすいホームページに完成はありません。
常に仮説と検証をくり返して、ユーザーからの高い評価が得られるホームページを目指していきましょう。
ホームページの分析には、Google Analytics（グーグル・アナリティクス）という無料のツールがよく用いられます。
Google Analyticsでは、以下のようなことがわかります。
- 1日にどのくらいのページが見られたか
- どのページが離脱されやすいのか
- どのくらいの時間滞在していたのか
たとえば、ホームぺージの「見やすさ」や「使いやすさ」を改善していく場合、「直帰率」や「滞在時間」を指標にします。
- 直帰率 … ユーザーが訪問したにも関わらず、他のページを閲覧せずに離脱した割合
- 滞在時間 … ユーザーがページを閲覧した時間
直帰率が高く、滞在時間が短いページは、ユーザーが「見づらい」と感じている可能性があるため、優先的に改善するべきです。
まずは、仮説を立てて改善策を練りましょう。
たとえば、テキストを詰め込み過ぎているページがあれば、「見出し」を増やしたり、「図解」を追加するなどすれば、ユーザーにとって見やすいページになります。
ホームぺージを改善する手順は以下の記事で詳しく解説しています。
【初級】アクセス解析とは？ホームページの改善に必要な基礎知識
ホームページ全体の設計も考えよう
見やすいホームページのポイントを押えたら、少し視野を広げて、ホームページ全体の設計も考えてみましょう。
ホームページは複数のページで構成されています。それぞれのページがバラバラでまとまりがないと、見やすいホームページにはなりません。
ホームぺージ全体の設計を考えることで、さらに見やすいホームページになっていきます。
全体設計を考える際には、以下の4つのポイントを検討しましょう。
それぞれ解説していきます。
目的・ターゲットを定めよう
まず、ホームページの目的・ターゲットを定めましょう。
情報の取捨選択がしやすくなるため、ユーザーのニーズに合う見やすいホームページになります。
たとえば、ホームぺージの目的が顧客からの「お問い合わせの獲得」だとします。
それなのに、社内行事や採用情報などが目立つホームぺージだと、顧客はどう感じるでしょうか？
「私が求める情報はこれではない、どこに情報があるのだろう……」と困惑するはずです。
目的やターゲットを決めないままホームぺージを作り始めてしまうと、ユーザーにとって不要な情報を掲載してしまうおそれがあります。
あらかじめ、目的やターゲットをしっかりと定めて全体設計をすると、掲載すべき情報が明確になります。
ホームページの目的については下記の記事で詳しく解説しています。ぜひ参考にしてください。
【初心者向け】企業ホームページの目的と役割を解説
サイトマップを作ろう
目的やターゲットが明確になったら、必要なページを洗い出し、サイトマップを作っていきましょう。
サイトマップとは、ホームページ内のページがどのような構成になっているのかを一覧にしたものです。
見やすいホームページにするためには、各ページで伝えることを1テーマに絞ります。
なぜなら、1ページの中に情報が混在していると見づらくなるからです。
サイトマップはカテゴリごとに階層構造になるように設計しましょう。
スマホ対応しよう
スマホで見た時の見栄えも忘れてはいけません。
ホームページをパソコンでチェックするほうが多いですが、ユーザーはスマホで閲覧するケースが増えています。
スマホ対応ができていないと、パソコンサイトが表示されるため、ユーザーは「文字が小さい」「タップしづらい」と感じるでしょう。
スマホ対応にはレスポンシブデザインがおすすめです。
レスポンシブデザインは、パソコンにもスマホにも最適化された表示ができるホームぺージデザインの一つです。
パソコン用とスマホ用とそれぞれに特化したホームぺージを作る方法もありますが、多くの時間とコストを要します。レスポンシブデザインでは、用意するホームページは1つのみのため、手間が少なく、費用を抑えられます。
スマホ対応については、下記の記事で詳しく解説しています。ぜひ参考にしてください。
スマホ対応ホームページの作り方：初心者向けにわかりやすく解説
おしゃれが必要か見極めよう
中には「おしゃれなホームページを作りたい」と考える方も多いでしょう。
確かに、おしゃれなホームぺージはユーザーの好奇心を煽ります。しかし、「おしゃれ」を意識し過ぎて、逆に見づらいホームぺージになってしまうケースも少なくありません。
なぜなら、おしゃれな写真や動画を多用すると、情報が探しづらくなる傾向があるからです。
ホームぺージを開いたとたん、写真や動画が大きく表示されると、ユーザーはどこから情報を取得すればよいか分かりません。
「ナビゲーションが見当たらない」「下にスクロールしないと情報が表示されない」などは、最たる例と言えるでしょう。
ユーザーが求めているのは、「自分にとって有益な情報」であり、「おしゃれなホームページ」ではありません。
もちろん美容室や建築事務所など、業界によってはおしゃれなデザインが成果につながる場合もあります。
しかし、そうでない場合は、見やすいホームページを目指しましょう。
おしゃれなホームページについては、下記の記事で詳しく解説しています。ぜひ参考にしてください。
おしゃれなホームページの落とし穴。成果を出すために重視すべきものとは？
ホームページを自社で作るのが難しい場合
ホームページを作る時間や人手が足りない場合は、Web制作会社に依頼するのがおすすめです。
しかし、日本には5,000社を超えるWeb制作会社が存在すると言われており、自社に適したWeb制作会社を選ぶことができなければ、満足のいくホームページは作れません。
そこでご紹介したいのが、弊社が提供する無料サービス「ホームページ制作相談」です。
専門のコンサルタントが「目的」「予算」「スケジュール」などを事前にヒアリングしたうえで、お客様に合うWeb制作会社を厳選してご紹介します。
プロに相談することで、初心者の方でも簡単かつ安心して選ぶことができます。
弊社「エックスサーバー」「Xserverビジネス」のご契約者様向けのサービスではありますが、ご契約前の相談も可能ですので、ぜひお気軽にご利用ください。
まとめ
今回は、創業準備中の方やホームページをはじめて作る方に向けて、見やすいホームページについて解説しました。
10のポイントを押さえれば、驚くほど見やすいホームページが作れます。
- 見やすいホームページには押さえるべき10のポイントがある
- 見やすいホームページのレイアウトや原則を知り、実践することが大切
- 仮説・検証を繰り返して見やすいホームぺージを追求していく
- ホームぺージ全体の設計に注目すれば、さらに見やすくなる
このページで紹介したポイントやコツを参考にして、見やすいホームページを作っていきましょう。
それでは、素敵なホームぺージの完成を祈っております。
以上、読んでいただいてありがとうございました！
ホームページの開設を検討している方へ
エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1※のレンタルサーバーであり、17万社の導入実績があります。
4月21日12時まで利用料金最大30%OFFキャンペーン開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にホームページ開設をご検討ください！
※ 2022年10月時点、hostadvice.com調べ。
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
【初心者向け】会社ホームページの作り方を基礎から解説
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
