スマホページのファーストビューに設置するバナーのサイズについて

Question

お世話になっております。
デザインレシピの「スマホページのファーストビューにバナーを設置する方法」ですが、

スライドバナーの大きさについて

iPhone4/5/SEのブラウザの横幅が320pxで、
スマートフォン用商品ページの内側スペースが左右8pxずつを引いて304pxございます。

そのため304pxより小さいサイズで作成していただくと
ほとんどの機種にて、画面からはみ出ることなく表示させることができます。

との事。

横は300pxでバナーを作成しようと思っていますが、
縦のおすすめサイズはどのくらいでしょうか？

よろしくお願いいたします。

Answer

natureさん

ECマスターズの小野です。

いただいたご質問ですが、
制作関係のご質問となりますので、
休み明けに担当よりご返信いたします。

少々お待ちくださいませ。

Answer

ECマスターズの田中です。

画面内に収めるために、横幅には十分注意を払う必要がありますが、
高さは特に制限を行う必要はありません。
横幅を基準として、最低限の文字情報を掲載するために横長にする、
大きく目立たせるために正方形にする、など検討の上、
横幅との比率で高さを決めていただきますようお願いします。

正方形を超える縦長にしすぎると、
ファーストビューを埋め尽くしてしまい、
お客様
がショップ内を回遊する時に不便を感じさせる要因となりますので、
利便性を欠かない範囲でご設定をお願いします。

また、デザインレシピでは、２年前に作成した関係もあり
iPhone5/SEを基準とした320pxをご案内差し上げておりますが、
5年前に販売されたiPhone6以降ですと、これが375pxとなりますので、
375から左右8pxの余白を除いた359pxにご設定いただいても
結構かと思います。

スマートフォン用共通説明文に設置するソースに
設定する横幅は上記で結構なのですが、
スマートフォンでは、上記サイズよりも画像を細かくきれいに表示する機能を持っており、
画像ファイル自体を300px程度で作成されますと、逆にぼやけて表示されてしまいます。

https://club.ec-masters.net/index.php?design_page12
詳しくは、上記デザインレシピの「2：スマートフォンの大きさ」をご参照ください。

そのため、画像ファイル自体は、
スマホ横幅いっぱいで表示する場合、横幅750〜1000px程度で
作成していただきますようお願いいたします。

Answer

田中様

お世話になっております。
大変、詳しく教えて頂き、ありがとうございました。

リンクして頂いた「スマートフォンの大きさ」も詳しく記載されていて、分かりやすかったです。
早速、教えて頂いた内容を参考に、バナーを作ってみます。

ありがとうございました。

引き続きよろしくお願いいたします。