先日、エクストリムの商品ページにレビュー1グランプリの連続バナーを追加しました。
目的はシンプルです。
レビューキャンペーンの存在を少しでも多くのお客様に知ってもらいたかったからです。
ただ、実際に設置してみると一つ問題が発生しました。
画面サイズによっては表示が見切れてしまったのです。
最初はコードが分かりませんでした
正直なところ、私はHTMLやCSSに詳しいわけではありません。
なので最初は、
「これは小林さんにお願いした方が早いかな」
とも思いました。
ただ、以前に設置していた左サイドバナーのHTMLやCSSがサイト内に残っていました。
そこで、
「せっかくだから少し調べてみよう」
と思ったのが始まりです。
AIにコードを読んでもらった
まずは開発者ツールを使って、どの部分が表示に関係しているのかを確認しました。
ただ、コードを見ても正直よく分かりません。
そこで、HTMLやCSSの内容をAIに見てもらいながら、
「これは何をしているコードなのか」
「どこを変更すれば良いのか」
を確認していきました。
昔なら、
コードが分からない
↓
諦める
だったかもしれません。
ただ今は、
コードの意味をAIに説明してもらいながら進めることができます。
これは本当に便利になったなと感じました。
次に悩んだのは画面サイズでした
バナー自体は表示できるようになりました。
ただ、今度は別の問題が出てきました。
画面サイズによってはバナーが見切れてしまうのです。
特に気になったのが1280px付近でした。
そこで、
「どのサイズからバナーを表示させるべきか」
を考えることになりました。
GA4と開発者ツールで確認してみた
まずはGA4やアクセス解析のデータを見ながら、実際のお客様の利用環境を確認しました。
すると、
1280px
1400px
1500px以上
など、様々な解像度が使われていることが分かりました。
その後、開発者ツールを使って実際に画面サイズを変えながら表示を確認していきました。
すると面白いことが分かりました。
1280pxを救おうとすると全体が崩れる
GA4を見ると1280pxは利用者が最も多い解像度でした。
最初は、
「できるだけ多くの人に見てもらいたい」
と思っていました。
ただ実際に調整してみると、1280pxでも無理なく表示させようとすると、今度は他の環境で余白や見た目のバランスが悪くなってしまいます。
つまり、
バナーを見せたい
↓
そのためにレイアウトを変更する
↓
商品ページが見づらくなる
という状態です。
これでは本末転倒です。
レビューキャンペーンを見てもらうためのバナーなのに、そのせいで商品ページが見づらくなってしまったら意味がありません。
最終的に1550px以上にした
色々確認した結果、
@media screen and (min-width: 1550px)
で表示する形に落ち着きました。
こう設定すると、1280px環境は切り捨てることになります。
ただ、その代わり表示される環境では綺麗に見せることができます。
今回は、
「全員に見せる」
よりも、
「表示される環境で綺麗に見せる」
を優先しました。
小規模ECは優先順位を決めることも大事
今回の件で改めて感じたのは、
何を優先するのか
を決めることの大切さです。
できることなら全員に見てもらいたい。
でも、それによって商品ページの見やすさが損なわれるなら考え直す必要があります。
また、今回は結果的に自分で対応することができました。
もちろん、小林さんにお願いすれば対応していただけたと思います。
ただ、小規模ECを運営していると予算にも限りがあります。
だからこそ、
まずは自分で調べてみる
分からなければ相談する
という流れも大切なのかもしれません。
昔ならコードを見た瞬間に諦めていたと思います。
でも今はAIがあります。
専門知識がなくても、少しずつ意味を理解しながら改善を進めることができるようになりました。
今回の連続バナー調整も、そんな小さな改善の一つだったと思っています。
コメント