Shopifyのマルチページチェックアウトをカスタマイズ・最適化する20のヒント

チェックアウトは、購入ファネルにおいて最も重要なプロセスです。顧客はすでに購入を決めており、チェックアウトの役割は配送情報の収集、決済処理、そして注文の確定です。そのため、可能な限りシンプルにする必要があります。本ガイドでは、Shopifyのチェックアウトを最適化し、コンバージョンと売上を向上させる方法を解説します。

Shopifyのチェックアウトページ（プロセス）は、Shopify Plusプランでなければカスタマイズできないと多くのマーチャントが誤解しています。しかし、それは事実ではありません。Shopify Basicプランであっても、カスタマイズや最適化が可能な箇所はたくさんあります。また、Shopify Editions Winter 2023において、Shopifyはワンページチェックアウトの導入を発表しました。これは非常に画期的なアップデートです！

更新 [2024年3月]: ワンページチェックアウトが利用可能になりました。これに伴い、新しい（簡略化された）レイアウトに特化したワンページチェックアウト最適化ガイドを作成しました。

Shopifyのチェックアウトをカスタマイズし、パフォーマンスを向上させるためのベストプラクティスとヒントをまとめた究極のガイドをお届けします。これにより、コンバージョン率と平均注文額の向上を目指します。

デフォルトでは、Shopifyはストア名をチェックアウトのパンくずリストの上にテキストとして表示します。しかし、独自のロゴをアップロードして表示させることも可能です。ビジネスロゴを使用することで信頼性が高まり、チェックアウト画面がストアのデザインとより一体化します。

チェックアウトにカスタムロゴをアップロードする手順は以下の通りです。

1. ストア管理画面からオンラインストア > テーマへ進み、公開中のテーマのカスタマイズをクリックします。
2. 左下のテーマ設定をクリックし、チェックアウト
3. を選択します。ロゴセクションを見つけて「画像を選択」をクリックし、ロゴをアップロードして選択
4. をクリックして確定します。見た目を確認し（デスクトップとモバイルの両方を確認してください）、問題なければ保存をクリックします。

ロゴ設定で難しいのはサイズ調整です。Shopifyから推奨サイズは提示されていませんが、高さ40ピクセルの小さなロゴを使用し、左寄せに配置することをお勧めします。ロゴの高さはモバイルとデスクトップで共通であり、画質を維持するためにリサイズは行われません。なお、これらの寸法はDawn 2.0テーマに最適化されています。

その他のサイズの最大高さについては、以下の表をご覧ください。

チェックアウトのユーザーエクスペリエンスにおいて、もう一つ重要な要素がデザインです。標準では、Shopifyはボタンに青色、フォントにシステムフォントを使用しています。これらは商品ページやカートページのデザインと異なることが多いため、購入フロー全体の一貫性が損なわれてしまいます。

幸い、これを修正するのは簡単です。

1. ストア管理画面からオンラインストア > テーマへ進み、公開中のテーマのカスタマイズをクリックします。
2. 左下のテーマ設定をクリックし、チェックアウト
3. を選択します。タイポグラフィまでスクロールし、ストアで使用しているフォントを選択します。利用できない場合はシステムフォントのままにします。
4. 色セクションで、ボタンとリンクの色を商品ページやカートページに合わせて変更します。

ダークテーマのストアを使用している場合、チェックアウトの背景色を白からダークに変更することを検討するかもしれません。しかし、フォームやチェックアウトプロセスにおいては、明るい色の方が一般的に受け入れられやすいため、変更は推奨しません。

例えば、ダークUI（アプリおよびウェブサイト）で知られるSpotifyでさえ、サブスクリプションの変更（チェックアウトプロセスの一種）画面は白を採用しています。

Shopify Plusを利用しなければチェックアウトのテキストは変更できないと広く信じられていますが、幸いなことにそれは誤りです。ほとんどのテキストは非常に簡単に変更可能です。

1. ストア管理画面から オンラインストア > テーマ に移動し、公開中のテーマの アクション をクリックして 言語を編集
2. を選択します。上部のナビゲーションで チェックアウトとシステム を選択すると、ボタン、リンク、フッター、ナビゲーションなど、表示されるすべてのテキストを編集できます。
3. 完了したら 保存 をクリックし、実際のサイトで変更内容を確認してください。

