Good CSS Format gurdian.co.uk

いろんなニュースサイトを見ていますが、最近見た中で一番フォーマットが見やすいと感じたサイトです。

gurdian.co.uk

レイアウトもそうですが、何よりテキストのフォーマットがいいですね。文字量があるサイトながら、シンプルなレイアウト設計とスタイルで一目で各コンテンツブロックが分かり、見だしがまず目に入ってきます。結構英文のニュースサイトはぱっと見でうんざりするサイトが多いのですが、このサイトは文字サイズとカラー設定が上手く、文字を楽しく読めるサイトですね。

CNNやBBC,Newsweekなどと比較して気づいたポイントを見てみようと思います。

まず英文サイトにしては本文の文字サイズが大きめで読みやすい。CNNやNewsweekは記事本文の文字サイズがかなり小さく読みづらい印象を受けます。

次に見出しと本文、リンクなど各文字サイズのメリハリが上手く、まずポイントとなる見出しなどが目に入り、その後本文に移動するという視線の流れを上手く作れています。また、各カラム毎の文字サイズやサブコンテンツなども文字サイズがプライオリティにあわせて設定しており、文字が多くてもそれが読むときに邪魔にならず、付加情報として機能しています。他のサイトでは、サブカラムやサブコンテンツの文字サイズがメインコンテンツと同じだったり、より大きかったりするため、視線が集中出来ずあちこちに目がいってしまいます。

そして文字サイズを上手くサポートするスペースとライン（仕切り線）とカラーの使い方に注目です。Newsweekはキャラクター的にも派手な紙面なのでかなりトーンは違いますが、グラフィックパーツを多用しており、各コンテンツを枠で囲むなどの処理で画面全体がうるさい印象を受けてしまいます。BBCなどは比較的gurdianと近い印象なのですが、スペースとラインの使い方がguradianの方が一歩上という印象ですね。特に画面下部に行くほどBBCはコンテンツが整理されていない印象を受けます。

最後にカラーナビゲーションが上手く機能していますね。ニュースサイトはよくどこにいるか迷子になるケースが多いのですが、グローバルメニューとローカルメニューと各見出しの色がナビゲーションとしての役割を果たしつつ、コンテンツを移動したときにフレッシュな印象を与えて読むのを飽きさせません。

ちなみに、英語だからよく見えるんじゃないの？という意見もあるかなと思い、Google translationで日本語訳してみたところ、日本語でもいいですよ。これは僕自身もびっくりでしたが。しっかりした設計がなされていれば言語は関係無いんですね。一度試してみてください。

厳しく見ればカラーナビゲーションや一部グレーに白抜き文字などはアクセシビリティ的に調整が必要なところもあるのでしょうが、ぜひ参考にしたいサイトです。