ブランド ガイドライン

プッシュ プロビジョニング用の Google Pay API は、アプリ内に Google Pay の機能を表示したいカード発行会社向けに設計されています。API と統合する際には、次のガイドラインに従ってください。

[Google Pay に追加] ボタン

[Google Pay に追加] ボタンは、カード発行会社のアプリから Google Pay のカード プロビジョニング フローを開始するための専用のボタンです。

サイズ

プッシュ プロビジョニングのボタンの高さと幅をレイアウトに合わせて調整します。ページに他のボタンがある場合は、Google Pay のプッシュ プロビジョニングのボタンはそれらのボタン以上の大きさにする必要があります。Google Pay のボタンを他のボタンよりも小さくしないでください。

スタイル

Google Pay のプッシュ プロビジョニングのボタンには黒と白があります。「Add to」のテキストをローカライズしたプッシュ プロビジョニングのボタンも用意されています。独自にローカライズしたテキストのボタンを作成しないでください。

白(輪郭付き)
黒い [Google Pay に追加] ボタン 白い [Google Pay に追加] ボタン 白い [Google Pay に追加] ボタン(輪郭付き)

黒いボタンは、白い背景や明るい背景でコントラストをつけるときに使用します。 暗い色の背景では黒いボタンを使わず、代わりに白いボタンを使ってください。

暗い色の背景やカラフルな背景の場合は、白いボタンを使用します。白い背景や明るい色の背景では白いボタンを使わず、代わりに黒いボタンを使ってください。

輪郭付きの白いボタンは、白い背景や明るい色の背景の場合の黒いボタンの代替となります。暗い色の背景やカラフルな背景の場合は輪郭付きの白いボタンを使わず、代わりに白いボタンを使ってください。

クリアスペース

Google Pay ボタンの上下左右には、常に 8 dp 以上のクリアスペースを確保する必要があります。クリアスペースにはグラフィックスやテキストが入らないようにしてください。

プッシュ プロビジョニングのクリアスペース

最小の幅

すべての Google Pay プッシュ プロビジョニングのボタンには、最低限 139 dp の幅が必要です。

プッシュ プロビジョニングの最低限の幅

アセット

[Google Pay に追加] ボタンは、サイズ変更が可能なビットマップ(NinePatch ファイル)として利用できるため、レイアウトに含めるのに最適です。

アセットをダウンロードする

青い背景に白いボタンがある画面 下に 1 つのカード画像とボタンがある画面 下に選択可能なカードとボタンがある画面
Google Pay のボタンは背景に合ったものを使用し、画面上部付近に配置してください。 ボタンとユーザーのクレジット カードまたはデビットカードを明確に関連付けてください。 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 アプリを開発する場合にも使用できます。

Flutter 用アセットをダウンロードする