KNOWLEDGE

スマホサイトの画面サイズと作成のポイントについて

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


スマホの画面サイズ

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

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

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

ピクセル密度(dpi,ppi)

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

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

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

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

画像サイズを640pxで作成した場合

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

スマホサイト制作のポイント

スマホサイト制作

スマートフォン(スマホ)は、急速に普及しつつあります。
IDC Japanの調べによると、2013年時点の日本でのスマホの普及率は、スマートフォンが49.8%でした。
国民の半分が所有している状況です。特に若い世代の所有率が高いのが特徴です。

日本国内でのスマホの普及率世代で見るスマホ普及率

若い世代を対象に商品の広告をする場合、スマホサイトを制作することが有効です。
また、学生を採用する場合も、企業のホームページをスマホで制作した方が、アクセスして欲しい対象に情報を伝えることができます。

レスポンシブでのサイト制作のメリット

レスポンシブでサイトを制作すれば、PCでも最適なサイズで表示できるので、若い世代と中高年の世代の両方がアクセスできます。
セマンティック Web、コードやデザインの美しさ、Web 標準、ユーザビリティなどを意識して開発されたWordPressを利用すれば、一層効果が高まるでしょう。

スマホサイト制作のポイント

多くの機種、端末に対応させる。
主なスマホは、iPhoneとandoroidです。
しかし、今後はandroidがシェアの大半を占めると予想されています。

スマートフォンOS別契約数シェア

androidは多くのメーカーが開発している為、仕様が大きく異なる場合があります。
その為、多くの機種、端末に対応させる必要があります。
レスポンシブでサイトを制作すれば、問題がないでしょう。