デザインブログ

  • TOP
  • ブログ
  • ホームページの見やすさの視認性と読みやすさの可読性!!
_shared_img_thumb_PAK85_kakomaretairoenpitu1278_TP_V

WEBデザイン

ホームページの見やすさの視認性と読みやすさの可読性!!

せっかくホームページを作っても見づらかったり、読みにくかった経験はございませんか?
前回は配色の面積を書きましたが、今回は視認性と可読性について書いてみたいと思います。
配色によっては文字や写真が見えにくかったり、読みにくかったりします。
ホームページを作成する際に視認性、可読性の配慮がなければ伝えたい情報も伝わりません。
最低限の条件として「見やすい」「読みやすい」配色を行うには明度や色相、彩度に注意しなくてはなりません。

視認性とは?

視認性とは見やすさです。見やすい状態を視認性が高いといい、見えにくい状態を視認性が低いといいます。
色の組み合わせ次第では視認性が低くなることもあります。
例えば、緑と赤の組み合わせは文字が読みにくく視認性が低いです。
これは明度によるもので、同じ組み合わせを明度だけ見ると、明度の差が少ないことがわかります!!
このように視認性は明度が大きく影響します。
配色を行う際は地色と図や文字の明度差に注意します。
明度差を大きくすることによって視認性が高く見やすくなります。

可読性とは?

可読性とは読みやすさです。視認性と同様に明度の差が大きい方が文字が認識しやすく読みやすくなります。ですが、明度差が大きいからといって読みやすいとは限りません。
例えば黄色と黒のような組み合わせで長文を読むのにつらくなりませんか?高彩度の色は目に対しての刺激が強く、ある程度の時間を見続けるには不向きです。また、色相の差にも注意します。
補色の組み合わせは目がチカチカします。じっくりと文章を読んでもらいたいときは、目の負担も考慮し、背景色の彩度を下げ、文字との明度差が大きい組み合わせをします。
 
もっとも無難な可読性の高い組み合わせは白と黒です。文字情報の多いサイトはこれを基準に配色をおすすめします。
 
 
 

▲緑と赤の視認性

緑と赤の組み合わせは、明度差が少ないのでわかりにくい組み合わせです。
グレーにすると明度がわかります。明度差が大きい色で組み合わせると、見やすくなります。
20160106blog1
 

▲視認性

配色では見えやすい色の組み合わせを考えます。明度のコントラストが大きい組み合わせは視認性が高くなります。
20160106blog2
 

▲可読性

下の配色ではどれが長文を読みやすいでしょうか?左上は明度差が大きくても色の刺激が強すぎて長文には不向きです。明度のコントラストと彩度や色相の組み合わせにも注意が必要です。
 
20160106blog3

この記事が気に入ったら
いいね!お願いします。

最新情報をお届けします

関連記事

  1. e6773cd0fee5bafc1a6ce28a05353fb0_s

    WEBデザイン

    絶対に抑えておきたいホームページの配色の面積と方法!!

    ホームページを制作する際に色の面積、配色がサイトのイメージを左右する大…

  2. 1381cdd3d8ee353b0371001e5c2e87eb_s

    WEBデザイン

    サイト全体のイメージとターゲットユーザを考える!!

    新規でホームページ制作またはサイトリニューアルを行う際にターゲットユー…

  3. 6aadbba7da65b2c127d6d010932a6fbd_s

    WEBデザイン

    ホームページリニューアルの失敗しないための注意点!!

    今使用しているホームページも古くそろそろリニューアルどきと感じて、…

  4. 8e59eb4aa29ce1b551b409bed0416068_s

    WEBデザイン

    同じ色でも違って見える原因!

    ホームページ制作をやっていてたまにあることを書いてみたいと思います!!…

  5. 20160721blog_img1

    WEBデザイン

    WEBデザインには欠かせないフォント特集!!

    ホームページをデザインする上で、重要な要素となる「フォント」について、…

おすすめ記事

  1. ice_screenshot_20160831-012703
  2. 20160825blog
  3. CoverVid
  4. 20160810blog1
  5. 9eebd6ae3e003dafbcb134405e540da0_s
  6. 20160801blog
  7. 20160630_1

最近の記事

  1. ドラッグ&ドロップ機能を可能にするモーダルポップアッププラグ…
  2. スクロールする際に画像をフェードさせるJavascriptプ…
  3. レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法…
  4. Googleが公表するSEOランキングの3大要素!
  5. RTLテキスト対応JQueryのコンテンツスライダー・グライ…

アーカイブ

  1. 201601190

    制作ツールブログ!!

    ワードプレスを運営するなら入れておきたいお勧めのプラグイン②
  2. 20160825blog

    動くホームページブログ!!

    PDFファイルを手軽に電子カタログに変換できるWEBサービス紹介!!
  3. 20c2d9831cf298a5195f78bbcf00f8e4_m[1]

    制作ツールブログ!!

    ネームサーバー移行前の新サーバーの動作確認
  4. 6d7d03d48271a903c1077ec6128b8d1b_s

    やってはいけない!ホームページ制作

    やってはいけない!!逆効果を生んでしまうブラックSEO!!
  5. 20160801blog

    制作ツールブログ!!

    簡単にできる多言語サイトの作り方!