[Google でログイン] ボタンの UX

このページでは、[Google でログイン] ボタンのユーザー エクスペリエンス（UX）について説明します。

ボタンの表示

パーソナライズされたボタンには、ウェブサイトを承認した最初の Google セッションのプロフィール情報が表示されます。承認済みの Google セッションには、ウェブサイト上に、以前に「Google でログイン」を使用してログインしたアカウントが対応しています。

パーソナライズされたボタンが表示されると、ユーザーは次のことを認識します。

  • 有効な Google セッションが 1 つ以上ある。
  • ウェブサイトに該当するアカウントがあること。

パーソナライズされたボタンを使用すると、ユーザーはボタンをクリックする前に、Google 側とウェブサイトの両方でセッションのステータスを簡単に確認できます。これは、ウェブサイトにたまにしかアクセスしないエンドユーザーにとって特に便利です。アカウントが作成されているかどうか、作成方法を忘れている可能性があります。カスタマイズされたボタンには、以前に「Google でログイン」が使用されたことを示すメッセージが表示されます。これにより、ウェブサイトで不要な重複アカウントが作成されるのを防ぐことができます。

セッション ステータスを示すために、パーソナライズされたボタンは次の方法で表示されます。

  • 1 つのセッション: Google 側のセッションは 1 つのみです。そのセッションでクライアントが承認され、ウェブサイトに対応するアカウントが存在します。

    1 つの Google アカウントの名前が表示される、パーソナライズされたボタン。

  • 複数のセッション: Google 側に複数のセッションがあります。これらのセッションはクライアントを承認します。承認は、表示されたアカウントの横にあるリスト矢印で示されます。少なくとも 1 つのセッションに、ウェブサイト上の対応するアカウントが存在する。

    リスト矢印付きのカスタマイズされたボタン。

  • セッションなし: Google 側にセッションがないか、どのセッションもクライアントを承認していません。

    パーソナライズされた情報のない [Google でログイン] ボタン。

セッション ステータスが適切であれば、ボタンの設定でパーソナライズされたボタンを表示できない場合を除き、パーソナライズされたボタンが自動的に表示されます。以下の場合は、パーソナライズ ボタンは表示されません。

  • data-type 属性は icon です。
  • data-size 属性が medium または small に設定されている。
  • data-width 属性は 200 px 未満の数値に設定されています。
  • サードパーティ Cookie がブロックされており、ボタンの FedCM バージョンが有効になっていません。

名前またはメールアドレスが長すぎてボタン内に表示できない場合は、省略記号が表示されます。

名前とメールアドレスが省略されたパーソナライズされたボタン。

Federated Credential Manager（FedCM）

ウェブ向けプライバシー サンドボックスでは、Google Identity Services とユーザーのログインに大幅な変更が導入されます。これは、カスタマイズされた [Google でログイン] ボタンに影響します。ボタンを使用してもログイン フローは影響を受けませんが、サードパーティ Cookie がブロックされている場合、リピーターにはパーソナライズされたボタンは表示されません。

Federated Credentials Management API（FedCM）ボタンフローを使用すると、ユーザーはサイトにパーソナライズされた「Google でログイン」ボタンを表示できます。デフォルトでは FedCM は無効になっていますが、1 つの属性（HTML/JavaScript）を変更することで有効にできます。FedCM ボタンのメリットは次のとおりです。

  • リピーターのエクスペリエンスの改善: ユーザーは既存のアカウントを認識できるため、リピーターのログイン プロセスが簡素化されました。この認識の向上は、クリック率（CTR）の向上につながることが実証されています。さらに、FedCM が有効になっていないボタンフローとは異なり、FedCM ボタンフローでは自動選択機能がサポートされています。Google セッションがアクティブなリピーターは、ボタンをクリックすると自動的にログインされ、アカウント選択プロンプトをスキップできます。

  • 機能の統合の強化: ワンタップと自動ログイン機能を統合し、単一の信頼できるパーティ（RP）の Google 機能ですべての連携認証情報管理（FedCM）ログインを可能にしました。FedCM ボタンフローでのユーザー操作は Chrome によって記録され、ワンタップ自動ログイン フローの 1 回限りの再確認を実行するために使用されます。これにより、すべての機能でシームレスなエクスペリエンスを実現できます。

