ボタンの位置と形を決める — スマホだけ余白を個別にできます

会員がパネルを開くためのボタンは、ショップの画面に常に表示されます。目立たなければ使われず、邪魔になれば嫌われます。

設定できる項目を順に見ていきます。

色・形・文言

ブランドカラーは、ボタンだけでなく表示パネルの基調色にもなります。ここを変えるとパネル全体の印象が変わるので、ショップのロゴや基調色に合わせてください。

テキスト色は白か黒の2択です。ブランドカラーが濃ければ白、淡ければ黒が読みやすくなります。迷ったら、プレビューで両方見比べてください。

表示テキストは「特典を見る」のような短い文言です。長くするとスマホで場所を取ります。

位置は左下か右下

表示位置は左下と右下から選びます。

右下は他の要素と競合しやすい場所です。 チャットサポートのウィジェット、カートへ戻るボタン、ページ上部へ戻るボタン。これらはたいてい右下に置かれます。

すでに右下に何かあるなら、左下にしてください。重なると、どちらのボタンも押しにくくなります。

スマホでの扱いが本題です

デスクトップとスマホでは、画面に対するボタンの占有率がまったく違います。デスクトップで小さく見えるボタンが、スマホでは画面のかなりの面積を占めます。

スマホではアイコンのみ表示を有効にすると、テキストが隠れて丸いアイコンだけになります。文言が長い場合はこちらが無難です。

さらに、モバイルで個別に設定を使うと、スマホだけ余白を変えられます。初期値は下からの距離が20px、端からの距離が0pxです。デスクトップの50pxと比べて、かなり端に寄せてあります。

これは意図的な差です。スマホでは画面が狭いので、余白を取ると本文にかぶります。逆に、カートボタンが画面下に固定されているテーマを使っている場合は、下からの距離を増やして避ける必要があります。

プレビューの限界

プレビューはデスクトップとスマホを切り替えて確認できますが、画面には「表示はスクリーンショットです。実際の店舗と異なる場合があります」と書かれています。

これは正直な注意書きです。プレビューはボタン単体の見え方で、あなたのテーマの上に重なった状態ではありません。位置を変えたら、実際の店舗をスマホで開いて確認してください。 特に商品ページとカートページの2つは見ておく価値があります。

決める順番

1. ブランドカラーを決める（パネル全体に効きます）
2. テキスト色を白か黒から選ぶ
3. 左下か右下か、他のウィジェットとぶつからないほうを選ぶ
4. スマホでアイコンのみにするか決める
5. 実際の店舗をスマホで開いて、重なりを確認する

5番目を飛ばさないでください。設定画面の中だけで完結しない、唯一の項目です。

まとめ

ブランドカラーはパネルの基調色も兼ねます。位置は、右下にすでに何かあるなら左下へ。

スマホは別物として考えてください。アイコンのみ表示と、モバイル個別の余白設定があります。最後に実機で確認するまでが設定です。