【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

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

NO IMAGE

<目次>

  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
iPhone5 縦1136px×横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(アイシップ)』 河野 )

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+