ボタンに関するガイドライン

以下のガイドラインは、アプリやウェブサイトで Google Pay API for Passes を実装する際に役立ちます。

Google Pay に保存ボタン

[Google Pay に保存] ボタンが押された場合は、Google Pay API for Passes のいずれかのフローを呼び出す必要があります。これらのフローが呼び出されると画面が表示され、そこでユーザーは搭乗券、イベント チケット、乗車券、ポイントカード、ギフトカード、クーポンを Android デバイスに保存できます。このボタンは、販売者のアプリ、ウェブサイト、メール、SMS で使用できます。

アセット

[Google Pay に保存] ボタンは EPS と SVG の 2 種類のファイルで提供されています。

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

サイト、アプリ、メールに表示される [Google Pay に保存] ボタンはすべて、このページに記載されている Google のブランド ガイドラインに準拠する必要があります。ガイドラインには次のものがあります(ただしこれらに限定されません)。

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

[Google Pay に保存] ボタンは、アラビア語、クロアチア語、チェコ語、デンマーク語、オランダ語、英語、フィンランド語、フランス語、ドイツ語、インドネシア語、イタリア語、日本語、韓国語、ノルウェー語(ブークモール)、ポーランド語、ポルトガル語、ロシア語、簡体字中国語、スロバキア語、スペイン語、スウェーデン語、タイ語、繁体字中国語、ウクライナ語で提供されています。

サイズ

[Google Pay に保存] ボタンの高さと幅はレイアウトに合わせて調整します。ページに他のボタンがある場合は、[Google Pay に保存] ボタンのサイズはそれらのボタンと同じか、それらよりも大きくする必要があります。[Google Pay に保存] ボタンを他のボタンよりも小さくしないでください。

スタイル

[Google Pay に保存] ボタンには、黒、白、黒輪郭付き白の 3 つのバリエーションがあります。テキストがローカライズされているボタンも用意されています。独自にローカライズしたテキストのボタンは作成しないでください。

黒色の [Google Pay に保存] ボタン 白色の [Google Pay に保存] ボタン 輪郭線のある白色の [Google Pay に保存] ボタン
輪郭付き白
黒いボタンは、白い背景や明るい背景でコントラストをつけるときに使用します。暗い色の背景では黒いボタンを使わず、代わりに白いボタンを使ってください。 暗い色の背景やカラフルな背景の場合は、白いボタンを使用します。白い背景や明るい色の背景では白いボタンを使わず、代わりに黒いボタンまたは輪郭付きの白いボタンを使ってください。 輪郭付きの白いボタンは、白い背景や明るい色の背景の場合の黒いボタンの代替となります。暗い色の背景やカラフルな背景の場合はこのボタンを使用せず、代わりに標準の白いボタンを使用します。

クリアスペース

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

周囲にクリアスペースを確保した黒色の [Google Pay に保存] ボタン

最小の高さ

[Google Pay に保存] ボタンはすべて、高さを 36 dp 以上にする必要があります。

周囲にクリアスペースを確保した白色の [Google Pay に保存] ボタン

推奨事項と禁止事項

推奨事項 禁止事項
推奨事項: Google が提供する [Google Pay に保存] ボタンのみを使用します。 禁止事項: どのような方法であっても、独自の [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 のプロダクト名を使用する場合

搭乗券、イベント チケット、乗車券、ポイントカード、ギフトカード、クーポンがデバイスに保存されていることをテキストでユーザーに示すことができます。

「G」と「P」を大文字にする

Google Pay に言及する場合は、「G」と「P」は必ず大文字にし、それに続く文字は小文字にしてください。UI の字体に合わせる場合を除き、「GOOGLE PAY」のようにすべてを大文字にしないでください。

Google Pay の短縮形を使用しない

「Google」と「Pay」の語は必ず略さずに書きます。

UI の字体に合わせる

「Google Pay」のフォントと字体は、UI の他のテキストと同じにしてください。Google の字体は模倣しないでください。

Google Pay を翻訳しない

「Google Pay」は必ず英語で記述してください。他の言語に翻訳しないでください。