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

会員がパネルを開くためのボタンは、ショップの画面に常に表示されます。目立たなければ使われにくく、ほかのボタンと重なると押しにくくなります。

ここでは、ボタンの設定項目を順番に見ていきます。

色・形・文言

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

テキスト色は白と黒から選べます。ブランドカラーが濃い場合は白、淡い場合は黒にすると読みやすくなります。迷ったときは、プレビューで両方を見比べてください。

表示テキストには、「特典を見る」のような短い文言を設定します。文言が長くなるほど、スマホではボタンが大きくなります。

位置は左下か右下

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

右下は、ほかの要素と重なりやすい場所です。 チャットサポートのウィジェット、カートへ戻るボタン、ページ上部へ戻るボタンなども、右下に置かれることがあります。

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

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

デスクトップとスマホでは、ボタンが画面に占める大きさが大きく異なります。デスクトップでは小さく見えるボタンでも、スマホでは画面のかなりの部分を占めることがあります。

スマホではアイコンのみ表示を有効にすると、テキストが隠れ、丸いアイコンだけが表示されます。表示テキストが長い場合は、この設定にするとボタンをコンパクトにできます。

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

これは意図的な違いです。スマホは画面が狭いため、余白を大きくするとボタンが本文に重なりやすくなります。

一方、カートボタンが画面下に固定されているテーマを使っている場合は、下からの距離を増やして、ボタン同士が重ならないようにする必要があります。

プレビューの限界

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

これは、プレビューだけではショップの実際の表示までは確認できないためです。プレビューではボタン単体の見え方を確認できますが、実際のテーマ上でほかの要素と重なった状態までは再現されません。

位置を変更したら、実際のショップをスマホで開いて確認してください。 特に、商品ページとカートページの2つは確認しておくと安心です。

決める順番

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

5番目まで確認することが大切です。設定画面のプレビューだけでは、実際のショップでの重なりまでは確認できません。

まとめ

ブランドカラーは、パネルの基調色にも使われます。右下にすでにほかのボタンがある場合は、左下に設定します。

スマホは、デスクトップとは分けて考えるのが大切です。アイコンのみ表示にしたり、モバイル個別の余白を設定したりできます。

最後に実際のショップをスマホで確認して、設定完了です。