レッスン内容
User Accountsにアクセスする方法
Webflow User Accountsを使用するには、User Accountsテンプレートまたはクローン可能なサイトを選択するか、ゼロからサイトを作成します。
User Accountsテンプレートを選択した場合、User Accountsはデフォルトで有効になります。異なるテンプレートを選択したり、ゼロからサイトを作成したり、既存のサイトにUser Accountsを追加したい場合は、左のツールバーのUsersアイコンをクリックしてUser Accountsを有効にできます。
重要: User Accountsを有効にした後、無効にすることはできません。User Accountsを有効にした後に、ユーザーページやコレクションを削除することはできません。さらに、Userページに使用される予約済みのURLスラッグ（例：/log-in、/sign-upなど）を再利用することはできません。ユーザーサポートをサイトに追加することを確信している場合にのみ、User Accountsを有効にすべきです。機能をテストするだけの場合は、テストサイトを作成することをお勧めします。
User Accountsを有効にした後、ユーザー関連のコレクション、ページ、設定がサイトに追加され、AddパネルのUsersの下にUser Accounts要素が利用可能になります。
注意: セキュリティのため、User Accountsが有効なサイトでSSLを無効にすることはできません。
User Accountsコレクション
User Accountsサイトを開始するのに役立つ2つのUser Accountsコレクションが自動的に作成されます：User accountsとAccess groups。これらのコレクションは、Webflow Designerの左ツールバーのUsersアイコンをクリックして各コレクションを表示できます。
User accountsには、サイト上にアカウントを持つすべてのユーザーを見つけて管理できる場所があります。
Access groupsは、サイトのコンテンツへのアクセスを制御することができる場所です。
ユーザーアカウント ユーザーページ
基本的なユーザー機能をサポートするために、ユーザーアカウントサイトにはいくつかのユーザーページ（例：ログイン、サインアップ、ユーザーアカウントなど）が自動的に作成されます。これらのページは、ページパネルのユーザーページセクションの下に表示されます。
これらのページの要素にはデフォルトで基本的なスタイルが適用されていますが、ユーザーに独自の体験を提供するためにカスタマイズできます。ユーザーページについて詳しく。
重要: ユーザーページには編集できない予約済みのURLスラッグ（例：/log-in、/sign-upなど）があります。また、将来的にサイトでユーザーアカウントを使用しないことに決定した場合、これらの予約済みのスラッグを使用して新しいページを作成することはできません。
ユーザーアカウントの要素
ログイン/ログアウトボタン
ユーザーページには事前に作成されたフォームに加えて、ユーザーアカウントはサイトユーザーの利便性のために事前に作成されたログイン/ログアウトボタン要素を提供します。
事前に作成されたログイン/ログアウトボタン要素を使用するには、Addパネル > 要素 > Usersを開き、ログイン/ログアウトボタンをWebflowキャンバスにドラッグします。この要素をナビゲーションバーなどに配置できます。
ログイン/ログアウトボタンには2つの状態があります：ログイン済みおよびログアウト済み。デフォルトでは、ログイン済みの状態のボタンテキストは「ログアウト」であり、ログアウト済みの状態のボタンテキストは「ログイン」です。テキストをカスタマイズしたり、要素の設定 > ユーザーログイン/ログアウト設定で状態を切り替えたりできます。
サブスクリプション要素
ユーザーアカウントは、サイトのユーザーがユーザーアカウントページからサブスクリプションを管理できるように、事前に作成されたサブスクリプション要素も提供します。
サブスクリプション要素を使用するには、User account pageを開き、 Add panel > Elements > Ecommerceを開き、Subscriptions要素をWebflowキャンバスにドラッグします。
注意: サブスクリプション要素は、ユーザーアカウントとEcommerceが両方有効になっているサイトでのみ利用可能で、ユーザーアカウントページにのみ追加できます。ユーザーアカウントページについて詳しく学ぶ。
サブスクリプション要素がUser account pageに追加されると、ユーザーはサブスクリプションの詳細（購入日、次回請求日、またはキャンセル日など）を表示し、このページからサブスクリプションをキャンセルすることができます。
アクセスグループの管理方法
アクセスグループを使用すると、ユーザーがサイト上のさまざまな種類のコンテンツにアクセスできるかどうかを制御できます。無料および有料のアクセスグループを両方作成できます。
無料アクセスグループの作成方法
無料アクセスグループを作成するには、Usersアイコンをクリックし、UsersパネルでAccess groupsを選択します。次に、New access groupをクリックし、アクセスグループに名前を付けます。
Access settingsの下でGroup typeとしてFree accessを選択します。サイトでEcommerceが有効になっていない場合、Free accessのオプションしか表示されません。
次に、ユーザーにコンテンツへのアクセスをいつ与えるかを決定するためにGrant accessオプションを選択します。ここには2つのオプションがあります：
- After manually adding users to this group — このオプションでは、ユーザーはサイトにサインアップした後、自動的にアクセスグループに追加されません。代わりに、ユーザーがサインアップし、アカウントを確認した後、適切なアクセスグループに手動で追加する必要があります。ユーザーがアクセスを受ける前に、Webflowの外部でユーザーが完了する必要がある追加ステップがある場合、このオプションを使用することをお勧めします。
- After a user signs up and verifies their account — このオプションでは、ユーザーはサイトにサインアップした後、自動的にアクセスグループに追加されます。サイトでアカウントを作成した後、誰でもコンテンツにアクセ
注意: 手動でユーザーをアクセスグループに追加する場合、ユーザーが既にログインしている場合（つまりセッションを開始している場合）、新しいアクセスグループへのアクセスを受けるためには、ログアウトして再度ログインするか、セッションが更新されるのを待つ必要があります。セッションは自動的に4時間後に更新されます。
注意: 手動でユーザーをアクセスグループに追加する場合、ユーザーが既にログインしている場合（つまりセッションを開始している場合）、新しいアクセスグループへのアクセスを受けるためには、ログアウトして再度ログインするか、セッションが更新されるのを待つ必要があります。セッションは自動的に4時間後に更新されます。
最後に、Restricted contentセクションに、この無料アクセスグループのユーザーに利用可能にしたいページおよび/またはフォルダを追加し、Createをクリックします。
有料アクセスグループの作成方法
有料アクセスグループを作成するには、サイトでEcommerceを有効にする必要があります。Ecommerceを有効にする方法について詳しく学ぶ。
Ecommerceが有効になったら、ユーザーがチェックアウトプロセス/フローを介して購入できるEcommerceメンバーシップ製品を設定する必要があります。
重要: ユーザーはメンバーシップ製品を購入する前に、アカウントを作成して確認する必要があります。
メンバーシップ製品を作成するには：
- Ecommerce > Products を開き、New product をクリックします。
- Product type ドロップダウンから Membership を選択します。
- membership product に name を付け、description および image フィールドを任意に記入します。
- Billing method（例：One-time payment または Subscription）を選択します。
- メンバーシップ製品に price を設定します。
- Billing method として Subscription を選択した場合、Billing period ドロップダウンから請求頻度を選択します（例：Day、Week、Month、または Year）。
- 他の製品設定（Inventory、Shipping、Downloads、Optionsなど）を必要に応じて構成します。
- Create をクリックします。
これでメンバーシップ製品が作成されました。次に、Usersアイコンを開き、次のタブでAccess groupsを選択し、New access groupをクリックし、アクセスグループに名前を付けます。
Access settingsの下で、Group typeとしてPaid accessを選択します。サイトでEcommerceが有効になっていない場合、Free accessのオプションしか表示されませんので、Ecommerceを有効にしたことを確認してください。
注意: 将来的に有料アクセスグループを無料に変更することを決定した場合、この操作により関連するメンバーシップ製品との関連が解除され、新しいユーザーは製品を購入せずに参加できるようになります。これらの変更は、顧客が次回ログインしたときに適用されます。既存の顧客への定期的な料金は、購読をキャンセルするまで継続されます。ユーザーは、User accountページにSubscriptions要素を追加した場合、自分自身の購読をキャンセルすることもできます。User accountページ について詳しく学ぶ。
その後、アクセスグループに関連するメンバーシップ製品を設定できます。Associated membership products 入力フィールドをクリックし、この有料アクセスグループにリンクさせたい製品を選択します。
最後に、この有料アクセスグループのユーザーに利用可能にしたいページやフォルダを Restricted content セクションに追加し、Create をクリックします。
Restricted content セクションに追加されたページやフォルダにアクセスするためには、そのページやフォルダにアクセス権を持つアクセスグループに所属するアカウントにログインする必要があります。ページ制限について詳しく学ぶ。
アクセスグループの削除方法
サイトやビジネスが成長し続けるにつれて、サイト上でアクセスグループが不要になる場合があります。
重要: 削除されたアクセスグループを復元する方法はありません。このアクセスグループに制限されたコンテンツは、一般のユーザーがアクセスできるようになります。さらに、このアクセスグループに関連付けられたメンバーシップ製品を購入した顧客は、サブスクリプションがキャンセルされるまで課金が続きます。サブスクリプションについて詳しく学ぶ。
アクセスグループを削除するには：
- Users アイコンをクリックし、Users panel で Access groups を選択します。
- 削除したいアクセスグループをクリックします。
- Delete をクリックすると、確認モーダルウィンドウに移動します。
- Delete this group をクリックして削除を確認し、アクセスグループを永久に削除します。
ページ制限の管理方法
ページ制限は、ユーザーページおよびユーティリティページを除く、制限したいページについてはアクセスグループ設定またはページ設定で設定できます。
アクセス制御設定
ページ制限には3つのアクセス制御設定から選べます：公開、パスワードを知っている全員、またはSpecific usersのみです。
公開
Restrict AccessがPublicに設定されているページは、インターネット上の誰にでも利用可能です。これは新しいページに対するデフォルトのアクセス制御設定です。
既存のページを公開にするには：
- Pages panelを開きます。
- 公開にしたいページにカーソルを合わせ、設定の「歯車」アイコンをクリックします。
- Access ControlでPublicをクリックします。
- 変更を保存します。
重要: アクセス設定の変更が有効になるには、サイトを公開（または再公開）する必要があります。
パスワードを知っている全員（Anyone with the password）
アクセス制限がパスワードを知っている全員( Anyone with the password)に設定されているページは、そのページのパスワードを知っている誰にでも利用可能です。
重要: このアクセス制御設定を使用する前に、ページレベルでパスワードを設定していることを確認してください。ページとフォルダのパスワード保護を解除するには、アクティブなサイトプランが必要です。パスワード保護について詳しく学ぶ。
ページをパスワードを知っている全員に制限するには：
- Pages panelを開きます。
- アクセスを制限したい既存のページ（または新しいページを作成）にカーソルを合わせ、設定の「歯車」アイコンをクリックします。
- Anyone with the passwordをクリックします。
- 変更を保存します。
重要: アクセス設定の変更が有効になるには、サイトを公開（または再公開）する必要があります。
特定のユーザーのみ（Specific users only）
Pages with Restrict Access set to Specific users only will be available to users in the access group that you choose.
Restrict Access が特定のユーザーのみ（Specific users only）に設定されているページは、選択したアクセスグループのユーザーにのみ利用可能です。
既存のアクセスグループにページを制限するには：
- ページパネルを開きます。
- アクセスを制限したい既存のページ（または新しいページを作成）にカーソルを合わせ、設定の「歯車」アイコンをクリックします。
- アクセス制御でSpecific users onlyをクリックし、ドロップダウンからこのページにアクセスできるアクセスグループを選択します。
- 変更を保存します。
重要: アクセス設定の変更が有効になるには、サイトを公開（または再公開）する必要があります。
注意事項: ユーザーアカウントのアクセス制御制限が設定されているページは、ページパネルで青いユーザーアイコンで表示されます。
ユーザーアカウントの管理方法
あなたのサイトで会員登録を行ったユーザーは、 Users > User accounts. に表示されます。ここでは、既存のユーザーを管理し、新しいユーザーを追加し、ユーザー情報を確認できます。
ユーザーは、自分のユーザーアカウントページからアカウント設定（例: メールアドレス、パスワードなど）を管理できます。
ユーザーアカウントリスト
Users > User accounts では、サイトの会員登録を行った各ユーザーの概要が表示されます。ユーザーの認証ステータス（例: Verified または Unverified）、アカウント作成日、最終ログイン日などが表示されます。
また、個々のユーザーをクリックして情報を詳細に表示すると、ユーザーの設定や以下の詳細情報が表示されます：
- ユーザーの名前とメールアドレス
- ユーザーがサイトのプライバシーポリシーや利用規約に同意したかどうか（サイトの登録フォームにこれらを含めている場合）
- ユーザーがマーケティングまたはその他のコミュニケーションを受け取ることに同意したかどうか
- ユーザーのアクセス設定（つまり、ユーザーがどのアクセスグループに所属しているか）
- ユーザーの Ecommerce 注文
- ユーザーの Ecommerce サブスクリプション
- カスタムフィールドから収集した情報
サイトオーナーは、ユーザーの概要でユーザーのアクセスグループやユーザーが入力したカスタムフィールドの情報を編集できます。ユーザーは、自分のユーザーアカウントページからユーザーアカウントの設定（つまり、マーケティング/その他のコミュニケーションへの同意）およびユーザーが入力した情報（名前、メール、および/またはカスタムフィールドの情報）を編集できます。
ユーザーアカウントの追加方法
新しいユーザーがサイトでアカウントを作成すると、ユーザーアカウントが自動的に作成されますが、手動でユーザーアカウントを追加することもできます。
新しいユーザーアカウントを追加するには：
- ユーザーアイコンをクリックし、Users panelで User accountsを選択します。
- Invite new userをクリック
- 招待したいユーザーのメールアドレスを入力
- ユーザーがサインアップを完了したときに追加されるアクセスグループを、 Access groupsドロップダウンで選択します。
- Invite をクリック
このユーザーは、サイトでアカウントを作成するように招待するメールを受け取ります。また、ユーザーアカウントタブに「招待中」のステータスで表示されます。
重要: ユーザーを招待すると、招待が送信されたメールアドレスを使用してサイトでアカウントを作成する必要があります。
ユーザーに招待状を再送信する必要がある場合は、User accountsタブのユーザーをクリックし、Resend inviteをクリックすることで行えます。これにより、メール招待を再送信したいかどうかを確認する確認モーダルウィンドウが開きます。
Logicを使用してユーザーを招待
Logicを使用してプログラム的にユーザーを招待することもできます。LogicのInvite user ブロックを使用すると、ユーザーアカウントサイトへのユーザーの自動招待とアクセスグループへの割り当てを自動化できます。これは、既存の外部データベースから新しいユーザーをユーザーアカウントサイトに移行するために役立ちます。
ユーザーのパスワードをリセットする方法
サイトのユーザーの中には、パスワードをリセットするのに支援が必要な場合があるかもしれません。特定のユーザーにパスワードリセットメールを送信してパスワードリセットプロセスを開始することができます。これを行うには、User accounts タブのユーザーをクリックし、Send reset emailをクリックします。これにより、パスワードリセットメールをこのユーザーに送信するかどうかを確認する確認モーダルウィンドウが開きます。
ユーザーはまた、ユーザーアカウントページからパスワードをリセットすることもできます。
ユーザーアカウントの設定を更新する方法
サイトの所有者は、ユーザーのアクセスグループやユーザーが入力した情報（例: 名前、メールアドレスなど）をユーザーの概要で編集できます。ユーザーは、ユーザーアカウントページからユーザーアカウント設定（例: マーケティング/その他のコミュニケーションへの同意）とユーザーが入力した情報（例: 名前、メール、カスタムフィールド内の情報）を編集できます。
Logicを使用してユーザーアカウントを更新
Logicを使用してプログラム的にユーザーアカウント設定を更新することもできます。Logicのユーザーアカウントを更新ブロックを使用すると、ユーザーIDまたはユーザーのメールによってユーザーの設定（例: マーケティングコミュニケーション用の設定）とアクセスグループを自動更新できます。サイト上の既存のユーザーを選択して設定を更新することもできます。
ユーザーアカウントの削除方法
重要: 削除したユーザーアカウントは復元できず、無料または有料の閲覧制限コンテンツにアクセスできません。また、アクティブなサブスクリプションやメンバーシップもキャンセルされます。
ユーザーアカウントを削除するには：
- ユーザーアイコンをクリックし、ユーザーアカウントをUsers panelで選択します。
- 削除したいユーザーをクリックします。
- Deleteをクリックします - これにより削除確認モーダルウィンドウが開きます。
- Delete this userをクリックして削除を確認します。
Logicを使用してユーザーアカウントを削除
Logicを使用してユーザーアカウントをプログラム的に削除することもできます。Logicの Delete user accountブロックを使用すると、ユーザーIDまたはユーザーのメールによってユーザーアカウントをユーザーアカウントサイトから自動的に削除するプロセスを自動化できます。また、サイト上の既存のユーザーを選択して削除することもできます。
サイト訪問者のログインステータスに基づいて要素の可視性を設定する方法
ユーザーアカウントが有効なサイト上の任意の要素（ボタン、セクションなど）は、要素レベルのゲートを使用して、任意の訪問者のログインステータスに関連付けられた可視性設定を持つことができます。
これは、同じページ内でユーザーがログインしているかどうかに基づいてユーザーごとに異なるエクスペリエンスをカスタマイズできることを意味します。例えば、ログアウトしているユーザー向けにコンバージョンに焦点を当てたホームページエクスペリエンスを作成し、一方でログインしているユーザーは直接プレミアムコンテンツエクスペリエンスに移動します。または、訪問者のアクセス許可に基づいて異なる詳細レベルを表示するサイト全体にわたる共通のナビゲーションバーを持つこともできます。
要素をゲート化し、訪問者のログインステータスに基づいてその可視性を設定するには：
- 影響を与えたい要素（ボタン、セクションなど）を選択します。
- Element settings > Visibility & user accessを開きます。
- ユーザーアクセス条件を追加するために「プラス」アイコンをクリックします。
- 「Select field」ドロップダウンメニューを開き、「User state」を選択します。
- 二番目のドロップダウンメニューから「is Logged in」または「is Logged out」を選択します。
- 設定をSaveします。
- 変更をライブにプッシュするためにサイトを公開します。
例えば、ボタン要素を「ユーザーステートが「ログインしている」に設定すると、ログインしているユーザーだけがそのボタンを見ることができます。ログインしていないユーザーは、そのボタンが非表示になるため、ボタン要素に設定した要素レベルのゲートに基づいて、ボタンと対話することはできません。
Note: 要素レベルのゲートとユーザーアクセス条件を使用する場合、Element settings > Visibility & user access内の可視性ボタンを「表示」または「非表示」に切り替える必要はありません。代わりに、ユーザーアクセス条件を設定することによって要素の可視性が管理されます。上記の手順に記載されています。
ユーザーアクセス条件を削除するには：
- 条件が適用されている要素を選択します。
- Element settings > Visibility & user accessを開きます。
- 設定されている条件にカーソルを合わせ、ゴミ箱アイコンをクリックします。
- 変更をライブにプッシュするためにサイトを公開します。
知っておくべきこと: 順序付きリストのアイテムがサイト訪問者から非表示にされる場合、後続のリスト番号は新しいカウントとアイテムの順序に調整されます。必須のフォーム入力フィールドがサイト訪問者から非表示にされる場合、フォームを送信するために必要ではありません。カスタムコードは、サイト訪問者から非表示にされた埋め込み要素の一部である場合、ページで実行されません。
サブスクリプションの管理方法
サブスクリプションベースのメンバーシップ製品を作成すると、サブスクリプションを購入したユーザーはEcommerce > Subscriptionsに表示されます。ここでは、ユーザーのサブスクリプションを追跡し、管理することができます。
重要: サブスクリプションにはStripeが必要です。サブスクリプションを使用し、サイトを公開する前にStripeアカウントをアクティブにして接続する必要があります。
注意: サブスクリプションはエディタから表示または管理することはできません。
サブスクリプションリスト
サブスクリプションリストでは、各サブスクリプション注文の概要が提供され、日付、合計金額、サブスクリプションのステータスなどの最も重要な情報が表示されます。ここでは、以下のことができます：
- 注文番号または顧客でサブスクリプションを検索
- サブスクリプションリストをステータス（例：アクティブ、期限切れ、未払い、キャンセル）でフィルタリング
- 複数のサブスクリプションを選択して一括でキャンセル
サブスクリプションをキャンセルする方法
ユーザーの要求に応じて、アクセスグループを削除した後、またはアクセスグループを有料から無料に変更した後に、サブスクリプションをキャンセルする必要があるかもしれません。
サブスクリプションをキャンセルするには：
- Ecommerce > Subscriptionsを開きます。
- 削除したいサブスクリプションをクリックします。
- Cancel subscriptionをクリックします。これにより、キャンセル確認のモーダルウィンドウが開きます。
- キャンセルを確認するには、Yes, cancel subscriptionをクリックします。
また、複数のサブスクリプションを一括でキャンセルすることもできます：
- Ecommerce > Subscriptionsを開きます。
- Selectをクリックし、キャンセルしたい各サブスクリプションの隣にあるチェックボックスをチェックするか、すべてのサブスクリプションを選択するにはOrder Numberの隣のチェックボックスをチェックします。
- Cancel subscriptionsをクリックします。これにより、キャンセル確認のモーダルウィンドウが開きます。
- キャンセルを確認するには、Yes, cancel subscriptionsをクリックします。
また、ユーザーがユーザーアカウントページにサブスクリプションエレメントを追加した場合、ユーザーは自分のメンバーシップをキャンセルすることもできます。