工夫次第で、信頼感を高めたり、最後のステップまで進むよう顧客の意欲をかき立てたりする表現に変更できます。例えば、デフォルトの「今すぐ支払う」という少し強引なボタンを「注文を確定する」に変更し、鍵の絵文字 🔒 を追加することで、安心感を強調することができます。

チェックアウトページのタイトルについては、チェックアウトページのタイトル、デフォルトで「チェックアウト」となっている後半部分と、ストア名である中間部分のみ変更可能です。ただし、形式（現在のステップ - ストア名 - チェックアウトタイトル）自体を変更することはできません。

これはおそらく最も重要なヒントです。現在のチェックアウト項目や入力欄（任意・必須問わず）を見直し、本当に必要なものだけを残すようにしましょう。項目を減らすほどチェックアウトプロセスが簡素化され、コンバージョン率が向上します。

Boltによると、Bolt、複雑なチェックアウトは顧客が離脱する理由の第3位です。特に昨今、顧客はプライバシーに対して敏感になっており、個人情報を共有する前に慎重に検討する傾向があります。

チェックアウト画面から不要な項目を削除するには、以下の手順に従ってください。

1. ストア管理画面から 設定 > チェックアウト に移動し、下にスクロールして フォームのオプション
2. を探します。氏名 を 姓のみ必須 に設定し、その他の項目を 非表示
3. に設定します。最後に 保存 ボタンをクリックして確定します。

支払い方法や配送方法についても忘れないでください。選択肢を提供することは良いことですが、複雑になりすぎないようにしましょう。ほとんど利用されていない配送方法や支払い方法があれば、無効にすることを検討してください。

チェックアウトの項目数を減らすべきもう一つの重要な理由（ヒント#4）は、全体の ページ高さ です。Statcounterによると、Statcounter、2021年12月時点で、30%（！）の顧客が依然として 768px以下の高さ のデスクトップやノートパソコンの画面を使用しています。

その違いは、以下の比較画像で明確に示されています。

情報入力ステップの高さには、項目の数、エクスプレスチェックアウトの支払いボタン、ロゴや背景のサイズなど、多くの要素が影響します。

情報入力ページ（チェックアウトの最初のステップ）で、配送方法へ進む ボタンをファーストビュー（スクロールせずに見える範囲）に表示させることが非常に重要です。顧客が次のステップに進めば、完了率は劇的に向上します。配送ステップは通常問題ありませんし、支払いステップでできることは限られています。

カートやチェックアウトから離脱する最も一般的な理由の一つは、信頼の欠如 です。Baymard Instituteによると、17%の顧客が、支払い情報を入力するストアを信頼できないという理由でカートやチェックアウトから離脱しています。

多くの無料Shopifyアプリがストアフロントやカートページに信頼バッジを追加できますが、チェックアウトプロセスに組み込めるものは存在しません。

しかし、チェックアウト中の顧客の信頼を高めるための回避策やヒントがいくつかあります。

1. チェックアウト中にブランドロゴを使用する（ヒント#1を参照）
2. チェックアウトのスタイルやデザインをストアフロントに合わせてカスタマイズする（ヒント#2を参照）
3. チェックアウトのテキストを変更し、信頼構築に注力する（ヒント#3を参照）
4. 連絡先情報を追加する（ヒント#6を参照）

チェックアウト中に連絡先情報を表示することは、コンバージョン率の向上に役立ちます。まず、注文に関する問題が発生した際に電話できる番号があることで 信頼感が高まります。次に、問題に直面した顧客が サポート を必要とする場合があります。そして、一部の国の顧客（こんにちは！）は、ストアが実在するかを確認するためだけに電話をかけてくることもあります。😉

「ヘルプが必要ですか？Xまでお電話ください」といった短いテキストを追加するのが効果的です。テーマのテキストを変更して編集することも可能ですが（ヒント#3を参照）、より洗練された方法は、ロゴ画像を調整し（ヒント#1を参照）、そこに情報を追加することです。フォント、色、テキストの配置を工夫すれば、チェックアウト画面の一部として自然に溶け込ませることができます。

連絡先情報を表示するよりもさらに良い方法は、オンラインチャットウィジェットを埋め込むことです。ストアフロントには不要かもしれませんが、チェックアウト（およびカート）ページには設置することを強く推奨します。購入意欲の高いお客様をサポートし、購入プロセスをスムーズに案内できるからです。

