スマートフォンサイトでは画像を大きめにしよう

1.スマートフォンサイトは横幅320pxで作ろう！
2.スマートフォンの解像度は横幅320pxではない？
3.スマートフォンサイトでは画像を大きめにしよう

1.スマートフォンサイトは横幅320pxで作ろう！

スマートフォンサイトを作るときに必ず目にするのが『viewport』です。以下の記述をすることがスマートフォン対応の第一歩です。

<meta name=”viewport” content=”width=device-width”/>

これは「サイトの横幅をデバイスの横幅に合わせます」という指定です。一般的なスマートフォンのデバイスの横幅は320pxになっています。なのでこの指定をしておくことでサイトを作成する際に横幅320pxを前提にレイアウトすることができるのです。

逆にこの指定をしていないとスマートフォンに最適化されていないPCサイトのように小さく表示されてしまいます。

参考：携帯サイトのスマートフォン対応のポイント！　～スマートフォン表示で最適サイズを設定する「viewport」～

2.スマートフォンの解像度は横幅320pxではない？

「サイトを作成するときは横幅320pxを意識する」、確かにそうなのですが、画面解像度となると実は現在普及している端末のほとんどは320px以上となっています。（スマートフォンブームの火付け役であるiPhone3は横幅320pxですが。）

※主要スマートフォンの画面解像度
iPhone3系 縦480px×横320px
iPhone4系 縦960px×横640px
Android Xperia 縦854px×横480px
Android Galaxy S 縦800px×横480px

先ほど「スマートフォンサイトは横幅320pxで作る」って言いましたよね。でも解像度は横幅480pxだったり640pxだったり。端末に合わせて変えないといけないんじゃないの？と思いますよね。

解像度とサイトの横幅は違います。解像度とはどれだけ鮮明に表示ができるかということです。サイトの横幅はあくまで基準です。

実はviewportの指定の仕方で480pxにも640pxにもすることができます。解像度によらずウェブサイトをモバイル端末で閲覧するのにもっとも適していると思われているのが横幅320pxなのです。試しに640pxなどにしてみてください。そうすると相対的に文字や画像が小さくなります。4インチ程度の端末では非常に見にくくなります。

3. スマートフォンサイトでは画像を大きめにしよう

つまりiPhone4系の場合、「解像度は横幅640pxだけどサイト制作は横幅320pxで」ということになります。例えば横幅いっぱいに表示したいバナー画像などを横幅320pxで作ってしまうと端末の解像度が活かせません。

端末としては横幅640px表示できる能力があるので画像も横幅640pxのものを表示するのが最適です。しかし横幅320pxのものを画面いっぱいに表示しようとすると拡大することになり画像が引き伸ばされ荒くぼやけてしまいます。

折角のスマートフォン対応なのでスマートフォンでもきれいに表示させたいですよね。確かにスマートフォンはモバイル端末であり通信速度も遅くなるべくデータ量を抑える必要があります。だからといっておしゃれなスマートフォンで画質の低い画像を使っていては白けてしまいます。

大事なのは画質重視であるべき画像とそうではない画像を明確にし、適切なサイズで扱うということです。アイコンのようなものは多少画質が低くても問題ありません。訴求すべきバナー画像は十分な大きさで作りましょう。画像を作成する際に50％表示で作るといいかもしれません。

解像度は端末によってまちまちですが、現在大きくて横幅640pxです。サイトの横幅の2倍です。サムネイル画像などもできれば2倍の大きさで作ることをおすすめします。そうでなくても少し大きめに作るようにしましょう。

また、モバイルということでスマートフォンサイトと従来型携帯電話向けサイトをワンソースで制作することがあるかもしれません。その場合は画像が大きいと従来型携帯電話で表示できなかったりします。そういう場合は自動でリサイズする機能があるCMSなどを使うと良いです。

ちなみにaishipでは、スマートフォン向けの大きな画像で作っても従来型携帯電話向けに自動リサイズする機能が標準でついていますので携帯向けに別の画像を用意する必要がありません。

（　スマートフォンECクラウド型ASP『aiship（アイシップ）』 河野　）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン＆モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/1717
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