スマートフォンECサイトデザインの基本～スマートフォンCSS活用基礎（7）～

現在までスマートフォンらしいレイアウトの作成についていくつかご紹介してきました。今回は画像についてご案内致します。

最近当サポートセンターへお問合せをいただくことの多い「スマートフォン向けの画像サイズは何pxが最適か？」というご質問ですが、サポートセンターでは「240px～480px程度で作成すると良いですよ」とご案内しています。
これは携帯電話サイトとスマートフォンサイト、両方で同じ画像を表示させる場合の推奨サイズです。aishipのモバイルサイト作成機能では、携帯電話/スマートフォン兼用サイトを作成することができるためです。

それでは、もしもaishipでスマートフォン専用サイトを作成する場合はどのくらいのサイズがいいのか？

結論をご案内する前に、aishipで作成されるサイトの横幅などなどについてご案内いたします。
aishipのスマートフォンサイトは基本として横幅240pxで設定されています。これを1.25倍ズームして320pxのモニターサイズにほどよくフィットするように表示しています。
この横幅やズーム倍率は管理画面上から変更できるのですが、それはまた別の機会にご案内させていただきます。ポイントとなるのは『横幅が240px』という点です。この点をまずは抑えておいて下さい。

aishipでサイトを制作いただいた時、このズームの影響で240pxちょうどの画像が少しボケて見えることがあります。

これはちょっともったいないですね。
スマートフォンはPCサイトを閲覧できるほどに高解像度のモニターを持っています。どうせならボケていない、くっきり鮮明で美しい画像を表示させたいものです。

ではどのくらいのサイズで作ればいいのでしょう？

サポートセンターでは　480～620px　とご案内しています。
その画像を横幅240pxで表示させます。
そうするととても綺麗な画像を表示させることができます。

先ほどのサンプル画像を480pxで作成し、横幅を240pxに指定してページに貼り付けしてみました。
画像

PCモニターでは少し解りづらいかもしれませんが、上が240pxサイズの画像、下が480pxの画像です。少しだけ画像がくっきりしているのがお分かりでしょうか？
もしお手元にaishipのアカウントとスマートフォンのある方はぜひ試してみてください！

ところで画像の横幅を指定する方法ですが、HTMLに直接記述していただければOKです。

[HTML]＜img src="画像のURL" width="240" /＞

または

[HTML]＜img src="画像のURL" class="w-240" /＞
[CSS] .w-240 {	width: 240px;}

どちらの指定でも問題ありません。
目安としては「表示させたいサイズの倍のサイズ」で画像を作成し、横幅を指定してあげれば、綺麗に画像を表示させることができます。ぜひ試してみてくださいね！

・携帯電話では480～620pxの画像だと大きすぎない？
・ズームをそもそもやめちゃえばいいんじゃない？
・背景画像はどうすればいいの？

そんな疑問には、次回以降に順次ご案内させていただきます。しばしお待ち下さい！

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

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