ブランド ガイドライン

Google Pay をアプリ内に導入する場合は、このガイドラインに従ってください。

Google Pay 支払いボタン

Google Pay の支払いボタンをタップするたびに Google Pay API が呼び出され、支払い情報の確認画面が表示されます。ユーザーはここで支払い方法を選択できます。

アセット

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

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

サイトに表示されるすべての Google Pay 支払いボタンは、たとえば次のような Google のブランドの取り扱いガイドラインに準拠している必要があります。

  • ページの他の同様のボタンや要素との相対的なサイズ調整。
  • 周辺領域の背景色との対照的な色。
  • クリアスペース。

「Google Pay で購入する」リソースは、アラビア語、ブルガリア語、カタルーニャ語、中国語、クロアチア語、チェコ語、デンマーク語、オランダ語、英語、エストニア語、フィンランド語、フランス語、ドイツ語、ギリシャ語、インドネシア語、イタリア語、日本語、韓国語、マレー語、ノルウェー語、ポーランド語、ポルトガル語、ロシア語、セルビア語、スロバキア語、スロベニア語、スペイン語、スウェーデン語、タイ語、トルコ語、ウクライナ語で利用できます。

スタイル

Google Pay 支払いボタンには、黒、白、輪郭付き白の 3 つのバリエーションがあります。それぞれのバリエーションで、「で購入」というテキストが付いているものと、付いていないものがあります。ローカライズした支払いボタンも用意されていますが、Google Pay ブランドは常に翻訳されません。独自にローカライズしたテキストのボタンは作成しないでください。

白(輪郭付き)
黒の Google Pay 支払いボタン 白の Google Pay 支払いボタン 白の Google Pay 支払いボタン(輪郭付き)

黒のボタンは、白い背景や明るい背景でコントラストをつけるときに使用します。

白のボタンは、暗い背景やカラフルな背景の場合に使用します。

輪郭付き白のボタンは、白い背景や明るい背景の場合、黒のボタンの代わりに使用します。

クリアスペース

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

Google Pay 支払いボタンのクリアスペースの例(Android)

最低限の幅

Google Pay ボタンの幅は 90 dp 以上にする必要があります。「Google Pay で購入する」支払いボタンの幅は 152 dp 以上にする必要があります。

Google Pay 支払いボタンの最小幅の図

推奨事項と禁止事項

推奨事項 禁止事項
  • Google が提供する Google Pay ボタンのみを使用します。
  • Google Pay ボタンを使用して購入手続きを開始します。
  • アプリ全体で同一スタイルのボタンを使用します。
  • Google Pay のボタンは、他のボタンと同じサイズかそれより大きくします。
  • ボタンには背景と対照的な色を選択します。
  • どのような方法であっても、独自の Google Pay ボタンを作成したり、フォント、色、ボタンの表示範囲、ボタン内のパディングを変更したりしないでください。
  • Google Pay 支払いボタンを使用して、購入手続き以外の操作を開始しないでください。
  • テキストありとテキストなしで色のバリエーションやバージョンを変えないでください。
  • Google Pay のボタンを他のボタンより小さくしないでください。
  • ボタンには、バックグラウンドに似た色を使用しないでください。たとえば、白い背景に白いボタンを使用しないでください。

Google Pay マーク

購入手続きで支払い方法として Google Pay を表示する際は、以下に示されている Google Pay マークのみを使用してください。

アセット

Google Pay マークを SVG 形式でダウンロードします。

アセットをダウンロードする
マーク
Google Pay マーク
Google Pay を支払い方法として表示する場合は、Google Pay マークを使用してください。
他のブランドの場合は、マークの横に「Google Pay」とテキストで表示します。どのような方法であってもマークの輪郭の色や太さを変更したり、マークを変更したりしないでください。Google が提供するマークのみを使用します。
クリアスペース
Google Pay マークの上下左右には、常に 8 dp 以上のクリアスペースを確保する必要があります。
Google Pay マークのクリアスペースの例
サイズ

