【Shopify.dev和訳】Apps/Checkout/Post-purchase/Guidlines
この記事について
この記事は、Apps/Checkout/Post-purchase/Guidlinesの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
購入後のアップセルに関するガイドライン
購入後のアップセルをデザインする際、マーチャントの成功のためには、優れた顧客向けのユーザーエクスペリエンス（UX）とマーチャントエクスペリエンスが重要です。購入後のアップセルのページは、マーチャントをよく表し、ブランドの信頼を守るものでなければなりません。
ユーザーエクスペリエンス
優れた購入後のエクスペリエンスを提供し、マーチャントがお客様からの信頼を得るために、購入後のチェックアウトエクステンションに以下の UX 原則を実装してください。
- 購入に伴うすべての費用を透明にする。
- お客様にプレッシャーを与えることなく、アップセルを受け入れるか拒否するかの明確な選択肢を提示する。
- お客様に表示される連続したアップセルオファーの数を制限する。
- お客さまの購買行動や好みに合わせてアップセルを調整し、関連性の高い商品を表示する。
- ブランドの個性に関わらず、どの店舗にも適した声でお客様に直接語りかけるデフォルトコピーを提供する。
ヘッダーとフッター
購入後のページでは、ヘッダーとフッターのスタイルが統一されています。
- ヘッダー：初回購入時の注文の支払いを確認する。また、お客様は注文確認を見るボタンを使って、完全な注文確認書に直接アクセスすることができます（アップセルオファーのページを回避することができます）。
- フッター：フッターです。プライバシーポリシー、利用規約、返金ポリシーへのリンクが記載されています。
必須コンポーネント
App Bridge Checkout は、レンダリングエクステンションがインターフェイスの構築に使用できる多くの強力な UI コンポーネントを提供します。App Bridge Checkout の UI コンポーネントは Shopify によってネイティブにレンダリングされるため、チェックアウトがサポートしているすべてのブラウザにおいて、パフォーマンス、アクセス性、機能性が保証されています。
購入後のアプリをチェックアウトに統合する前に、以下の必須コンポーネントの UI ガイドラインとベストプラクティスを熟知してください。
コールアウトバナー
コールアウトバナーは、購入後のアップセルに対するアクションを顧客に促すものです。このコンポーネントを実装するには、App Bridge Checkout CalloutBannerを使用します。
ページのトップ付近にコールアウトバナーを配置して、アップセルのオファー内容をお客様に知らせます。アプリに強力なデフォルトコピーを用意して、アップセルオファーについてマーチャントに明示するように促します。
| 推奨 | 禁止 |
|---|---|
| • お客様が注文した商品に何を追加できるのか、わかりやすいテキストで説明すること。例：今からでも遅くないので、注文を追加してください。 • 製品名とそれに伴う割引を含めること。 |
• 感嘆符を使うこと。例：待って！時間切れになる前に！ • アップセルのオファーを強制的なものと感じさせたり、注文の状況について疑念を抱かせるような誤解を招く表現を使用すること。 |
商品のタイトルと価格
商品のタイトルと価格は、マーチャントのストアで表示されているものと同じでなければなりません。比較された場合にお客様の信頼を維持するために、この点は一貫していなければなりません。商品タイトルの真下に商品の価格を配置します。
購入後の商品が、割引価格でのアップセルオファーの場合は、以下のようにします。
- 商品の元の価格を抹消する。
- 割引後の価格を元の価格の横に表示し、その関係が明確になるようにします。
商品イメージ
商品画像は、購入後のアップセルオファーでお客様に提供される商品を表します。画像を追加するには、App Bridge Checkout Image コンポーネントを使用します。
複数の画像の追加
アップセルオファーに複数の画像が含まれている場合、画像はナビゲートしやすく、お客様に追加のコンテキストを提供する必要があります。画像は、異なる角度やサイズで表示できます。
| 推奨 | 禁止 |
|---|---|
| • 48px の前後の矢印ボタンを使用する。 • 画像の間をスワイプしたり、キーボードで操作したり、サムネイルをクリックして次の画像に移動したりするオプションをお客様に提供します。 • スクリーンサイズに関わらず、追加画像をレスポンシブにする。 |
画像の自動スクロールは、お客様に負担をかける可能性があるため、導入しない。 |
価格内訳
購入後の価格内訳は、お客様が受け入れるアップセルオファーの総コストを示します。この内訳は、バリアントピッカーと数量ピッカーの下に配置する必要があります。また、お客様が商品の数量やバリエーションを調整した場合には、価格の変更を反映して内訳を動的に更新する必要があります。
価格の内訳の構造
価格の内訳には、以下のものが必要です。
-
お金の内訳：お金の線：コストの個々の内訳。
- 小計：送料や税金を含む前の合計金額。
- 送料：配送料：商品の配送料の合計。
- 税金：商品やサービスにかかる追加費用。
- 合計金額：小計、送料、税金の合計金額です。
商品説明が長く、スクロールしないとお客様が価格の内訳を確認できない場合は、商品説明の最後に価格の内訳のコピーを入れる必要があります。
コールトゥアクションボタン
コールトゥアクションボタンは、お客様がアップセルのオファーを受け入れるかどうかを決定します。コールトゥアクションボタンを実装するには、App Bridge Checkout Button コンポーネントを使用します。
ACCEPT ボタン
accept ボタンは、購入後のアップセルページでの主要なアクションです。
accept ボタンには、以下のテキストを使用します。
[今すぐ支払う - 商品の合計金額]
提供する商品が無料の場合は、以下のテキストを使用します。
[今すぐ追加 - 無料] または [今すぐ追加 - 0 ドル]。
承認されたアップセルオファーの確認
App Bridge Checkout Banner コンポーネントを使用すると、顧客がアップセルオファーを受け入れたときに確認メッセージが表示されます。例：[ご注文が更新されました]
顧客は、「今すぐ購入」アクションが追加の確認ステップを引き起こすという慣例があるため、「承諾」ボタンがすぐに支払いを生成するとは思わないかもしれません。追加の確認ステップがないことを明確にするために、次のようにします。
- お客様が先に進みたいかどうかを確認するために、サマリーモーダルを追加します。
- accept ボタンの下に、すぐに課金されることを知らせるヘルプテキストを追加します。
辞退ボタン
辞退ボタンは、承諾ボタンの下に配置し、承諾ボタンよりも目立たないようにする必要があります。ただし、目立たないとはいえ、マーチャントがアップセルを簡単に断ることができるように、decline ボタンは見やすくする必要があります。辞退ボタンには、 [アップセルのオファーを断る] というテキストが表示されなければなりません。
オプションコンポーネント
購入後のページには、必須コンポーネントに加えて、以下のオプションコンポーネントを追加することができます。
商品説明
商品説明は、商品画像に表示されている商品の主な特徴をまとめたものです。
商品説明を実装するには、TextBlock、TextContainer、Text App Bridge Checkout の各コンポーネントを使用します。
すべてのアップセルオファーには、商品の特徴を正確にまとめた商品説明が必要です。アプリを使用するマーチャントには、商品説明をできるだけ短くするように勧めてください。
長い商品説明
商品説明が長すぎて、他のコンポーネント（バリアントピッカー、数量ピッカー、価格の内訳、ボタン）を押し下げてしまう場合は、以下の 2 つの部分に分けてください。
- スクロールせずに他のすべてのコンポーネントを表示する要約説明文
- 他のコンポーネントの下にある、より長くて詳細な説明文
バリアントピッカー
商品に複数のバリエーション（サイズや色など）がある場合は、商品説明の下にバリエーションピッカーを設置する必要があります。App Bridge Checkout Select コンポーネントを使用して、バリアントピッカーを実装します。
ピッカーにバリアントの名前とバリアントの値を表示します。例えば、サイズ: S、M、L、XL。商品に複数のサイズがある場合は、サイズチャートへのリンクを検討してください。
数量ピッカー
数量ピッカーは、お客様が商品の数量を調整できるように、商品説明の下に設置してください。
数量ピッカーは、デフォルトで 1 に設定されている数値ステッパーである必要があります。 [Quantity] というラベルを使用します。
購入後アプリのセレクタ
マーチャントは Shopify 管理画面のチェックアウト設定で購入後のアプリを有効にする必要があります。複数の購入後アプリがインストールされている場合は、購入後のページでどの購入後アプリを有効にするかをチェックアウト設定で選択することもできます。
チェックアウト設定で有効にするアプリを手動で選択する必要があるかもしれないことを加盟店に知らせることをお勧めします。インストール手順やヘルプページで説明することができます。
現在、アプリが選択されているかどうかは、以下の GraphQL クエリで確認できます。
{
app {
isPostPurchaseAppInUse
}
}
アプリの商人向けコンテンツの提案：
複数の購入後の拡張機能に関するマーチャント向けメッセージのベースとして、以下のコピーを使用できます。
"もし、あなたがすでに購入後のアプリをインストールしているなら、手動で[アプリ名]をアクティブにすることを選択する必要があります。これは Shopify 管理者のチェックアウト設定で行うことができます。このオプションは、すでに購入後のアプリがインストールされている場合にのみ表示されます。"
制限事項と考慮事項
購入後のチェックアウトエクステンションには、以下の制限と考慮事項が適用されます。
-
パフォーマンス：マーチャントとお客様の両方に良い体験を保証するために、エクステンションを構築する際にはパフォーマンスを優先することを強くお勧めします。App Bridge Checkout の UI コンポーネントは、チェックアウトがサポートするすべてのブラウザにおいて、パフォーマンス、アクセス性、機能性に優れています。アプリを構築する際は、以下のガイドラインを念頭に置いてください。
- ネットワークコールは、2 秒以内に完了する必要があります。
- インターフェイスがお客様に表示される前に発生するネットワークコールは、ShouldRenderハンドラ内で発生する必要があります。
- インターフェイスがお客様に表示される前に、Renderでネットワークコールを要求してはいけません。拡張機能が ShouldRender のストレージ API を使用して必要なデータを事前にキャッシュするようにしてください。
-
代替の支払い方法：以下のシナリオでは、購入後のページは表示されません。
- お客様が割賦サービスやウォレットサービス（Klarna、Affirm、AfterPay、Apple Pay、Amazon Pay、Google Pay など）でのチェックアウトを選択した場合。
- 初回購入時にギフトカードやクレジットカード以外の支払い方法を選択した場合。
-
サブスクリプション：現在、購入後のアップセルにおいて、定期購入商品はサポートしていません。
-
購入イベント：Shopify Pixel API を使用するサードパーティの分析サービス（Google Analytics、Facebook、Pinterest、Snap など）は、初回購入時の購入イベントと値のみを報告します。
-
アナリティクス：
ScriptTagREST Admin APIまたはGraphQL Admin APIリソースを使用するサードパーティの分析サービス、またはAdditional Scriptsは、サンキューページでのみトリガされるため、コンバージョンデータが不完全です。 -
業務内容と複数通貨への対応：購入後のアップセルオファーは、関税や複数の通貨を含む注文では表示されません。
-
注文作成の遅延：フラッシュセールのように Shopify Platform が非常に高い負荷にさらされている場合、システムは注文の取り込みを最適化しますが、迅速でシームレスな購入者体験のために注文作成ステップを一時的に遅らせることがあります。このような場合、購入後のページへのリクエストが適切に行われていたとしても、購入後のページが表示されません。
-
複数のアプリ：購入後のチェックアウト機能を持つ複数のアプリを持つマーチャントは、購入後のページにどのアプリを表示するかを選択する必要があります。アプリのオンボーディング中にバナーを使用して、マーチャントに Shopify 管理者のチェックアウト設定で購入後のデフォルトアプリとしてあなたのアプリを選択できることを知らせることができます。
-
フルフィルメントの保留：Shopify は、購入後のクロスセルフローを経たすべての注文に対して、履行を保留します。保留は、顧客がサンキューページにアクセスしたとき、または顧客が購入後のフローを完了しなかった場合、一定時間後に解除されます。お客様がフローを完了しなかった場合（例えば、お客様が購入後のアップセルオファーを実行する前にブラウザを閉じた場合）、フルフィルメントホールドは最初のチェックアウトの送信から 1 時間後に解除されます。フルフィルメントの保留は、FulfillmentOrder リソースを使用してのみサポートされます。
-
サンキューページとの連動：購入後のページをサンキューページの代わりとして使用してはいけません。詳細については、カスタマーフローを参照してください。
-
トラッキングとステータス機能：購入後のページには、注文のトラッキングやステータスの機能を追加することはできません。
-
API のバージョン管理：購入後のチェックアウトエクステンションの API はバージョン管理されておらず、Shopify API バージョニング四半期リリーススケジュールに従っていません。
次のステップ
- デプロイメント：バージョンを作成し、エクステンションを公開し、アクセスを要求する方法
- 購入後のエクステンション API リファレンス：どのエクステンションポイントが利用できるか、その入出力タイプ、構造など、購入後アプリのエクステンションを構築する方法を学びます。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion