ブランド ガイドライン

このセクションでは、Google Pay アプリ内で見栄えのする画像やユーザー インターフェース要素を作成する方法について説明します。

ヒーロー画像

class.heroImage フィールドは、カード本体を横切る全幅のバナーとして表示されます。

ヒーロー画像に関するガイドライン

ユーザー インターフェースで使用するヒーロー画像の推奨事項は次のとおりです。

ガイドライン 例
推奨ファイル形式: PNG
推奨サイズは 1,032 x 336 ピクセルです。幅の広い長方形の画像を使用します。最善の結果を得るため、背景色の付いた画像を使用してください。
3:1 より広いアスペクト比。
表示サイズはカードの全幅になり、高さは比例してスケーリングされます。

全幅画像

クラスまたはオブジェクトの *.imageModulesData.mainImage フィールドは、展開されたポイントまたはクーポンで全幅画像として表示されます。

全幅画像に関するガイドライン

ユーザー インターフェースで使用する全幅画像の推奨事項は次のとおりです。

ガイドライン 例
推奨ファイル形式: PNG
幅の最小サイズは 1,860 px で、高さの最小サイズは可変です。幅の広い長方形の画像を使用します。最善の結果を得るため、背景色の付いた画像を使用してください。
可変のアスペクト比。
表示サイズはテンプレート（白い背景のカード）の全幅になります。高さは比例してスケーリングされます。
ロゴ画像と同じカラーパターンを使用します。

バーコード画像

特定の業種では、バーコードの上下に画像を表示できます。

バーコードの上の画像

ユーザー インターフェースで使用するバーコードの上の画像の推奨事項は次のとおりです。

ガイドライン 例
推奨ファイル形式: PNG  
高さは 20 dp まで（最大アスペクト比）。画像が 2 つある場合の推奨サイズは、高さが 80 ピクセル、幅が 80～780 ピクセルです。これにより、並べて配置できます。 1 つの画像が正方形で、もう 1 つの画像が四角形の場合、80 × 80 ピクセルと 780 × 80 ピクセルの画像にする必要があります。
アスペクト比に制約はありません。1 つの画像の高さと幅を最大の 20 dp にするには、20:1 のアスペクト比を使用します。 バーコードの上に 1 つの画像だけを配置する場合は、全幅（パディングを除く）を使用します。画像は 1,600 × 80 ピクセルです。
1 つの画像の最大表示サイズは、高さが 20 dp、幅が 400 dp です。  

バーコードの下の画像

ユーザー インターフェースで使用するバーコードの下の画像の推奨事項は次のとおりです。

ガイドライン 例
推奨ファイル形式: PNG  
高さは 20 dp まで（最大アスペクト比）。推奨サイズは、高さが 80 ピクセル、幅が 80～1,600 ピクセルです。 正方形の場合は、80 x 80 ピクセルにします。四角形の場合は、1,600 x 80 ピクセルにします。
アスペクト比に制約はありません。高さと幅を最大の 20 dp にする場合は、20:1 のアスペクト比を使用します。 全幅（パディングなし）にする場合は、1,600 × 80 ピクセルの画像にします。
最大表示サイズは、高さが 20 dp、幅が 400 dp です。  

モジュール

モジュールは、テンプレートの特定のセクションのフィールドをグループ化したものです。次の表に、Google Pay アプリでカードを正しく表示するために、クラスとオブジェクトに含める必要があるモジュール数のガイドラインを示します。

ガイドライン 例
クラスまたは作成するオブジェクトのいずれかで使用する imageModulesData を 1 つだけにします。
クラスまたは作成するオブジェクトのいずれかで使用する infoModuleData を 2 つまでにします。 1 つの infoModuleData で、「会員名」や「会員番号」などのユーザー アカウント固有の情報を定義します。
クラスまたは作成するオブジェクトで使用する linksModuleData URI を合計で 4 つまでにします。 クラスで 2 つの linksModuleData URI を使用します。1 つがウェブサイトの URI で、もう 1 つがヘルプセンターの電話番号などです。オブジェクトに 2 つの linksModuleData URI を使用し、ユーザー アカウント固有の URI とその付近の場所を定義します。
クラスまたは作成するオブジェクト間で使用する textModulesData フィールドを 2 つまでにします。 クラスに 1 つの textModulesData を使用してプログラムの詳細情報を定義し、オブジェクトにもう 1 つの textModulesData を使用してユーザー アカウント固有の詳細情報を定義します。

infoModuleData

InfoModuleData にはメンバーとカスタマイズ可能な情報が含まれ、展開されたビューに表示されます。有効期限、ポイントや保存金額の残高など情報は、情報モジュールに保存する必要があります。

linksModuleData

リンク モジュールには、ウェブページ、電話番号、メールアドレスへの URI が含まれます。ユーザー インターフェースで使用するリンク モジュールの推奨事項は次のとおりです。

