誰でも実践できる!見やすいホームページを作るためのポイント【2018年版】

得意先や同僚から「ホームページが見にくい」と言われた経験があるWeb担当者の方、いらっしゃるのではないでしょうか?


自分でも「なんとなく」見にくい、わかりにくいとは感じていたが、具体的にどこがどう悪いかが上手く言葉にできない....。


そんな「ホームページが見にくい」状態から抜け出すために、ホームページを見やすくする具体的な確認ポイント、改善の方法をご紹介します。

目次

  1. 1. ホームページ全体のデザインを確認する
    1. 1-1. 情報を詰め込みすぎていないか
    2. 1-2. スマホでの閲覧を考慮したレスポンシブデザインになっているか
    3. 1-3. 色を使いすぎていないか(配色バランスを考える)
    4. 1-4. 視線の流れ(Fの法則・Zの法則)を意識した作りになっているか
    5. 1-5. 基本のルールを無視した奇抜なデザインになっていないか
  2. 2. メニューやボタンなどパーツを確認する
    1. 2-1. グローバルナビのメニューの量が多すぎないか
    2. 2-2. ボタンはクリックできそうなデザインになっているか
  3. 3. テキストを確認する
    1. 3-1. 文字は小さすぎないか
    2. 3-2. 文字の色が薄すぎたり、色を使いすぎたりして見にくくなっていないか
    3. 3-3. 長文をだらだら羅列した状態にしていないか
  4. 4. 見やすいホームページを作るためのポイント まとめ
    1. 4-1. 見やすい・わかりやすいホームページの制作をプロに依頼したい方へ

ホームページ全体のデザインを確認する

情報を詰め込みすぎていないか

「1ページ1テーマ」を基本に考える

あるひとつのページで伝えることは、ひとつのテーマに絞りましょう。


訪問者はなんらかの目的を持ってあなたのホームページを見に来ています。

そのため、ページを閲覧している際に自分の求めるものと読んでいるページのテーマが違うと感じたら、すぐに離脱してしまいます。


逆に、訪問者が求めている情報をわかりやすく提示することができれば、離脱を防げます。

関連して伝えたいことがある場合は、別テーマとしてまとめてページを分けましょう。

1ページ1テーマに分けるやり方の例


テキスト、画像の量を抑える

情報の優先度を考えたうえで、テキストや載せる画像は絞りましょう。


ホームページの訪問者になるべくたくさんのことを伝えたいという理由で、ついつい情報提供者側は情報を詰め込みがちです。


しかし、訪問者側からすると情報量の多いテキストを読むのはそれだけで負担です。テキストの代わりに画像を活用するのも良いのですが、多用しすぎると同じく訪問者の負担になります。


知りたいことをなるべく早く簡単に知れることが訪問者にとっては一番重要です。


スマホでの閲覧を考慮したレスポンシブデザインになっているか

PCで閲覧するかスマホで閲覧するかの違いはホームページの見やすさ、わかりやすさを改善する際にとても重要です。


PC/スマホのなかでもさらに機種ごとで画面サイズが異なります。全て完璧に対応するのは困難なので、画面サイズの違いを吸収しやすいレスポンシブデザインでホームページを作るのが良いでしょう。


見やすいホームページにするための大事なポイントとしては、実際にスマホでスクロールしながら閲覧し、見にくさ・わかりにくさを感じる箇所を探して改善していくことです。

スマホはPCより画面が狭く、同じ情報量なのに文字や情報が多く感じられます。スマホで閲覧すると、PCで閲覧したときには気づかなかった問題点を発見できる場合があります。


(例)

PCで閲覧しているときはあまり気にならなかった部分。スマホで閲覧してみると「実際にホームページ制作会社を運営していたWebディレクターが〜」のセクションが画面を大きく占有するときがあり、見にくいように感じた。内容を現状より短くまとめ、文字サイズも大きくしたほうが良い。


PCでの閲覧

PCで閲覧した場合の例


スマホでの閲覧

スマホで閲覧した場合の例


色を使いすぎていないか(配色バランスを考える)

なんとなく見た目が寂しいからという理由だけで文字や背景を色づけしてみたというご経験、ないでしょうか?