主なユーザー ジャーニー

ユーザー ジャーニーは、次のステータスによって異なります。

  • Google ウェブサイトのセッション ステータス。ユーザー ジャーニーの開始時に、次の用語が Google セッションのさまざまなステータスを表すために使用されます。

    • Has-Google-session: Google ウェブサイトでアクティブなセッションが 1 つ以上あります。
    • No-Google-session: Google ウェブサイトにアクティブなセッションはありません。

  • ユーザー ジャーニーの開始時に、選択した Google アカウントがウェブサイトを承認したかどうか。以下の用語は、さまざまな承認ステータスを表すために使用されます。

    • 新規ユーザー: 選択したアカウントでウェブサイトが承認されていません。
    • リピーター: 選択したアカウントが以前にウェブサイトを承認している。

Has-Google-session 新規ユーザー ジャーニー

FedCM のないボタン

  1. [Google でログイン] ボタン。

    パーソナライズされた情報のない [Google でログイン] ボタン。

  2. アカウント選択ページ。

    初回セッションのアカウント選択ページ。

  3. 新しいユーザーの同意ページ。

    [Google でログイン] ボタンの同意とログイン。

  4. ユーザーが確認すると、ID トークンがウェブサイトと共有されます。

ユーザーは [別のアカウントを使用] ボタンをクリックして新しい Google セッションを追加できます。Google セッションなしのユーザー ジャーニーのセクションをご覧ください。

FedCM を使用したボタン

FedCM が有効になっている - Has-Google-session の新規ユーザー ジャーニー

フローの最後から 2 番目の画面は読み込み画面です。この画面では、ユーザーの操作なしでユーザーがログイン エンドポイントに自動的にリダイレクトされます。

Google セッションありのリピーター ジャーニー

FedCM のないボタン

  1. [Google でログイン] ボタン。

    1 つの Google アカウントの名前が表示される、パーソナライズされたボタン。

  2. アカウント選択ページ。

    Google アカウント選択ツール

  3. ユーザーが再利用アカウントを選択すると、ID トークンがウェブサイトと共有されます。

ユーザーは [別のアカウントを使用] ボタンをクリックして新しい Google セッションを追加できます。[Google セッションなし] のユーザー ジャーニーのセクションをご覧ください。

FedCM を使用したボタン

FedCM が有効になっている - Has-Google-session の復帰ユーザー ジャーニー

フローの最後から 2 番目の画面は読み込み画面です。この画面では、ユーザーの操作なしでユーザーがログイン エンドポイントに自動的にリダイレクトされます。

自動選択の「再訪ユーザー」ジャーニーで Has-Google-session

FedCM のないボタン

FedCM のない [Google でログイン] ボタンには、自動選択機能はありません。

FedCM を使用したボタン

Google セッションがアクティブなリピーターは、ボタンをクリックすると自動的に選択され、アカウント選択プロンプトをスキップできます。auto select 属性を true に設定します（HTML/JavaScript）。

FedCM と自動ログインを有効にしている - 自動ログインを使用したリピーター ユーザーのジャーニーで Has-Google-session

Google セッションなしの新規ユーザー ジャーニー

FedCM のないボタン

  1. [Google でログイン] ボタン。

    パーソナライズされた情報のない [Google でログイン] ボタン。

  2. 新しい Google セッションを追加する最初のページ。

    Google アカウントのメール アドレス

  3. 新しい Google セッションを追加する 2 つ目のページ。

    Google アカウントへのログイン

  4. 新しいユーザーの同意ページ。

    [Google でログイン] ボタンの同意とログイン。

  5. ユーザーが確認すると、ID トークンがウェブサイトと共有されます。

FedCM を使用したボタン

FedCM が有効になっている - Has-Google-session の復帰ユーザー ジャーニー

フローの最後から 2 番目の画面は読み込み画面です。この画面では、ユーザーの操作なしでユーザーがログイン エンドポイントに自動的にリダイレクトされます。

Google セッションなしのリピーター ジャーニー

