ウェブデザインでRetinaディスプレイ対策するときのポイントまとめてみた

先日のWWDC 2011では、MacBook ProのRetinaディスプレイモデルが発表されましたな。将来的にすべてのMac製品がRetinaディスプレイに変わっていくだろうし、個人的には、きれいな画質で写真や動画を見れるようになるのが楽しみ。

しかし、ウェブ上でコンテンツを配信する側としてはこまった。。ウェブデザイン上で使用しているロゴ、アイコン、その他画像がガビガビに(荒く)なる。テレビがデジタル移行するときに、女優が「肌が荒く映るのがイヤだ!」と言っていたあれだ。あの状況と同じ状況になってしまった。これからのRetinaディスプレイの浸透スピードにもよるが、これまで作ったコンテンツやデザインに関しても差し替えが必要になるだろうな。

コンテンツ配信側としてのポイント

影響の少ないベクター形式への移行が必要に
ビットマップ形式から高精細ディスプレイでも問題ないベクター形式へ移行していく必要が出てくる。人の印象はわずか数秒で決まるもの。ユーザーがサイトに訪れた際にロゴや画像のキメの悪さを見つけるとユーザーの信頼を確実に下げる。キメの細やかさは信頼の証である。早めに移行していきたいところだが、作業が大変そうだな。 あえてドットを荒くして懐古的なサイトもいいかもしれないw
自然とネットワーク通信量が上がるだろうな
高解像度の画像や動画を配信するようになると、ネットワーク通信量が自然と増える。ISP、プロバイダーからユーザー側ネットワークまですべて。もし、ネットワークを帯域保証で契約していたりする場合はジワジワと圧迫していく。インフラコストに影響が無ければいいけどな。
モバイル端末での通信スピードには注意したいところ
これまで、モバイル端末の通信量を下げるためにそれぞれデバイス別のデザインを用意してきた経緯がある。高精細ディスプレイへの対応はこれに逆行する形になる(最近ではレスポンシブデザインの考え方も流行っているけど)。まだまだモバイル端末でコンテンツでは、通信量に注意した表示が必要かなと。質をとるか、手軽さをとるかのトレードオフは十分に考慮が必要と思う。作り手の自己満足で終わらないよう。

ウェブデザイン対策のポイント

基本的には、下記の項目を対応できれば現時点ではある程度十分な対応ができると思う。

  • ロゴ、アイコンなどをベクター画像
  • テキストを画像で切り出さずにウェブフォントを利用する(できるだけテキストで記述)
  • RSSアイコンなど、アイコン画像にはシンボルフォントを利用する
  • 角丸、シャドウなどの装飾はCSS3を利用する
  • ファビコンはマルチサイズ
  • 写真などJPEGminiなどの高画質・高圧縮の画像形式を検討する

あとがき

今後、対策の良い方法があれば追記していくよ。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る