「Google でログイン」のブランドの取り扱いガイドライン

このドキュメントでは、ウェブサイトまたはアプリに [Google でログイン] ボタンを表示する方法について説明します。アプリの確認プロセスを完了するには、ウェブサイトまたはアプリがこれらのガイドラインに準拠している必要があります。

Google Identity Services SDK は、常に最新の Google ブランド ガイドラインに準拠した [Google でログイン] ボタンをレンダリングします。これらは、ウェブサイトやアプリに [Google でログイン] ボタンを表示する場合に推奨される方法です。Google がレンダリングするボタン オプションを使用できない場合は、HTML ボタン要素をレンダリングするか、事前承認済みのブランド アセットをダウンロードするか、必要に応じてカスタムの [Google でログイン] ボタンを作成します。

HTML ボタン要素をレンダリングする

事前承認済みのブランドアイコンをダウンロードする

提供されている画像ボタンは、標準モードとアイコンモードで使用でき、次のスタイル オプションがあります。

• テーマ : ライト、ニュートラル、ダーク
• 形状 : 長方形、タブレット

テーマ	ボタン	説明
光		標準の大きなライトモードの長方形の [Google でログイン] ボタン
ダーク		標準のダークテーマの丸い [Google でログイン] ボタン

サポートされているボタンモード

カスタムの [Google でログイン] ボタンを作成する

Google Identity Services SDK、または前のセクションで説明した他のオプションを使用することを強くおすすめします。これにより、Google ユーザーが Google ブランドを簡単に識別できるようになります。ユーザーがアクション ボタンを簡単に識別できるほど、操作される可能性が高くなります。

ただし、アプリのデザインに合わせてボタンを適応させる必要がある場合は、以下のガイドラインを遵守してください。

サイズ

デバイスの種類と画面サイズに応じてボタンの大きさを変えることはできますが、Google ロゴが変形しないようにアスペクト比を維持する必要があります。

テキスト

ユーザーにボタンをクリックしてもらえるように、行動を促すフレーズとして「Sign in with Google」、「Sign up with Google」、「Continue with Google」を使用することをおすすめします。ユーザーに対し、これがアプリを使った Google アカウントへの登録ではなく、Google 認証情報を使用した、アプリへのログインまたはアプリへの登録であることを明確に示す必要があります。

色

ボタンのデフォルト状態を以下に示します。ボタンには Google の「G」の標準の色を必ず使用する必要があります。

テーマ	例
光		塗りつぶし: #FFFFFF ストローク: #747775 | 1 ピクセル | 内側 フォント: #1F1F1F | Roboto Medium | 14/20
ダーク		塗りつぶし: #131314 ストローク: #8E918F | 1px | 内部 フォント: #E3E3E3 | Roboto Medium | 14/20
どちらとも言えない		塗りつぶし: #F2F2F2 ストローク: ストロークなし フォント: #1F1F1F | Roboto Medium | 14/20

フォント

ボタンのフォントは TrueType フォントである Roboto Medium です。インストールするには、まず Roboto フォントをダウンロードし、ダウンロード バンドルを解凍します。Mac の場合は Roboto-Medium.ttf をダブルクリックして、[フォントをインストール] をクリックします。Windows の場合は、[マイ コンピュータ] > [Windows] > [フォント] フォルダにファイルをドラッグします。

パディング

Android
iOS
ウェブ（モバイルとパソコン）
リファレンス

[Sign in with Google] ボタンの Google ロゴ

テキストの有無に関係なく、Google の「G」ロゴのサイズと色は変更できません。これを標準のカラー バージョンに設定し、背景を白にする必要があります。カスタムサイズの Google ロゴを独自に作成する場合は、ダウンロード バンドルに含まれているロゴサイズを使用して調整してください。

不適切なボタンデザイン

推奨 ボタンの境界とカラーパターンには、Google Material 3 のデザイン ガイドラインを使用します。	禁止事項 Google アイコンまたは Google のロゴは、ボタンの境界線とユーザーの操作を示すテキストがない状態で使用します。
推奨 ダークモード、ライトモード、ニュートラル モードの Google アイコンには、Google ブランドカラーを使用します。	禁止事項 ボタンに Google の「G」のモノクロ バージョンを使用します。
行う ユーザー補助と視認性の向上のために、適切な色モードのボタンを選択します。	すべきでないこと 明るい色、暗い色、ニュートラル以外の色付きの背景に、Google の標準色の「G」アイコンを配置します。
行う パディングとサイズが固定された Google「G」を使用します。	禁止事項 ボタン用の独自のアイコンを作成します。
行う 必要に応じて、操作ボタンに Google の「G」のみを使用します。	禁止事項 「Google でログイン」の操作を表すボタンには、「Google」という用語のみを使用します。

Google でログインする際のブランディングに関するおすすめの方法

Google やその他のサードパーティのログイン オプションを使用してログインする

[Google でログイン] ボタンは、サードパーティのログイン オプションと少なくとも同等の視認性で表示されなければなりません。たとえば、ボタンのサイズと視覚的なウェイトはほぼ同じにする必要があります。

その他のガイドライン

追加のスコープをリクエストする場合は、ユーザーが API アクセスを必要とする機能を最初に使用する際に承認を求める、増分承認（Android、iOS、ウェブ）を使用します。

YouTube スコープをリクエストするには YouTube ボタンを使用します。

Google Play Games サービスをご利用の場合は、Google Play Games サービスのブランドの取り扱いガイドラインもご覧ください。

このドキュメントに明示的に記載されていない方法で Google ブランドを使用することは、Google の書面による事前の同意がない限り許可されていません（詳しくはサードパーティによる Google ブランドの使用に関するガイドラインをご覧ください）。