eCommerce Tips

チェックアウトページの事例:成約につながる6つのパターンとShopifyの実例

Checkout page examples: 6 patterns that convert, with a Shopify Plus checkout on desktop and mobile

Promotion Image

Summarize this post by:

「摩擦を減らそう」は、ネット上で最もよく見かけるチェックアウトのアドバイスであり、同時に最も役に立たないアドバイスでもあります。実際に何を動かせばいいのか、何も教えてくれないからです。

役に立つのは具体的なポイントです。読み込みが遅すぎる決済欄、スクロールしないと見えない位置にある信頼バッジ、カード情報の入力前ではなく入力後に表示されるアップセル。Baymard Instituteが50件の調査をまとめた平均によると、一般的なストアではチェックアウト前に70.22%のカートが離脱しており、その原因のほとんどは抽象的なものではありません。

以下のチェックアウトページの事例は6つのパターンに分類し、それぞれ導入に何が必要か、どんな根拠があるかを明記しています。

この記事のポイント

  • チェックアウトのコンバージョンは、ほぼ「順序」で決まります。信頼シグナル、アップセル、費用が、決済欄に対してどの位置に表示されるかです。
  • Shop Payなどのエクスプレス決済ボタンは、どのShopifyプランでも利用できます。Alice + Oliviaでは、Shop Payが注文の35%を占めるまでになりました。
  • チェックアウトページ上の信頼バッジ、アップセル、カスタム項目にはShopify Plusが必要です。Plus以外のプランでは、1ステップ手前のカートドロワーがその役割を担います。
  • Baymardの調査では、離脱理由の1位は追加費用で40%に上ります。どんなウィジェットよりも、実際の合計金額を早めに見せることが重要です。
  • Qikify Checkout Customizerは現在すべてのプランでインストールでき、Plusストアではチェックアウトページでのアップセル、カスタム項目、信頼ブロックも追加できます。
エクスプレス決済、信頼バッジ、アップセルの配置を示した6つのShopifyチェックアウトページの事例

6つのパターン、3つのプラン、そして1つの原則:順序

# パターン 何が変わるか 導入に必要なもの 根拠
1 エクスプレス決済を最上部に リピーターは手入力を完全に省略できる Shopifyの標準機能(全プラン) ブランド名・出典あり
2 決済欄の前に信頼シグナル 決断の瞬間に、最後のためらいに答える チェックアウトページ上に置く場合はShopify Plus 調査データあり
3 決済前にアップセルを1つだけ 手間に感じさせずにAOV(客単価)を上げる チェックアウトではShopify Plus、カートなら全プラン パターンレベル
4 カートドロワーにチェックアウトの役割を チェックアウトを開く前に費用のサプライズをなくす カートアプリ(全プラン) 調査データあり
5 小規模ストアはミニマルに 誰も必要としていない入力項目を削る 不要。追加ではなく削除だから 調査データあり
6 Checkout Extensibility カスタム項目、ポイント利用、購入後画面 Shopify Plus パターンレベル

まずは4列目をご覧ください。パターン1、4、5はどのShopifyプランでも使えます。パターン2、3、6にはPlusが必要です。チェックアウトページそのものを変更するものはすべてShopifyのチェックアウト拡張機能で動いており、これはPlus限定だからです。Plus以外のプランでは、代わりにサンクスページと注文状況ページで拡張機能を使えます。この違いによって、このリストのどちらの半分に今日から取り組めるかが決まります。

6つのうち1つは実名の検証済みストアの事例があり、3つはBaymard Instituteのチェックアウト調査に基づいています。残りの2つは、1件の文書化された事例ではなく複数のチェックアウトで観察されたもので、事例研究のように見せかけず、そのように明記しています。

1. チェックアウトページのコンバージョンを左右するもの

Shopifyのチェックアウトが成約につながるかどうかは、4つの要素で決まります。決済ステップの読み込み速度、決済欄に対して信頼シグナルが表示されるタイミング、アップセルが流れを妨げていないか、そして支払いまでに購入者が入力する項目の数です。Baymard Instituteの離脱に関する調査も同じ4点を挙げており、その筆頭は想定外の費用です。そしてShop Payのようなエクスプレス決済は、フォーム入力の部分を大幅に短縮します。

