entry

2009年版・人気ブログ型サイトのデザイン 第3回 色・サイズ編

date: 2009/03/21 21:56 | modified: 2009/05/13 15:48
category: design

  1. 2009年版・人気ブログ型サイトのデザイン
  2. 色・サイズの比較
  3. 色・サイズの考察
    1. 本文の文字色と背景色
    2. リンク色
    3. 文字のスタイル
  4. 補足
    1. 文字（フォント）スタイルの指定について
  5. 参考

2009年版・人気ブログ型サイトのデザイン

第3回となるこの記事では「色・サイズ編」と題して、各ブログの要である「本文」のデザインに注目します。文字色・背景色・本文中で多用されているアンカーリンクの色や、文字サイズを比較・考察します。

色・サイズの比較

文字色・背景色・リンク色の比較
サイト名 文字色 背景色 リンク色 ホバー色 アクティブ色 訪問済色
PHPSPOT開発日誌 ■#444444 ■#FFFFFF ■#0000EE ■#0000EE ■#EE0000 ■#551A8B
404 Blog Not Found ■#000000 ■#FFFFFF ■#333333 ■#999999 ■#999999 ■#333333
ホームページを作る人のネタ帳 ■#333333 ■#FFFFFF ■#0099CC ■#FF0066 ■#FF0066 ■#0099CC
DesignWalker ■#444444 ■#FFFFFF ■#99CC00 ■#99CC00 ■#99CC00 ■#99CC00
TechCrunch ■#272727 ■#FFFFFF ■#008D00 ■#008D00 ■#008D00 ■#008D00
ウノウラボ ■#EEEEEE ■#2D2E37 ■#99CCFF ■#FF9933 ■#FF9933 ■#EEEEEE
Google Mania ■#FFFFFF ■#404040 ■#9FF200 ■#9FF200 ■#9FF200 ■#9FF200
MOONGIFT ■#333333 ■#E6E6E6 ■#226699 ■#226699 ■#226699 ■#226699
ネタフル ■#333333 ■#FFFFFF ■#445599 ■#445599 ■#445599 ■#445599
CREAMU ■#333333 ■#FFFFFF ■#3164FC ■#3164FC ■#3164FC ■#551A8B

明示的にスタイルを宣言していないものは実測値を記入（ただし、未入力の背景色・リンク色はブラウザのデフォルトの色を入力、省略されたものは6桁の16進数に変換）

文字色のスタイルサンプル
サイト名 テキスト リンク ホバー アクティブ 訪問済
PHPSPOT開発日誌 テキスト リンク ホバー アクティブ 訪問済
404 Blog Not Found テキスト リンク ホバー アクティブ 訪問済
ホームページを作る人のネタ帳 テキスト リンク ホバー アクティブ 訪問済
DesignWalker テキスト リンク ホバー アクティブ 訪問済
TechCrunch テキスト リンク ホバー アクティブ 訪問済
ウノウラボ テキスト リンク ホバー アクティブ 訪問済
Google Mania テキスト リンク ホバー アクティブ 訪問済
MOONGIFT テキスト リンク ホバー アクティブ 訪問済
ネタフル テキスト リンク ホバー アクティブ 訪問済
CREAMU テキスト リンク ホバー アクティブ 訪問済
文字サイズの比較とそのスタイルサンプル
サイト名 文字サイズ 書体 行間 スタイル
PHPSPOT開発日誌 small ＭＳ Ｐゴシック 140% サンプル sample
404 Blog Not Found medium ‘ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,'メイリオ’,'Mayryo’,'ＭＳ Ｐゴシック’,'MS PGothic’,sans-serif - サンプル sample
ホームページを作る人のネタ帳 14px Hiragino Kaku Gothic Pro,’ヒラギノ角ゴ Pro W3′,’ＭＳ Ｐゴシック’,Osaka 150% サンプル sample
DesignWalker - ‘verdana’,'trebuchet ms’,sans-serif 1.4 サンプル sample
TechCrunch 1em(13px) Lucida Grande,Verdana,Lucida Sans Regular,Lucida Sans Unicode,Arial,sans-serif 150% サンプル sample
ウノウラボ 14px ‘trebuchet ms’,helvetica,arial,sans-serif 1.5 サンプル sample
Google Mania 14px Arial,Helvetica,sans-serif - サンプル sample
MOONGIFT 75% tahoma,verdana,sans-serif 1.5em サンプル sample
ネタフル 14px Arial,Helvetica,sans-serif 160% サンプル sample
CREAMU 1em(90%) Verdana,arial,sans-serif,’ヒラギノ角ゴ Pro W3′,’ＭＳ ゴシック’,'Osaka’ 1.5 サンプル sample

