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

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

[Google Pay に保存] ボタン

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

アセット

[Google Pay に保存] ボタンは、EPS ファイルと SVG ファイルとして使用できます。

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

サイト、アプリ、メールに表示される [Google Pay に保存] ボタンはすべて、このページに記載されている Google のブランド ガイドラインに準拠する必要があります。対策の一部を紹介します。

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

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

サイズ

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

スタイル

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

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

クリアスペース

[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」は必ず英語で記載してください。他の言語に翻訳しないでください。