「Googleでログイン」ボタンの使用ルール｜Gロゴの色変え・自作アイコンは規約違反です

「Googleでログイン」ボタンは、Googleのブランドガイドラインに従って表示する義務があります。Gロゴのサイズや色を変えること、自作のGoogleアイコンを使うこと、ロゴを枠なしで単独使用すること——どれも規約違反です。

ソーシャルログインの実装で、ボタンの見た目を自前で作っているサイトは少なくありません。しかしGoogleのサインインボタンには、色・形・フォント・余白・ロゴの扱いまで細かい規定があり、カスタムボタンを作る場合もこの規定をすべて満たす必要があります。デザインの自由度があると思っていた部分が、実は規約で埋まっているのです。

この記事では、Googleの「Sign in with Google branding guidelines」（2026年7月7日更新の現行版）を直接確認し、色のHEX値・余白のpx値まで含めた規定の中身と、公式SDKとカスタム実装の使い分けを整理します。OAuth自体の実装手順ではなく、「見た目のルール」に絞った内容です。

結論｜公式SDKに描画させるのが最も安全

先に実務の結論です。Googleのサインインボタンには2つの用意の仕方があり、リスクの大きさがまったく違います。

ガイドラインは改訂されます（現行版も2026年7月7日更新）。公式SDKに描画させていれば追従は自動ですが、カスタムボタンは改訂のたびに自分で追従する責任を負います。迷ったらSDK描画——これがこの記事の一番大事な結論です。

Sign in with Google ブランドガイドラインとは

規定の本体は、Google IdentityのSign in with Google branding guidelinesです。サインインボタンの色・形状・フォント・余白・Gロゴの扱い・CTAテキストまで、表示に関するルールがこの1ページに集約されています。

ポイントは、これが「推奨」ではなく遵守すべき規定だという点です。カスタムボタンで実装する場合も、ここに書かれたサイズ・テキスト・色・フォント・パディング・Gロゴの条件を満たすことが求められます。ブランド資産の扱いという意味では、SNSロゴの掲載ルールと同じ発想で「公式の規定に従う部品」として扱うのが正解です。

ボタンは3テーマ｜Light・Neutral・Darkの色指定

ボタンの配色は自由に決めるものではなく、公式が定義する3テーマから選びます。HEX値まで指定されています。

ダークUIのサイトならDarkテーマ、ライトUIならLightかNeutral——選べるのはここまでで、この3テーマ以外の配色（ブランドカラーで塗ったボタンなど）は規定外です。「うちのサイトはベージュ基調だからボタンもベージュに」はできません。

形状・フォント・余白の規定

形は「長方形」と「pill（角丸カプセル型）」の2種、表示は「テキスト付きの標準モード」と「Gロゴだけのアイコンモード」の2種が、全テーマで用意されています。この組み合わせの範囲内で選ぶ分には自由です。

一方、フォントと余白は数値で固定されています。フォントはGoogle Sans Medium（Google Fontsからローカルインストールして使用）。パディングはプラットフォームごとに次のとおりです。

カスタムボタンを作る場合、CSSで再現するのはこの数値です。「だいたい同じ見た目」ではなく、規定値そのものを実装してください。

ボタンの文言ルール｜「Googleでログイン」は使える

ボタンに載せるCTAテキストとして推奨されているのは次の3種です。

• Sign in with Google｜サインイン（ログイン）用の基本形です。
• Sign up with Google｜新規登録の文脈で使います。
• Continue with Google｜ログインと登録を分けないフローで使います。

これらはローカライズが認められているため、日本語サイトで「Googleでログイン」「Googleで続行」と表記するのは問題ありません。一方で、「Google」という単語だけをボタンに置いてサインイン機能を表すことは認められていません。必ず「何をするのか＋with Google」の形にしてください。

Gロゴの禁止事項｜サイズ・色の変更は一切不可

ボタンの中の「G」ロゴには、ガイドラインで最も厳しい規定がかかっています。

Regardless of the text, you can’t change the size or color of the Google “G” logo. It must be the standard color version (the standard color gradient super G logo) and appear on a white background.
（＝テキストが何であっても、Googleの「G」ロゴのサイズや色を変更することはできない。標準カラー版（標準のカラーグラデーションのスーパーGロゴ）を使用し、白背景の上に表示しなければならない。訳は筆者による）

Google「Sign in with Google branding guidelines」

あわせて、次の使い方も明文で禁止されています。

• ロゴの単独使用｜ボタンの枠やテキストなしで、Gロゴだけを置くことは不可です。
• モノクロ化｜白黒・単色のGロゴは使えません。標準の4色版のみです。
• 色付き背景への直置き｜Gロゴを置けるのは白背景の上だけです（3テーマのボタン内では白いタイルの上に配置されます）。
• 自作アイコン・旧ロゴ｜独自に描いたGoogleアイコンや、旧デザインの「G」の使用は不可です。