残念ながら、これはShopify Plusでのみ可能です。チェックアウトページにカスタムJavaScriptを追加する必要があるためです。Shopify Inboxのチャット機能でさえ、チェックアウト画面では動作しません。

エクスプレス決済（加速チェックアウトとも呼ばれます）を利用すると、お客様は通常のチェックアウトプロセスをスキップし、対応している決済方法で注文を完了できます。摩擦が大幅に減るため、コンバージョン率の向上が期待できます。

Shopifyストアでエクスプレスチェックアウトを有効にするには、Shopify ペイメントまたはStripeを利用している必要があります。

1. ストア管理画面から > 設定 > 決済
2. へ進みます。カード決済プロバイダー（通常はShopify ペイメントまたはStripe）の管理リンクをクリックします。
3. 「ウォレット」セクションで希望する決済プロバイダーを追加し、保存をクリックします。保存

「決済ボタン」は、商品ページやカートページにも表示できます。加速チェックアウトに対応している決済方法は以下の通りです。

• Apple Pay
• Google Pay
• Amazon Pay
• PayPal
• Shop Pay

例えばShop Payの場合、テストでは通常のチェックアウトと比較して72%もの大幅なコンバージョン率の向上が確認されています。個人的には、Shop Payと通常のチェックアウトでの取引額を比較した詳細なテスト結果を見てみたいところです。重要なのは、加速チェックアウトは常に高いコンバージョン率を誇りますが、まだ大多数の買い物客には利用されていないという点です。

買い物客からの信頼を高めるもう一つの方法は、会社のロゴをファビコンとして使用することです。これはブラウザの各タブに表示される小さなアイコンです。カスタムファビコンをアップロードするには、以下の手順に従ってください。

