レッスン内容
サブスクリプションベースの製品を作成する方法
Webflow Ecommerceを始めたばかりの場合、ゼロから開始するか、テンプレートを選択できます。Webflow Ecommerceについて詳しく学ぶ
重要： サブスクリプションベースの製品を販売したい場合、まずサイトでEcommerceとユーザーアカウントを有効にし、Ecommerceサイトプランを購入し、Stripeアカウントを接続し、チェックアウトを有効にする必要があります。ユーザーアカウントを有効にした後は、無効にしたり削除したりすることはできません。ユーザーアカウントを有効にした後は、ユーザーページやコレクションを削除することはできません。また、ユーザーページに使用されている予約済みのURLスラッグ（/log-in、/sign-upなど）は再利用できません。ユーザーサポートをサイトに追加したい場合にのみユーザーアカウントを有効にするべきです。機能をテストするだけの場合は、テストサイトを作成することをお勧めします。ユーザーアカウントについて詳しく学ぶ。
知っておくべきこと： メンバーシップ製品はEcommerceの制限に含まれます。
Ecommerceとユーザーアカウントが有効になると、サイトのデザイナーでサブスクリプションの請求方法を持つ製品を作成できます。サブスクリプションの請求方法を使用すると、製品またはサービスの定期的な料金を設定でき、サブスクリプションベースの製品を購入したユーザーは、サブスクリプションエレメントが存在する場合、ユーザーアカウントのユーザーアカウントページでサブスクリプションを表示またはキャンセルできます。
サブスクリプションベースの製品を作成するには：
- 左側のパネルでEcommerceの「カート」アイコンをクリックします。
- Ecommerceセクションの中でProductsオプションをクリックします。
- 利用可能な製品を選択するか、New Productをクリックして新しい製品を作成します。
- 任意の Product type（例：物理的な製品、デジタルなど）を選択します。
- Billingセクションにスクロールし、請求方法としてsubscriptionを選択します。
- Billing period（例：日、週、月、または年）を設定します。
- 製品に関するその他の関連情報を記入します。
- 新しい製品を作成するにはCreateをクリックし、既存の製品を更新するにはSaveをクリックします。
- 変更内容をライブにプッシュするために、サイトを公開します。
注意: 製品に対して請求方法のオプションが表示されない場合、おそらく製品バリアントが設定されています。製品バリアントの請求方法を調整するには、バリアントセクションにスクロールし、編集したいバリアントの設定である「歯車」アイコンをクリックします。請求方法を「サブスクリプション」に設定し、請求期間を選択します。
サイトに「今すぐ購読」ボタンを追加する
注意: 製品のいずれかの請求方法を「サブスクリプション」に設定した場合、サイトを公開すると、Webflowはそれらのサブスクリプション製品のカートに追加および今すぐ購入ボタンをカートに追加エレメントから自動的に非表示にします。
「製品」コレクションに接続されたコレクションリストにAdd to cartエレメントを追加できます。これにより、ショッパーはホームページや他のページの製品コレクションリストから簡単にサブスクリプションを購入できます。
また、製品テンプレートページにもAdd to cartエレメントを配置できます。
製品のいずれかに請求方法を「サブスクリプション」に設定した場合、サイトを公開すると、Webflowはこれらのサブスクリプション製品に対してデフォルトのボタンテキスト（例:「今すぐ購入」）をサブスクリプションテキスト（例:「今すぐ購読」）に自動的に変更します。サブスクリプションではない製品はデフォルトの「今すぐ購入」というテキストを保持します。
デフォルトのサブスクリプションテキストをカスタマイズするには：
- Webflowキャンバス上で「今すぐ購入（Buy now）」ボタンを選択します。
- Element settings panel > Buy now button settingsを選択します。
- 「Subscription tex」を選択し、「鉛筆」アイコンをクリックします。
- テキストを編集し、変更をSaveします。
デフォルトのボタンテキストに戻す場合は、Edit textモーダルウィンドウの下部にある「Restore default」をクリックしてください。
重要: サイトを公開すると、「カートに追加」ボタンが自動的に非表示になるため、「今すぐ購読」ボタンも非表示にしないでください。そうしないと、顧客はサブスクリプション製品を購入できなくなります。
ユーザーアカウントページにサブスクリプションエレメントを追加する方法
注意: ユーザーアカウントを有効にする前にサイトでEコマースを有効にした場合、サブスクリプションエレメントはユーザーアカウントページに自動的に追加されます。
サブスクリプションエレメントはユーザーアカウントページにのみ追加できます。これを使用して、ユーザーにアクティブなサブスクリプション（あれば）を表示し、購入日、次回請求日を表示できます。ユーザーはアクティブなサブスクリプションをキャンセルすることもでき、その変更履歴をアカウントで確認できます。
ユーザーがサブスクリプションをキャンセルすると、サブスクリプションは即座にキャンセルされ、アクセスグループを介して管理されるコンテンツは、最終請求日までアクセスできなくなります。たとえば、ユーザーが6月1日にコンテンツにサブスクライブし、請求期間が1か月の場合、実質的に6月1日から6月30日までのサブスクライバーアクセスを提供します。ユーザーが6月3日にサブスクリプションをキャンセルすることを選択した場合、サブスクリプションは即座にキャンセルされ、6月末までのコンテンツへのアクセスがなくなります。
ユーザーアカウントページにサブスクリプションエレメントを追加するには（すでにページに含まれていない場合）：
- ページパネルに移動し、ユーザーページを開きます。
- Add panel > Ecommerceを開きます。
- Subscriptionsエレメントをユーザーアカウントページにドラッグします。
Subscriptionsエレメントとその子要素を好みに合わせてスタイル設定し、サイトを公開します。
Subscriptionsエレメントをユーザーアカウントページから削除できますが、ユーザーがサブスクリプションを表示またはキャンセルできるようにするために残すことをお勧めします。また、ユーザーアカウントページへのアクセス方法（ボタンまたはリンクなど）を訪問者に提供することをお勧めします。
注意: SubscriptionsエレメントにはDesignerで開いているユーザーアカウントページにアクセスする必要があります。ユーザーアカウントページには1つのSubscriptionsエレメントしか追加できません。
ユーザーのサブスクリプション購入フローを理解する方法
注意: 顧客は販売しているサブスクリプションの各1つしか購入できません（すでに購入してアカウントで請求が行われている場合、「今すぐ購読」ボタンはクリックできません）。
サイト訪問者があなたからサブスクリプションを購入したい場合、今すぐ購読ボタンをクリックした後、以下のステップを進める必要があります：
チェックアウトフローの動作は、以下の要因に応じて異なります：
- ユーザーがサイトにログインしているかどうか
- ユーザーがアカウントを持っているが、サイトにログインしていないかどうか
- ユーザーがサイトでまだアカウントを作成していないかどうか
ユーザーがサイトにログインしている場合
「今すぐ購読」ボタンをクリックした後、ユーザーがサイトにログインしている場合、チェックアウトフローに進んで購入を完了します。
ユーザーがアカウントを持っているが、サイトにログインしていない場合
「今すぐ購読」ボタンをクリックした後、ユーザーがアカウントを持っているが、サイトにログインしていない場合、彼らは「サインアップ」ページにリダイレクトされます。ここで、アカウントにログインするかどうかを選択できます。
ログインした後、彼らは購入したいサブスクリプション製品が表示されたページに戻されます。
購読を購入するには、再び「今すぐ購読」をクリックする必要があり、チェックアウトフローに進んで購入を完了します。
ユーザーがサイトでまだアカウントを作成していない場合
「今すぐ購読」ボタンをクリックした後、ユーザーがサイトでまだアカウントを作成していない場合、彼らは「サインアップ」ページにリダイレクトされます。
サブスクリプションを購入する前に、アカウントにサインアップする必要があります。サインアップするには：
- 「Sign up」ページのすべての必須フィールドに情報を追加します。
- 「Sign up」をクリックします。
アカウントを作成した後、自動的に送信される確認メールを介してアカウントを有効にする必要があります。アカウントを有効にするには、メールを確認してアカウントを有効にする必要があります。
メールを確認してアカウントを有効にしたら、アカウントが正常に作成されたことが通知され、自動的にログインされます。
自動的にログインされた後、購入したいサブスクリプション製品が表示されたページに戻されます。サブスクリプションを購入するには、再び「今すぐ購読」をクリックする必要があり、チェックアウトフローに進んで購入を完了します。
注意: ユーザーは他の製品と一緒にサブスクリプションを購入することはできません。サブスクリプションの購入は単独で行う必要があります。
サブスクリプションメールをカスタマイズする方法
顧客に送信されるサブスクリプションに関するメールを編集するには：
- 左パネルの設定アイコンをクリックします。
- SettingsパネルでEメールを選択します。
- Ecommerce emails > SubscriptionをEmailパネルでスクロールします。
- 支払いが失敗（Payment failed）、支払いが成功（Payment successful）、またはサブスクリプションがキャンセル（Subscription canceled）を選択し、編集を行います。
また、サブスクリプションメールテンプレートのラベルやその他のテキスト文字列も編集できるため、ユーザーが受信する内容をカスタマイズできます。編集しているメールテンプレートに応じて、以下のダイナミックフィールドを使用してメールの件名などを埋めることができます。
- 顧客の名前（Customer name）
- ストア名（Store name）
- サブスクリプション名（Subscription name）
- サブスクリプション価格（Subscription price）
- 購入日（Purchased on）
- サブスクリプションがキャンセルされた日（Subscription canceled on）
- 現在の請求日（Current billing date）
- 次回請求日（Next billing date）
- クレジットカードの失敗日（Credit card failed date）
注意: 支払いが成功したメールは、サブスクリプションが更新され、支払いが正常に適用された後にユーザーに別々に送信されます。
サブスクリプションの管理方法
デザイナー内からサブスクリプションとそれに関連する注文を追跡および管理できます。
注意: エディタからはサブスクリプションを表示または管理できません。
各成功したサブスクリプション購入に対して、注文受領メールがストアマネージャーに送信されます。注文はデザイナーとエディタのOrdersタブにあります。ここでは、受信した注文の合計数、総売上収益、平均注文価値、平均注文サイズなどについて詳細が表示さ
デザイナーで作業している場合、 Ecommerce panel > Subscriptionsを開いて購入したサブスクリプションのリストを表示できます。ここでは、各サブスクリプションの詳細が表示されます。詳細には以下が含まれます：
- 注文番号（Order number）
- ステータス（Status）
- 顧客（Customer）
- 購入日（Purchased on）
- 最終請求日（Last billing）
- 次回請求日（Next billing）
- 合計（Total）
サブスクリプションのステータスに応じてビューをフィルタリングすることもできます。ステータスには以下が含まれます：
- アクティブ（Active）
- 期限切れ（Past due）
- 未払い（Unpaid）
- キャンセル済み（Canceled）
さらに、注文番号でサブスクリプションを検索することもできます。
サブスクリプションをキャンセルする
ユーザーの要求に応じて、アクセスグループを削除した後、アクセスグループを有料から無料に変更した後、サブスクリプションをキャンセルする必要がある場合があります。サブスクリプションを個別にまたは一括でキャンセルできます。
個別のサブスクリプションをキャンセルするには：
- Ecommerce panel > Subscriptionsを開きます。
- キャンセルしたいサブスクリプションをクリックします。
- 「Cancel subscription」をクリックして選択を確認します。
一括でサブスクリプションをキャンセルするには：
- Ecommerce panel > Subscriptionsを開きます。
- Selectをクリックし、キャンセルしたい各サブスクリプションの横にあるチェックボックスを選択するか、Order Numberの横のチェックボックスを選択してすべてのサブスクリプションを選択します。
- 「Cancel subscription」をクリックして選択を確認します。
注意: サブスクリプションをキャンセルしても、ユーザーに自動的に払い戻しが生成されるわけではありません。払い戻しを手動で発行する必要があります。
また、ユーザーがユーザーアカウントページにサブスクリプションエレメントを追加した場合、ユーザー自身もメンバーシップをキャンセルできます。