Shopifyのカートとチェックアウト：支払う前の見た目

要点

Shopifyのカートとチェックアウトは、人がすでに商品を選び、支払う前にまだやめられる二つの画面です。カートは、何が届くか、いくらか、どう戻るかを確認します。チェックアウトは配送と支払いを求め、その見た目は店舗のテーマにはありません。別のエディタにあります。文書化されたカート放棄率の平均は70.22%で、そのかなりの部分は「気が変わった」ではありません。追加費用、信頼の不足、長いチェックアウトは、数字つきで現れます。正しい描き方は、合計を早く見せ、アカウントを先に作らせず、まだ同じ店にいるとわかる程度だけブランドを使います。以下で、カートの画面は何か、どのプランでもShopifyが変えさせてくれるものは何か、Shopify Plusにしかないものは何かを分けます。

1. 支払う前に人が見る必要があるもの

カートに着いた人は、すでに商品ページを通過しています。疑問が変わります。もう「この商品は合うか」ではありません。「最後にいくら払うか、いつ届くか、やめたら何が起きるか」です。

Baymardは、見ているだけだった人と、店舗の問題で止まった人を分けています。42%は、まだ買うつもりがなかったために放棄しました。これはバナーでは解けません。残りでは、40%が高い追加費用（送料、手数料）を挙げ、19%はカードをそのサイトに預ける信頼がなく、18%はアカウント作成の要求にぶつかり、17%はチェックアウトが長いまたは複雑だと感じ、13%は返品ポリシーが悪く、12%は事前に合計金額を見られませんでした。

この段階を描くとき、私はこの順を使います。まず合計。送料か、計算するはっきりした方法を添えます。次に届くまでの日数。次に交換条件を、1行とリンクで。ブランドは上部に、小さく。進むボタンは合計と同じブロックに置き、キャンペーンの文章のあとには置きません。

ストアがまだ組まれている途中なら、Shopifyストアの作成と調整が、カート、テーマ、チェックアウトを同じプロジェクトに入れる場所です。その前にある商品ページは、商品ページでデザインが見せるべきものの記事にあります。

このデザインの仕事ではないこと

ShopifyのチェックアウトをYampiやCartpandaに替えるのは、別の判断です。決済、手数料、請求書の話です。それについては、ブラジルのShopifyチェックアウト、標準か外部かの記事が扱います。ここでの話題は、見た目と情報の順番です。カートと、Shopifyが描くチェックアウトについてです。

2. カートの画面

カートは、人がまだ落ち着いて購入内容を変えられる最後の画面です。各行には写真、名前、バリエーション、数量、行の価格、そして商品を外す分かりやすい方法が要ります。バリエーション名のない数量は、問い合わせを生みます。小さすぎる写真は、正しい商品が入ったのかを疑わせます。

概要はボタンにくっつけます。デスクトップでは横、モバイルではボタンのすぐ上です。小計、送料（または計算する欄）、割引があれば割引、そして合計を出します。送料を最後の段階まで隠すと、40%と12%の理由を繰り返します。費用が遅く出てくる、ということです。

クーポンを、画面でいちばんうるさい要素にしてはいけません。「クーポン」というラベルの控えめな欄が、コードを持つ人の用を足します。「割引が当たりました」という巨大な帯は、合計を下へ押し、もう払うつもりの人を遅らせます。

店へ戻るリンクは見えるままにします。確認のためにカートを開いた人は、まだ別の商品を見たいのです。出口が支払うボタンだけだと、一部はブラウザの戻るで離れ、買う流れを失います。

モバイルでは、進むボタンは使える幅を取り、WCAG 2.2の最小ターゲットを守ります。24×24 CSSピクセルです。数量に張りついたゴミ箱アイコンは、タッチ領域がないと、人に意図せず商品を消させます。私はゴミ箱、数量、名前のあいだに間隔を取ります。

3. 1ページか、3ページか

Shopifyの管理画面では、チェックアウトの標準レイアウトは1ページです。3ページに切り替えられます。エディタのプレビューはその場で更新されません。保存したあと、確認するのは店舗の実際のチェックアウトです。

1ページは、情報、配送、支払いを同じ流れで見せ、「まだ段階が残っている」感覚を減らします。3ページはそれを段階に分けます。どちらも魔法ではありません。効くのは画面の数ではなく、フィールドの数です。

Baymardは、引き締めた流れをフォーム要素12から14、フィールドだけなら7から8と書いています。米国のチェックアウトで彼らが記録する平均は、標準で23.48要素、うちフィールドが14.88です。私は、彼らの数字まで削ると約束しません。店舗のチェックアウトを見て、配送も支払いも決めないものを消します。マーケティングの文言、必須の登録、「どこで知りましたか」の追加欄です。

