サイトマップ

お問い合わせ

このサイトについて

WEB制作支援

　HTMLリファレンス

　スタイルシート

　PHP/データベース

WEBデザイン

　デザインテクニック

　素材集/テンプレート

　ウェブ配色の見本

　ユーザビリティ

WEB運営

　ウェブの開設と運営法

　アクセスアップの技

　アフィリエイト (WEB広告)

　ドメインとサーバー

特集・トピックス

　Web広告で収入を得る

　独自ドメインの利点

　使えるWeb作成ソフト

　Webデザイナーになるには

　SEOでアクセスアップ

　光ファイバーの導入

リンク集

　ウェブ作成リンク

　無料リンク

　オンラインソフトリンク

　ユーザーリンク

　ウェブコラム

　参考文献一覧

　サイトマップ

　このサイトについて

　お問い合わせ

　eWebホーム

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

読みやすいコンテンツ

ウェブの基本的なルール

デザインや軽さなどの要素は文章が読めてこそ初めてその意味を持ちます。可読性を保つためにウェブサイトが守るべき基本的ルールを紹介します。

文字と背景色のコントラストはある程度強める。一番無難なのは白い背景に黒い文字
背景画像はコントラストが低いものを使う。背景画像が文字の形を認識するときの邪魔になってはいけない
誰にでも読めるくらいの大きさの文字を使う。脚注やコピーライトなどほとんど読む必要がない文字は小さくても構わない
文字は動かしたり、点滅させたり、大きさを変えたりするのは控える

文章は左揃えが基本として、読み始める位置を固定しましょう。右揃えや中央揃えは読み始めの位置が分かりづらいので、デザイン的な効果を出す場合以外には用いない方がいいでしょう。

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

abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖
abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖
abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖
abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖
abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖
abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖	abcdefg １２３４５あいうえおカキクケコ差誌酢瀬祖

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

大きさとコントラスト

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

#000000	あ	あ	あ	あ	あ
#333333	あ	あ	あ	あ	あ
#666666	あ	あ	あ	あ	あ
#999999	あ	あ	あ	あ	あ
#ffffff	あ	あ	あ	あ	あ

#ff0000	あ	あ	あ	あ	あ
#ff3333	あ	あ	あ	あ	あ
#ff6666	あ	あ	あ	あ	あ
#ff9999	あ	あ	あ	あ	あ
#ffcccc	あ	あ	あ	あ	あ

#0000ff	あ	あ	あ	あ	あ
#3333ff	あ	あ	あ	あ	あ
#6666ff	あ	あ	あ	あ	あ
#9999ff	あ	あ	あ	あ	あ
#ccccff	あ	あ	あ	あ	あ

#00ff00	あ	あ	あ	あ	あ
#33ff33	あ	あ	あ	あ	あ
#66ff66	あ	あ	あ	あ	あ
#99ff99	あ	あ	あ	あ	あ
#ccffcc	あ	あ	あ	あ	あ

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

← Webの開設と運営法に戻る

Next：写真とそのサムネイル →

/

/

スタイルシート

/

Javaスクリプト

/

/

/

テクニック

/

/

ユーザビリティ

/

開設と運営

/

アクセスアップ

/

アフィリエイト

/

Copyright(C) 2004. Aeu, Gundam, eWeb, Accessibility, Usability. All rights reserved. - Home -