スマホサイトの画面サイズについて

スマホの画面サイズ

スマートフォン端末が広く普及し、多くの企業やWebサービスでもスマートフォン向けのサイトを用意するようになってきました。
こうしたスマホサイトには、PCサイトとは異なる特徴がいくつかあります。
ここでは、その違いやスマホサイト独特のサイズについて見ていきたいと思います。

画面サイズとピクセル密度

スマートフォン端末の画面サイズは機種によって大きく異なります。
iPhone5の画面は4インチですがAndroidは4インチ後半～5インチ超のものまでさまざまなサイズのものが販売されています。
また画面サイズのみならず解像度も機種によってバラバラです。
これだけ画面サイズや解像度に違いがあるスマートフォン端末で自由にサイトを見られるのは「ピクセル密度」が関係しています。「ピクセル密度」とは、主に1インチあたりのピクセル数の事をいいdpi、ppiなどと呼ばれています。
このピクセル密度が高ければ高いほど、面積辺りの解像度が高まります。

PCのモニターではおおむねピクセル密度が同じぐらいであるため、解像度が高まるにつれ画面自体も大きくなっていきますが、スマートフォンでは画面のサイズに大きな違いが無いため、解像度が高まると1ピクセルが小さく表示されるよう設定されているのです。

画像サイズはいくつにすればいい？

スマホサイトでは多くの場合、iPhone4に合わせて横幅640pxでデザインされているようです。
そのため、解像度が横320pxの端末の場合、640pxの画像を320pxで指定しコーディングする事になるため、画像を2で割り切る事のできるサイズにしておかなければなりません。

このようにサイズひとつをとってもスマホサイトとPCサイトでは様々な違いがありますが、BRISKでは様々な端末に対応したサイト制作を行っておりますので、お気軽にお問い合わせください。