同じ調査は、米国と欧州の大規模ストアが、チェックアウトの描き方を良くするだけでコンバージョンを35.26%伸ばせると見積もっています。これは向こうの大規模ストアの平均であり、あなたの店の目標ではありません。問題はたいてい画面の側にあり、「ブラジル人は買わない」ではない、と思い出すための数字です。

2025年の評価では、デスクトップサイトの64%とモバイルサイトの63%が、チェックアウトで平凡かそれより下でした。大規模ストアも間違えます。ホームがきれいなテーマは、この段階を直しません。

4. プランで変えられること

チェックアウトはテーマエディタでは編集しません。Shopifyには、設定のCheckoutにある、チェックアウトとアカウントのエディタがあります。そこにロゴ、色、フォント、アプリが入ります。チェックアウトに置いたブランドの一部は、顧客アカウントにも渡ります。

標準のカスタマイズはBasic以上のプランで使えます。Plusは、ヘルプが高度なカスタマイズと呼ぶもの、Checkout Branding API、そして情報、配送、支払いの各ページのアプリを開きます。サンキューページと注文状況のアプリは、対象のアプリならBasicにも置けます。

出典：Shopifyヘルプセンター、16/10/2026閲覧。

私が描くブラジルの店舗のほとんどでは、Basicの範囲で見た目は足ります。ロゴ、ボタンの色、背景色、見出しと本文のフォントです。Plusが入るのは、支払いの途中にアプリのブロックが要るとき、またはAPIで細かく調整するときです。カートに送料すら出していない店の、最初の一歩ではありません。

2026年2月5日以降、Shopifyはチェックアウトのヘッダーにもメイン領域にも背景画像を追加させません。古い画像がすでにある場合、外すことしかできず、差し替えはできません。私はこれをバグではなく限界として扱います。チェックアウトはバナーの場所ではありません。

あなたの店のカートが送料、届くまでの日数、合計を隠しているなら、カートのURLとプランを送ってください。まだShopifyストアを作っていないなら、作る前にご相談ください。ストアは開発ストアとして立ち上げ、完成した状態で構築してから、あなたの名義に移管します。

プロジェクトを相談

5. 支払いと競わないロゴ、色、フォント

Shopify自身が、単純なチェックアウトを求めています。ヘルプの文は、はっきりしています。人はこれらのページを配送と支払いの入力に使い、色が多すぎると注意がそれるか、読みにくくなります。案内は、高いコントラストと、言葉から注意をそらさない画像です。

実際には、判断は三つです。

ロゴは上部に、左揃えか中央に置きます。モバイルでフォームを下へ押さない幅にします。縦に高いロゴは、最初の画面を占領します。店名はヘッダーにすでにあります。ロゴが店名を巨大な文字で繰り返すなら、私は縮めます。

ボタンと強調（リンク）の色はブランドから取りますが、ボタンの文字はコントラストを通る必要があります。WCAGは、通常の文字に最低4.5:1、大きい文字に3:1を求めます（18ポイント、または太字の14ポイント）。黄色いボタンに細い白文字は、たいてい失敗します。私は保存する前に、背景色と文字色の組を試します。

チェックアウトのフォントはShopifyの一覧で、見出しと本文は別です。テーマのフォントではありません。店がとても細いブランドフォントを使っていても、ここでは出ないことがあります。私はいちばん近いものを選び、欄が読めるかを確認します。装飾的な文字のカード欄は、人が番号を打ち間違える場所です。

フィールドは透明にできます。背景が透明なら、欄の文字はページの色の上で読めるままである必要があります。欄の中の例が読めないなら、私は透明をオフにします。

エディタのパレットは、同じ色をボタン、リンク、警告で使い回すためのものです。見本のhexを変えると、その見本を使う場所がすべて変わります。私は少ない色でパレットを組みます。背景、文字、ボタン、エラーです。

6. モバイルでは、概要とクーポンは閉じた状態で始まる

モバイルでは、Shopifyの標準が注文の概要とクーポン欄を、閉じたセクションに隠します。人は概要をタップして合計とクーポンを見ます。これは高さを節約し、同時に、予期しない費用で放棄するのを防ぐ数字も隠します。

「クーポン欄を常に表示する」という調整が、両方のレイアウトにあります。1ページでは、クーポンは閉じた概要の上に出ます。3ページでは、上の概要が標準で開き、クーポンも一緒です。

