ボタンに関するガイドライン
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
このガイドラインは、Google Wallet API を
アプリやウェブサイトです。
[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 に保存] ボタン](https://google-developers.gonglchuangl.net/static/wallet/images/branding/button-table-black.png?authuser=0&hl=ja) |
![白色の [Google Pay に保存] ボタン](https://google-developers.gonglchuangl.net/static/wallet/images/branding/Save_to_phone_white_button_6x.png?authuser=0&hl=ja) |
![輪郭線のある白色の [Google Pay に保存] ボタン](https://google-developers.gonglchuangl.net/static/wallet/images/branding/Save_to_phone_white_outline_button_6x.png?authuser=0&hl=ja) |
黒人 |
白 |
白色(輪郭付き) |
黒いボタンは、白い背景や明るい背景でコントラストをつけるときに使用します。使用不可
暗い背景に黒いボタンを配置しない。代わりに白いボタンを使用してください。 |
暗い色やカラフルな背景では白いボタンを使用します。白地の白いボタンは使用しないでください
背景が明るすぎるため代わりに、黒いボタンまたは枠線付きの白いボタンを使用してください。 |
輪郭が描かれた白いボタンは、白い背景に白いボタンや
背景はさまざまです。このボタンを暗い色やカラフルな背景で使用しないでください。使用
代わりに標準の白いボタンを使用してください。 |
クリアスペース
[Google Pay に保存] の上下左右には、常に 8 dp 以上のクリアスペースを確保する必要があります。
] ボタンを離します。クリアスペースにはグラフィックスやテキストが入らないようにしてください。
![周囲にクリアスペースを確保した黒色の [Google Pay に保存] ボタン](https://google-developers.gonglchuangl.net/static/wallet/images/branding/Save_to_phone_button_clearspace-1.png?authuser=0&hl=ja)
最小の高さ
[Google Pay に保存] ボタンはすべて、高さを 36 dp 以上にする必要があります。
![周囲にクリアスペースを確保した白色の [Google Pay に保存] ボタン](https://google-developers.gonglchuangl.net/static/wallet/images/branding/Save_to_phone_button_minheight.png?authuser=0&hl=ja)
推奨事項と禁止事項
推奨事項 |
禁止事項 |
推奨事項: [Google Pay に保存] ボタンのみを使用します。
提供します |
不可: 独自の「Google Pay に保存」を作成しない
フォント、色、ボタンの半径、ボタン内のパディングを変更しないでください。 |
推奨事項: キャンペーン全体で同じスタイルのボタンを使用する
サイトをご覧ください。背景の色が変わった場合は、ボタンの色も調整される場合があります。 |
禁止事項: [Google Pay に保存]
他のボタンよりも小さくなります。 |
推奨事項: [Google Pay に保存] ファイルのサイズを
他のボタンと同じか、それよりも大きくなります。 |
禁止事項:
説明します。たとえば、白い背景で白いボタンを使用しないでください。 |
推奨事項: 常に表示されるボタンの色を
背景とのコントラストが強くなります。 |
非推奨: ボタンの縦横比を変更しないでください。 |
推奨事項: 画像のサイズを変更するとき、ボタンの縦横比は変えない
[Google Pay に保存] ボタン。 |
|
保存されるオブジェクトの数を最大化するには、[Google Pay に保存] ボタンを表示します。
アプリ、ウェブサイト、メール内で目立つように表示します。次のベスト プラクティスに従ってください
Google からブランドの承認を受ける必要があります。
ポイントカード
[Google Pay に保存] ボタンは、ユーザー エクスペリエンスの近くに配置することをおすすめします。
現在の顧客ロイヤルティを示す、アプリ、サイト、メールでのコミュニケーション
情報です。表示される確認画面にボタンを表示すると便利です。
ユーザーがアプリやウェブサイトでポイント プログラムに登録した直後。
![[Google Pay に保存] ボタンを備えたウェブサイトのページ例](https://google-developers.gonglchuangl.net/static/wallet/images/branding/Save_To_phone_BestPractices_web.png?authuser=0&hl=ja)
ギフトカード
確認の場所に [Google Pay に保存] ボタンを配置することをおすすめします。
ユーザーがアプリやウェブサイトでギフトカードを購入した後に表示される画面。です。
グループに送られるすべてのコミュニケーションにボタンを表示し、
ギフトカードの受取人です。
オファー
[Google Pay に保存] ボタンは、画面やページの近くに配置することをおすすめします。
ユーザーがクーポンにアクセスするアプリまたはウェブサイト。より良い結果を得るために、
この特典に関するメールにボタンを記載する必要があります。
イベント チケットと乗車券
購入フローの最後、または購入フローの最後に [Google Pay に保存] ボタンを表示する
確認用のアプリの画面、ウェブページ、メールなどです。「新規顧客の獲得」目標を
ユーザーがアプリやウェブサイトでチケットにアクセスできる [Google Pay に保存] ボタン。
![[Google Pay に保存] ボタンを備えたスマートフォン版ウェブページの例](https://google-developers.gonglchuangl.net/static/wallet/images/branding/Boarding_passes.png?authuser=0&hl=ja)
搭乗券
購入フローの最後、または購入フローの最後に [Google Pay に保存] ボタンを表示する
確認用のアプリの画面、ウェブページ、メールなどです。スペースにボタンを配置して
自社のウェブサイトでの乗客によるフライトのチェックインや搭乗券の表示
関連するメールに含めることができます。
![搭乗券を表示し、[Google Pay に保存] ボタンを備えたスマートフォン版ウェブページの例](https://google-developers.gonglchuangl.net/static/wallet/images/branding/Event_and_transit_tickets.png?authuser=0&hl=ja)
テキスト内で Google Pay のプロダクト名を使用する場合
搭乗券、イベント、または交通機関をテキストでユーザーに示すことができる
チケット、ポイントカード、ギフトカード、クーポンがデバイスに保存されました。
「G」を大文字にすると「P」
常に大文字の「G」を使用する「P」は大文字の「P」です。その後に小文字で続けて
Google Pay を参照してください。「GOOGLE PAY」は大文字にしないでください。一致していない限り
UI のタイポグラフィ スタイルを変更できます。
Google Pay を略さない
「Google」という単語は必ず省略せずに書きます。[Pay] を選択します。
UI のスタイルに合わせる
「Google Pay」を設定する同じフォントと字体にします
Google の字体は模倣しないでください。
Google Pay を翻訳しない
常に「Google Pay」と記載します。表示されます。別の言語に翻訳しないでください。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-09-04 UTC。
[null,null,["最終更新日 2025-09-04 UTC。"],[[["\u003cp\u003eThese guidelines provide instructions for implementing the Google Wallet API to enable users to save passes to Google Pay within apps or websites.\u003c/p\u003e\n"],["\u003cp\u003eThe "Save to Google Pay" button must adhere to specific brand guidelines, including size, style, and clear space requirements, and should be used consistently.\u003c/p\u003e\n"],["\u003cp\u003eStrategic button placement is crucial, with recommendations for optimal placement near loyalty information, purchase confirmations, and offer displays to maximize saved objects.\u003c/p\u003e\n"],["\u003cp\u003eWhen referring to Google Pay in text, ensure to capitalize "G" and "P", avoid abbreviations and translations, and maintain consistency with your overall UI style.\u003c/p\u003e\n"]]],["The guidelines detail how to use the \"Save to Google Pay\" button within apps, websites, or emails. These buttons, available in EPS and SVG formats, must adhere to specific size, style, and clear space requirements. They must link to Google Pay API flows, be equal to or larger than other buttons, and contrast with the background. The button is available in black, white, or white with outline. The name \"Google Pay\" should be used as described and must remain untranslated. Proper button placement near loyalty information, offers, and ticket confirmations is also key.\n"],null,["# Button guidelines\n\nThese guidelines are meant to help you implement the Google Wallet API within your\napps or websites.\n\nSave to Google Pay button\n-------------------------\n\nThe **Save to Google Pay** button must call one of the Google Pay API for\nPasses flows. These flows surface a screen where users can save boarding passes, event or\ntransit tickets, loyalty cards, gift cards, and offers to their Android device. This button\ncan be used in merchant apps, websites, emails, or SMS.\n\n### Assets\n\nThe **Save to Google Pay** buttons are available as EPS and SVG files.\n\n[Download assets - EPS](/static/wallet/download-assets/Save_to_Google_Pay_eps.zip)\n[Download assets - SVG](/static/wallet/download-assets/Save_to_Google_Pay_svg.zip)\n\nAll **Save to Google Pay** buttons displayed on your site, app, or email\ncommunications must adhere to our brand guidelines, which are described on this page.\nThey include, but aren't limited to, the following:\n\n- Size relative to other similar buttons or elements of the page\n- Contrast with the background color of the surrounding area\n- Clear space\n\nThe **Save to Google Pay** buttons are available in the following languages: Arabic,\nCroatian, Czech, Danish, Dutch, English, Finnish, French, German, Indonesian, Italian,\nJapanese, Korean, Norwegian (Bokmal), Polish, Portuguese, Russian, Simplified Chinese,\nSlovak, Spanish, Swedish, Thai, Traditional Chinese, and Ukranian.\n\n### Size\n\nAdjust the height and width of the **Save to Google Pay** button to fit your layout. If\nthere are other buttons on the page, the **Save to Google Pay** button needs to be equal\nin size to or larger than these buttons. Do not make the **Save to Google Pay** button\nsmaller than other buttons.\n\n### Style\n\nThe **Save to Google Pay** buttons are available in three variations: black, white, and white\nwith a black outline. Buttons with localized versions of the text are provided.\nDo not create buttons with your own localized text.\n\n|---------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| | | |\n| Black | White | White with outline |\n| Use the black button on white or light backgrounds to provide contrast. Do not use the black button on dark backgrounds. Instead, use the white button. | Use the white button on dark or colorful backgrounds. Do not use the white button on white or light backgrounds. Instead, use the black button or the white button with an outline. | Use the white button with an outline as an alternative to the black button on white or light backgrounds. Do not use this button on dark or colorful backgrounds; use the standard white button instead. |\n\n### Clear space\n\nAlways maintain the minimum clear space of 8 dp on all sides of the **Save to Google Pay**\nbutton. Ensure that the clear space is never broken with graphics or text.\n\n### Minimum height\n\nAll **Save to Google Pay** buttons need to have a minimum height of 36 dp.\n\n### Dos and don'ts\n\n| Dos | Don'ts |\n|-----------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|\n| Do: Use only the **Save to Google Pay** buttons provided by Google. | Don't: Don't create your own **Save to Google Pay** buttons or alter the font, color, button radius, or padding within the button in any way. |\n| Do: Use the same style of button throughout your site. Button color may adapt if the color of the background changes. | Don't: Don't make the **Save to Google Pay** buttons smaller than other buttons. |\n| Do: Ensure that the size of the **Save to Google Pay** buttons remains equal to or larger than other buttons. | Don't: Don't use a button color that's similar to the background. For example, don't use the white button on a white background. |\n| Do: Ensure that you choose a button color that contrasts with your background. | Don't: Don't free scale the button. |\n| Do: Keep the button ratio the same when resizing the **Save to Google Pay** buttons. | |\n\nBest practices for button placement\n-----------------------------------\n\nTo maximize the number of saved objects, display the **Save to Google Pay** buttons\nprominently within your app, website, or email. You need to adhere to the following best\npractices in order to receive brand approval from Google.\n\n### Loyalty cards\n\nWe recommend that you place the **Save to Google Pay** button near user experiences\nin your app, site, or email communication where you display current customer loyalty\ninformation. It's also useful to display the button on confirmation screens that surface\nright after users sign up for your loyalty program in your app or website.\n\n### Gift cards\n\nWe recommend that you place the **Save to Google Pay** button on the confirmation\nscreen that surfaces after a user purchases a gift card in your app or website. It's\nalso a good idea to display the button in any email communication delivered to the\ngift card recipient.\n\n### Offers\n\nWe recommend that you place the **Save to Google Pay** button near screens or pages\nin your app or website where users access offers. For better results, it's highly recommended\nthat you include the button in any email communication about the offer.\n\n### Event and transit tickets\n\nDisplay the **Save to Google Pay** button at the end of your purchase flow or on\nconfirmation app screens, web pages, or emails. We recommend that you place the\n**Save to Google Pay** button where users access their tickets in your app or website.\n\n### Boarding passes\n\nDisplay the **Save to Google Pay** button at the end of your purchase flow or on\nconfirmation app screens, web pages, or emails. You can also display the button where\npassengers check in to their flights or view their boarding passes on your website or\napp, or include it in relevant emails.\n\nUse of the Google Pay product name in text\n------------------------------------------\n\nYou can use text to indicate to the user that their boarding pass, event or transit\nticket, loyalty card, gift card, or offer has been saved to their device.\n\n### Capitalize the letters \"G\" and \"P\"\n\nAlways use an uppercase \"G\" and an uppercase \"P\" followed by lowercase letters to\nrefer to Google Pay. Don't capitalize the full name \"GOOGLE PAY\" unless it's to match\nthe typographic style in your UI.\n\n### Don't abbreviate Google Pay\n\nAlways write out the words \"Google\" and \"Pay.\"\n\n### Match the style in your UI\n\nSet \"Google Pay\" in the same font and typographic style as the rest of the text in your UI.\nDo not mimic Google's typographic style.\n\n### Don't translate Google Pay\n\nAlways write \"Google Pay\" in English. Do not translate it to another language."]]