Shopifyストアの運営を通じて、顧客アカウントの活用方法に限界を感じたことがあることでしょう。たとえば、顧客が注文状況を確認したり、返品リクエストを送信するプロセスが複雑だと感じていないでしょうか。また、標準機能だけでは十分に顧客満足度を高めることができないと感じた経験があるかもしれません。
Customer Account UI Extensionsを利用することで、こうした課題を解決し、顧客アカウントをカスタマイズして顧客体験を向上させることが可能です。この拡張機能は、顧客が求める情報をシームレスに提供し、操作性を高めるだけでなく、ストア運営者が効率的に顧客データを活用できるようになります。
Customer Account UI Extensionsの概要
Customer Account UI Extensionsは、顧客アカウントの画面に独自の機能や情報を追加するためのツールです。この機能を使用することで、Shopify標準のUIに縛られることなく、顧客のニーズに応じた画面を作成できます。拡張機能は、Shopifyの既存デザインと統一感を保ちながらカスタマイズを実現し、顧客体験を向上させるための強力な手段を提供します。
この機能には以下の特長があります。ShopifyのPolarisデザインシステムを活用して直感的で一貫性のあるUIを構築できる点、またGraphQL APIを通じてリアルタイムでデータを取得し、情報を適切なタイミングで提供できる点です。これにより、ストア運営者は顧客の操作性を最大限に考慮したカスタムUIを構築できます。
拡張の種類とその特徴
Inline拡張
Inline拡張は、顧客アカウント画面の特定のセクションにカスタムUIを埋め込むための拡張機能です。このタイプの拡張は、標準機能を拡張したり、新しい要素を簡易的に追加したい場合に特に適しています。たとえば、注文履歴ページでは標準で配送状況が表示されますが、これに加えて配送オプションの変更機能や追加情報（例：配達員の連絡先や配送詳細のタイムライン）を表示することが可能です。さらに、限定セールや重要なお知らせをバナー形式で追加することも簡単に実現できます。こうした小規模な変更は、大きな効果をもたらすのが特徴です。
Inline拡張の最大の魅力は、既存UIとの調和を保ちながら、新しい要素を無理なく統合できる点にあります。Shopifyが提供するPolarisコンポーネントを活用することで、見た目や操作感に統一性を持たせることが可能です。また、リアルタイムでデータを取得して更新するためのGraphQLクエリを適切に設計することで、顧客が求める情報をタイムリーに提供できます。
Order Action拡張
Order Action拡張は、注文インデックスページや注文ステータスページにカスタムアクションを追加し、顧客が簡単に操作を行えるようにするための拡張機能です。この機能を活用することで、例えば返品リクエストの送信や注文内容の変更といったアクションを、顧客自身が直感的に行えるようになります。ボタン形式で操作を提供することで、顧客が必要な情報や機能に迅速にアクセスできるようになります。
注文アクションメニューは静的なターゲットを活用し、顧客が特定のアクションを実行するためのUIを提供します。このボタンは注文インデックスページと注文ステータスページの両方に表示され、顧客がアクションを選択すると、モーダルウィンドウが開いて追加の操作や情報入力をサポートします。たとえば、返品リクエストの場合、顧客に返品理由を選択させるフォームをモーダル内に表示し、入力が完了したらアクションを確定する流れを構築できます。
また、複雑なフローや情報量が多い操作が必要な場合には、ボタンをフルページ拡張やその他のUI機能にリンクさせることも可能です。この柔軟性により、ストアの運営者は顧客体験を最適化しながら、注文管理プロセスを大幅に効率化することができます。
Order Action拡張を活用することで、顧客の操作を効率化するだけでなく、顧客サポートチームの負担を軽減することが期待できます。例えば、返品リクエストのプロセスを完全にセルフサービス化することで、サポートリクエスト数を削減し、顧客満足度を向上させることが可能です。こうした拡張の導入により、ストアの運営効率と顧客体験の向上を同時に実現できます。
Full Page拡張
Full Page拡張は、顧客アカウント内に独自のページを追加するための機能です。このタイプの拡張を利用することで、特定の目的に応じたページを作成できます。たとえば、顧客向けのプロモーション情報を一元的に表示するページや、詳細な顧客ダッシュボードを作成することが可能です。
Full Page拡張を実装する際には、ナビゲーションの直感性とページの目的に応じた情報設計が重要です。また、Shopify App Bridgeを使用して、アカウント全体でスムーズなナビゲーションを実現することが求められます。
場面ごとの使い分け
顧客アカウント拡張機能を選択する際には、ストアの目的と顧客体験の向上にどのタイプが最適かを慎重に検討する必要があります。
例えば、顧客が頻繁にアクセスする注文状況ページには、Inline拡張が適しています。一方で、顧客が直接操作を必要とするプロセス、例えば返品リクエストにはOrder Action拡張が適しています。また、独自の情報や高度な分析機能を提供する場合にはFull Page拡張を利用すると良いでしょう。
お気に入り商品の管理機能では、顧客専用のページを提供するFull Page拡張が最適です。お気に入り商品の一覧を表示し、編集操作を可能にすることで、顧客は自身の購入計画を立てやすくなります。さらに、商品詳細ページにはInline拡張を用いて「お気に入り登録」ボタンを設置することで、より直感的な操作を提供できます。
一方で、ポイント活用機能にはOrder Action拡張が適しています。例えば、注文時にポイントを適用するボタンを設置することで、顧客は購入プロセスの中でスムーズにポイントを利用できます。また、ポイント履歴を確認したり詳細な情報を提供したい場合にはFull Page拡張を併用することで、顧客とのエンゲージメントをさらに強化できます。
それぞれの拡張ターゲットの詳細
ShopifyのCustomer Account UI Extensionsは、さまざまなターゲットに向けて拡張を行うことが可能です。これにより、顧客アカウント内の特定のページやセクションに合わせた機能やUIを提供できます。ターゲットは主に、顧客アカウントページの各機能やセクションごとに分かれており、それぞれに応じた設計が求められます。このセクションでは、代表的な拡張ターゲットとその特徴について詳しく解説します。
Full Page
Full Page拡張は、顧客アカウント内に新しいページを追加するために使用されます。この拡張は、特定の注文に関連付けられた情報を表示する場合と、注文とは無関係の情報を表示する場合でターゲットが異なります。
customer-account.order.page.render: このターゲットは特定の注文に関連するページを作成する際に使用されます。たとえば、返品リクエストページなど、特定の注文コンテキストを必要とする場合に適しています。この拡張は、ヘッダーとフッターの間にレンダリングされます。customer-account.page.render: 注文とは無関係のページを作成する場合に使用されます。たとえば、お気に入りリストやポイント履歴などのページを提供する際に適しています。このターゲットも同様に、ヘッダーとフッターの間にレンダリングされます。
Order Action
Order Action拡張は、注文ページにボタンを追加し、顧客が特定のアクションを実行できるようにするターゲットです。これらのターゲットは、顧客がスムーズに注文関連の操作を行えるように設計されています。
customer-account.order.action.menu-item.render: 注文インデックスページや注文ステータスページに表示される静的なボタンです。顧客がこのボタンをクリックすると、さらに詳細な操作を行うためのモーダルが開きます。customer-account.order.action.render: モーダル内にレンダリングされるUIを提供します。このターゲットを使用して、顧客に確認を促したり、追加の情報を入力させることが可能です。
Order Status
Order Status拡張は、注文ステータスページに特化したターゲットで、配送や支払い、返品などの情報を補完するために使用されます。
customer-account.order-status.cart-line-item.render-after: 商品ごとの詳細情報の下にレンダリングされるターゲットです。customer-account.order-status.fulfillment-details.render-after: 配送状況カード内にレンダリングされます。配送状況に関連する情報を提供するのに適しています。customer-account.order-status.return-details.render-after: 返品状況カード内にレンダリングされます。返品リクエストが行われた際に表示されます。
Profile
Profile拡張は、顧客のプロフィールページに新しい情報や操作を追加するために使用されます。B2B（企業向け顧客）とB2C（一般顧客）でターゲットが分かれており、それぞれに適した機能を提供できます。
B2B向け
customer-account.profile.company-details.render-after: 会社名の直下にレンダリングされるターゲットです。企業の詳細情報を提供する場合に適しています。customer-account.profile.company-location-staff.render-after: 企業の担当者情報セクションの下にレンダリングされます。
B2C向け
customer-account.profile.addresses.render-after: 一般顧客の住所情報セクションの下にレンダリングされます。customer-account.profile.block.render: プロフィールページ全体に追加のブロックをレンダリングします。このターゲットを使用することで、顧客情報のカスタマイズが可能です。
まとめ
Customer Account UI Extensionsは、Shopifyストアの運営者にとって、顧客アカウントを高度にカスタマイズするための強力なツールです。この機能を活用することで、顧客体験を向上させるだけでなく、ストアの運営効率も高めることが可能です。
Inline拡張、Order Action拡張、Full Page拡張のそれぞれの特徴を理解し、適切な場面で使い分けることで、顧客満足度を高め、ビジネス目標を達成することができます。今後もこの拡張機能を活用し、さらなる可能性を追求していきましょう。