そういった色の使い方をしてしまうと、ホームページの見やすさ・わかりやすさは失われてしまいます。


  • 特に目立たせたい箇所がある
  • 関連する箇所を同じ色にして、関連性を伝えたい
  • ページ全体としてこういう印象を与えたいのでこの色を使いたい


例えば上記のように、明確な意図を持って配色を考えることが重要です。


訪問者は色が使われているとそこに意図を感じ、理解しようとエネルギーを使います。

意図なく色を使いすぎてホームページの見やすさ・わかりやすさを損なっていないか、再確認をしましょう。


(参考)

相性の良い色の組み合わせを選んでくれるツールがありますので、配色を考える際は下記をご参考ください。

2018年最新!おすすめのカラーパレットツール・サービスまとめ


視線の流れ(Fの法則・Zの法則)を意識した作りになっているか

閲覧する際の視線の流れを意識したレイアウトにすると、ホームページの見やすさ・わかりやすさの改善に繋がります。


有名なパターンとしては「F型」「Z型」と呼ばれるレイアウトパターンがあります。


F型

ボリュームのあるテキストを訪問者に読ませたい場合に向いているレイアウトです。

ホームページの訪問者にとって最重要なのは、自身が求めている情報がそのページに書かれているかを可能な限り早く判断すること。

そのため、左端(文章の始まり)部分を縦に眺めていき、気になる情報があればその箇所を水平に読み進めます。そこが終わったらまた次に気になる箇所を探すために左端を縦に眺めていく...といったことが続きます。

F型の目線を想定したホームページ


Z型

汎用的に使えるレイアウトです。特に、テキストや画像などのコンテンツが少ない場合に向いています。

こちらもF型と同様に、読むことを急いでいる訪問者の視線がどうなるかを検討した結果のパターンです。

左上から水平に右上を見て、そこからまた左端を縦に進むので左下へ視線が移動し、左下から水平に右下に進む、といった動きになります。


読ませたい重要なコンテンツをこれらの軌跡上に配置することで、見やすさを実現できます。


あくまでこれらはパターンのひとつです。実際にホームページを閲覧し、訪問者の閲覧時の視点移動の観点から見やすさを再確認してみましょう。

Z型の目線を想定したホームページ


基本のルールを無視した奇抜なデザインになっていないか

他社ホームページとの差別化や重要な箇所を強調したいと考えるあまり、奇抜なデザインになっていないでしょうか?


基本のルールや見慣れたレイアウトを採用することは、見やすさ・わかりやすさの点で大きなメリットがあります。


(例)
  • グローバルメニューは画面最上部におくという見慣れたレイアウト→初めて訪れるページでも迷わずにメニューを探し当てることができる
  • リンクは青系統、という基本ルール→長文テキストの一部にリンクが記載されていても、そこにリンクがあるということをすぐに伝えられる

奇抜なデザインを採用するとオリジナルのルールを訪問者に押し付けることになり、ホームページの見にくさに繋がります。


メニューやボタンなどパーツを確認する

グローバルナビのメニューの量が多すぎないか

多くても7個程度に抑える

主要なページへのリンクをまとめたグローバルナビは、とても便利な要素です。

ただし、便利だからといってグローバルナビのメニューの数を多くしすぎると見やすさ・わかりやすさを失います。


一般的には、グローバルナビのメニュー数は7つ程度までに抑えるのが良いと言われています。(※人間が記憶しやすい数の限界値がその程度)


グローバルナビのメニュー数を多くしすぎると、内容や配置順に関して記憶に残りにくくなり、目的のものを探す際の見にくさにつながります。


スマホではメニューの数や長さを削ることも検討する

スマホで閲覧した際のグローバルナビにおけるメニューの見やすさに関しても十分に注意しましょう。


画面サイズが小さいため、メニューの数を多いと感じたり表記が占める部分を大きく感じたりして、見やすさを失っている場合がありえます。

スマホでも実際にグローバルナビを触ってみて、見やすさ・わかりやすさの確認を行いましょう。


ボタンはクリックできそうなデザインになっているか

ホームページにおけるボタンの見やすさ・わかりやすさは、それがクリックする対象であることを明確にするのが重要なポイントです。


デザインの見ためのカッコ良さだけを重視して色や位置を決めたり、サイズを控えめにしすぎたりするのはNGです。明快な色で、関連する内容の近くに、目立つ大きさのボタンを配置するようにしましょう。

お問い合わせボタンの配置の例


