スポンサーサイト


Ads by Google

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Ads by Google

web拍手 by FC2 記事編集
comments powered by Disqus

【プチ調査】100のサイト&ブログのフォントカラーとサイズをひたすら調べてみた結果、最もメジャーな色とサイズだったのは.......


Ads by Google

0003_20130314_fontcolor_and_size.png

サイトのデザインにおいて最も重要で大切な要素は『文字の見やすさである』

私がまだHTML? CSS?という時にどこかのサイトでこんな風な名言を見た気がする。

今となっては文字の見やすさ、つまり文字の大きさとかフォントの種類だとか、色だったり背景色がいかに見る側に大きな影響を与えるかがちょっとづつ分かってきた気がするが、このブログを始めた当初は何もかもがホントちんぷんかんぷんで、フォントのいじり方はおろか、どれくらいの大きさにしたらいいのかということすらわからなかったのだ。

Ads by Google

見る側になって考えてみればわかるだろう

まぁそう言われればそうだが、HTML? CSS?という時にそんなこと言われても、フォントのいじり方がわかったからといって、正直何がいいのかホントに困る。ましてやサイトの雰囲気や配色、内容によってもいくらでも変わりえるフォントの種類やサイズ、色というのは初心者にとっては選択が難しい。
今回はそんな初心者特有の悩みにちょっとは役に立つかもしれないある統計を取ってみたのでそれをシェアしようと思う。

題して:100のサイト&ブログで使われているフォントサイズと色の中で、一番多く使われているメジャーな組み合わせは一体なんだ?



まずは調べたサイトやブログの一覧

はてなブックマークや私のブックマークから無作為に選んだサイト&ブログ。
リンク忘れを後になって気づいたため、ノーリンクです。(すいません 検索してね)
0008_20130314_fontcolor_and_size.gif



集計方法

009_20130314_fontcolor_and_size.gif
今回、フォントのサイズと色を調べるにあたって行った集計方法は実に単純で、デバッガ(Firefoxでいう開発ツール)でそのサイト&ブログでメインとなる記事部分のフォントのサイズとカラーを調べて(フォントは既指定値を無効にしてから手動入力で比較)地道にExcelでまとめていった。



フォントサイズの集計結果

004_20130314_fontcolor_and_size.png まずはフォントのサイズ。Excelで集計して簡易的に表にしてみた。結果からいうと一番使われているフォントのサイズは16pxであり、次に多く使われているのが14pxであることがわかった。これは集計してみて気づいたことだが、ニュース系のサイトにおいて最も一番使われていたサイズというのが16pxであった。読み手の層を限定しないニュース系のサイトでは、どの年代の人にもハッキリと見える比較的大きいフォントが使われているようだ。また、文字がメインとなるサイトでも大きく視認性の高い大きなフォントが使われている傾向が見られた。

(因みに今回集計するにあたって、サイトやブログが属する任意のカテゴリを設定し、カテゴリ別での集計が出来るようにしている)

002_20130314_fontcolor_and_size.png
円グラフを見てもわかるが、最もよく使われているサイズの16px以上のフォントは17pxだけであった。特殊なサイトで無い限り、文章などの文字の大きさの限界は17px辺りのようだ。

参考までに標準でのフォントのサイズ一覧
007_20130314_fontcolor_and_size.jpg
www-archive.mozilla.org/newlayout/testcases/css/sec526pt2.htm



フォントカラーの集計結果

0005_20130314_fontcolor_and_size.png  次はフォントカラー。今回調べたサイト&ブログのフォントカラーの一覧が左の表だ。どのサイト&ブログもベースとなる基本的なフォントの色というのは黒で、赤や青といった変わった色は無かった。ただ黒色の濃さというのがサイトによって結構色々あり、100のサイト&ブログで19の濃さ違いの色があった。その中でもダントツで一番多かった色というのが『#333333』で、全体の約40%がこの色を使っていた。また、フォントサイズで一番多かった『16px』を使っているサイトの約半分がこの色を使っていた。
2番目に多かった色は以外にも『#000000』の純黒で、全体の約20%のサイトが使っていた。これも集計して初めてわかったことだが、大手のニュース系サイトの殆どがこの色を使っていた。


00006_20130314_fontcolor_and_size.png  

001_20130314_fontcolor_and_size.png 『#333333』と『#000000』だけで全体の65%、つまり約半分以上のサイト&ブログでこの2つの色が使われていることがわかる。



結果的にいうと、サイト&ブログで最もメジャーでよく使われているフォントのサイズと色は『16px』と『#333333』。

010_20130314_fontcolor_and_size.png
フォントサイズの集計結果とフォントカラーの集計結果からいうと、サイズでは16pxが全体の割合では多少多く、色では飛び抜けて#333333が多いということがわかった。
まとめると、文字の大きさは視認性の高い16pxにしつつも、色の濃さを#333333にすることで文字の圧迫感を抑えた形というのが現在のWEBページでのデフォルトという感じのようだ。

「ブログを始めたばかりでフォントのサイズと色を何にしたらいいか迷っている」という方は取り敢えず、サイズは『16px』、色は『#333333』に設定して、自分のデザインに合わなかったら変えていくという形をとるといいかもしれない。


Ads by Google

web拍手 by FC2 記事編集
comments powered by Disqus

デジテクノート
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。