このページでは、[Google でログイン] ボタンのユーザー エクスペリエンス（UX）について説明します。
ボタンのレンダリング
パーソナライズされたボタンには、ウェブサイトを承認した最初の Google セッションのプロフィール情報が表示されます。承認済みの Google セッションには、以前に「Google でログイン」を使用してログインしたウェブサイト上の対応するアカウントがあります。
パーソナライズされたボタンが表示されている場合、ユーザーは次のことを認識します。
- 有効な Google セッションが 1 つ以上ある。
- ウェブサイトに該当するアカウントがある。
パーソナライズされたボタンを使用すると、ユーザーがボタンをクリックする前に、Google 側とウェブサイト側の両方でセッションのステータスをすばやく確認できます。これは、ウェブサイトにアクセスする頻度が低いエンドユーザーにとって特に便利です。アカウントが作成されたかどうか、またその方法を忘れてしまう可能性があります。カスタマイズされたボタンは、以前に「Google でログイン」が使用されたことをユーザーに知らせます。これにより、ウェブサイトでの不要な重複アカウントの作成を防ぐことができます。
セッションのステータスを示すため、パーソナライズされたボタンは次のように表示されます。
1 つのセッション: Google 側には 1 つのセッションしかありません。そのセッションでクライアントが承認され、ウェブサイトに対応するアカウントが存在する。
複数のセッション: Google 側で複数のセッションが発生しています。これらのセッションでクライアントが承認されます。承認されたアカウントの横には、リストの矢印が表示されます。少なくとも 1 つのセッションがウェブサイト上のアカウントに対応している。
セッションなし: Google 側でセッションがないか、セッションのいずれもクライアントをまだ承認していません。
セッションのステータスが適切な場合、パーソナライズされたボタンは自動的に表示されます。ただし、ボタンの設定でパーソナライズされたボタンの表示が許可されていない場合は除きます。パーソナライズされたボタンは、次の場合には表示されません。
data-type属性はiconです。data-size属性がmediumまたはsmallに設定されている。data-width属性は 200 ピクセルより小さい数値に設定されています。- サードパーティ Cookie がブロックされ、ボタンの FedCM バージョンが有効になっていない。
名前やメールアドレスが長すぎてボタン内に表示できない場合は、省略記号で省略されます。
Federated Credential Manager（FedCM）
ウェブ向けプライバシー サンドボックスでは、Google Identity Services とユーザーのログインに大幅な変更が導入されています。[Google でログイン] のパーソナライズされたボタンに影響します。ボタンを使用してもログイン フローには影響しませんが、サードパーティの Cookie がブロックされている場合、再訪問ユーザーにはパーソナライズされたボタンが表示されません。
Federated Credentials Management API（FedCM）ボタンフローを使用すると、ユーザーはサイトでパーソナライズされた [Google でログイン] ボタンを表示できます。デフォルトでは FedCM は無効になっていますが、1 つの属性（HTML/JavaScript）を変更することで FedCM を有効にできます。FedCM ボタンのメリットは次のとおりです。
リピーターのユーザー エクスペリエンスの向上: ユーザーが既存のアカウントを認識できるため、リピーターのログイン プロセスが効率化されます。この認識の向上により、クリック率（CTR）が向上することが証明されています。また、FedCM が有効になっていないボタンフローとは異なり、FedCM ボタンフローは自動選択機能をサポートしています。アクティブな Google セッションがあるリピーターは、ボタンをクリックすると自動的にログインし、Account Chooser のプロンプトをバイパスします。
機能統合の強化: ワンタップと自動ログインの機能を統合し、単一の証明書利用者（RP）からすべての Federated Credential Management（FedCM）の「Google でログイン」機能を連携して動作させることができるようになりました。FedCM ボタンフローでのユーザー操作は、ワンタップ自動ログイン フローの 1 回限りの再確認を完了するために Chrome によって記録され、尊重されます。これにより、すべての機能でシームレスなエクスペリエンスが実現します。
主なユーザー ジャーニー
ユーザー ジャーニーは、次のステータスによって異なります。
Google ウェブサイトでのセッションのステータス。ユーザー ジャーニーの開始時に Google セッションのさまざまなステータスを示すために、次の用語が使用されます。
- Has-Google-session: Google ウェブサイトにアクティブなセッションが 1 つ以上あります。
- No-Google-session: Google のウェブサイトでアクティブなセッションはありません。
ユーザー ジャーニーの開始時に、選択した Google アカウントでウェブサイトが承認されているかどうか。承認ステータスを示すために、次の用語が使用されます。
- 新規ユーザー: 選択したアカウントがウェブサイトを承認していません。
- リピーター: 選択したアカウントは、以前にお客様のウェブサイトを承認しています。
Google セッションがある新規ユーザーのジャーニー
FedCM を使用しないボタン
[Google でログイン] ボタン。
アカウント選択ページ。
新しいユーザーの同意ページ。
![[Google でログイン] ボタンの同意とログイン。](https://developers.google.com/static/identity/gsi/web/images/sign-in-dialog-box-oauth.png?hl=ja)
ユーザーが確認すると、ID トークンがウェブサイトと共有されます。
ユーザーは [別のアカウントを使用] ボタンをクリックして新しい Google セッションを追加できます。Google セッションなしのユーザー ジャーニーのセクションを参照してください。
FedCM を使用するボタン
フローの最後から 2 番目の画面は読み込み画面です。この画面では、ユーザーの操作なしで、ユーザーが自動的にログイン エンドポイントにリダイレクトされます。
Google セッションがあるリピーターのユーザー ジャーニー
FedCM を使用しないボタン
[Google でログイン] ボタン。
アカウント選択ページ。
ユーザーが再利用するアカウントを選択すると、ID トークンがウェブサイトと共有されます。
ユーザーは、[別のアカウントを使用] ボタンをクリックして新しい Google セッションを追加できます。ユーザー ジャーニーの「Google セッションなし」のセクションを参照してください。
FedCM を使用するボタン
フローの最後から 2 番目の画面は読み込み画面です。この画面では、ユーザーの操作なしで、ユーザーが自動的にログイン エンドポイントにリダイレクトされます。
Has-Google-session（自動選択でリピーターのユーザー ジャーニー）
FedCM を使用しないボタン
FedCM を使用しない [Google でログイン] ボタンには、自動選択機能がありません。
FedCM を使用するボタン
アクティブな Google セッションがあるリピーター ユーザーは、ボタンをクリックすると自動的に選択され、Account Chooser のプロンプトは表示されません。auto select 属性を true に設定します（HTML/JavaScript）。
Google セッションなしの新規ユーザーのジャーニー
FedCM を使用しないボタン
[Google でログイン] ボタン。
新しい Google セッションを追加する最初のページ。
新しい Google セッションを追加する 2 ページ目。
新しいユーザーの同意ページ。
ユーザーが確認すると、ID トークンがウェブサイトと共有されます。
FedCM を使用するボタン
フローの最後から 2 番目の画面は読み込み画面です。この画面では、ユーザーの操作なしで、ユーザーが自動的にログイン エンドポイントにリダイレクトされます。
Google セッションのないリピーターのジャーニー
FedCM を使用しないボタン
[Google でログイン] ボタン。
新しい Google セッションを追加する最初のページ。
新しい Google セッションを追加する 2 ページ目。
ユーザーが [次へ] ボタンをクリックすると、ID トークンがウェブサイトと共有されます。
FedCM を使用するボタン
ファミリー リンク アカウントの主なユーザー ジャーニー
前のセクションの一般的なキー ユーザー ジャーニーは引き続き適用されます。以下は、お子様の Google アカウントでログインする際に表示される追加のフローを示しています。
FedCM を使用しないボタン
No-Google-session
[Google でログイン] ボタン。
新しいお子様の Google セッション（お子様の Google アカウントのメールアドレス）を追加する最初のページ。
新しいお子様の Google セッション（お子様の Google アカウントのパスワード）を追加する 2 ページ目。
新しいお子様の Google セッションを追加するために保護者の承認を得る最初のページ。
新しいお子様の Google セッションを追加するために保護者の承認を得るための 2 ページ目。
新しいお子様の Google セッションを追加するために保護者の承認を得るための 3 ページ目。
お子様の Google アカウントでアプリにログインする際に、保護者の承認を得るための最初のページ。
お子様の Google アカウントをアプリにログインさせるための保護者の承認を得るための 2 ページ目。
お子様の Google アカウントをアプリにログインさせるために保護者の承認を得るための 3 ページ目。
お子様の Google アカウントをアプリにログインさせるための保護者の承認を得るための最終ページ。
保護者が [続行] ボタンをクリックすると、ID トークンがウェブサイトと共有されます。
Has-Google-session
[Google でログイン] ボタン。
アカウント選択ページ。
お子様の Google アカウントでアプリにログインする際に、保護者の承認を得るための最初のページ。
お子様の Google アカウントをアプリにログインさせるための保護者の承認を得るための 2 ページ目。
お子様の Google アカウントをアプリにログインさせるために保護者の承認を得るための 3 ページ目。
お子様の Google アカウントをアプリにログインさせるための保護者の承認を得るための最終ページ。
保護者が [続行] ボタンをクリックすると、ID トークンがウェブサイトと共有されます。
FedCM を使用するボタン
現時点では、FedCM が有効になっている [Google でログイン] ボタンはファミリー リンクのアカウントに対応していません。
