ブランド ガイドライン

以下のガイドラインでは、Google Pay ブランドをウェブサイトに追加する方法について説明します。

Google Pay 支払いボタン

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

アセット

JavaScript の createButton() メソッドを使用すると、Google CDN から CSS ルールと SVG ファイルを動的に取得して、HTML の <button> 要素として挿入します。

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

  • ページの他の同様のボタンや要素との相対的なサイズ調整。ボタンのサイズは、createButton API の buttonSizeMode オプションを使用して調整できます。
  • 周辺の背景色と対照的なボタン色の使用。
  • クリアスペース（ロゴの上下左右に最低限の空白を確保すること）。

この便利な方法またはサポートされている言語がお客様のニーズに合わない場合は、Google にご連絡ください。

カード情報

カード情報オプションには、カードのブランド ネットワークとカード番号の末尾 4 桁が表示されます。詳細については、ButtonOptions をご覧ください。

「Google Pay で購入」

「Google Pay で購入」のオプションを使用すると、閲覧者のブラウザ設定に一致するサポート言語で翻訳されたボタンが表示されます。詳細については、ButtonOptions をご覧ください。

ボタンのバリエーション

「寄付」、「支払う」、「定期購入する」、「予約する」、「ご購入手続きを行う」、「注文する」、「表示する」の各ボタンが、閲覧者のブラウザ設定に一致するサポート言語で自動的に表示されます。詳細については、ButtonOptions をご覧ください。

スタイル

Google Pay 支払いボタンには、ダークとライトの 2 つのスタイルがあります。各スタイルの例については、アセット セクションをご覧ください。Google Pay のブランド名は翻訳しないでください。独自にローカライズしたテキストのボタンは作成しないでください。

コントラストを付ける場合、明るい背景にはダークボタン、暗い背景やカラフルな背景にはライトボタンを使用します。

次のツールを使用して、各ボタンの外観をプレビューしてください。

クリアスペース

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

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

例

正しいボタンの間隔
Google Pay ボタンを別のボタンの横に配置する場合は、必ず Google Pay ボタンを他のボタンと同じサイズにしてください。 常に Google Pay ボタンは、表示される背景と対照的になるものを使用してください。
ボタンサイズの調整
Google Pay ボタンのサイズを調整するときには、常に比率を維持してください。  

推奨事項と禁止事項

推奨事項 禁止事項
  • Google が提供する 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 対応マークの上下左右には、必ず大文字の 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」は必ず大文字にし、それに続く文字は小文字にしてください。ウェブサイトの字体に合わせる場合を除き、「GOOGLE PAY」のようにすべてを大文字にしないでください。マーケティング コミュニケーションでは、すべて大文字の「GOOGLE PAY」は決して使用しないでください。
Google Pay を省略しない
「Google」と「Pay」の語は必ず略さずに書きます。
ウェブサイトでスタイルを合わせる
「Google Pay」のフォントと字体は、ウェブサイトの他のテキストと同じにしてください。Google の字体は模倣しないでください。
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 ボタンをタップすると支払い情報の確認画面が表示されます。支払い情報の確認画面で顧客ができることは、お支払い方法 1 つと配送先住所の選択および確認のみです。顧客に 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 の購入フローを表します。

承認を受ける

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

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