テキストを確認する

文字は小さすぎないか

本文のフォントサイズとしては15px~18px程度が主流です。


ただし、「絶対にこのフォントサイズが正解」というものはありません。各ホームページのデザインやコンテンツの量次第で、同じフォントサイズだったとしても見やすさは変わります。


一旦16pxでの指定を試し、ホームページ上で実際に見やすさを確認しながら調整していくのが良いでしょう。

文字サイズの調整の際も、PCだけでなくスマホでも必ず見やすさを確認しましょう。


文字の色が薄すぎたり、色を使いすぎたりして見にくくなっていないか

優先度の低い文章を灰色にして薄くすることでほかを目立たせる、という色の使い方を見掛けます。


色の薄さは見る人によって感じ方が様々です。また、ディスプレイによっても見え方が変わってきます。

見やすさを損なわない色の薄さに調整することや確認作業は難易度が高いです。プロのデザイナーでない限り灰色など薄めの色は安易に利用しないほうが良いでしょう。


基本は黒とし、強調したい要所だけ目立つ色にする、といった形にしましょう。強調する際、意図なく色をたくさん使うようなことは見やすさ・わかりやすさを失うので避けましょう。


長文をだらだら羅列した状態にしていないか

訪問者はなんらかの目的を持ってページを閲覧しています。


文章の頭からじっくり読んでくれることは少ないと考えましょう。訪問者は、自身の目的にあった内容がページに書いてあるか、キーワードレベルで探す読み方をします。


そのため、適宜改行や段落を入れて長くても5行程度で文章のまとまりを作り、飛ばし読みがしやすい状態にしておきましょう。段落以外にも、列挙して並べたほうが見やすく・わかりやすくできるところは、箇条書きにしてまとまりにすると良いです。




まとまりのない状態

段落のまとまりがない状態


まとまりのある状態

段落のまとまりがある状態

見やすいホームページを作るためのポイント まとめ

本記事では、見やすいホームページを作るための確認ポイントと改善方法をご紹介しました。


重要なのは2点。


  • 訪問者の求めていることを最優先に考え、伝える情報を整理する
  • スマホで実際にコンテンツを読みながら見やすさを確認する


ホームページで情報発信する側はたくさん伝えたいと思うあまり、情報を詰め込みすぎになりがちです。


一方で訪問者側は、必要な情報をなるべく早く知りたいと思っています。

訪問者にとって見やすく・わかりやすくなっているか、客観的な観点からホームページを見直してみてください。


また、スマホでの見え方を確認する場合、画面幅が収まっているかデザインが崩れていないかくらいの基本的な確認は普段されていると思います。

是非それに加えて、実際にコンテンツをスマホでじっくり読んでみることをおすすめします。PCで閲覧しているだけでは気づけなかった改善ポイントが見つかると思います。


見やすい・わかりやすいホームページの制作をプロに依頼したい方へ

実際にリニューアルの依頼を制作会社に相談する際は、こちらの記事をご参考にしてみてください。

【事例&サンプル付き】ホームページ制作のRFP(提案依頼書)の書き方完全マニュアル


ポイントとしては、何を解決したいのかを発注者側で可能な限りあらかじめ言語化しておくことです。

見やすさ・わかりやすさの観点でいうと、「なんとなく」ではなく具体的に気になっているページや箇所をまとめておくだけでも制作会社とのやり取りはスムーズになります。


Web幹事では、ホームページの新規制作、リニューアルに関するご相談を無料で受け付けています。


お悩みの内容を専門のコンサルタントがヒアリング。お悩みを解決するために最適なホームページ制作会社をご紹介します。


既存のホームページをより見やすく・わかりやすくするための分析から実際の改修作業まで対応可能な制作会社をご紹介するといったことも可能です。


ホームページの制作、リニューアルに困ったら是非お気軽にご相談ください。


今すぐWeb幹事に相談する。


業者選びを任せたい!という方へ

Web幹事はお客様にあった、最適な業者をご紹介するサービス。

あなたの要件をヒアリングし、最適なホームページ制作会社をご紹介します。

  • 制作のプロが厳選した
    優良業者をご紹介!
  • 発注の手間を
    5時間以上削減!
  • 相談料・紹介料は
    0円
無料で相談する
お急ぎの方はこちら 03-6457-3550