スマホ対応のサイト制作で注意 CSSとのピクセル

max_ezakidsc_0299_tp_v

スマートフォンのユーザーがもはや携帯電話の主流となりつつなる中、モバイルに対応したサイトの構築がもはや必須と言われるようになりました。
現在のウェブサイト構築にはHTML5が使用されていますが、スマートフォンでサイトを閲覧できるようにするには、画面の解像度や回転速度、縦向きと横向きになる閲覧の特有な動きに沿った「スマホ対応」への構築が必要となります。
そのなかでも、今回はデバイスとCSSのピクセルに注目してみます。

○デバイスとCSSのピクセル不一致

tsu_chikakuniirukedokaiwahazenbu_tp_v
スマートフォンなどで扱っているピクセルは、二種類あることをまず知っておきましょう。
物理的に実機端末がサポートを行うデバイスピクセルと、web上で扱っているCSSピクセルというものがあります。
●デバイスピクセルとは
ディスプレイが表示するために持つ物理的なピクセルを指します。近年は特に従来のCSSピクセルと一致しない傾向が強まっています。
一致しなくなった理由は、アップルから発売されたIphone4の開発と実機の大幅な普及に依ります。このIphone4では、ディスプレイにRetinaと呼ばれる高精細なものが搭載されました。このアップル社製品の開発にともなって、各社スマートフォンの開発スピードと性能が格段に上がり、ピクセルがwebのそれと一致しなくなってきたのです。
●デバイスピクセル比
スマホには、ハイスペック機とミドルエイジなど、ランク分けが可能になるほどの品質的な幅が生まれる程、実機の性能を端末に大きく搭載できるように変化しています。
モバイル端末のディスプレイも同様で、高精細ディスプレイは、1つのCSSピクセルに対していくつかのデバイスピクセルが割り当てられています。この比率のことをデバイスピクセル比と呼びます。現在ユーザーが多いIphone6Sなら1334px×750pxです。しかし、cussピクセルは667px×375px。Iphone6sのCSSピクセルには、縦横それぞれに2倍のデバイスピクセルが割り当てられていることが分かります。
●デバイスピクセル比と変化
この数字が高くなると、ディスプレイで使用されているピクセル数が増えます。よって、より精密でクリアな描画が可能になります。とはいえ、画像データを表示する際には、デバイスピクセルに合致するかたちで拡大されるので、画像がぼやけやすくなるのです。
●ぼやける画像への対処法
このピクセル比が2倍未満の場合には、jpegまたはPNG画像を倍のサイズであらかじめ用意しておけば、遜色なく対処できると言われています。ただ、CSSで基本的な画像の切り替えを行うようにスマホ対応の切り替え方法を実装しておくほうが無難です。

○メディアクエリを使用した切り替え

iphonereview10_tp_v
メディアクエリは、レスポンシブwebデザインでもよく利用される機能で、これを用いればデバイスピクセル比の判定も可能です。
ただ、比率2以上の高精細なディスプレイに対しては、大きめの画像を準備しつつ、期待される画像サイズへ縮小表示する必要があります。そして、背景画像としてそのまま置いてしまうと、画像が大きいまま表示されてしまい、背景画像でも期待値に縮小するためにはCSS3でbackground-sizeのプロパティを設定する必要が出てきます。

○まとめ

Webサイト上のコンテンツとして重要な画像を、スマホ対応に実装する工程では、メディアクエリと大きめの画素数画像を準備し、精度の高いディスプレイでの表示もボケたり荒くならない描画になるように配慮するのが大切です。

お問い合わせ

CONTACT
Copyright 2017 IMGINOTE INC.