内容に自信はあるのにアクセス数が伸びないホームページは、
「視認性」に問題があるのかもしれません。
ではホームページの視認性とは何なのか、
視認性を改善するにはどうすれば良いのかなど詳しく見ていきましょう。
視認性は「見やすさ」「分かりやすさ」
ホームページの視認性とは「見やすさ」「分かりやすさ」のことです。
要するに、ホームページを一目見ただけで「どういった情報が掲載されているのか」
「見たい情報はどこに掲載されているのか」が分かるかどうかです。
トップページを見ただけでは何のホームページか分からない、どのページに
どんな情報が掲載されているか分からないと視認性が低いとなってしまいます。
視認性が低いホームページはすぐに離脱されてしまいますし、
リピートしてもらえないのでアクセス数が伸びないことになります。
ホームページの視認性を決める要素
ホームページの視認性を決める要素にはいくつかありますが、主なものとしては
・レイアウト
・フォント
・配色
などが挙げられます。
「レイアウト」は配置のことで、
テキストや画像などのコンテンツをどこにどのように配置するのかです。
ホームページのレイアウトには
・シングルカラム
・マルチカラム
・フルスクリーン
・グリッド型
など基本的な型がいくつかあります。
縦一列にコンテンツを並べるシングルカラムは縦長画面のスマホと相性が良く、
レスポンシブ対応にも適しています。
（例：https://www.atre.co.jp/）
画面の左右にサイドバーを配置するマルチカラムは他のコンテンツへの移動が楽で、
ECサイトやニュースサイトなど情報量の多いホームページ向きです。
（例：https://www.yahoo.co.jp/）
ただしスマホだとマルチカラムは視認性が下がるため、パソコン用はマルチカラム、
スマホ用はシングルカラムとレイアウトを変える必要があります。
1つのコンテンツを画面全体に配置するフルスクリーンは、
ホームページを見る人に大きなインパクトを与えられます。
（例：http://www.oyado-nonohana.com/）
インパクトは大きい反面メニューなど他のコンテンツがどこにあるのか分かりにくく、
一つ間違えると視認性の低いホームページになりがちです。
複数コンテンツをカードのように並べるグリッド型は、1つの画面で複数コンテンツを
見比べて自分が必要とするコンテンツを選びやすいです。
（例：https://www.pgcd.co.jp/）
ただグリッド型もコンテンツの配置を間違えると、
ごちゃごちゃした見にくいホームページとなってしまいます。
どのレイアウトが優れているといったことはなく、自分が作るホームページの
方向性に合ったレイアウトを選ばないと視認性が低くなります。
「フォント」はホームページに掲載するテキストのフォントのことで、
目的があって変更する場合以外はホームページ全体で統一するのが基本です。
読みやすいフォント・読みにくいフォントといったこともありますが、
ホームページ全体の雰囲気とフォントが合っているかが重要です。
「配色」は
・メインカラー
・ベースカラー
・アクセントカラー
の3色を組み合わせるのが基本とされています。
メインカラーはホームページを印象を決める色で、
企業サイトはコーポレートカラーをメインカラーとしていることが多いです。
ベースカラーはホームページの基礎となる色で、
ホームページ全体で使用量が最も多い色となります。
アクセントカラーは見ている人の注意を引く色で、多用すると効果が薄れてしまいます。
ベースカラーをホームページ全体の70%、メインカラーは25%、アクセントカラーは5%
の割合で使用するのが理想的です。
ホームページの視認性を高めるには
ホームページの視認性を高めるためには、
まずホームページを作る目的とターゲットを明確にしなければいけません。
例えば企業が作るホームページの場合、
・企業のことを知ってもらう
・ブランドのことを知ってもらう
・商品やサービスのことを知ってもらう
・商品やサービスを購入・利用してもらう
・人材を募集する
などの目的があります。
ホームページを作る上で何が一番重要かを考え、
その目的に見合ったコンテンツを用意するのです。
商品やサービスを購入・利用してもらいたいのに、
企業の紹介や歴史などの情報を多く掲載しても意味がありません。
商品やサービスを購入・利用してもらいたいなら、申し込みボタンを設置して
直接購入できるようにする、店舗を紹介するといったことが必要です。
またホームページを作る際はターゲットを決めておくことも重要で、
メインとなるターゲットに合わせたホームページを作らないといけません。
例えば若い世代がターゲットなら、少し派手でインパクトのある配色にして、
動きのある動画を配置するなどといった具合です。
年配層がターゲットの場合は、落ち着いた配色でテキストの文字を少し大きくして
読みやすくするといった配慮をします。
メインとなるターゲット層が見やすい・使いやすいを意識したホームページ作りが
重要です。
フォントの調整
ホームページで情報を伝えるのはテキストがメインで、
テキストが読みにくいとホームページの視認性が大きく低下してしまいます。
テキストを読みやすくするには「フォントの調整」が必要で、
フォントの種類を読みやすいものにしなければいけません。
ゴシック体や明朝体、サンセリフ体が読みやすいフォントとされており、
ホームページではこの3つのいずれかを使うのが一般的です。
文字の大きさもテキストの読みやすさに大きく関わってきます。
小さすぎても大きすぎても読みにくいですから、ホームページ内の見出しテキストは
20～24ポイント、本文は14～16ポイントにするのがベターです。
ただしホームページのメインターゲット層に合わせて、
文字を大きくしたり小さくしたりといった配慮も必要です。
配色
配色もホームページの見やすさに大きく関わっています。
色使いを間違えたり、多くの色を使いすぎるとメリハリの無いごちゃごちゃしただけの
ホームページとなってしまいます。
先にも書いたように、ホームページの配色は
・メインカラー
・ベースカラー
・アクセントカラー
の3色の組み合わせが基本です。
メインカラーが25%、ベースカラーが70%、アクセントカラーが5%の割合で使うことで、
バランス良くまとまりのあるホームページとなります。
企業のホームページだとメインカラーはコーポレートカラーで、
ベースカラーは色相環でメインカラーの近似色となる色を使うとまとまりが良いです。
アクセントカラーは色相環でメインカラーの補色となる色を使うと、
目立つので文字通りホームページのアクセントになってくれます。
ホームページの配色ではコントラストも意識しなければならず、
コントラストが弱いと視認性が下がります。
視線誘導
ホームページを見る際の視線の動き方にはいくつかパターンがあり、
見せたいコンテンツにユーザーの視線を誘導することも可能です。
一般的に多いとされるパターンが「F型」と言われるもので、
視線の通った跡がアルファベットのFのような形になります。
（https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/）
最上段を横へ読み進んで終わったら、
次に段に移動してまた横へ読み進めるといった視線の動き方です。
テキストメインのホームページだと、ユーザーの視線はF型に動くことが多いです。
上からコンテンツを全てチェックするので、ホームページ下部までしっかり見ることはなく、
上段に見たいコンテンツが無い離脱してしまいます。
F型の視線誘導パターンを意識するなら、
ホームページ上段に見せたいコンテンツを配置しなければいけません。
チラシや雑誌などの紙メディアで視線誘導パターンとして意識されているのが
「Z型」です。
視線の通った跡がアルファベットのZの形になるパターンで、
画像メインのホームページを見る際にはZ型になるケースが多いです。
見せたいコンテンツを左上に配置して、
申し込みボタンなど最終的に誘導したいポイントはホームページの右下に配置します。
縦書きのホームページの場合は、Zを縦にした「N型」の視線誘導パターンになります。
N型だと右上に見せたいコンテンツを配置して、
左下に最終的に誘導したいポイントを置くといったレイアウトになるのです。
まとめ
ホームページの視認性とは見やすさ・使いやすさであり、
視認性の良さはアクセス数アップに直結します。
紹介した視認性を上げるポイントは主なもので、
紹介した以外にも押さえておいた方が良いポイントはあります。
ただ現状で視認性が良くないホームページは、紹介したポイントを押さえるだけでも
視認性が向上しますからぜひ参考にしてみてください。