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

このガイドラインは、Google Wallet API を アプリやウェブサイトです。

[Google Pay に保存] ボタン

[Google Pay に保存] ボタンでは、以下のいずれかの Google Pay API を呼び出す必要があります。 パスフロー。これらのフローによって画面が表示され、ユーザーは搭乗券、イベント、 乗車券、ポイントカード、ギフトカード、クーポンを 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 に保存] ボタン
黒人 白色(輪郭付き)
黒いボタンは、白い背景や明るい背景でコントラストをつけるときに使用します。使用不可 暗い背景に黒いボタンを配置しない。代わりに白いボタンを使用してください。 暗い色やカラフルな背景では白いボタンを使用します。白地の白いボタンは使用しないでください 背景が明るすぎるため代わりに、黒いボタンまたは枠線付きの白いボタンを使用してください。 輪郭が描かれた白いボタンは、白い背景に白いボタンや 背景はさまざまです。このボタンを暗い色やカラフルな背景で使用しないでください。使用 代わりに標準の白いボタンを使用してください。

クリアスペース

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

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

最小の高さ

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

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

推奨事項と禁止事項

推奨事項 禁止事項
推奨事項: [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」

常に大文字の「G」を使用する「P」は大文字の「P」です。その後に小文字で続けて Google Pay を参照してください。「GOOGLE PAY」は大文字にしないでください。一致していない限り UI のタイポグラフィ スタイルを変更できます。

Google Pay を略さない

「Google」という単語は必ず省略せずに書きます。[Pay] を選択します。

UI のスタイルに合わせる

「Google Pay」を設定する同じフォントと字体にします Google の字体は模倣しないでください。

Google Pay を翻訳しない

常に「Google Pay」と記載します。表示されます。別の言語に翻訳しないでください。