文字サイズは親要素のサイズを併記（%やemなどの相対指定の場合、親要素を基準にサイズが計算されるため）

色・サイズの考察

本文の文字色と背景色

文字色は検証した10サイト全てが「無彩色（白・黒・灰色）」を使っています。またその内「404 Blog Not Found」と「Google Mania」を除く8サイトが中間色である灰色を使っています。
以下は数学的・物理的・心理的検証を行っていないために私見になりますが、明度の差から言えば「404 Blog Not Found」のように白背景（#FFFFFF）に黒文字（#000000）を使う場合が、一番文字を視認しやすくなるはずです。しかし表示媒体がPCディスプレイであるがゆえに、大きい明度差の文字を長時間読むと目が疲れてしまいます。今回検証したサイトは一記事辺りの文章量も多いため、読みやすくするために明度差を抑えているのだと考えられます。

リンク色

文字色が無彩色だったことと対照的に、リンク色は「404 Blog Not Found」を除く9サイトが有彩色を使っています。またその内6サイトが青系の色を使っています。デフォルトのリンク色が青（#0000EE）であるため、「青文字＝リンク」という意識がデザイナー・訪問者双方にあるからだと思います。

逆にデフォルトの設定をわざわざ変更しているという点で興味深いのは、「リンクの下線（text-decoration）」要素です。比較表には入力していませんが、スタイルサンプル表のリンク部分をご覧いただければわかる通り、「404 Blog Not Found」と「ウノウラボ」を除く8サイトではリンクの下線を消しています。

「PHPSPOT開発日誌」・「ウノウラボ」・「CREAMU」は訪問済リンクの色を指定しています。また、「DesignWalker」は訪問済リンクのスタイルにitalicを指定しています。
素の文章よりも、他サイトの「まとめ記事（もしくはその翻訳・転載記事）」のようなリンクを列挙するコンテンツが多いからか、未訪問か訪問済かをわかりやすくする工夫が見られます。

正確には「PHPSPOT開発日誌」はリンク色のスタイルを指定しないことで、デフォルトの設定を使用しています。
「ホームページを作る人のネタ帳」はテキストリンクにそれぞれstrongタグを追加しています。
「MOONGIFT」はホバー時の背景に、ゆっくりと点滅する下線のアニメーション画像を指定しています。

文字のスタイル

文字サイズは5サイトが絶対指定・5サイトが相対指定と、ちょうど半々になっています。

日本語書体を指定している4サイトの内、「ＭＳ Ｐゴシック」のみを指定している「PHPSPOT開発日誌」を除く3サイトでは、Macに使われているフォントをWindowsに使われているフォントよりも先に指定しています。

行間は8サイトで指定され、読みやすくしたいという意図が感じられます。ちなみにそれら全ては相対数値で指定されています。

また、表には入力していませんが、対象とした10サイト全てで「字間（letter-spacing）」は指定されていませんでした。

補足

文字（フォント）スタイルの指定について

過去、文字（フォント）のサイズや書体など、スタイルの指定に関する議論は活発に交わされてきました。しかし、OSやブラウザは（無限ではないものの全てをひとりでチェックするのは不可能なくらい）数多く存在する現在、どのような指定が「正解」なのか誰にも答えることは出来ないと思います。
ウェブデザイナーはフォント関係のスタイル指定を「一体どうすれば完璧になるのか？」と心のどこかで気にしつつも、一方では「まあ、見栄えも悪くないし、大体のブラウザでちゃんと表示されているし、これでいいだろ」というような妥協をしているのではないでしょうか？　かくいう自分もその内のひとりです。

これを理由（言い訳？）に、フォント関係については突っ込んだ考察をせず、数値から読み取れる情報を書くのみに留めておきます。

参考

このエントリーは以下のリンク先の記事を参考・引用して書かれています．

関連記事

author: ルモイ
tags: , , , ,

respond