送料無料バーの改善案
カートページ／カートドロワー ・ 3案 ・ 2026-08-03
01
達成しても見た目が変わらない
未達も達成も同じ黒文字＋黒バー。バーが満タンになるだけで「無料になった」という手応えがない。
02
文言が事務的
「お客様には送料無料が適用されます。」は説明文であって、うれしさが伝わらない。
03
金額が本文に埋もれる
「あと¥900」の金額が周りと同じ大きさ。あと少しで無料、という一番大事な数字が立っていない。
00いまの状態
現状
本番と同じ
文字サイズ15px・黒一色。バーの太さ5px。左と右で変わるのはバーの長さだけです。
あと少し ── ¥3,600
カートドロワー
ショッピングカート (1)✕
¥3,600snowflake lariatカラー: ゴールド
送料無料に到達 ── ¥4,590
カートドロワー
ショッピングカート (1)✕
¥4,590snowflake lariatカラー: ゴールド
A静かに、金額とゴールドで
案A ── 数字を立てて、達成をゴールドで示す
文と数字の主従を入れ替えます。「あと ¥900 で送料無料」の金額だけを19pxの太字にして、説明の文字は14pxに落とす。
達成するとバーがゴールドに変わり、細いチェックが付いて文字が黒＋太字に戻ります。
箱の形も余白も今のまま、変えるのは文字と色だけ。いちばん静かな案です。
あと少し ── ¥3,600
カートドロワー
ショッピングカート (1)✕
¥3,600snowflake lariatカラー: ゴールド
送料無料に到達 ── ¥4,590
カートドロワー
ショッピングカート (1)✕
¥4,590snowflake lariatカラー: ゴールド
B達成したら、面で変わる
案B ── 案A＋達成でベージュの帯になる
おすすめ
案Aに加えて、達成した瞬間にその一帯が淡いベージュ（#F6F2EA）になり、左にゴールドの縦線が入ります。
文字の色ではなく「面」が変わるので、画面をざっと見ただけで達成に気づけます。
ベージュとゴールドは商品ページの「残りわずか」バッジと同じ配色なので、サイトの中で浮きません。
あと少し ── ¥3,600
カートドロワー
ショッピングカート (1)✕
¥3,600snowflake lariatカラー: ゴールド
送料無料に到達 ── ¥4,590
カートドロワー
ショッピングカート (1)✕
¥4,590snowflake lariatカラー: ゴールド
Cいくら得したかを言う
案C ── 案B＋「送料¥500が無料」と金額で伝える
案Bに加えて、浮く金額そのものを出します。未達なら「あと ¥900 で 送料¥500 が無料」、
達成したら「送料 ¥500 → 無料」。いくら得なのかが数字で分かるぶん、お得感はいちばん強く出ます。
いっぽうで「¥500」という細かい実額を前に出すので、静けさは3案でいちばん弱くなります。
あと少し ── ¥3,600
カートドロワー
ショッピングカート (1)✕
¥3,600snowflake lariatカラー: ゴールド
送料無料に到達 ── ¥4,590
カートドロワー
ショッピングカート (1)✕
¥4,590snowflake lariatカラー: ゴールド
＋補足
私のおすすめは 案B
理由は3つです。
・目立たせたい正体は「達成した瞬間の変化」なので、色ではなく面を変えるのが最短で効きます
・使う色が既存のベージュ＋ゴールド（残りわずかバッジと同じ）なので、新しい色を増やさずに済む
・案Cの「送料¥500」は効きますが、静かな世界観のブランドで実額を前に出すと安く見えるリスクがあります。まずBで出して、反応を見てからCへ寄せるのが戻しやすい順序です
どの案でも、変えるのは qu-custom.css（見た目）と locales/ja.json（文言）と
component-shipping-notice.js（達成時の目印を付ける処理）の3つだけです。テーマ本体の構造は触りません。
- バーの太さは今のまま5pxで残しました。「あと何円」も目立たせたいというご要望なので、細くして上品にする方向は取っていません。
- ドロワーには送料無料バーが上下に2本出ています（開いた直後の帯と、いちばん下の枠付きボックス）。以前「2本のまま様子見」と決めたので今回もそのままですが、装飾を強くすると2本ぶん主張します。下の1本だけ強調して上は細い線だけにすることもできます。
- 金額の判定は税込の小計で、送料の実設定（¥0〜4,499は¥500／¥4,500以上は¥0）と一致しています。
- バーが伸びる動きは0.45秒のなめらかな移動だけで、点滅や脈動は入れていません。