コンテンツファーストに沿ったデザインとは？

2日ほど前になりますが、このブログのデザインを完全リニューアルしました。
今まではこんなデザインだったのが、

今回のリニューアルによってこうなりました。

「コンテンツファースト」の重要性がよく語られる現在のトレンドに沿ったデザインになったのではないでしょうか。

世の中の8割近くのWebサイトは1日のアクセスが50もないサイトばかりなのが現実ですが、1日に数千～数万というような多くのアクセスを得ているサイトのほとんどはこの「コンテンツファースト」を意識したデザインになっていると思います。

コンテンツファーストとは？

「コンテンツファースト」とはウェブサイトのコンテンツ(内容)を見せることに主眼とした設計やデザインの考え方のことを言います。

昔はウェブサイトを閲覧する手段はPCがメインであったため、PCで見栄えが良くなるようなサイトの作り方が主流でした。
モバイル(携帯電話)からの閲覧はあくまでも補助的であり、ページ容量の軽量化のためにコンテンツを減らして表示させたりしたものです。

しかし現在はスマホやタブレットの普及により、PCのアクセスよりモバイルからのアクセスの比率が高まっています。
テレビや携帯ゲーム機からアクセスする人もいます。

そのような状況の現在において、モバイルからの閲覧の場合に表示するコンテンツを制限するやり方というのはウェブサイトのあり方として良くないのです。

「スマホやタブレット、PCなどどのようなデバイスからみてもページ内のコンテンツがすべて正しく見られる」というのが現在では重要とされているのです。

そのための設計やデザインの考え方が「コンテンツファースト」なのです。

１、コンテンツに関係のない無駄な装飾をほとんどなくし、ページを軽量化しました。

モバイルからの閲覧は4GやWi-Fiだけでなく3Gのような遅い通信速度の人も多くいます。
通信速度の点だけでなく、処理能力の低いモバイル端末でも快適にページが表示されるようにしなければなりません。

ページ内の装飾というのは基本的には画像を使用するものですが、画像は文字に比べて何十倍や何百倍の容量があります。

コンテンツに関係のない装飾のためにページ表示が遅くなり、そのせいでページが表示される前に閉じてしまう人がいたりしたら、それこそ本末転倒です。
コンテンツ、つまりページ内の情報を見てもらうことができなければ、そのサイトの存在意義がなくなってしまいます。

２、アイコン部分に関しては、画像ではなくWebフォントで実装しました。

スマホやタブレットは解像度が少し特殊な仕様になっているので、写真などの画像がボヤけて表示されたりします。
高解像度のスマホやタブレットでも画像を鮮明に表示させようとすると、PC表示の時よりも大きい容量の画像を用意しなければいけない場合もあります。

それを極力発生させないために、アイコン部分に関しては画像ではなくWebフォントを使用しています。(ウェブアイコンともいいます)
Webフォントを使用すると容量を抑えることができると同時に、どんなに拡大しても鮮明な表示を保つことができます。

３、背景色を白に、文字色は黒にしました。

必ず室内で使用するPCと違い、モバイルは屋外で使用されることもあります。
屋外での閲覧の場合、スマホ画面のガラスに外光が反射し、ページは非常に見にくい状態になるものです。

そのため、コントラストが弱いとコンテンツを見てもらうことすらできません。
コンテンツを見てもらえなかったら、Webサイトの存在意義すらありません。

さらに、日本人の男性はおよそ22人に1人が軽度の色弱(1型色覚)であるというデータもあります。
参考リンク：色覚異常 – Wikipedia

そのような点から、背景色と文字色のコントラストはきちんと確保することが重要になってきます。
実はこのブログもモバイル表示の時は、文字色がほんのわずかに濃くなる仕様にしてあります。
外光の影響を考えると、モバイル用だけは背景色を黒、文字色を白にするのもアリかもしれません。