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

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

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

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

Google では、[Google でログイン] ボタンの外観をカスタマイズできる HTML コンフィギュレータを用意しています。ウェブサイトにボタンをレンダリングする HTML と CSS のスニペットをダウンロードできます。

HTML ボタン要素を生成する

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

カスタム画像ボタンを使用する代わりに、すべてのプラットフォームで PNG 形式と SVG 形式で提供されている、事前承認済みの [Google でログイン] ボタンをダウンロードできます。

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

• テーマ : ライト、ニュートラル、ダーク
• 形状 : 長方形、錠剤

以下に 2 つの例を示します。

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

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

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

光
ダーク
どちらとも言えない

注: SVG ファイルには Roboto フォントが必要です。SVG 形式を使用すると、アプリまたはウェブサイトの言語に合わせて [Google でログイン] のテキストを編集することもできます。

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

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

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

サイズ

デバイスの種類と画面サイズに応じてボタンの大きさを変えることはできますが、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 | 1 ピクセル | 内側 フォント: #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 ブランドの使用に関するガイドラインをご覧ください）。