カートの梱包変更UI 改善案
2026-08-02 ／ 本番（qu-official.com）の実物を操作して計測した結果と、直し方の案
1実測でわかったこと
本番のカートで、実際のボタンをクリックして計測しました。以下の数字はすべて実測値です。
クリックから画面が変わるまで
1.96秒
この間は表示が一切変わらず、固まったように見えます
1回の変更で走る通信
4往復
直列なので待ち時間が足し算になります
変更したあとのパネル
閉じる
箱と袋を両方変えるには開き直して約4秒
見つかった不具合：数量が2以上の商品で梱包を変えると、数量が1に減る
実測（2回とも再現）＝ネックレス2点 ¥5,600 の行で「手提げ袋を付ける」を押すと、1点 ¥3,020 になりました。
原因は、変更を送るときに数量を一緒に送っていないことです。Shopifyは梱包の情報を書き換えると行を作り直す仕様で、そのとき数量を指定しないと1になります。
直し方は「今の数量も一緒に送る」だけで、直す箇所は1つです。
1.96秒の内訳
① 梱包の内容を書き換え614ms
② カートを読み直し242ms
③ 梱包商品の数を合わせる881ms
④ カート表示を作り直し204ms
合計 1,943ms ②は①の返事に同じ内容が入っているので省けます。③と④もまとめられます。
2「複数追加できないんだっけ？」の答え
実測の結果、できます。ただし画面には何も書いていないので、伝わっていないのが問題です。
商品ごとに別々の梱包
できる
1点はネイビー、もう1点は白、が実際に成立します
数量を2にしたとき
2つ付く
ケース2・袋2に自動で増えるのを実測しました
1つの商品に袋を2枚
できない
今の設計は「商品1点につき1つ」です
3選ぶボタンの見た目（4案）
実際にクリックできます。押したときの反応も本番と同じ挙動で再現しています。
現状表の罫線に見える
商品写真
¥18,000
1ct solitaire necklace
カラー: ゴールド
箱
手提げ袋
左のラベルと枠付きボタンが格子に見えること、ボタンの幅が文字数でばらついて2段が縦に揃わないこと、
選ばれている方が枠の色1段の差でしかないこと。この3つが「チープ」の中身です。
加えて、商品ページ側は写真付きの大きなカードなので、同じ選択なのに別のサイトのように見えます。
案Aセグメント（左右2分割のスイッチ）
商品写真
¥18,000
1ct solitaire necklace
カラー: ゴールド
幅を半分ずつに固定して格子感を消し、選んだ側を塗りにして一目で分かるようにした案。省スペースなので、折りたたまず常に出しておけます。
案Bチップ（ラベルを捨てて言葉だけで並べる）
商品写真
¥18,000
1ct solitaire necklace
カラー: ゴールド
「箱」「手提げ袋」というラベルを消し、選択肢の言葉そのもので分かるようにした案。いちばん軽く、余白が効きます。ただし2つの軸があることは読み取りにくくなります。
案C（推し）ふだんは一行だけ。押すと商品ページと同じ選び方が開く
商品写真
¥18,000
1ct solitaire necklace
カラー: ゴールド
梱包
白い箱・手提げ袋なし
箱を選ぶ
手提げ袋を選ぶ
閉じているときは1行だけなので、カートが静かなまま。開くと商品ページとまったく同じ選び方（写真付きカード）になるので、
「さっき見たあれ」と迷いません。選び終えて「この梱包にする」を押したときだけ通信するので、
箱と袋を両方変えても待ち時間は1回だけです。今の「1つ変えるたびに2秒」から構造ごと変わります。
4カートの並び（ここが「今が最適と思えない」の本体）
Shopifyの仕組み上、梱包の代金は「商品」として計上するしかありません。今はそれがそのままカートに並んでいるので、
ネックレス2点を買うとカートの数が5になり、¥220の紙袋が¥18,000のネックレスより上に来ることがあります。
現状
商品カートの数：5
白い紙袋
商品ごとの「梱包を変更」からお選びいただけます
¥220
ネイビーケース
ネイビーケースとネイビー紙袋のセット（-¥0）
¥880
ネイビー紙袋
ネイビーケースとネイビー紙袋のセット（-¥110）
¥110
1ct solitaire necklace
箱: ネイビーケース ／ 手提げ袋: あり
¥18,000
買った商品は2点なのに5行。梱包が商品と同じ大きさの写真で割り込み、割引バッジが「-¥0」と出る行もあります（本番のスクリーンショットのとおりです）。
案X（推し）
商品カートの数：2
bow necklace
カラー: ゴールド
梱包白い箱・手提げ袋あり+¥220
¥3,020
1ct solitaire necklace
カラー: ゴールド
梱包ネイビーケース・手提げ袋あり+¥990セット割 -¥110
¥18,990
梱包の行は表に出さず、買った商品の中に「梱包 ◯◯ +¥◯」として畳む案。金額は今とまったく同じで、見え方だけを変えます。
セット割も、それが効いた商品の中で説明できるので「-¥0」が消えます。
※ 決済画面（Shopifyの購入手続き）では、梱包は今までどおり別の行として表示されます（ここは変えられません）。
だからこそカート側で「梱包 ネイビーケース +¥880」と金額まで見せておけば、決済画面で驚かれずに済みます。
5やる順番の案
- 数量が減る不具合を直す金額が変わってしまうので最優先。他の案とは独立して直せます。
- 待ち時間をなくす押した瞬間に表示を変えて、通信は裏で走らせます。通信も4往復から2往復へ。案Cならまとめて1回。
- 選ぶボタンの見た目を入れ替える案A・B・Cから選んでください。見た目だけの差し替えなので、他に影響しません。
- カートの並びを整える（案X）いちばん体験が変わるところ。梱包の行を畳み、カートの数を商品だけの数にします。