ブランド ガイドライン

次のガイドラインでは、ウェブサイト内で Google Pay マークを使用する方法について説明します。

Google Pay 支払いボタン

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

アセット

JavaScript の createButton() メソッドを使用すると、HTML <button> 要素を作成して CSS ルールを動的に挿入し、Google CDN から読み込まれた SVG ファイルを適用できます。

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

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

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

「Google Pay で購入」

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

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

スタイル

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

黒の Google Pay 支払いボタン 白の 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 マークのみを使用してください。

アセット

次のボタンをクリックして、Google Pay マークを SVG 形式でダウンロードします。

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

マーク

Google Pay をお支払い方法として表示する場合は、次の Google Pay マークを使用してください。

Google Pay マーク

他のブランドの場合は、マークの横に「Google Pay」とテキストで表示します。マークの輪郭の色や太さを変更しないでください。どのような方法であっても、マークの変更は認められません。Google が提供するマークのみを使用してください。

クリアスペース

Google Pay マークの上下左右には、常にクリアスペースを確保する必要があります。クリアスペースには、Google Pay マークの「G」の高さ以上のスペースが必要です。

サイズ

購入手続きで表示する他のブランド アイデンティティに合わせて高さを調整してください。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 営業日以内に届きます。