サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
 HTMLリファレンス
 スタイルシート
 JavaScript
 PHP/データベース
WEBデザイン
 デザインテクニック
 素材集/テンプレート
 ウェブ配色の見本
 ユーザビリティ
WEB運営
 ウェブの開設と運営法
 アクセスアップの技
 アフィリエイト (WEB広告)
 ドメインとサーバー
特集・トピックス
 Web広告で収入を得る
 独自ドメインの利点
 使えるWeb作成ソフト
 Webデザイナーになるには
 SEOでアクセスアップ
 光ファイバーの導入
リンク集
 ウェブ作成リンク
 無料リンク
 オンラインソフトリンク
 ユーザーリンク
 ウェブコラム
 参考文献一覧
 サイトマップ
 このサイトについて
 お問い合わせ
 eWebホーム


Home >> ユーザビリティ >> 読みやすいコンテンツ

読みやすいコンテンツ



ウェブの基本的なルール

デザインや軽さなどの要素は文章が読めてこそ初めてその意味を持ちます。可読性を保つためにウェブサイトが守るべき基本的ルールを紹介します。
  • 文字と背景色のコントラストはある程度強める。一番無難なのは白い背景に黒い文字
  • 背景画像はコントラストが低いものを使う。背景画像が文字の形を認識するときの邪魔になってはいけない
  • 誰にでも読めるくらいの大きさの文字を使う。脚注やコピーライトなどほとんど読む必要がない文字は小さくても構わない
  • 文字は動かしたり、点滅させたり、大きさを変えたりするのは控える
文章は左揃えが基本として、読み始める位置を固定しましょう。右揃えや中央揃えは読み始めの位置が分かりづらいので、デザイン的な効果を出す場合以外には用いない方がいいでしょう。

以下は文字と背景の組み合わせでどれだけ読みやすさが変わるかを表示したものです。

abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖
abcdefg
12345
あいうえお
カキクケコ
差誌酢瀬祖

薄い背景色では緑や黄色が見えにくくなります。また、背景画像を使用した場合も認識しにくくなります。


大きさとコントラスト

以下は背景カラーが#ccccccの時の文字の大きさとコントラストを比べたものです。

#000000
#333333
#666666
#999999
#ffffff

 
#ff0000
#ff3333
#ff6666
#ff9999
#ffcccc

#0000ff
#3333ff
#6666ff
#9999ff
#ccccff
#00ff00
#33ff33
#66ff66
#99ff99
#ccffcc

ディスプレイを少し遠くから眺めてみると、薄い色の文字はかなり認識しづらくなります。視力に障害がある人だと致命的です。
そこそこ大きな文字と高いコントラストを使用するようにしましょう。


 
 

Webの開設と運営法に戻る Next:写真とそのサムネイル




 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, Accessibility, Usability. All rights reserved. - Home