■結果
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
■グラフ
 |
 |
 |
■コメント
- 自分好みに調節してみました。目が光に弱いので、背景と文字のコントラストがあまりないほうが疲れません。 （文字サイズ：14px、余白：15％、行間：160％、文字色：■、背景色：■、解像度：1024*768）
- 目が悪い＆弱いので、文字が小さいのと背景が明るいのはちょっときついですね。行間もある程度ある方がゆったり読めるような気がします。 （文字サイズ：15px、余白：20％、行間：180％、文字色：■、背景色：■、解像度：1280*768）
- 文字は黒がいいけど、背景が白だとちょっと目が痛いです。 （文字サイズ：13px、余白：20％、行間：200％、文字色：■、背景色：■、解像度：1024*768）
- 背景はこれくらいだとめが疲れず、文字は文庫と同じくらいでしょうか。 （文字サイズ：13px、余白：15％、行間：130％、文字色：■、背景色：■、解像度：1024*768）
- 背景は少し灰色がかったほうが読みやすいと思われ。行間を取るとかなりいいと思います。 （文字サイズ：14px、余白：10％、行間：160％、文字色：■、背景色：■、解像度：1024*768）
- 背景は暗すぎず、明るすぎず、文字はハッキリとしているのが疲れにくく読みやすいです （文字サイズ：14px、余白：20％、行間：160％、文字色：■、背景色：■、解像度：1024*768）
- 背景の輝度がある程度低いほうが、目が疲れないかと思います。 （文字サイズ：14px、余白：15％、行間：160％、文字色：■、背景色：■、解像度：1280*800）
- 漆黒文字・純白背景派だったんですが、ややグレーの背景も良いですね。 （文字サイズ：15px、余白：10％、行間：170％、文字色：■、背景色：■、解像度：1024*768）
- 背景は白より少し色が付いていた方が疲れなくて良いですね。 （文字サイズ：16px、余白：15％、行間：160％、文字色：■、背景色：■、解像度：1024*768）
- 黒文字白背景が一番、と思っていたですけど、案外自分では気がつかないものですね。 （文字サイズ：15px、余白：5％、行間：160％、文字色：■、背景色：■、解像度：1024*768）
- 真っ白な背景だと、ずっと文字を追っていると目がチカチカしちゃう気がします。 （文字サイズ：14px、余白：10％、行間：170％、文字色：■、背景色：■、解像度：1024*768）
- 背景色は明るい系の淡い色だとベストですね。 （文字サイズ：15px、余白：20％、行間：150％、文字色：■、背景色：■、解像度：1024*768）
- 背景はＦとＥの中間くらいで。Ｅよりも少し明るめがいいみたいです。字の大きさは１６PXが目に優しくていいかもです。字数については、実際の本のスタイルだと、縦書きの場合４１文字なので、あまり１行の文字数が多いと読み辛く感じるかもしれません。 （文字サイズ：16px、余白：15％、行間：150％、文字色：■、背景色：■、解像度：1024*768）
- 背景は真っ白ではなく薄く色がついたほうがいいかも。文字は（個人的に）大きいほうが読みやすいです。豆字は勘弁……。 （文字サイズ：16px、余白：15％、行間：170％、文字色：■、背景色：■、解像度：1024*768）
- このノートパソだと、背景が濃いとグラデーションに見えるのです （文字サイズ：14px、余白：25％、行間：180％、文字色：■、背景色：■、解像度：1024*768）
- 強烈なコントラストの文字と背景の組み合わせはナンセンスですが、あまり色合いが同じでも見づらくて困りますね。 （文字サイズ：16px、余白：15％、行間：180％、文字色：■、背景色：■、解像度：1024*768）
- これくらいのコントラストや余白が、一番読みやすいです。 （文字サイズ：16px、余白：15％、行間：180％、文字色：■、背景色：■、解像度：1024*768）
- 背景は白すぎると、長時間読んでてて疲れますね。あと、横に妙に長く文章が続かれると（つまり余白が少ないと）、文章が分かりにくく感じます。（句読点が少ない文章の時のようにかんじる） （文字サイズ：14px、余白：15％、行間：160％、文字色：■、背景色：■、解像度：1024*768）
- 私の使っている画面は液晶で輝度がとても高いので、背景／文字のコントラストが強すぎるのは苦手です。背景色はＰＣ環境によって大きく左右されるから、デザインの悩みどころですよね・・・ （文字サイズ：14px、余白：20％、行間：150％、文字色：■、背景色：■、解像度：1024*768）
- 長文を読む上では、やっぱり文字と背景のコントラストが柔らかいほうが目に優しくていいと思いました。余白は、目の動きが左右に広がりすぎず、また次の行への移り変わりが激しくなく、といった辺りで20%にしました。 （文字サイズ：14px、余白：20％、行間：170％、文字色：■、背景色：■、解像度：1024*768）
- 液晶モニタには文字は真っ黒ではなくてすこーしだけ色を抜いた方が見やすい気がします。背景は少し色を入れて。ベージュかうすーいグレか。 （文字サイズ：14px、余白：10％、行間：170％、文字色：■、背景色：■、解像度：1024*768）
- コントラストが低すぎるのは目が疲れてダメですが、高すぎるのも苦しいですね。行間は広めが好きです。 （文字サイズ：14px、余白：15％、行間：190％、文字色：■、背景色：■、解像度：1024*768）
- 背景真っ白、文字真っ黒というのは、紙に印刷するなら良いのですが、ディスプレイ上だと若干眩しい気がします （文字サイズ：15px、余白：10％、行間：130％、文字色：■、背景色：■、解像度：1152*864）
- 背景色はEEEEEEよりももう少し白よりの方が好みなんですが、白だと長時間の読書に耐えられないのでこちらを選択しました。 （文字サイズ：16px、余白：15％、行間：170％、文字色：■、背景色：■、解像度：1024*768）
- 背景は白が好みです。 （文字サイズ：15px、余白：15％、行間：150％、文字色：■、背景色：■、解像度：1024*768）
- 真っ黒よりは灰色がかっているほうが見やすいことを発見した。字は大きいほうが眼に優しい気がする。好みによるかも知れませんが。 （文字サイズ：16px、余白：15％、行間：150％、文字色：■、背景色：■、解像度：1024*768）
- 文字はもっと暗めでもいいと思います。 （文字サイズ：21px、余白：10％、行間：170％、文字色：■、背景色：■、解像度：1280*1024）
- まぶしさに弱いので、低コントラストの配色が楽ちんです。 （文字サイズ：13px、余白：10％、行間：190％、文字色：■、背景色：■、解像度：1024*768）
- 真っ白な背景に黒文字だと眼が疲れるので、黒背景のサイト様を捜す傾向にあります。でも実際に比べてみると薄灰色背景に濃灰色文字がいい感じです。 （文字サイズ：14px、余白：10％、行間：150％、文字色：■、背景色：■、解像度：1024*768）
- 背景真っ白は、目にちょっと辛いですね。余白は15とどちらにするかで迷いました。 （文字サイズ：14px、余白：20％、行間：160％、文字色：■、背景色：■、解像度：1024*768）
- 背景は少し色（白黒以外でも）がついてるほうが好きです。 （文字サイズ：13px、余白：15％、行間：160％、文字色：■、背景色：■、解像度：800*600）
- 背景は黒系か白系かで迷いましたが、パッと見の明るさで薄いグレーにしました。経験上、超長編小説を読み続けていた時、白っぽい背景だと目が死にました。長いお話の場合は黒っぽい背景の方が訪問者の目に優しいと思います。 （文字サイズ：14px、余白：15％、行間：180％、文字色：■、背景色：■、解像度：1024*768）
- 背景はFFFFFFでもよかったのですけれど、長編のように、長く読んでいくとしたら、灰色がかったほうが読みやすいです。ただ、サイトをデザインするうえでは、背景色は白で固定してしまうことのほうが多いのですが。 （文字サイズ：16px、余白：15％、行間：170％、文字色：■、背景色：■、解像度：1024*768）
- 背景は白く、文字が淡い黒（茶なども）というのが一番読みやすいです。 （文字サイズ：13px、余白：15％、行間：180％、文字色：■、背景色：■、解像度：1024*768）
- 背景色は本当はFFFFFFとEEEEEEとの間ぐらいが楽ですなんですけど……。 （文字サイズ：15px、余白：20％、行間：170％、文字色：■、背景色：■、解像度：1024*768）
- 文字色は黒だと目がチカチカします。できれば赤みがかったグレイや青みがかったグレイもあると嬉しいです。 （文字サイズ：14px、余白：20％、行間：180％、文字色：■、背景色：■、解像度：1024*768）
- 背景は白でもいけますが、文字は黒より灰色の方が目に優しいです。 （文字サイズ：15px、余白：15％、行間：160％、文字色：■、背景色：■、解像度：1280*1024）
- 文字は灰色、背景は白、改行はスッキリ具合が一番いいと思う。 （文字サイズ：14px、余白：15％、行間：190％、文字色：■、背景色：■、解像度：800*600）
- 文字と背景色のコントラストがありすぎてもなさすぎても読みにくいです。 （文字サイズ：16px、余白：15％、行間：190％、文字色：■、背景色：■、解像度：1024*768）
- 背景が白いのはまぶしいので嫌いです。行間はあまり広いとスクロールが面倒なので、狭いほうが水です。 （文字サイズ：15px、余白：10％、行間：120％、文字色：■、背景色：■、解像度：1280*1024）
- 背景が暗いほうが見やすい （文字サイズ：14px、余白：15％、行間：160％、文字色：■、背景色：■、解像度：1024*768）
- 黒背景に薄めの灰色って読みやすいですよ。後は、白背景に濃い目の灰色とか…。行間は結構あった方が良いと思います。 （文字サイズ：14px、余白：10％、行間：200％、文字色：■、背景色：■、解像度：1024*768）
- 背景が白いと文字に集中できない。 （文字サイズ：15px、余白：10％、行間：150％、文字色：■、背景色：■、解像度：1024*768）
- 背景は暗い方が目に優しいですね。文字も明るくない白が最適かと・・。 （文字サイズ：14px、余白：25％、行間：250％、文字色：■、背景色：■、解像度：1280*1024）
- 背景黒系のが最近読みやすいと思っているんですが、サイトデザインとの兼ね合いもあってなかなか自分では実行できません。 （文字サイズ：14px、余白：20％、行間：160％、文字色：■、背景色：■、解像度：1024*768）
- もともとモニタの輝度はかなり下げてます。それでもこのくらいの低コントラスト＆暗めがいいです。白背景は目が痛くて……。横書き文字は、あまり幅広いと読みにくいので、３０数文字程度がいいかなーと思います。 （文字サイズ：16px、余白：25％、行間：190％、文字色：■、背景色：■、解像度：1280*1024）
■感想
真っ黒な字×真っ白な背景、という、初期設定のままの配色が、かなり票を集めているようです。
とはいえ、色を「黒」「濃い灰色」「灰色」「薄い灰色」「白」に分類して傾向を見てみたところ、最も人気が高いのは「濃い灰色の文字×薄い灰色の背景」という組み合わせ。これに３位に入った「黒の文字×薄い灰色の背景」への票を合わせると、実に45％が「黒か濃い灰色の文字×薄い灰色の背景」という組み合わせを「最も読みやすい」と感じたことがわかります。それに続いて人気があるのが、「黒か濃い灰色の文字×白の背景」で、こちらは40％弱になります。
コメントでも、「背景が真っ白だと眩しくて読みにくい」という意見が多く寄せられました。また、今回のアンケートの選択肢の中で一番薄い灰色より、もっと薄い灰色（#FAFAFAなど）が良いという意見もありました。
背景色を白にするデザインは、Webサイトのデザインとしてはもっともベーシックなもので、広く受け入れられていますが、長文を読む際には目に負担がかかると感じる人が多いようです。
そのほか多かったのは、無彩色の灰色ではなく、ベージュなど薄く色をつけたものが読みやすいという意見でした。
配色は、サイト全体の配色とのバランスもありますので難しいところですが、読みやすさを優先するのであれば淡色の背景に濃い色の文字という組み合わせが望ましいようです。
なお、背景にべったりと色をつけることに抵抗があるのであれば、本文表示部分の背景だけに色をつける、あるいは逆に余白部分にだけ色をつける、無地に近い背景画像を使用する、といった方法でもまぶしさを軽減することができるのではないかと思います。
そのサイトさんでは、文字色のほうでは真っ黒（#000000)ですが、こちらは#292929が好みです。つまり、私は#F4F4F4（背景）×#292929（文字）が好きなわけです。これは自分なりにワードで試した結果ですが、これがあまり好きではない方もいらっしゃるのだろうなーと思います。ちなみに#F4F4F4はRGBでは244,244,244、#292929は41,41,41です。