ブランド ガイドライン

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

Google Pay 支払いボタン

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

アセット

サイトに表示されるすべての Google Pay 支払いボタンは、Google のブランドの取り扱いガイドラインを遵守している必要があります。このガイドラインには、たとえば次のようなものが含まれます(ただし、これらに限定されません)。

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

「Google Pay で購入」

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

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

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

「Google Pay で寄付」支払いボタンは、サイズ変更が可能なビットマップ(Nine-Patch ファイル)として利用できるため、レイアウトに含めるのに最適です。Google の非営利団体の参加資格を満たしている場合にのみ利用できます。参加資格を満たしているかどうかは、オンボーディング時にチェックされます。承認されると、統合で「Google Pay で寄付」支払いボタンを使用できるようになります。

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

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

スタイル

Google Pay 支払いボタンには、黒、白、輪郭付き白の 3 つのバリエーションがあります。それぞれのバリエーションで、「で購入」(Buy with)というテキストが付いているものと、付いていないものがあります。ローカライズした支払いボタンも用意されていますが、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 対応マークの上下左右には、必ず Super G の高さの半分(0.5x)以上のスペースを確保してください。他のブランド アイデンティティと並べる場合は、このクリアスペースがすべて等しくなるようにしてください。

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 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 の購入フローを表します。

承認を受ける

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

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