店がクーポンで回っているとき、私はこの調整を入れます。欄が隠れていると、「コードを入れる場所が見つからない」という連絡が来るからです。それでも概要は開きやすくし、タップの前に途中の合計が見えるようにします。タップなしで見える合計のほうが良いです。レイアウトがそれを出さないなら、概要のラベルは金額を言う必要があり、「注文を見る」だけでは足りません。

タッチ領域の同じ注意が、ここでも要ります。欄に張りついた「クーポンを忘れた」リンクは、小さい文字で間隔がないと、24 CSSピクセルの基準に失敗します。私はターゲットを広げるか、二つの操作を離します。

7. アカウント、届く日数、ポリシーを出すタイミング

Baymardの調査では、18%の人が、サイトにアカウント作成を求められて放棄しました。サイトの62%は、ゲスト購入をいちばん目立つ選択肢にしていません。ゲストのボタンがあっても「アカウントを作成」の下に小さい文字だと、人にとっては無いのと同じです。

描き方では、「アカウントなしで買う」が主ボタンです。「すでにアカウントがある」は横に、見えるように置き、最初にはしません。登録は注文のあと、サンキューページで出せます。人がすでに支払ったあとです。

届くまでの日数は、支払いの前に入れます。メールだけでは足りません。Baymardの一覧では、放棄の20%は配送が遅すぎたためでした。デザインは郵便を速くしません。カードを打ったあとで日数に気づかせないようにします。

返品ポリシーは、1文とリンクで、合計の近くに置きます。13%は悪いポリシーのために放棄しました。ポリシーが明確でもホームのフッターに隠れていると、実際の効果は無いのと同じです。

カードへの信頼（19%）は、汎用のバッジを積んでも解けません。解くのは、店のドメイン上のチェックアウト、ブラウザがすでに出している錠、カード欄とボタンのあいだに変なブロックを置かないことです。概要のアップセルアプリはあってよいです。それが支払うボタンを画面の外へ押すなら、私は外すか、支払いのあと、Basicがすでに対象アプリを許すサンキューページに残します。

よくある質問

Shopify Plusなしで、チェックアウトを店舗の見た目にできるか

できます。ロゴ、色、フォント、背景、フィールドは、チェックアウトのエディタで、Basic以上のプランなら変えられます。Plusが入るのは、高度なカスタマイズ、Checkout Branding API、情報・配送・支払いの各ページの途中のアプリです。人が気づくブランドの見た目のほとんどは、Basicに収まります。

1ページのチェックアウトは3ページより売れるか

Shopifyは両方を許します。標準は1ページです。調査が見せているのはフィールドの多さであり、レイアウトの勝者ではありません。私は店のフィールドを数え、届けるためにも支払うためにも役立たないものを切ります。レイアウトの切り替えが意味を持つのは、保存して実際のチェックアウトを開いたあとだけです。エディタのプレビューは、その場で変更を出さないからです。

なぜモバイルでクーポンが出ないのか

標準では、概要とクーポンはモバイルで閉じた状態で生まれます。人は概要を開いて見ます。店がクーポンに依存するなら、管理画面にはクーポン欄を常に表示する選択肢があり、1ページのチェックアウトでは閉じた概要の上に出ます。

カートはチェックアウトと同じ場所で編集するか

いいえ。カートはテーマの一部です。チェックアウトは、設定のCheckout、チェックアウトとアカウントのエディタで編集します。テーマで組んだバナーや追加セクションは、チェックアウトへ渡りません。だからチェックアウトのブランドは、ロゴ、色、フォントであり、ホーム全体ではありません。

送料はカートの時点で出す必要があるか

支払う前に合計を見ない人は、その理由で放棄した12%のグループに入ります。高い追加費用は40%の理由で、見ているだけの人は除きます。送料がCEPに依存するなら、CEPの欄はカートに、合計の横に置き、最後の段階だけにはしません。

まとめ

Shopifyのカートとチェックアウトで売れるのは、合計、届くまでの日数、アカウントなしの出口が、人が支払う勇気を出す前に見えるときです。テーマがカートを扱います。チェックアウトのエディタが、この段階のブランドを扱います。Basicプランは、ロゴ、色、フォントをすでにカバーします。Plusは運用の道具であり、レイアウトの近道ではありません。あなたの店がすでにこの段階で人を失っているなら、Shopifyストアの作成と調整を見て、カートのURLと店のプランを送ってください。まだShopifyストアを作っていないなら、作る前にご相談ください。ストアは開発ストアとして立ち上げ、完成した状態で構築してから、あなたの名義に移管します。

プロジェクトを相談