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