ログインのブランドの取り扱いガイドライン

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

Google ログインを基本的な profile または email スコープとともに使用し、モバイルアプリまたはウェブアプリに次の標準ボタンを組み込みます。

スタイル ボタン 画像ファイル
浅い眠り

PNG、SVG、EPS、Sketch 形式のログインボタンが多く含まれています。基本状態、マウスオーバー状態、押下状態が含まれます。

濃い

ダウンロードには Sketch、SVG、EPS ファイルが含まれているので、「Sign in with」や「Sign in」のテキストを翻訳できます。これらのファイルには Roboto フォントが必要です。

追加のスコープをリクエストする場合は、増分認証(AndroidiOSウェブ)でリクエストします。これにより、ユーザーが API アクセスを必要とする機能の使用を開始したときにのみ、承認を求めるプロンプトが表示されます。

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

Google Play ゲームサービスを使用している場合は、Google Play ゲームサービスのブランドの取り扱いガイドラインもご覧ください。

Google ログインとサードパーティのログイン オプション

同等の視認性

Google ログインボタンは、少なくともサードパーティのログイン オプションと同じくらい目立つように表示する必要があります。たとえば、ボタンのサイズはほぼ同じで、視覚的重みは類似している必要があります。

自分のアプリのスタイルに合わせる

標準の Google ログインボタンを使用すると、Google ユーザーが Google のオプションをすぐに特定できるため、使用することを強くおすすめします。アプリのデザインに合わせてボタンを変更する必要がある場合や、「ログイン」または「ログイン」というテキストを翻訳する必要がある場合は、以下のガイドラインを遵守してください。

サイズ

ボタンは、さまざまなデバイスや画面サイズに合わせて必要に応じて拡大縮小できますが、Google ロゴが引き伸ばされないように、アスペクト比を維持する必要があります。

Text

ユーザーにボタンのクリックを促すには、行動を促すフレーズのテキスト「Google でログイン」または「Google で登録」をおすすめします。ユーザーがアプリにログインしていること、または Google アカウントの認証情報を登録していること(アプリ上の Google アカウントの登録や登録ではない)を明確にしておく必要があります。

「Google」

「Google」という単語を単独で使用できます。操作の内容を明確にするために隣接するテキストを伴う場合は例を確認してください。

ログインするアカウント:

カラー

青い背景の Google ログインボタン Google ログインボタン(白い背景)

押されていないライトボタンの色は、#FFFFFF(白)です。押されていない暗い(青)ボタンの色は #4285F4 です。ボタンの背景は青または白のいずれかですが、白色のタイルには常に標準の色「Google」が含まれます。

フォント

ボタンのフォントは Roboto Medium(TrueType フォント)です。インストールするには、まず Roboto フォントをダウンロードし、ダウンロード バンドルを解凍します。Mac の場合は、Roboto-Medium.ttf をダブルクリックして、[フォントをインストール] をクリックするだけです。Windows の場合、ファイルを「マイ パソコン」> "Windows" > "Fonts" フォルダにドラッグします。独自のスタイルと一致させる場合を除いて、他のフォントをボタンで使用しないでください。

カスタムのログインボタンを使用するウェブサイトの場合、Google Fonts から Roboto フォントを読み込むことができます。

パディング

テキストの左と右のパディングは 8 dp にする必要があります。ロゴは 18 dp、ロゴとボタンテキストの間に 24 dp の間隔が必要です。

テキストの周囲にパディングを追加するなど、ボタンの要素のサイズを示します。

「Google でログイン」ボタンの Google ロゴ

テキストにかかわらず、Google の「G」ロゴのサイズや色を変更することはできません。標準のカラー バージョンで、白い背景に表示されている必要があります。独自のカスタムサイズの Google ロゴを作成する必要がある場合は、ダウンロード バンドルに含まれているロゴサイズから始めてください。

ボタンのデザインが不適切

Google のアイコンやロゴを、ボタンの境界や、ユーザー操作を示すテキストがない状態で単独で使用しないでください。
Google アイコンを単独で Google ログインを表す目的で使用しないでください。
Google のダーク バージョンまたはライト バージョン「G」は使用しないでください。
Google の標準の背景色である「G」を色付きの背景に配置しないでください。
ボタンに独自のアイコンは作成しないでください。
Google アイコンが付いていない「Google」という言葉だけをボタン内で使用しないでください。

このドキュメントで明示されていない方法で Google ブランドを使用することは、Google からの書面による事前の同意なしに行うことはできません(詳しくは、サードパーティによる Google ブランドの使用に関するガイドラインをご覧ください)。