ガイドライン 例
ウェブサイトへの URI や Google マップ内の場所を定義する場合は、http: プレフィックスを使用します。このプレフィックスを使用すると、ユーザーがリンクをタッチしてウェブサイトに移動したり、Google マップ内の場所を表示したりできます。このプレフィックスを使用した場合、リンクまたはマップのアイコンがカードの説明の前に表示されます。 'uri': 'http://maps.google.com/?q=google'

'uri': 'http://developer.google.com/pay/passes/'
電話番号を定義する場合は tel: プレフィックスを使用します。このプレフィックスを使用すると、ユーザーがリンクをタッチして電話をかけることができます。このプレフィックスを使用した場合、電話のアイコンがカードの説明の前に表示されます。 'uri': 'tel:6505555555'
メールアドレスを定義する場合は、mailto: プレフィックスを使用します。このプレフィックスを使用すると、ユーザーがリンクをタッチして、メールアドレスにメールを送信できるようになります。このプレフィックスを使用した場合、メールのアイコンがカードの説明の前に表示されます。 'uri': 'mailto:jonsmith@email.com'

見出し、ラベル、名前

見出し、ラベル、名前の各単語の最初の文字は、大文字にする必要があります（各単語の先頭文字を大文字にします）。

コンテンツ ポリシー

パス内の各フィールドのコンテンツは、Payments コンテンツ ポリシーを遵守している必要があります。クラスで参照されているウェブサイトのコンテンツも、これらのポリシーに準拠している必要があります。

Google Pay に保存ボタン

デザイン

[Google Pay に保存] ボタンの高さと幅を変更するには、g:savetoandroidpay HTML タグの height フィールドと size フィールドを使用します。textsize=large を指定すると、テキストとボタンのサイズが大幅に増加します。モバイル環境や特別な UI が必要な場合、これは便利です。

theme を使用して、ボタンの色を設定します。次の表に、これらの設定が [Google Pay に保存] ボタンに与える影響を示します。

設定 結果
theme を dark に設定
theme を light に設定

配置

開発したパスをユーザーが保存したり、利用したりできるように、すべてのコンテキスト フローに [Google Pay に保存]（S2GP）ボタンまたはリンクを配置することをおすすめします。ボタンは通常、類似する操作ボタン（[印刷] ボタンなど）の近くに配置します。

コンテキスト フローに [Google Pay に保存] ボタンを統合するおすすめの方法として、一部のパートナーで動作確認がとれている配置ポイントを以下に示します。

ポイントカード

ユーザーが Android アプリやウェブサイトで会員番号やポイントカードを参照するフローに [Google Pay に保存] ボタンを配置します。一部のパートナーは、ユーザーがアプリの登録またはログインを行った後にボタンを配置するとうまく動作することを確認しています。

ギフトカード

ユーザーがウェブサイトやアプリでギフトカードを購入した後の確認画面に [Google Pay に保存] ボタンを配置することを考慮してください。また、ギフトカードの受取人が受け取るメール、SMS、確認画面にも配置できます。

クーポン

ユーザーがクーポンにアクセスするウェブサイトやアプリ、またはクーポンの配布に使用するメールや SMS（保存リンクを使用）に [Google Pay に保存] ボタンを配置します。

チケット

ユーザーがウェブサイトやアプリでチケットを購入したときの購入フローの最後や、購入後に送信する確認メールや SMS にボタンを配置します。ユーザーがアプリやウェブサイトでチケットにアクセスするのと同じ場所に [Google Pay に保存] ボタンを配置します。

搭乗券

ウェブサイト（デスクトップまたはモバイル）やモバイルアプリでのチェックイン フローの最後にボタンを配置します。また、ユーザーがウェブサイトやモバイルアプリで搭乗券を確認する画面や、チェックイン後の確認メールや SMS にも配置できます。

ダウンロード

ユーザーがポイントカード、ギフトカード、クーポンをダウンロードできるようにリンクを用意する場合は、ディープリンクの前に Google Pay ボタンの画像を配置するとユーザーに一貫した体験を提供できます。Google Pay ボタンをダウンロードするには、[アセットをダウンロードする] をクリックします。Google Pay ボタンは、EPS または SVG ファイルとして複数の言語でご利用いただけます。

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

パートナー プラットフォーム データの配置

ユーザーが豊富な機能を備えたアプリやウェブサイトでパスを利用できるようにするため、アプリのディープリンクまたはウェブサイトをパスのクラスまたはオブジェクトの linksModuleData.* プロパティに組み込む必要があります。これにより、ユーザーは Google Pay に表示されているパスからプラットフォームに移動できます。どのように表示されるかを確認するには、パスのカテゴリのデザイン セクションをご覧ください。