ホームページ制作をしていて、とくに感じるのは、１年で状況がかなり変わってくる、ということです。

昔は<font>タグで色をつけたり、1pxの透明な通称spacerと言う画像を駆使してピクセル単位の調整など、涙ぐましい努力をしましたが、今はcss3の時代です。ピクセル単位の調整など余裕ですが、かわりに別の涙ぐましい努力が必要です。

それは、スマホ対応と4K（Retina）対応。

僕が管理しているある小売のサイトでは、スマホからのアクセスが70 %を超えました。
Googleもモバイルデバイス（スマホなどのこと）への対応を強化しています。

スマホへの対応は「レスポンシブデザイン」という作り方でパソコンとスマホでホームページの表示を切り替えるのが主流です。中身は同じで、見え方を変えるのです。
GUUMA DESIGNも、もちろんレスポンシブデザイン。
GUUMA DESIGNが制作するホームページは、レスポンシブデザインを標準にしています！

さて、今回はとくに4K（Retina）対応のことを。

2015年は4K（Retina）対応

昨年（2014年）9月、iMac 5Kを買ったのですが、そのディスプレイの綺麗さとともに、WEB制作の危機感を感じました。

※4Kというのは、テレビでよく使われているのでご存知かと思いますが、ドットが見えないくらいに細かいディスプレイのことで、フルハイビジョンの倍の細かさです。5Kはそれよりさらに解像度が高いということです。

テレビは離れて見るので、4Kじゃなくてもいいと思っていますが、ディスプレイは近くで見ますよね。30~50cmくらいじゃないでしょうか。
iPhoneやiPadの Retina（レティーナ）ディスプレイというのも、同じように通常の倍の解像度なのですが、20cmくらいの近距離で見ることもありますね。

で、何に危機感を感じたかというと、これまで見ていたサイトが、ガタガタなのです。

これはamazonのサイトをRetinaで見たものを、通常ディスプレイ用に２倍に拡大したものです。
さすがazamonのロゴは綺麗ですね。
でも、「kindleホワイト」のところは通常ディスプレイ用の画像で作成してあるので、他にくらべてガタガタモヤモヤしています。

こんな感じで、いろいろなサイトがガタガタモヤモヤしているのです。

Retinaディスプレイでもきれいに見えるサイトとは

Retinaでもきれいに見えるようにするには、単純に使用する画像の解像度を倍にすればいいのです。が、ファイルサイズがかなり増えるので、現実的ではありません。現時点ではね（今後、5Gが普及して回線速度の圧倒的な向上があればそれでもよくなります）。

ではどうするのかというと、結論から言えば、ベクトルデータを使うことです。

1.なるべくテキスト（文字）を使う。

WEBフォントを利用すれば美しいです。
ガタガタサイトの一番見苦しいのが、画像テキストです。
テキストを使うことはSEO的にもメリットがあるので、なるべくテキストを使いましょう。

※印刷物でも同じですが、実は、写真は文字ほど気にならないです。

2.CSSで表現する

円や角丸、ドロップシャドウなど、cssでできることはcssを使いましょう。

3.SVGを使う

簡単な画像はビットマップではなく、ベクター形式のsvgを使うのも手です。

ちょっと専門的になりましたね。

これから、4Kディスプレイが普及し、各社のスマホも高解像度化していきます。確実に。

とくに大事なのはテキストを使うこと。イラレで組んだ文字を画像にして貼ってばかりではいけないのです。

最後に比較。
通常サイズ。（Retina用）

拡大。（通常用）

2015年は4K（Retina）とスマホに対応しましょう