1. Go to your store admin > Online Store > Themes, and click on Customize your live theme
2. In the left-bottom corner, click on Theme settings and select FAVICON
3. Click on Select image and upload your own favicon
4. Click on Save and review the change on the live site (it can't be previewed)

ファビコンの形式はJPG、PNG、GIF、またはSVGに対応しており、最適なサイズは32 x 32ピクセルです。

ファビコンはShopifyのチェックアウト画面を除き、すべてのページ（カートを含む）で変更可能です。多くのマーチャントがこの点を不満に思っていますが、セキュリティ上の理由から、Shopify Plusプランを利用していない限り、Shopifyはチェックアウトプロセス中にカスタムファビコンを読み込むことができません。Shopify Plusプラン。

‍アップセルとクロスセルは、平均注文額を増やすための実証済みの手法です。Shopifyプラットフォームでは、チェックアウト前の段階（お客様がチェックアウトプロセスに入る前）で非常によく定着しています。しかし、購入後のチェックアウト拡張機能のような最新のShopifyアップデートにより、チェックアウトプロセス中にもアップセルやクロスセルを提供できるようになりました。最大のメリットは、お客様が支払い情報を再入力する必要がなく、ワンクリックで追加決済が完了する点です。

購入後のアップセルを提供できるのはサードパーティ製アプリのみです。推奨アプリのリストは以下の通りです。

1. Candy Rack – 購入前から購入後まで、ファネル全体をカバーするオールインワンのアップセルアプリ‍
2. Checkout Promotions – 高度なカスタマイズが可能な多機能アプリ‍
3. Zipify OCU – A/Bテストなど豊富な機能を備えた人気のアップセルアプリ

購入後のオファー（post-purchase offers）戦略に関しては、少し攻めの姿勢で割引を提供することをおすすめします。これは、顧客に対してアップセルを促す実質的に最後のチャンスだからです。

購入前や購入後のアップセルに加え、配送方法を通じて組み込み型のネイティブなアップセルを提供することも可能です。その方法は、アプリを使わないShopifyチェックアウトでの無料アップセルに関する記事をご覧ください。

顧客にチェックアウトを完了してもらうには、何らかのインセンティブを提供しましょう。この手法は、送料無料や無料ギフトといったインセンティブと組み合わせることで、特に高い効果を発揮します。

購入時に無料ギフトを提供する方法はいくつかあり、それについてはすでに記事で解説しています。最もおすすめなのは、Gift Boxのような専用アプリを使う方法です。

送料無料については、Shopifyストアで直接設定することができます。

1. Go to your store admin > Settings > Shipping and delivery
2. In the Shipping section, click on Manage rates
3. Click on Add rate in the particular shipping zone
4. Set the rate as "Set up your own rates," name it something like "Free Shipping," and add a condition on minimum weight or price if needed
5. Click on Done, and that's it, now you should see this rate in your checkout

配送エリアや対象商品を指定することで、送料無料の適用範囲を限定することも可能です。

ベストプラクティスは、最低購入条件などの送料無料に関する情報を「カートに追加」ボタンの近くに表示することです。サイト全体に表示されるバナーは、訪問者に見過ごされやすいため避けるのが賢明です。

Shopifyは100年続く企業を目指し、地球環境を守るために多くのリソースを投じています。現代の買い物客の多くも同様の意識を持っています。カーボンニュートラル配送の提供は、気候変動への影響を抑えつつ、コンバージョン率を高める素晴らしい方法です。カーボンニュートラル配送の提供は、気候変動への影響を抑えつつ、コンバージョン率を高める素晴らしい方法です。

Shopify公式アプリのOffsetを利用するか、通常は無料で利用できるサードパーティ製アプリのいずれかを選択できます。サードパーティ製アプリの利点は、顧客に情報を表示できること、そして追加コストをストア側が負担するか顧客に委ねるかを選択できる点にあります。

さらに、顧客がShop Payで支払うかShopify Shippingを選択した場合、そのコストはShopifyが企業として負担します。

Shopifyには、チェックアウト時に顧客がチップを支払える統合機能が備わっています。設定次第で決済ステップの一部としてネイティブに組み込まれ、顧客はパーセンテージまたは任意の金額を選択できます。チップ機能を有効にするには、以下の手順に従ってください。

1. ストア管理画面から「設定」>「チェックアウト
2. 」へ進みます。「チップ」セクションまでスクロールし、「チェックアウト時にチップのオプションを表示する
3. 」にチェックを入れます。チップの段階（1〜3段階）を設定します。「すべての顧客にチップのオプションを表示する」のチェックを外し、5%・10%・15%に設定することをおすすめします。「
4. 保存」をクリックして確定します。

入力項目を追加すると（たとえ任意であっても）、チェックアウトのコンバージョン率に影響を与える可能性があるため、その影響を監視することを忘れないでください。チップを残す顧客が少ない場合は、フォームを無効にすることをおすすめします。

詳しくは、Shopifyチェックアウトでのチップ設定方法に関するガイドをご覧ください。

サイトの表示速度がSEOの観点から非常に重要であることはご存知でしょう。SEOの観点だけでなく、コンバージョンの観点からも重要な要素です。2019年のPortentの調査によると、読み込み時間が1秒増えるごとにコンバージョン率は4.42%低下します。

Shopifyのチェックアウト読み込み時間を測定するには、テーマに組み込まれているオンラインストアの速度レポートは使用できません。これはホームページ、商品ページ、コレクションページのスコアしか測定しないためです。PageSpeed Insights（Google提供）を使用し、既存のチェックアウトURLを入力する必要があります（例：任意の商品でチェックアウトの最初のステップに進み、そのURLをコピーしてください）。

Shopify Plusプランを利用していない場合、診断結果のほとんどを修正・改善することはできません。ただし、以下の点には留意してください。

• チェックアウトで使用するロゴや背景画像は圧縮したものを使用する
• チェックアウト時に読み込まれるサードパーティ製アプリや決済ゲートウェイは、読み込み速度を大幅に低下させる可能性があるため注意する

一般的に、チェックアウトの読み込み時間は4秒以内が理想です。テストしたところ、Shopifyのチェックアウトは常にモバイルよりもデスクトップの方が高速に読み込まれました。

顧客の約70%が購入を完了する前にチェックアウトから離脱しています。これを取り戻すための最も洗練された方法の一つが、チェックアウト／カート放棄メールです。

顧客がメールアドレスを入力した後にチェックアウトを完了しなかった場合、自動的にメール通知が送信されます。これらの通知はShopifyプラットフォームの標準機能であり、非常に簡単に有効化できます。

1. ストア管理画面 > マーケティング > オートメーション
2. 「オートメーションを作成」をクリックし、「チェックアウトの放棄
3. 」を選択
4. ワークフローの設定とメールをカスタマイズ「保存」をクリックして確定

メールの送信対象やタイミングについても多くの選択肢があります。基本的には、チェックアウトを放棄したすべての人に対して、1時間後に送信することをお勧めします。メールは早く送るほど、顧客を取り戻せる可能性が高まります。注文の5〜10%を回復できると期待できます。翌日にメールを送っても、あまり意味はありません。

「購入を完了してください」という件名のデフォルトメールをカスタマイズすることも可能です。全体として悪くはありませんが、行動を促すフレーズ（CTA）が欠けています。デフォルトのボタンラベルを「カート内の商品」から、「購入を完了する」や「商品を確保する」といった、より魅力的なものに変更することをお勧めします。

カート放棄の回復についてより高度なソリューションをお探しの場合は、アプリストアに多くの選択肢があります。最大3通のメールリマインダーを設定し、送信タイミングを定義できるPaysterをお勧めします。さらに、このアプリは放棄されたチェックアウトだけでなく、未払いの注文（銀行振込や代金引換など、支払いが遅れる決済方法の注文）も回復可能です。

多くのマーチャントがこのShopifyの機能を知りませんが、顧客の情報がわかっている場合は、チェックアウトに進む前に情報を事前入力しておくことができます。

最大の利点は、顧客が情報を入力する必要がなくなり、チェックアウトプロセスが簡素化され、摩擦が軽減されることです。

顧客情報を追加するには、チェックアウトに直接つながる以下のリンク構造を使用してください。

https://your-store.myshopify.com/cart/checkout?payment=[PAYMENT-METHOD]&discount=[DISCOUNT-CODE]

商品もあわせて追加したい場合は、以下のリンクを使用してください。

https://your-store.myshopify.com/cart/[VARIANT-ID]:[QUANTITY]?payment=[PAYMENT-METHOD]&discount=[DISCOUNT-CODE]

変数の完全なリストは以下の表の通りです。

詳細は「Shopifyで事前入力データを含むカスタムチェックアウトリンクを作成する方法」の記事をご覧ください。

購入完了前にアカウント作成を強制しないでください。アカウント作成を強制すると、最大37%の顧客が購入フローから離脱してしまいます。

いわゆるゲストチェックアウトを有効にするには、以下の手順に従ってください。

1. ストア管理画面から 設定 > チェックアウト
2. に移動します。顧客アカウント セクションで、アカウントは任意
3. を選択し、保存

ただし、顧客アカウントはリピーターにとって有益であり、特に「ヒント#11：顧客情報の事前入力」と組み合わせると効果的です。顧客にアカウント作成を促す適切なタイミングは、最初の購入手続きが完了した後です。このアプローチは購入後の（または遅延型の）アカウント作成と呼ばれ、これを支援するサードパーティ製アプリが2つあります。どちらも無料でインストール可能です。

• Smart Account Activate：サンクスページで直接顧客にアカウント作成を促します。
• WOTIO Account Invites Plus：顧客にメールを送信し、アカウント作成を促します。

Shopifyは2017年より、Google Places Autocomplete API を使用して、顧客の配送先や請求先情報の入力をサポートしています。顧客が住所を入力し始めるとスマートサジェストが表示され、正しい住所を選択できるようになります。

この候補は、顧客がアカウントを持っているかどうかにかかわらず、常にShopifyではなくGoogleから提供されます。非常にうまく機能し、チェックアウト全体の流れを大幅に改善します。住所の自動入力を有効にするには、以下の手順に従ってください。

1. ストア管理画面から 設定 > チェックアウト
2. に移動します。下にスクロールして 注文処理 セクションを表示し、住所の自動入力を有効にする
3. にチェックを入れ、保存

欠点は、一部の国のみがサポートされていることです。「公式リスト」は存在せず、Googleは定期的に対象国を追加しています。サポートされている国の例として、オーストラリア、オーストリア、ベルギー、ブラジル、カナダ、デンマーク、フランス、ドイツ、香港SAR、インド、イタリア、日本、ルクセンブルク、オランダ、ニュージーランド、スペイン、スイス、米国などがあります。

これはShopifyチェックアウトのあまり知られていない、しかし非常に興味深い機能です。有効にすると、顧客はメールアドレスの代わりに携帯電話番号を使用してチェックアウトを完了できます。

携帯電話番号はよりプライベートな情報である一方、マーケティングに関してはより厳しく規制されています。電話消費者保護法（TCPA）に基づき、企業が販促メッセージや取引メッセージを送信する前に、顧客から書面による同意を得る必要があります。

また、単に選択肢があることを好む顧客もいます。メールを頻繁にチェックしない顧客にとって、SMSの方が注文状況を追跡しやすい場合があります。

携帯電話番号でのチェックアウトを有効にするには、以下の手順に従ってください。

1. ストア管理画面から 設定 > チェックアウト
2. に移動します。顧客の連絡先 セクションで「顧客は電話番号またはメールアドレスのいずれかを使用してチェックアウトできる」を選択します。
3. 下にスクロールしてマーケティングの同意 セクションを表示し、「チェックアウト時に登録するオプションを表示する」にチェックを入れます。
4. 最後に保存

デフォルトのマーケティング同意文は「ニュースや特典をSMSで受け取る」となっています。しかし、SMSを注文関連の通知のみに使用する予定であれば、「注文状況の更新をSMSで受け取る」など、より受け入れられやすい表現に変更可能です。テキストは、上記のヒント#3で説明したテーマの翻訳機能から変更できます。

オンラインショッピングをする多くの顧客は、送料や返品・返金ルールを気にしています。送料はShopifyのチェックアウト機能に標準で組み込まれていますが、返品については各ストアの対応次第です。

According to Baymard Institue, many shoppers look for this information in the page footer. And that's why your checkout should include direct links to your Refund/Return Policy and other legal documents like Privacy Policy or Terms of Service. On top of that, your checkout will look more professional and trustworthy. How to add them?

1. ストア管理画面から 設定 > ポリシー
2. に移動します。関連するセクションに法的ポリシーを追加します。もし何も用意していない場合は、「テンプレートから作成」ボタンをクリックして、Shopifyのデフォルトテンプレートを使用できます。
3. 最後に保存をクリックすると、チェックアウトのフッターにリンクが自動的に追加されます。

チェックアウト画面には、返金ポリシー、配送ポリシー、プライバシーポリシーを表示することをお勧めします。これらのポリシーを設定していてもShopifyのポリシー機能から追加されていない場合、チェックアウトのフッターには表示されず、代わりに「All rights reserved（著作権表示）」という標準的な注記が表示されます。

デフォルトの名称を変更したい場合は、以下の手順で簡単にリンク名を変更できます。設定 > テーマ > アクション > 言語を編集 > チェックアウトとシステム > チェックアウトのショップポリシー。

チェックアウトのフッターにポリシーを表示する唯一のデメリットは、独自のカスタムテキストを表示するオプションが使えなくなることです。

理想的なチェックアウトのコンバージョン率とは

EコマースにおけるUX調査で最も信頼されている組織の一つ、Baymard Instituteによると、現在の平均的なチェックアウト離脱率は69%（つまりチェックアウトのコンバージョン率は31%）です。そのため、平均以上の数値を目標にすべきです。優れたShopifyストアでは、コンバージョン率60%以上（離脱率40%未満）を達成しているケースがよく見られます。

チェックアウトの最適化は終わりのないプロセスであることを忘れないでください。常に試すべき新しい施策や、新しい機能の導入があります。また、全体的な数値はモバイルとデスクトップのトラフィック比率に大きく依存します。一般的に、デスクトップのトラフィックはモバイルの4倍コンバージョンしやすい傾向にあります。

しかし、重要なのは特定の離脱率（またはコンバージョン率）を達成することではありません。優れたコンバージョンと、平均注文額を引き上げるためのツールとのバランスを見つけることです。

関連リソース

• コンバージョンを高めるためのチェックアウト高速化ガイド 著者：Jessica Wynne Lockhart
• Shopifyスクリプトでコンバージョンを増やす13のチェックアウト最適化手法 著者：Shopify
• チェックアウト放棄率の計算方法と追跡すべき10の主要指標 著者：Bolt
• カートとチェックアウトに関する記事 著者：Baymard Institute（必読！）
• チェックアウトページを最適化する方法 著者：Benjamin Ligier