実機検証!スマホサイトで最適な画像サイズとは

Pocket

imagesize_top見やすく伝わりやすいスマホサイトにするには、画像作成が必要不可欠だ。
しかし、スマートフォンは機種によって画面サイズが異なるため、どのサイズで画像を作成するのが最適なのか迷う人も多いと思う。

そこでこの記事では「何を基準にして画像を作成すればよいか」というところからお伝えし、最適な画像サイズは何か、実際に機種で検証する。
ぜひ参考にして欲しい。

<目次>
1.基準となるスマホサイトの横幅
2.最適な画像サイズと実機検証
3.ボタンやアイコンのサイズ

 1.基準となるスマホサイトの横幅

iPhoneのRetinaディスプレイのような高解像度ディスプレイが増えてきたため、画面の横幅320px~480pxに合わせた画像を作ると表示の際に画像がぼやけてしまう。

それを避けるために、320pxの2倍の解像度である「640px」を横幅の基準としてデザインするのが主流となっている。

最近になって、初代iPhoneから横幅320pxを一貫していたAppleから、横幅375pxのiPhone6と横幅414pxのiPhone6 Plusが発売された。
この変化によってサイトデザインに影響があるのではと考える人も多いと思う。

結論からいうと、従来通り横幅640pxのデザインで問題ない。
横幅640pxでデザインすることで多解像度に対してリキッドでフィットさせることが出来るからだ。

2.最適な画像サイズと実機検証

画像を作成する際はどうすればよいか。

表示させるサイズの2倍のサイズで作成すれば良い。
こうすることで解像度が様々であっても鮮明に表示させることが出来る。

では、実際にどう違うのか、画面サイズや解像度が違う3機種で検証する。

<検証の条件>
・320px、640pxの異なる画像を作成し、640pxの画像はHTMLのwidth属性で320pxに指定する。
・検証端末は「iPhone3GS」、「iPhone5」、「Xperia Z SO-02E」

iPhone3GS

画面サイズ:3.5インチ
解像度:480×320

iphone3gs比較

iPhone3GSは画面サイズ(横幅)と解像度が同等のため、あまり大きな違いはなかった。

iPhone5

画面サイズ:4インチ
解像度:1136×640

iphone5比較

iPhone5はそれぞれの画像で違いが見えた。
特に320px画像の方はテキストの輪郭がぼやけて表示された。

Xperia Z SO-02E

画面サイズ: 5インチ
解像度:1920×1080

xperia比較

Xperia ZはiPhone5と同様に、テキストの鮮明さに差が見えた。

まとめ

検証した結果、iPhone3GS以外の端末で違いが出た。
様々な端末で鮮明な画像を表示させるには、2倍のサイズで画像を作成した方が良いだろう。

3.ボタンやアイコンのサイズ

スマートフォンの場合、ユーザーは全て指先でタップするため、サイズが小さいと隣のリンクを押してしまうなどの誤操作が増える。

その為ボタンやアイコンを作成する際は、iOSやAndroidのガイドラインで「タップ可能領域の最小サイズは44px × 44px」とあるように、44px以上(横幅640pxでデザインする場合は88px以上)で作成する必要がある。

アイコンサイズ

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*