[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 ピクセル未満の数値に設定されている。

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

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

主なユーザー ジャーニー

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

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

    • Has-Google-session: Google ウェブサイトで少なくとも 1 つのアクティブなセッションがある。
    • Google セッションなし: Google ウェブサイトにアクティブなセッションがない。

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

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

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

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

    「Google でログイン」と表示されたボタン（カスタマイズされた情報なし）。

  2. Account Chooser ページ。

    Has-Initial-Session Account Chooser ページあり。

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

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

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

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

Google セッションのリピーター ユーザー ジャーニーがある

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

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

  2. Account Chooser ページ。

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