これらはどれも、抽象的な「摩擦」の話ではありません。「順序」の話です。カード入力欄の後に表示される信頼バッジはほとんど効果がありませんが、同じバッジを入力欄の前に表示すると判断が変わります。適切なタイミングのアップセルは売り込みとしてほとんど意識されませんが、タイミングを誤ると手間に感じられます。以下のすべてに共通する視点はこれです。ページに何があるかではなく、それがどこにあるか。

あわせて読みたい:ECサイトのチェックアウト最適化:完全ガイド

2. エクスプレス決済を最上部に

チェックアウトの一番上にShop Pay、Apple Pay、PayPalのボタンを置けば、リピーターは手入力を完全に省略できます。Shopifyの導入事例によると、ファッションブランドのAlice + OliviaはSalesforce Commerce CloudのチェックアウトにShop Payを追加し、Shop Payは注文の35%を占めて、同ブランドで最も利用される決済方法になりました。

この結果が後押しとなり、同ブランドは2026年8月にShopifyへの全面移行を計画しました。エクスプレス決済ボタンはShopifyチェックアウトの標準機能なので、このパターンはどのプランでも使えます。

1ページチェックアウトが、複数ステップのチェックアウトに必ず勝るわけではありません。重要なのは、購入者が先に進まなくても送料・税金・合計金額といった費用の全体を確認できるかどうかです。分かりやすいラベルと進捗バーのある複数ステップのフローでも十分に成果を出せるので、まずは1ページと複数ステップのメリット・デメリットを比較しましょう。

入力フォームの上にエクスプレス決済ボタンを表示したShopifyチェックアウト

フォームの下ではなく、上に

あわせて読みたい:ワンクリックチェックアウト:摩擦を減らして売上を伸ばす

3. 決済欄の前に信頼シグナル

信頼シグナルは、購入者が支払うかどうかを決めるカード入力欄の隣に置くべきです。Baymard Instituteの調査では、チェックアウトで離脱した買い物客の19%が、カード情報を預けるほどサイトを信頼できなかったことを理由に挙げています。Shopify Plusストアでは、まさにその位置へのバッジ表示をCheckout Extensibilityで実現できます。

これをうまく実践しているストアは、返金保証、購入者保護、セキュアなチェックアウトのバッジといった保証を、フッターではなく決済欄のすぐ上や横に配置しています。スクロールしないと見つからない信頼シグナルは、どれほど強力な保証であっても役割を果たしません。

同じ位置に、「今月の発送実績12,000件以上」のような一文の社会的証明を添えるストアもあります。購入者が支払いボタンを押すか迷っているまさにその瞬間に、最後のためらいに答えてくれます。カード入力欄の横の鍵アイコンも、追加コストなしで添えられます。

これがPlus向けのパターンになるのは、配置の問題です。バッジやチェックアウトページ上のレビューは、チェックアウト拡張機能で動作します。Plus以外のプランでは、同じ保証をカートドロワーや商品ページに載せましょう。何もしないより、フローの手前で見せるほうがずっと効果的です。

連絡先欄の上に対応決済バッジと緊急性メッセージを表示したShopify Plusのチェックアウト

バッジが先、フォームは後

4. 決済前にアップセルを1つだけ

チェックアウト段階のアップセルが効果を発揮するのは、購入者が決めた後に並べるクロスセルの壁ではなく、決済欄の前に関連性の高い追加商品を1つだけ見せる場合です。Shopify Plusでは、Checkout Extensibilityを使ってチェックアウトページ上のShop Payやカード入力欄の隣にそのオファーを配置できます。その他のShopifyプランでは、同じオファーを1ステップ手前のカートに置きましょう。

スマートフォンの注文の横に「おそろいのケースを$8で追加」と表示すれば、追加の判断がほとんど必要ないため成約につながります。

チェックアウトのアップセルが必ずしもコンバージョンを下げるわけではありません。下げてしまうのは、決済情報の入力後に表示されるアップセルです。購入前ではなく、取引の途中で売り込まれていると購入者に感じさせてしまいます。最も安全なのは、ポップアップではなくチェックボックス1つで、ひと目見て追加するか無視するかを選べる形です。カード入力欄の後には決して置かないでください。オファーではなく、引き止めの手口のように見えてしまいます。

