マルチスクリーンと解像度についてちゃんと理解する

やれスマートフォン対応だやれレスポンシブWebデザインだやれモバイルファーストだと言われていますが、実は僕は正直なところ、その類の対応はトライアンドエラーでやりすごしてきてたため、体系的な理解をしてませんでした。

それでも今までは何とか仕事がやってこれたので、何となく「まぁこれくらいの理解度で大丈夫だろう」と勝手に思っていた節があるのですが、これからのWebを担うはずの我々がそんなことで果たして良いのでしょうか。そんなことで娘に堂々と「パパは魑魅魍魎が集うWebという業界で日々お前たちのために日々闘っているんだよ」と言えるのかと。

まぁ、パパが闘う理由に「お前たちのため」と言うのは僕はあまり好きではないんですがこの話は飲みの席ででも誰かお話ししましょうね。

解像度とは

解像度とは、「そのディスプレイは1インチ当たり何ピクセルあるの？」を表す単位です。大体 dpi (Dot Per Inch)という単位とともに使われます。ドットってのはピクセルと同義だと思いますがあってますかね。

大体一般的な解像度だと、PCのモニターで 72dpi とか 90dpi とかですかね。スマートフォンで言えば、 Retina ディスプレイは 320dpi らしいです。ちなみに印刷物も通常 300dpiね。これ豆な。

なので、何となく普段使っている言葉の「このモニターの解像度は1024×768なんだよ」ってのは実は正しくはないんですねー。「1024×768」ってのはピクセルの総数でしかないんです。

正しくなくても伝われば良いじゃん

まぁ、そんな小難しいことを言われたところでその言葉で浸透してるんだったら別に良いじゃんか、と思う方も多いのではないかと思います。その思想は僕も基本的に同意です。所詮意見を言う人の数が多い方が勝つんです。人は生まれながらに民主主義民族なんですね。

じゃあ何故いちいちこんな話をするかというと、「解像度が違う」という文言の意味あいが全然変わってくるからです。サイズが大きいんじゃなくて密度が濃いんです。

例えば、iPhone3GS と PC のモニターを比べてもさほど解像度変わりません。 iPhone3GS は 163dpi で、PC は大体96dpi とかその辺って感じです。なので100×100pxの画像は iPhone3GS で見ても PC のモニターで見ても言うほどサイズに違いがあるって程ではありません。

ただ、 iPhone4以降になると話は全く変わってきます。 Android の端末でも一部ありますね。あいつらの解像度は何だったら桁違いです、326dpiあります。 iPhone4以降でスクリーンショットを撮って、それを PC で表示させたことがある方は一度はびっくりしたはずです。まだの方は一度やってみてびっくりしてみてください。マジでけーよ、iPhone4。

高解像度端末で Web を表示する場合の手法

で、その高解像度がどうしたよ、ってお話ですが、Webを見る際にちょっと面倒なことになります。iPhone 用に最適化させたページを表示させてる場合は特に。

何かというと、今まで iPhone3GS で見ていたページは横幅を 320px で作ればよかったわけですが、 iPhone4 以降は横幅が 640px になってしまうからです。つまり倍ですね。

ただし、iPhone4以降の端末には、倍角表示機能があるようで、基本的に倍サイズで表示するようです。なので、Safariのデフォルトでのブラウザウィンドウサイズ(横)は 320px です。つまりさっき言った話は特に気にしなくて良いってことですね。めでたしめでたし。

画像の拡大問題

めでたしめでたしと思いきや、それがそうでもないのが困った点です。

iPhone4 以降の端末では、先に言った通り、基本的に倍サイズで表示するしブラウザのウィンドウサイズは基本的に320pxです。しかし実際のピクセル数は640pxです。つまり画像を拡大してるんですね。これ大事。

なので、 320px の画像を表示させた場合、ブラウザウィンドウいっぱいに表示します、ただし拡大して。拡大するということは当然ぼやーっとします。ボケます。これがキツイ。

なので、よく言われる Retina ディスプレイ対応としては「デザインは 640px で作れ！」となるわけですね。

html、CSS での指定方法

img タグの画像の場合は、img タグの width を画像サイズの半分にするか、 CSS で半分にしましょう

<!-- ↓横幅 200px の画像の場合 -->
<img src="/i/redHotChilePepper.jpg" width="100" />

<style>
img { width:50%; }
</style>

背景画像の場合は、便利なプロパティ background-size を使います。

.theeMichelleGunElephant {
  /* ↓縦と横は画像の半分のサイズを指定 */
  width: 100x;
  height: 100px;
  /* ↓contain で領域に収まる最大サイズに(縦横比固定) */
  background-size: contain;
}

こんな感じでしょうか

もう1歩進んで、解像度によって画像を出し分ける

上記の対応だと、全ての画像を倍で制作しないといけないので、3GS端末のユーザーにとっては無駄にでかい画像を取得しなければならないことになってしまいます。

今は例として iPhone の話だけを出してるので「別にいんじゃね？」と思ってしまいがちですが、 Android も含めると結構な数ですよ？

なので、そういった対応もしてみましょう。この場合は CSS3の機能、 MediaQuiries を使います。

<style>
/* 飽きた。後で書く */
<style>

こういった感じになります。

まとめというか感想

実際、デバイスの解像度とディスプレイサイズはずっと問題となっています。 Mac にも Retina ディスプレイが登場したのでスマートフォンだけの話ではなくなってきてるからです。

というか、ディスプレイサイズだけでコンテンツの表示方法を判断する時期も終わりが近づいてるのかな、という印象もあります。むしろまだ始まってもねーよという方はもしかしたらラッキーなのかもですね。

僕が感じているところだと、今の Web は制作プロセスとから変わりつつある時期なのかな、という印象です。モバイルファースト、コンテンツファーストという言葉が出てきており、 SEO の世界でもやっと「重要なのはコンテンツだ」と声高に言う方が増えてきた印象です。

何となくですが、今までの10年くらいは「DTPからの移行期」であり、ここからが本当の「WebらしいWeb」になっていくのかなぁと思います。

そんな時代に制作者として生きていくのはものすごく大変なのかなぁという気もするが、それだけに楽しくもある、と思ってます。

このブログは凄く多くの方が読んでくれているという印象ではないですし、この記事自体がニッチな記事になってるはずなので、多分これを読んでくれた方は Web という化け物と真摯に向き合って楽しく遊んでいる方なんじゃないかとお見受けします。

せっかくそんな危篤な面白い方たちが遊んでる楽しい業界なので、みんなで楽しくやっていければなぁ、と思います。楽しんでいきましょうねー。