購入手続きで表示する他のブランド アイデンティティに合わせて高さを調整してください。Google Pay マークが他のブランド アイデンティティより小さくならないようにしてください。

支払いオプションとして Google Pay を表示する場合は Google Pay マークを使用します。このマークは、購入フロー全体を通じて使用します。

推奨事項と禁止事項

推奨事項 禁止事項
  • Google が提供する Google Pay マークのみを使用します。
  • 購入手続きで支払い方法として Google Pay を示すために Google Pay マークを使用します。
  • どのような方法であっても、独自のマークを作成したり、Google Pay マークを変更したりしないでください。
  • 「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 Pay」のフォントと字体は、UI の他のテキストと同じにしてください。

確認ページやメールの領収書に支払い情報を表示する場合は、顧客が Google Pay で支払ったことを明示する必要があります。

Google Pay のおすすめの使用方法

購入手続きや支払い情報の確認画面で、顧客が支払い情報や購入内容を簡単に確認できるようにすることで、コンバージョン数を最大限に高めましょう。

おすすめの方法は次のとおりです。

Google Pay をメインの支払い方法にする

ユーザーが Google Pay を好んで使用するのは、購入手続きをすばやく済ませられるからです。そのため、Google Pay ボタンはわかりやすい場所に表示してください。また、Google Pay ボタンをデフォルトの支払い方法、または唯一の支払い方法にすることもご検討ください。

アカウントがなくても購入できるようにする

アカウントの作成は購入手続きを煩雑にし、カートの放棄につながる可能性があります。Google Pay を使用して、ログインせずに迅速に決済できるようにします。顧客にアカウントを作成してほしい場合は、購入手続きの完了後に作成できるようにします。

レジに進むときに Google Pay を使用して支払いを開始する

Google Pay ボタンをタップすると支払い情報の確認画面が表示されます。支払い情報の確認画面で顧客ができることは、支払い方法の選択と確認のみです。商品アイテムのサイズ、色、数量、ギフト メッセージの追加オプション、プロモーション コードの適用、商品アイテムごとに異なる配送日数や配送先といったその他の必須情報は、顧客が Google Pay ボタンを選択する画面を表示する前にすべて取得しておく必要があります。顧客から取得できなかった必須情報がある場合は、支払い情報の確認画面を表示する前にリアルタイムのフィードバックを提示して、情報が不足している旨を顧客に知らせます。

レジに進むときの画面に加えて商品詳細ページにも Google Pay ボタンを追加する

単一の商品アイテムの購入手続きをすばやく行えるように、顧客が個々の商品アイテムを商品詳細ページから直接購入できるようにします。顧客がこの方法で購入する場合は、ショッピング カートに入っている他の商品アイテムを除外する必要があります。これは、顧客が支払い情報の確認画面で確認できるのが支払い情報と配送情報のみであるためです。

確認ページと領収書に Google Pay を含める

確認ページやメールでの領収書に支払い情報を表示する場合は、顧客が Google Pay で支払ったことを明示し、他の支払い方法の表示と同様に Google Pay が一貫して表示されていることを確認してください。口座番号全桁、有効期限、その他の支払い方法の詳細情報は表示しないでください。お支払い方法を識別する場合は、Google Pay API から返された説明文を必ず使用してください。

例を次にいくつか挙げます:

  • 「ネットワーク •••• 1234 は Google Pay で支払いました」、「ネットワーク •••• 1234(Google Pay)」
  • 「Google Pay(ネットワーク •••• 1234)、「PayPal abc...d@gmail.com(Google Pay)」
  • 「お支払い方法: Google Pay」、「Google Pay で支払いました」

これらの画面は、ショッピング カートで推奨される Google Pay のフローを表します。

承認を受ける

Google Pay API を統合したら、プロダクション アクセスを得るために、UI 内で Google Pay を表示または参照するすべての場所について承認を受ける必要があります。

承認を申請する方法

統合のチェックリストを完成させて、アプリとの統合内容を送信し、審査を受けます。承認またはフィードバックは 1 営業日以内に届きます。