5. カートドロワーにチェックアウトの役割を

送料無料までの進捗バー、ギフトラッピングの切り替え、注文概要を備えたスライド式カートは、チェックアウトを開く前から購入の判断を形づくります。Baymard Instituteによると、離脱者の40%が送料・税金・手数料などの追加費用が高すぎることを理由に挙げており、Shopifyのカートドロワーなら決済画面に進む前に実際の合計金額を見せられるからです。

購入者が次に進むころには合計金額をすでに把握しているので、決済画面でのサプライズが1つ減ります。決済画面でのサプライズこそが、土壇場での離脱を引き起こすのです。

厳密にはこれはカートの最適化であり、チェックアウトではありません。ただ、購入者にとって両者の境目はあいまいです。「実際にいくら払うのか」にドロワーがすでに答えていれば、チェックアウトページの仕事は1つ減ります。「スムーズ」と評価されるチェックアウトの多くは、実はチェックアウトの看板を掲げたカートドロワーなのです。

送料無料までの進捗バーと注文概要を表示したShopifyのカートドロワー

チェックアウトで築く信頼を、1画面早く

6. 小規模ストアはミニマルに

優れたチェックアウトは、大手ブランドだけのものではありません。Baymard Instituteによると、理想的なチェックアウトのフォーム要素は12〜14個ですが、米国サイトの平均は23.48個です。また、離脱者の17%がチェックアウトが長すぎることを理由に挙げています。入力項目が少なくShop Payを有効にしている単一商品のShopifyストアは、すでに理想に近い状態です。

決済方法が1つでシンプルな注文概要の3項目のチェックアウトは、9項目の大企業向けフローと同じくらい成約につながります。必要なものだけを求めているからです。ポイントのウィジェットも、ギフトメッセージ欄も、誰も使わない決済方法もありません。

ほとんどの中小規模のマーチャントが最初に真似すべきなのはこのパターンで、プランもアプリも開発者も必要ありません。何かを追加する前に、今のチェックアウトが必要以上の情報を求めていないか確認しましょう。機能を1つ追加するより、項目を1つ削るほうが効果的なことがほとんどです。

3項目のミニマルなチェックアウトと9項目のチェックアウトの比較

削ることも立派なパターンです

7. Shopify PlusのCheckout Extensibility

Shopify Plusでは、Checkout Extensibilityによって、ギフトメッセージや配送指示などのカスタム項目、チェックアウトでのポイント利用、決済直後の購入後アップセル画面が使えるようになります。いずれもCheckout UI extensionsとして構築されます。購入者はまず支払いを済ませ、その後に専用画面で2つ目のオファーを見るため、元の注文が損なわれるリスクはありません。売上を失う心配のない、唯一のアップセルの配置です。

プラットフォームの移行事例を見ると、チェックアウトがいかに重要かが分かります。Bombay Shaving Companyは、MagentoからShopifyに移行した後にコンバージョン率が150%向上したと報告しています。ただし、これは拡張機能だけでなくプラットフォーム移行全体の成果です。

これはPlus向けパターンの中でも最も高度な部分です。その存在を知っておくべき一番の理由は、対応していないプランで何週間も追いかけて時間を無駄にしないためです。Plusを検討しているなら、価格を見る前にCheckout Extensibilityで何ができるかを確認しましょう。

ギフトラッピング、ポストカードの選択、配送日のカスタム項目を備えたShopify Plusのチェックアウト

カスタム項目を、チェックアウトの中で収集

8. あなたのストアに合うパターンは?

候補を絞り込むのは、ご利用中のShopifyプランです。エクスプレス決済、カートドロワー、ミニマルの3パターンはすべてのプランで使え、残りの3つはShopify Plusが必要です。Qikify Checkout Customizerは現在どちらのプランにもインストールでき、すべてのプランでチェックアウトのルールを実行し、Plusストアではチェックアウトページでのオファー、カスタム項目、信頼ブロックも追加できます。

Plus以外のプランの場合。パターン1、4、5です。この3つは、ここで紹介した中で最もコストのかからないパターンでもあります。実際の合計金額を早めに見せるカートドロワーは、パターン2がチェックアウトで担う信頼構築の大部分を、1画面早く実現します。アップグレードが必要なものに目を向ける前に、まずこの3つをすべて導入しましょう。

