Hatena::ブログ(Diary)

みやきち日記 このページをアンテナに追加 RSSフィード

2013-03-02-Sat

はてブの個別ブクマページ(新デザイン)の見やすさをCheck My Coloursで調べた結果がひどい

個別ブクマページがすげえ見づらくなった

はてなブックマーク、トップページだけじゃなく、個別ブックマークページ(エントリごとのコメント一覧のページ)も一部デザイン改変したんですね。たとえば、ITmediaニュースのこちらの記事個別ブックマークページは、以下のように表示されます。

f:id:miyakichi:20130302104504j:image

すげえ見づらい。何この白さ。

画面のコントラストが低すぎて、見ているうちに目が痛くなってきます。しばらくがんばって読んでみた後、何気なくTVを見たら、目が疲れすぎてBBCやCNNの画面下部の文字が読めなくなってて呆然としました。座ってる場所からTVまでの距離はいつもと同じなのに。701ページもある『木村政彦はなぜ力道山を殺さなかったのか』(増田俊也、新潮社)をKindleで一気読みしたときだって、こんなに目が疲れたりしなかったのに。

Check My Coloursで調べてみた

この見づらさが個人の感覚の問題なのかどうか調べるため、URLを入れるだけでWebサイトのコントラストが適切か調べてくれるこちらのサイトを使ってみました。

このCheck My Coloursとは、Webサイトのマークアップ要素(div、h1、p、a、等々)のひとつひとつについて、「光度コントラスト」、「明度差」、「彩度差」の3点から見やすさを判定してくれるサービス。という説明でわかりにくかったら、上のリンクから飛んで、適当なサイトのURLを入力してみてください。

今回個別ブクマページのサンプルとして調べてみたのは、上のスクリーンショットのページ(http://b.hatena.ne.jp/entry/www.itmedia.co.jp/news/articles/1303/01/news041.html)です。結果はこんな。

f:id:miyakichi:20130302104310j:image

チェックされた904要素のうち、光度コントラストで364箇所、明度差で261箇所、彩度差で531箇所がダメ出しされています。つまり、904要素×3項目(光度・明度・彩度)で延べ2712項目のうち、約43パーセントが落第。そりゃ、見づらいはずだわ。

なんでこうなった

どれでしょう。

  1. はてなにはデザイナーがいない。
  2. 画面を見づらくすることでページの滞在時間を増やし、広告主に「ほらほらこんなに長時間見てます!」と売り込む作戦。
  3. はてなは何も考えていない。
  4. その他