• 楽天
  • Yahoo!

【超基本】スマートフォン用ページって、画像サイズはどうすればいいの?

スマートフォン用ページって、画像サイズはどうすればいいの?

この記事は過去に書かれた「ogaRia繁盛レシピ」を再掲載しています。予めご了承くださいませ。

こんにちは、株式会社オーガランド、ogaRiaチームです。
今回は、楽天ショップの「スマートフォンページ」に表示される画像の推奨サイズをご案内します。

まず基本!スマホは機種によって画面幅が異なります

スマートフォンの場合は、
 ・機種によって画面幅が大きく異なる
 ・縦に持った時、横に持った時で幅が大きく異なる
ため、柔軟に対応できる画像サイズにする必要があります。

どの幅でも余白なく表示するには、ある程度大きめに画像を用意する必要があります。

スマホTOPページの画像サイズってどのくらいの大きさが必要?

まずはトップページ。楽天市場にて公式に案内されている推奨サイズは以下となります。

推奨サイズ

  • 看板画像:横幅640px×任意(35KB以内)
  • 大バナー:横幅616px×縦幅120px (30KB以下)
  • 小バナー:横幅266px×縦幅110px(15KB以下)

看板画像の縦幅は任意ですが、あまり長いとスマホの画面を専有してしまうため、80px以内に留めるのが無難だと思います。

自由編集ページや商品説明でのサイズは?

推奨サイズ

こちらは横幅640px縦幅任意となります。

どの画面サイズに対しても、幅を100%で表示させる場合には「640px」で作成するのが現状安全なようです。(参考:「実機検証!スマホサイトで最適な画像サイズとは」(ミナクル))

画像を幅100%表示にするHTMLタグ

最後に、実際に画像を貼り付ける場合のHTMLタグをご紹介します。

<img src="画像A.jpg" width="100%" height="auto" border="0" />

「画像A.jpg」の箇所を画像のURLに書き換えてお使いください~!

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。