Plusの場合。パターン2、3、6が使えるようになり、AOV(客単価)の向上はここにあります。同時に、配置の微調整ではなく、本格的なチェックアウトの設定が必要になる段階でもあります。

Qikify Checkout Customizerは、その両方をカバーします。どのプランでも、チェックアウトの入力チェックのルールや、決済方法・配送方法のカスタマイズを実行できます。Plusでは、条件付きのカスタム項目、チェックアウト段階でのクロスセルや追加商品、カスタムブロックやバナー、そしてページを採点して不足しているパターンを指摘するAIチェックアウト診断が加わります。さらにCheckout Digestが定期的なパフォーマンスのまとめをSlack、メール、Discordに送信するので、変更が成果につながったかどうかを確認できます。Checkout Customizerがあなたのストアでどう機能するかを見る。

Shopifyチェックアウトを採点するQikify Checkout CustomizerのAIチェックアウト診断

診断で、6つのパターンのうちどれが不足しているかが分かります

すでにPlusへのアップグレードを予定している方に、知っておいていただきたいことがあります。Qikifyの紹介経由でアップグレードしたストアは、アプリを生涯無料でご利用いただけるため、アップグレードの費用計算からアプリ代を完全に外せます。

今月1つだけ改善するなら、「順序」にしましょう。上のパターンのほぼすべてが同じ考え方に基づいています。お願いする前に、安心を届けることです。

あわせて読みたい:Shopifyのおすすめチェックアウトアプリ15選:機能と料金を比較

よくある質問

大手ブランドのチェックアウトページの事例は、小規模ストアにも当てはまりますか?

パターンのレベルでは、ほぼ当てはまります。小規模ストアに9種類の決済方法は必要ありませんが、Shop Payのようなエクスプレス決済ボタンや、タイミングのよい信頼バッジは規模を問わず活用できます。

1ページチェックアウトは、常に複数ステップより優れていますか?

いいえ。ページ数よりも、確定する前に費用の全体を確認できることのほうが重要です。

Shopify Plusなしでチェックアウトのアップセルを追加できますか?

チェックアウトページ上ではできません。チェックアウトを変更するものはすべてShopifyのチェックアウト拡張機能で動作し、これはPlus限定だからです。カートやチェックアウト前のアップセルはどのプランでも使え、1ステップ手前で同様の役割を果たします。

6つのうち、通常プランでできるのはどれですか?

3つです。エクスプレス決済ボタン、カートドロワーのパターン、そして不要な入力項目の削除です。チェックアウトでの信頼シグナル、チェックアウト段階のアップセル、Checkout Extensibilityには、いずれもPlusが必要です。

最初に取り組むべき、最も効果の高いチェックアウトの改善は何ですか?

エクスプレス決済ボタンを目立たせることです。設定の手間が最も少なく、決済ステップでの手入力を最も多く減らせます。

良い事例でも見られるチェックアウトのミスは何ですか?

アップセルを決済欄の前ではなく後に配置してしまうことです。同じオファーでも、受け止められ方がまったく違います。

カートドロワーとチェックアウトは同じものですか?

いいえ。カートドロワーはチェックアウトの前の段階ですが、優れたものはチェックアウトで行う信頼構築の多くを先回りして担ってくれます。

about the author

Lauren Nguyen

Lauren Nguyen

Qikify グロースマーケティングスペシャリスト

こんにちは!Qikifyのデータドリブンなマーケター、ローレンです。 私のミッションは、ShopifyをはじめとするECマーチャントの皆さまに、オンラインストアの成長と売上アップに直結する価値あるインサイトと効率的なソリューションをお届けすることです。 この業界に関わって以来、常に「皆さまの成功を後押しすること」を目標に、知識やノウハウを共有してきました。 マーケティングに夢中でないときは、美味しい朝のコーヒーで1日をスタートしています。(正直なところ、午後の一杯が必要な日も多いですが!☕) LinkedInでもお気軽にご連絡ください。マーケティング仲間やストアオーナーの皆さまとお話ししたり、新しいアイデアやコラボレーションの機会を見つけるのが大好きです。 一緒に、あなたのオンラインビジネスをさらに高みへと成長させましょう!