FedCM のないボタン

  1. [Google でログイン] ボタン。

    パーソナライズされた情報のない [Google でログイン] ボタン。

  2. 新しい Google セッションを追加する最初のページ。

    Google アカウントのメール アドレス

  3. 新しい Google セッションを追加する 2 つ目のページ。

    Google アカウントへのログイン

  4. ユーザーが [次へ] ボタンをクリックすると、ID トークンがウェブサイトと共有されます。

FedCM を使用したボタン

FedCM が有効になっている - Has-Google-session の復帰ユーザー ジャーニー

前のセクションの一般的なキーユーザーのジャーニーは引き続き適用されます。以下は、ログイン時にお子様の Google アカウントに表示される追加のフローを示しています。

FedCM のないボタン

No-Google-session

  1. [Google でログイン] ボタン。

    パーソナライズされた情報のない [Google でログイン] ボタン。

  2. 新しいお子様の Google セッション（お子様の Google アカウントのメールアドレス）を追加する最初のページ。

    お子様の Google アカウントのメールアドレス

  3. 2 ページ目: お子様の新しい Google セッション（お子様の Google アカウントのパスワード）を追加します。

    お子様の Google アカウントのパスワード

  4. 新しいお子様の Google セッションを追加するための保護者の承認を求める最初のページ。

    保護者の承認を選択するページ

  5. 2 ページ目: 新しいお子様の Google セッションを追加するための保護者の承認を求めるページ。

    保護者の承認パスワード ページ

  6. 3 ページ目: 新しいお子様の Google セッションを追加するための保護者の承認を求めるページ。

    保護者の承認ページ

  7. お子様の Google アカウントでアプリにログインするための保護者の承認を求める最初のページ。

    保護者にログインページの承認を求める

  8. 2 ページ目: お子様の Google アカウントでアプリにログインするための保護者の承認を求めるページ。

    ログインを承認する保護者を選択するページ

  9. 3 ページ目: お子様の Google アカウントでアプリにログインするための保護者の承認を求めるページ。

    ログインページを承認する保護者の Google アカウントのパスワード

  10. アプリにお子様の Google アカウントでログインするための保護者の承認を得る最後のページ。

    お子様のログインに対する保護者の承認ページ

  11. 保護者が [続行] ボタンをクリックすると、ID トークンがウェブサイトと共有されます。

Has-Google-session

  1. [Google でログイン] ボタン。

    パーソナライズされた情報のない [Google でログイン] ボタン。

  2. アカウント選択ページ。

    お子様のアカウント ページを選択します。

  3. お子様の Google アカウントでアプリにログインするための保護者の承認を求める最初のページ。

    保護者にログインページの承認を求める

  4. 2 ページ目: お子様の Google アカウントでアプリにログインするための保護者の承認を求めるページ。

    ログインを承認する保護者を選択するページ

  5. 3 ページ目: お子様の Google アカウントでアプリにログインするための保護者の承認を求めるページ。

    ログインページを承認する保護者の Google アカウントのパスワード

  6. アプリにお子様の Google アカウントでログインするための保護者の承認を得る最後のページ。

    お子様のログインに対する保護者の承認ページ

  7. 保護者が [続行] ボタンをクリックすると、ID トークンがウェブサイトと共有されます。

FedCM を使用したボタン

FedCM が有効になっている [Google でログイン] ボタンは、現時点ではファミリー リンク アカウントに対応していません。

FedCM ボタンフローに関する追加情報

  • ウェブアプリがクロスオリジン iframe から Button API を呼び出す場合は、親フレームに allow="identity-credentials-get" 属性を追加します。詳しくは、ステップ 7 をご覧ください。

  • サイトのコンテンツ セキュリティ ポリシー（CSP）を適切に設定します。詳しくは、ステップ 8 をご覧ください。

  • Chrome のクールダウン ステータスとサードパーティのログイン設定は、FedCM ボタンフローに影響しません。ステータス（次のスクリーンショットに示す）は、ワンタップ UX にのみ影響します。

    Chrome のクールダウン ステータスとサードパーティのログイン設定は、FedCM ボタンのフローには影響しません。