PC・スマホの画面端に固定されるバナーのサイズについて

Question

表題の件ですが下記にて画面端に固定されるクーポンバナーを作りたいと思っております。

https://club.ec-masters.net/index.php?design_page8

こちらＰＣ・スマホどちらも行いたいのですが
バナーサイズはどれくらいで作るのがいいでしょうか？

ユーザービリティも含め推奨のサイズを教えて頂けると幸いです。

Answer

ECマスターズの田中です。

バナーの推奨サイズについて、
内容をまとめて、明日改めてご案内いたします。

Answer

こちらですがもう設置したいのでなるはやでいただけると幸いです。
宜しくお願い致します。

Answer

ECマスターズの田中です。

お急ぎとのことですので結論から先に申し上げますと、
一般的な推奨サイズというものはございません。
また、ページの構造や見た目によって変わってまいります。
その中で、どのようにサイズを決めていくかについて、
改めてご返信させていただく予定です。

ライカさんにて、
どのような形で設置されようとしているか、
思い浮かべているものがございましたらお聞かせいただければ幸いです。
（PC・スマホ、それぞれ
　ページ上へ移動するボタンのように小さく設置したい、
　横長・もしくは縦長なバナーを画面の左・右側に表示したい、
　横幅いっぱいに帯のように表示したい、など）

Answer

ECマスターズの田中です。

先の返信でも申し上げたとおり、
PCでもスマホでも、
「このサイズでバナーを作成すれば間違いない！」
というサイズは存在しません。

ユーザビリティ、という観点からも、
元々のページの構造によって
適切なサイズは変わってまいります。


PC・スマホ、いずれのデバイスの場合でも、
基本的に、同じジャンルのライバル店舗をご覧いただき、
ご希望に近いバナーなどがございましたら、
たとえばChromeの場合、開発者ツールや
https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme
上記の拡張機能「Page Ruler」などを利用して
サイズを計測し、参考にしていただくことをオススメします。


PCに固定バナーを設置される際は、
内容に被らず、閲覧を妨げない且つ目立つようなサイズで
作成していただく、というのも一つの方法です。

自社サイトなどでGoogleアナリティクスをご利用の場合は、
利用者のブラウザのサイズが集計されておりますので、
一般的なブラウザのサイズと自ショップのページのサイズを見比べて、
内容に重複しないサイズを計算し、それを一つの基準としていただく、
という対応を行っていただくこともできます。

たとえば、一般的に横幅1280px程度のブラウザサイズが多い場合、
ライカさんの楽天の商品ページの内容は、中央揃えで幅1000px程度ですので、
(1280 - 1000)÷2＝140px程度であれば、
ページの内容にかぶりにくいと言えます。

楽天が常に右下に表示させている
商品名・商品価格や「商品をかごに追加」ボタンなどのウィジェットは
全体で 横160px・高さ270px程度ですので、
これを基準にバナーを作っていただくと、整っている印象を受けやすいかと思います。


スマートフォンに固定バナーを設置される際は、
一般的なスマートフォン用ブラウザの横幅は
320px〜400px未満程度であることを
最初にお含みおきください。

たとえば、ライカさんの商品ページですでに表示されている
「上へ」ボタンは55px四方、
R-Chat用のボタンは70px四方となっております。
この２つのボタンが並んでいる部分は、
ページの内容が少し見づらく感じられるのではないでしょうか。

スマートフォンページに固定バナーを設置した場合、
必ずページの内容にかぶる形になりますので、
くれぐれも、サイズを大きくしたり、数多く設置したりして
お客様に、ページの内容が見づらい、という印象を
与えないようご注意いただきますようお願いします。

ブラウザ上での表示サイズが決まった後ですが、
スマートフォン用ブラウザでは
https://forum.ec-masters.net/post_view.php?id=3152
にて解説しております「dpiスケーリング」の影響があるため、
実際にバナー用の画像ファイルを作成される際、
写真のような細かい描写を含む場合は、
表示サイズの縦横各２〜３倍程度で作成いただくと
綺麗に表示させることができます。

以上、念頭に入れていただいた上で、
実際に設置するバナーのサイズを決める際の参考にしていただければ幸いです。

Answer

上記ありがとうございます！

結局サイズは160×160で作成することにしました。
バナー設置君を使ってコーディングしてＰＣのヘッダー・フッター・レフトナビに張り付けたのですが

HTMLタグの記述に誤りがあります。詳しくはオンラインマニュアルをご参照ください。

とのエラーがでてしまいます。

https://gyazo.com/1f123570b1f9f6f344ab3dd7d3142be2


下記にソースを記述したのでどこがおかしいかご教示いただいてもよろしいでしょうか？
ちなみに設置イメージは下記です。

https://gyazo.com/4b0adb8e364b76bef5361dae0d4bdb47


ソースは下記です。



-----------------------------------------------------








#fixedBanner3 {
position: fixed;
z-index: 9999;
margin: 0;
padding: 0;
top: 700px;
right: 0px;
text-align: center;
width: auto;
height: auto;
}

#fixedBanner3 img {
width: auto;
height: auto;
vertical-align: bottom;
}

#fixedBanner3:hover {
opacity: 0.7;
}









#fixedBanner2 {
position: fixed;
z-index: 9999;
margin: 0;
padding: 0;
top: 500px;
right: 0px;
text-align: center;
width: auto;
height: auto;
}

#fixedBanner2 img {
width: auto;
height: auto;
vertical-align: bottom;
}

#fixedBanner2:hover {
opacity: 0.7;
}









#fixedBanner1 {
position: fixed;
z-index: 9999;
margin: 0;
padding: 0;
top: 300px;
right: 0px;
text-align: center;
width: auto;
height: auto;
}

#fixedBanner1 img {
width: auto;
height: auto;
vertical-align: bottom;
}

#fixedBanner1:hover {
opacity: 0.7;
}

Answer

ECマスターズの田中です。

いただいたソースは、
スマートフォン用のソースですね。

スマートフォン用のソースは、
禁止タグのチェックを回避する仕組みが含まれており、
そのままPC用項目に設置しようとするとエラーになってしまいます。

バナー設置君にて「スマートフォン用ページ対応」にチェックを入れずに
バナーを作り直していただくか、
いただいたソースの、タグ名の直後に含まれる
=""
を削除してご利用いただきますようお願いします。
例）→、→、など

Answer

なるほど。
了解です。
こちらで試してみます。

ちなみに上記のソースをスマホ用商品共通説明文に張り付けたところ
文字数オーバーになってしまいました。

こちらもう少し縮小すれば記載ができるのですが消しても問題ない記述などありますでしょうか？

Answer

ECマスターズの田中です。

たとえば、複数の 〜 の内容は
一つの 〜 にまとめていただいても結構です。

また、同じプロパティのスタイルシート規則がある場合、
セレクターをカンマ区切りにして１つにまとめることができます。
例）
#fixedBanner1:hover, #fixedBanner2:hover, #fixedBanner3:hover {
opacity: 0.7;
}