基本的な profile
または email
スコープで Google ログインを使用し、モバイルアプリまたはウェブアプリに次の標準ボタンを組み込みます。
スタイル | ボタン | 画像ファイル |
---|---|---|
ライト |
![]() |
PNG、SVG、EPS、Sketch 形式の、さまざまな解像度のログインボタンを用意しています。それぞれのボタンには、基本状態、カーソルを合わせた状態、ボタンを押した状態があります。 |
ダーク |
![]() |
ダウンロードしたファイルには、「Sign in with」や「Sign in」のテキストを他言語に翻訳できるよう、Sketch、SVG、EPS ファイルも含まれています。こうしたファイルでは Roboto フォントが必要になります。
追加のスコープをリクエストする場合は、ユーザーが API アクセスを必要とする機能を最初に使用する際に承認を求める、増分承認(Android、iOS、ウェブ)を使用します。
YouTube スコープをリクエストするには YouTube ボタンを使用します。
Google Play ゲームサービスをご利用の場合は、Google Play ゲームサービスのブランドの取り扱いガイドラインもご覧ください。
Google ログインとサードパーティのログイン オプション
視認性の高さは同等に
Google ログインボタンは、サードパーティのログイン オプションと少なくとも同等の視認性で表示されなければなりません。たとえば、ボタンのサイズと視覚的なウェイトはほぼ同じにする必要があります。
自身のアプリのスタイルに合わせる
Google ユーザーが Google のオプションをすばやく識別できるように、ログインボタンには標準の Google ログインボタンを使用することを強くおすすめします。自身のアプリのデザインに合うようにボタンを調整したり、「Sign in with」または「Sign in」のテキストを翻訳したりする必要がある場合は、以下のガイドラインに従ってください。
サイズ
デバイスの種類と画面サイズに応じてボタンの大きさを変えることはできますが、Google ロゴが変形しないようにアスペクト比を維持する必要があります。
テキスト
ユーザーにボタンをクリックしてもらえるように、行動を促すフレーズとして「Sign in with Google」または「Sign up with Google」を使用することをおすすめします。ユーザーに対し、これがアプリを使った Google アカウントへの登録ではなく、Google 認証情報を使用した、アプリへのログインまたはアプリへの登録であることを明確に示す必要があります。
「Google」テキスト
操作内容を明確に示すテキストを隣接させる場合に限り、「Google」という単語を単独でボタンに表示させることができます。例を以下に示します。
ログインするアカウントの選択:
色


押されていないライトボタンの色は #FFFFFF(白)です。押されていないダーク(青)ボタンの色は #4285F4 です。ボタンの背景は青または白にできますが、ボタンには白いタイル上に標準色で Google の「G」を常に表示させる必要があります。
フォント
ボタンのフォントは、TrueType フォントの Roboto Medium です。これをインストールするには、Roboto フォントをダウンロードして、ダウンロード バンドルを解凍します。Mac の場合は Roboto-Medium.ttf をダブルクリックして、[フォントをインストール] をクリックします。Windows の場合は、[マイ コンピュータ] > [Windows] > [フォント] フォルダにファイルをドラッグします。自身のアプリのスタイルに合わせるに示す方法をとらない限り、ボタンには他のフォントを使用しないでください。
カスタム ログインボタンを使用するウェブサイトでは、Google Fonts から Roboto フォントを読み込むことができます。
パディング
テキストの左右へのパディングは 8 dp にします。ロゴは 18 dp にし、ロゴとボタンテキストの間隔は 24 dp にします。

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

不適切なボタンデザイン
![]() ![]() |
Google アイコンまたは Google のロゴは、ボタンの境界線とユーザーの操作を示すテキストがない状態では使用しないでください。 |
![]() ![]() |
Google アイコンを単独で使用して、Google へのログインを表すことはできません。 |
![]() ![]() |
Google の「G」のダーク バージョンまたはライト バージョンは使用しないでください。 |
![]() |
Google の標準色の「G」アイコンを色付きの背景の上に配置しないでください。 |
![]() |
ボタン用に独自のアイコンを作成しないでください。 |
![]() ![]() |
「Google」という文字を、Google アイコンのないボタンに単独で表示させることはできません。 |
このドキュメントに明示的に記載されていない方法で Google ブランドを使用することは、Google の書面による事前の同意がない限り許可されていません(詳しくはサードパーティによる Google ブランドの使用に関するガイドラインをご覧ください)。