とりあえず、簡単な中間発表をしてみますね。
アンケートの仕組みなどについてはここでは省略。該当記事を参照してください。
1)文字サイズ
14px 107票 26%
15px 98票 24%
16px 77票 19%
13px 62票 15%
17px 21票 5%
12px 21票 5%
18px 9票 2%
11px 4票 1%
20px 3票 0.75%
26px,22px,19px 各1票 0.2%
(参考)「14px」は、WindowsのIEで文字サイズ「中」にしたときの標準サイズとほぼ等しいものです。(正確には、小=10pt、中=12pt。ただしpreやttは「中」でも10ptとなる)
Windows FireFoxは初期設置の標準文字が14pxの明朝体になっています。
MacではWindowsで見たときよりも文字が大きめに、字間・行間も広めに見えます。更にアンチエイリアスがかかるので、文字がガタガタしません。
2)左右の余白
15% 165票 41%
20% 116票 29%
10% 85票 21%
25% 29票 7%
5% 7票 2%
30% 3票 0.75%
3)行間
170% 90票 22%
180% 82票 20%
160% 69票 17%
150% 68票 17%
200% 32票 8%
190% 25票 6%
140% 13票 3%
130% 8票 2%
210% 6票 1.5%
220% 3票 0.75%
120%,240%,250% 各2票 0.4%
230%,260%,280% 各1票 0.2%
4)文字色
#000000 174票 42%
#333333 55票 13%
#444444 42票 10%
#222222 33票 8%
#555555 31票 8%
#111111 27票 7%
#666666 23票 5.5%
#777777 5票 1%
#FFFFFF 4票 1%
#BBBBBB 3票 0.75%
#999999,#DDDDDD 各2票 0.4%
#888888,#AAAAAA,#CCCCCC,#EEEEEE 各1票 0.2%
(参考)#000000=black(真っ黒)、#666666=gray(グレー)、#FFFFFF=white(真っ白)
0からFまでの16進数で、数字が小さければ黒に近く、大きければ白に近くなります。
5)背景色
#EEEEEE 161票 40%
#FFFFFF 142票 35%
#DDDDDD 54票 13%
#CCCCCC 19票 4.5%
#BBBBBB 6票 1.5%
#AAAAAA 4票 1%
#000000,#555555,#888888,#999999 各3票 0.75%
#222222,#333333,#444444 各2票 0.4%
#111111 1票 0.2%
6)コメントからピックアップ
()内は文字サイズ、余白、行間、文字色、背景色、解像度、ブラウザの順
・ウインドウはいつも横800程度で表示させています。
(16px, 15%, 160%, #111111, #EEEEEE, 1024*768, IE6)
・背景は白でもいけますが、文字は黒より灰色の方が目に優しいです。
(15px, 15% 160%, #666666, #EEEEEE, 1280*1024, IE6)
・背景は白く、文字が淡い黒(茶なども)というのが一番読みやすいです。
(13px, 15%, 180%, #555555, #FFFFFF, 1024*768, IE6)
・私の場合は「お気に入り」を開いた状態で、一文がさっと目に入る長さ(500px〜600pxくらい?)+長時間の読書に耐えられる色がこれくらいです。短編はよほど奇抜なデザイン色でなければ気にならなりません。
(16px, 20%, 170%, #333333, #EEEEEE, 1280*768, IE6)
・目が悪いので、文字大きめ、行間広めがありがたいです。ブラウザで文字の大きさを変えられるようにしてもらえれば、最初の表示が豆文字でもかまわないのですが、サイズ固定はカンベンしてください。
(18px, 20%, 170%, #000000, #EEEEEE, 1024*768, IE6)
・目が悪いので、大き目の文で行間も空き気味の方が読みやすいです。
背景は真っ白より落ち着いた薄い色が付いている方が目が疲れづらくて好きです。
それから余白は余り多くない方がスクロールする手間が掛からなくって好き←ただのものぐさです。
あ、あと壁紙が字に掛かっているのは読みづらくって苦手です。
(17px, 15%, 190%, #000000, #EEEEEE, 800*600, IE6)
・行間が空き過ぎていると逆に読みにくいと思う昨今です。
(13px, 20%, 130%, #000000, #EEEEEE, 1600*1200 IE5)
・液晶モニタには文字は真っ黒ではなくてすこーしだけ色を抜いた方が見やすい気がします。背景は少し色を入れて。ベージュかうすーいグレか。
(14px, 10%, 170%, #333333, #EEEEEE, 1024*768, IE6)
・コントラストが低すぎるのは目が疲れてダメですが、高すぎるのも苦しいですね。行間は広めが好きです。
(14px, 15%, 190%, #333333, #EEEEEE, 1024*768, IE6)
・備考といいますか……
眼球の横移動幅が広いと疲れるので、ブラウザは全画面表示にはしておりません。
このアンケートに答えた時も、そしていつも、ブラウザの横幅は700px強程度のサイズにしております。
(14px, 15%, 180%, #444444, #EEEEEE, 1152*864, IE6)
・字は大きめで、そこそこ中央に文字列が固まっている。そんな状態がやはり読みやすかったですー!
(16px, 15%, 170%, #444444, #EEEEEE, 1024*768, IE6)
・真っ白な背景に黒文字だと眼が疲れるので、黒背景のサイト様を捜す傾向にあります。でも実際に比べてみると薄灰色背景に濃灰色文字がいい感じです。
(14px, 10%, 150%, #444444, #BBBBBB, 1024*768、FireFox)
・背景の輝度がある程度低いほうが、目が疲れないかと思います。
(14px, 15px, 160%, #000000, #EEEEEE, 1280*800, IE6)
・背景色は本当はFFFFFFとEEEEEEとの間ぐらいが楽ですなんですけど……。
(15px, 20%, 170px, #555555, #FFFFFF, 1024*768, IE6)
・目の錯覚効果というのか……幅広で文字が大きいと圧迫感が合って息苦しくなり、逆に幅狭だと文字が小さい方が窮屈に感じて息苦しくなりました。
(16px, 15%, 140%, #111111, #EEEEEE, 1400*1050, IE6)
・漆黒文字・純白背景派だったんですが、ややグレーの背景も良いですね。
(15px, 10%, 170%, #000000, #EEEEEE, 1024*768, IE6)
・長文を読む上では、やっぱり文字と背景のコントラストが柔らかいほうが目に優しくていいと思いました。余白は、目の動きが左右に広がりすぎず、また次の行への移り変わりが激しくなく、といった辺りで20%にしました。
(14px, 20%, 170%, #333333, #EEEEEE, #1024*768, IE6)
・今まで考えていたよりも、大きめの文字の方が読みやすいことが分かりました。
(17px, 15%, 180%, #555555, #FFFFFF, 1024*768, IE6)
・私も小説を書いてオンラインで乗せていますが、目が悪いので文字の大きさはブラウザの『中』もしくは『大』で見やすいデザインにしています。あとは台詞と普通の文の間を1行空けるようにしています。
(16px, 10%, 170%, #000000, #FFFFFF, 1280*1024, IE6)
(参考)最近流通しているPCの解像度は、だいたいが1024*768です。1280*1024も出てきています。やや古めのノートパソコンだと800*600になります。1024*768以上だと、ウィンドウを全画面表示にしなかったり、左にお気に入りを常に出している人が多くなります。
Web業界的には「800*600の全画面表示 or 1024*768でお気に入りを表示して横スクロールバーが出ない」がひとつの目安になっているようです。
(参考)同じ配色にしていてもディスプレイの違いによって見え方はずいぶん変わります。やや古めのノートパソコンの液晶画面は、全体的に白っぽく、眩しく見えるものが多いようです。色の違いも判別しにくいです。最近の液晶はピンキリとはいえ、だいぶブラウン管に近づいてきました。
近頃流行のピカピカした液晶(スーパーファイン液晶とか呼ぶみたい)は、背景色が黒やダークカラーだと映り込みをして見にくくなります。(夜の窓を見る感じ)
MacはWindowsに比べて全体的に明るい発色になります。