プッシュ プロビジョニング用の Google Pay API は、アプリ内に Google Pay の機能を表示したいカード発行会社向けに設計されています。API と統合する際には、次のガイドラインに従ってください。
[Google Pay に追加] ボタン
[Google Pay に追加] ボタンは、カード発行会社のアプリから Google Pay のカード プロビジョニング フローを開始するための専用のボタンです。
サイズ
プッシュ プロビジョニングのボタンの高さと幅をレイアウトに合わせて調整します。ページに他のボタンがある場合は、Google Pay のプッシュ プロビジョニングのボタンはそれらのボタン以上の大きさにする必要があります。Google Pay のボタンを他のボタンよりも小さくしないでください。
スタイル
Google Pay のプッシュ プロビジョニングのボタンには黒と白があります。「Add to」のテキストをローカライズしたプッシュ プロビジョニングのボタンも用意されています。独自にローカライズしたテキストのボタンを作成しないでください。
黒 | 白 | 白(輪郭付き) |
---|---|---|
![]() |
![]() |
![]() |
黒いボタンは、白い背景や明るい背景でコントラストをつけるときに使用します。 暗い色の背景では黒いボタンを使わず、代わりに白いボタンを使ってください。 |
暗い色の背景やカラフルな背景の場合は、白いボタンを使用します。白い背景や明るい色の背景では白いボタンを使わず、代わりに黒いボタンを使ってください。 |
輪郭付きの白いボタンは、白い背景や明るい色の背景の場合の黒いボタンの代替となります。暗い色の背景やカラフルな背景の場合は輪郭付きの白いボタンを使わず、代わりに白いボタンを使ってください。 |
クリアスペース
Google Pay ボタンの上下左右には、常に 8 dp 以上のクリアスペースを確保する必要があります。クリアスペースにはグラフィックスやテキストが入らないようにしてください。
最小の幅
すべての Google Pay プッシュ プロビジョニングのボタンには、最低限 139 dp の幅が必要です。
アセット
[Google Pay に追加] ボタンは、サイズ変更が可能なビットマップ(NinePatch ファイル)として利用できるため、レイアウトに含めるのに最適です。
![]() |
![]() |
![]() |
Google Pay のボタンは背景に合ったものを使用し、画面上部付近に配置してください。 | ボタンとユーザーのクレジット カードまたはデビットカードを明確に関連付けてください。 | Google Pay のボタンをトラフィックの多い画面で目立つように表示してください。 |
Google Pay の文中での使用
文章の中で Google Pay を支払い方法として説明したり、マーケティング コミュニケーションで Google Pay を宣伝したりできます。
![]() |
「Google Pay」をテキストで使用して、カードを追加するようユーザーに促します。 |
「G」と「P」を大文字にする
「G」と「P」は必ず大文字にし、それに続く文字は小文字にしてください。UI の字体に合わせる場合を除き、「GOOGLE PAY」のようにすべてを大文字にしないでください。マーケティング コミュニケーションでは、すべて大文字の「GOOGLE PAY」は決して使用しないでください。
Google Pay を略さない
「Google」と「Pay」の語は必ず略さずに書きます。
UI の字体に合わせる
「Google Pay」のフォントと字体は、UI の他のテキストと同じにする必要があります。Google の字体は模倣しないでください。
Google Pay を翻訳しない
「Google Pay」は必ず英語で記述する必要があります。他の言語に翻訳しないでください。
マーケティング コミュニケーションでは最初に出現する「Google Pay」に商標マークを使用する
マーケティング コミュニケーションで「Google Pay」を使用する場合、最初に出現する箇所または最も目立つ箇所に商標マーク ™ を表示する必要があります。UI で支払い方法として Google Pay を説明する場合は、商標マークを使用しないでください。
ベスト プラクティス
[Google Pay に追加] プッシュ プロビジョニングのボタンをアプリ内で目立つように表示することで、プロビジョニングされるカードの数を最大限に増やすことができます。Google からブランド承認を受けるには、以下のベスト プラクティスを実践する必要があります。
Google Pay のボタンをトラフィックの多い画面で目立つように表示する
ユーザーに Google Pay ボタンが見えるように、既存のユーザーフロー内の画面に追加します。ボタンとユーザーのクレジット カードまたはデビットカードを明確に関連付けてください。カードが表示されていない画面に Google Pay ボタンを表示しないでください。
Google Pay のボタンをアクセスしやすい画面で使用する
頻繁にアクセスのある画面でのみ Google Pay ボタンを使用してください。可能な場合は、ログイン後に初めてユーザーに表示される画面に Google Pay ボタンを表示します。ホーム画面に Google Pay ボタンを表示できない場合は、1 クリックで移動できる画面(クレジット カードまたはデビットカードのアカウントの詳細画面など)にボタンを追加するようにしてください。
Google Pay ボタンを画面上部付近に配置する
アカウントの詳細画面や多くの情報を含むほかの画面に Google Pay ボタンを表示する場合、ユーザーが見つけやすいように、Google Pay ボタンを必ず画面上部付近に配置するようにしてください。
プロモーション コールアウトを使用してユーザーにカードのプロビジョニングを促す
プロモーション コールアウトを使用すると、ユーザーが初めてログインしたときや特定の日付に Google Pay にカードを追加するようにユーザーに働きかけることができます。また、トラフィックの多い画面に Google Pay を表示しない場合は、プロモーション コールアウトを使用してください。
Google Pay ボタンを明確に特定できるようにする
複数のモバイル ウォレットのプロビジョニングをサポートする場合は、Google Pay が常に独自のボタンや有効な要素を持つようにします。Google Pay のボタンは他のモバイル ウォレットのボタンや有効な要素の横に配置できますが、Google Pay を別のモバイル ウォレットのボタンや有効な要素の中で使用することはできません。
上記の画面は、推奨される Google Pay のプッシュ プロビジョニング フローを表します。
「Add to Google Pay」の翻訳
次の表に、「Add to Google Pay」の正式な翻訳を示します。
言語 | Add to Google Pay |
---|---|
ブルガリア語 | Добавяне към Google Pay |
中国語 | 添加到 Google Pay |
クロアチア語 | Dodaj u Google Pay |
チェコ語 | Přidat do Google Pay |
デンマーク語 | Føj til Google Pay |
オランダ語 | Toevoegen aan Google Pay |
英語 | Add to Google Pay |
エストニア語 | Lisage Google Pay'sse |
フィンランド語 | Lisää Google Payhin |
フランス語 | Ajouter à Google Pay |
ドイツ語 | Zu Google Pay hinzufügen |
ギリシャ語 | Προσθήκη στο Google Pay |
ハンガリー語 | Adja hozzá: Google Pay |
イタリア語 | Aggiungi a Google Pay |
日本語 | Google Pay に追加 |
韓国語 | Google Pay 에 추가 |
ラトビア語 | Pievienot Google Pay |
リトアニア語 | Pridėkite prie Google Pay |
マレー語 | Sambungkan ke Google Pay |
ノルウェー語 | Legg til i Google Pay |
ポーランド語 | Dodaj do Google Pay |
ポルトガル語 | Adicionar ao Google Pay |
ルーマニア語 | Adaugă în Google Pay |
ロシア語 | Добавить в Google Pay |
セルビア語 | Додај у Google Pay |
スロバキア語 | Pridať do Google Pay |
スペイン語 | Agregar a Google Pay |
スウェーデン語 | Lägg till i Google Pay |
ウクライナ語 | Додати в Google Pay |
タイ語 | บันทึกเข้า Google Pay |
トルコ語 | Google Pay için tanımla |
お使いの言語がこの表にない場合は、Google Pay チームにお問い合わせください。
Flutter に関するベスト プラクティス
Flutter を使用して Android アプリを開発している場合は、上述のローカライズされた Android アセットを使用できません。代わりに、別のロケールをサポート対象として指定してから現在のロケールを取得し、それを使用して適切なアセットを取得する必要があります。
下のリンクからアセットをダウンロードして、アセット ディレクトリ内に googlepay
フォルダを置きます。次のようなコードを使用して適切なアセットを取得します。
Image.asset('assets/googlepay/${Localizations.localeOf(context).languageCode}/button.png'));
これらのアセットは、別のクロス プラットフォーム開発フレームワークを使用して Android アプリを開発する場合にも使用できます。