デザイン上ありがちな「アイコンを全部モノトーンに統一する」処理は、Gロゴに対しては規約違反になります。SNSアイコンの一括グレースケール化と同じ落とし穴なので、フッターやログイン画面のデザインシステムを組むときは例外扱いを忘れないでください。

他社ログインボタンと並べるときの同等表示ルール

Apple・LINEなど複数のソーシャルログインを並べる場合のルールもあります。ガイドラインは、Googleのサインインボタンを他のサインイン手段と同等に目立たせること——おおよそ同じサイズ・同等の視覚的な重みで表示すること——を求めています。

つまり「メインはメール登録なのでGoogleボタンは小さく灰色で」という設計は規定に反します。ソーシャルログインを置くと決めたら、並べるボタンはすべて同格に扱うのがレイアウト設計の前提になります。

公式SDKとカスタム実装の使い分け

冒頭の結論に戻ります。Google Identity Servicesにボタンを描画させれば、テーマ・形状・文言をオプションで選ぶだけで、ここまで挙げた規定すべてに準拠したボタンが表示されます。ガイドラインが改訂されても、SDK側の更新に追従するだけです。

カスタムボタンが正当化されるのは、デザインシステムの制約で公式レンダリングが使えない場合くらいです。その場合のチェック項目は「3テーマの配色・Google Sans Medium・規定パディング・標準カラーのGロゴを白背景タイルに」の4点セットになります。なお、ログイン機能そのものの実装（認証フロー・セッション管理）はPHPで作るログインシステムの解説で扱っています。この記事はあくまで見た目の規約側です。

よくある違反パターン｜ログインUIで踏みやすい地雷

共通するのは「Googleの部品を自分のデザインに寄せようとする」方向の失敗です。ストアバッジやSNSロゴと同じく、調整するのはボタンではなく周囲のレイアウト——この原則で設計してください。

よくある質問

Q. サインインボタンを自作（カスタム実装）してもいいですか？

可能ですが、ブランドガイドラインの規定（3テーマの配色・Google Sans Medium・規定のパディング・標準カラーのGロゴを白背景に）をすべて満たす必要があります。規定を守る責任と改訂への追従責任を自分で負うことになるため、特別な事情がなければ公式SDK（Google Identity Services）にボタンを描画させるのが安全です。

Q. Gロゴの色をサイトのデザインに合わせて変えられますか？

変えられません。ガイドラインは「Gロゴのサイズ・色は変更できない。標準カラー版を白背景の上に表示する」と明記しています。モノクロ化や単色化も禁止です。アイコンを一括でモノトーン処理するデザインシステムでは、Gロゴだけ例外扱いにする必要があります。

Q. ボタンの文言を「Googleでログイン」と日本語にしてもいいですか？

問題ありません。推奨文言（Sign in with Google／Sign up with Google／Continue with Google）はローカライズが認められており、「Googleでログイン」「Googleで続行」はその日本語版にあたります。一方、「Google」という単語だけでサインイン機能を表すことは認められていません。

Q. Gロゴだけのアイコンボタンは使えますか？

公式が用意する「アイコンモード」のボタンとしてなら使えます。禁止されているのは、ボタンの枠やテキストを持たない裸のGロゴを単独で置くことです。スペースが限られる場面では、自作でロゴだけ切り出すのではなく、アイコンモードのボタンを選んでください。

Q. ダークテーマのサイトではどう表示すればいいですか？

公式のDarkテーマ（塗り#131314・枠線#8E918F・文字#E3E3E3）を使います。ダークだからといってGロゴを白抜きにしたり暗色背景に直置きしたりはできず、Gロゴは標準カラー版が白いタイルの上に載る構成のままです。3テーマの範囲で選ぶのが唯一の正解です。

Q. Appleのログインボタンと並べるときの注意はありますか？

Googleのガイドラインは、他のサインイン手段とおおよそ同じサイズ・同等の視覚的な重みで表示することを求めています。特定のボタンだけ大きくしたり、Googleボタンだけ控えめにしたりする設計は規定に反します。並べるソーシャルログインは同格にそろえるのが前提です。

まとめ

「Googleでログイン」ボタンは、見た目の細部までGoogleのブランドガイドラインで規定された部品です。配色は3テーマから・フォントはGoogle Sans Medium・余白は規定px・Gロゴは標準カラー版を白背景に——カスタムするならこの全部を守る、守り切る自信がなければ公式SDKに描画させる。判断基準はこれだけです。

ログインボタンはユーザーが最初に触れるUIであると同時に、Googleのブランド審査の対象でもあります。規定通りに置くことは制約ではなく、ユーザーに「見慣れた安全なボタン」を見せることでもあります。デザインの個性は、ボタンの外側で発揮しましょう。

※本記事は2026年7月時点のGoogle「Sign in with Google branding guidelines」（2026年7月7日更新版）の記載に基づいています。ガイドラインは改訂されるため、実装前に必ず公式の最新版を確認してください。