[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 未満の数値に設定されています。

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

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

主なユーザー ジャーニー

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

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

    • Has-Google-session: Google ウェブサイトでアクティブなセッションが 1 つ以上あります。
    • No-Google-session: Google ウェブサイトにアクティブなセッションはありません。
  • ユーザー ジャーニーの開始時に、選択した Google アカウントがウェブサイトを承認したかどうか。以下の用語は、さまざまな承認ステータスを表すために使用されます。

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

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

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

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

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

    Has-Initial-Session アカウント選択ページ。

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

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

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

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

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

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

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

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

    Google アカウント選択ツール

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 トークンがウェブサイトと共有されます。