ブランド ガイドライン

ロシアのユーザー向けの開発では、Google ウォレットがこれらの国で利用できないため、[スマートフォンに保存] ボタンを使用してください。 関連するアセットとガイドラインをご覧ください。ロシア国外のユーザー向けにアプリを開発する場合は、以下のアセットをダウンロードして、[Google ウォレットに追加] ボタンを更新してください。

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

アセット

[Google ウォレットに追加] ボタン

[Google ウォレットに追加] ボタンは、パスやカードを、アプリやウォレットに保存するようユーザーを誘導する場合に使用します。[Google ウォレットに追加] ボタンでは、Google Wallet API フローのいずれかを呼び出す必要があります。このフローによって Google ウォレット アプリが表示され、ユーザーはアプリの指示に従って、パスを Android デバイスと Google アカウントに保存できます。このボタンは、アプリ、ウェブサイト、メールで使用できます。

[Google ウォレットに追加] ボタンは、Android XML、SVG、PNG 形式で利用できます。

アセットをダウンロード - Android XML アセットをダウンロード - SVG アセットをダウンロード - PNG

[Google ウォレットで表示] ボタン

[Google ウォレットで表示] ボタンは、ユーザーをウォレットにディープリンクし、以前に保存したパスまたはカードを表示します。このボタンは、アプリ、ウェブサイト、メールで使用できます。

[Google ウォレットで表示] ボタンには、SVG 形式と PNG 形式があります。

アセットをダウンロード - SVG アセットをダウンロード - PNG

サイト、アプリ、メールに表示されるボタンはすべて、このページに記載されているブランド ガイドラインに準拠する必要があります。ガイドラインの例を以下に示します（ただしこれらに限定されません）。

• ページの他の同様のボタンや要素との相対的なサイズ
• ボタンの形状や色を変更しない
• クリアスペース

ボタンのローカライズ

ウォレットを利用できるすべての市場では、ローカライズ済みの Google ウォレット ボタンを利用できます。こうした市場のユーザー向けにアプリを開発する場合は、必ず上記のボタンを使用してください。独自のバージョンのボタンは作成しないでください。 対象の市場でローカライズ済みバージョンのボタンが用意されていない場合は、英語版のボタンを使用してください。

[Google ウォレットに追加] ボタンは、アルバニア語、アラビア語、アルメニア語、アゼルバイジャン、ボスニア語、ブルガリア語、カタロニア語、スペイン語、スペイン語、スペイン語、スペイン語、スペイン語、スペイン語、スペイン語、スペイン語、スペイン語、スペイン語、スペイン語、スペイン語、スペイン語、スペイン語、スペイン語、スペイン語、スペイン語、スペイン語、英語

ローカライズ済みの名前

ユーザーにわかりやすいように、一部の市場では、Google ウォレットのプロダクト名がローカライズされています。こうした国のユーザー向けにアプリを開発する場合は、ウェブ、メール、印刷で必ずローカライズされた名前を使用してください。独自にローカライズしたバージョンの「Google ウォレット」を作成しないでください。対象の市場が下のリストにない場合は、英語の「Google Wallet」を使用してください。

国	名前
ベラルーシ	Google Кошелек
ブラジル	Carteira do Google
チリ	Billetera de Google
チェコ	Peněženka Google
ギリシャ	Πορλοφόλι Google
香港	Google 錢包
リトアニア	Google Pinigin 鎘
ポーランド	Portfel Google
ポルトガル	Carteira da Google
ルーマニア	Portofel Google
スロバキア	Peñaženka Google
台湾	Google 錢包
トルコ	Google Cüzdan
アラブ首長国連邦	محفظة Google
ウクライナ	Google {9}аманець
米国（スペイン語） *米国で UI がスペイン語の場合は、この名前を使用してください	Billetera de Google

サイズ

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

スタイル

[Google ウォレットに追加] ボタンには、基本形と縮小形の 2 種類があります。[Google ウォレットに追加] ボタンの色は常に黒です。ボタンのローカライズ版が用意されています。独自にローカライズしたテキストのボタンは作成しないでください。

初等教育	Condensed
基本形のボタンは、白い背景と明るい背景で使用します。	縮小形のボタンは、基本形のボタン（ボタンの幅全体）を表示するスペースがない場合に使用します。

クリアスペース

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

最小の高さ

[Google ウォレットに追加] ボタンの高さは、必ず 48 dp 以上にする必要があります。

推奨事項と禁止事項

推奨事項	してはいけないこと
推奨事項: Google が提供する [Google ウォレットに追加] ボタンのみを使用します。	禁止事項: どのような方法であっても、独自の [Google ウォレットに追加] ボタンを作成したり、フォント、色、ボタンの表示範囲、ボタン内のパディングを変更したりしないでください。
推奨事項: サイト全体で同一スタイルのボタンを使用します。	禁止事項: [Google ウォレットに追加] ボタンを他のボタンよりも小さくしないでください。
推奨事項: [Google ウォレットに追加] ボタンのサイズは、他のボタンと同じか、それらよりも大きくします。	禁止事項: ボタンの色を変更しないでください。
推奨事項: [Google ウォレットに追加] ボタンのサイズを変更するときは、ボタンの縦横比を維持します。	禁止事項: ボタンの縦横比を変更しないでください。
推奨事項: 用意されているローカライズ版のボタンを使用します。	禁止事項: 独自にローカライズしたボタンを作成しないでください。

ボタンの配置に関するおすすめの方法

[Google ウォレットに追加] ボタンを、確認用のアプリ画面、ウェブページ、メールに表示します。UI 設計の指針となる以下のベスト プラクティスをご覧ください。

ポイントカード、ギフトカード、クーポン

確認画面に [Google ウォレットに追加] ボタンを表示します。また、ウェブサイトやアプリ、または関連性の高いメールにボタンを含めることもできます。

   

テキスト内で Google ウォレットの商品名を使用する場合

ポイントカードがデバイスに保存されていることをテキストでユーザーに示すことができます。

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

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

Google ウォレットを略さない

「Google」と「Wallet」の単語は必ず省略せずに書きます。

UI のスタイルに合わせる

「Google ウォレット」のフォントと字体は、他の UI のテキストと同じものにします。Google の字体は模倣しないでください。

常にローカライズされた「Google ウォレット」を使用する

「Google ウォレット」は常に、提供されたローカライズ版の呼び方で記載します。

デザイン

[Google ウォレットに追加] ボタンの高さと幅を変更するには、g:savetoandroidpay HTML タグの height フィールドと size フィールドを使用します。モバイル実装や特別な UI を必要とするケースでは、textsize=large 仕様を使用してテキストとボタンのサイズを大幅に増やすことができます。

theme を使用して、ボタンの色を設定します。次の表に、これらの設定が [Google ウォレットに追加] ボタンに与える影響を示します。

注: text 属性は非推奨です。特定のカテゴリに関係なく、ボタンは同じように表示されます。

ロゴ

Google ウォレットでは、お客様のロゴが円形にマスキングされます。

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

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

ガイドライン	Description
推奨ファイル形式	PNG
最小サイズ	660 x 660 ピクセル
画像のアスペクト比	1:1
アートワークのアスペクト比	1:1
実際のピクセルサイズ	デバイスサイズにスケーリング
ロゴの円形マスク	ロゴは円に収まるようにマスキングされます。ロゴがセーフエリアに収まるようにしてください。ロゴを事前にマスキングしないでください。余白なしで背景色を設定した四角形の中にロゴを配置します。マスキングで切り取られないように、ロゴに 15% の余白を設定する必要があります。

カードの背景色

背景色は hexBackgroundColor フィールドで設定できます。値を設定しない場合は、ロゴを分析するアルゴリズムによって主要な色が判断され、その色が背景色に使用されます。

メイン画像

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

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

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

ガイドライン	Description
推奨ファイル形式	PNG
推奨サイズ	1,032x336 ピクセル 幅の広い長方形の画像を使用します。 最善の結果を得るため、背景色の付いた画像を使用してください。
アスペクト比	3:1 以上
ディスプレイ サイズ	カードの全幅と比例高さ。

全幅画像

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

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

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

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

バーコード画像

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

バーコードの上の画像

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

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

バーコードの下の画像

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

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

モジュール

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

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

infoModuleData

InfoModuleData にはメンバーとカスタマイズ可能な情報が含まれ、展開されたビューに表示されます。このモジュールを使用して、有効期限、残りポイント、バリュー残高などの情報を保存します。

注: 情報モジュールのリストは常に 1 列で表示されます。

linksModuleData

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

ガイドライン	設定例	画像例
http: プレフィックスは、ウェブサイトまたは Google マップ内の場所に URI を割り当てる場合に使用します。このプレフィックスを使用すると、ユーザーがリンクをタッチしてウェブサイトに移動することや、Google マップで場所を表示できます。このプレフィックスを使用した場合、リンクまたはマップのアイコンがカードの説明の前に表示されます。	'uri': 'http://maps.google.com/?q=google'
	'uri': 'http://developer.google.com/wallet/'
電話番号を定義する場合は tel: プレフィックスを使用します。このプレフィックスを使用すると、ユーザーがリンクにタッチして電話をかけることができます。このプレフィックスを使用した場合、電話のアイコンがカードの説明の前に表示されます。	'uri': 'tel:[phone]'
メールアドレスを定義する場合は、mailto: プレフィックスを使用します。このプレフィックスを使用すると、ユーザーがリンクにタッチしてそのアドレスにメールを送信できます。このプレフィックスを使用した場合、メールのアイコンがカードの説明の前に表示されます。	'uri': 'mailto:[e-mail]'

見出し、ラベル、名前

見出し、ラベル、名前は頭字が大文字で表記され、各単語の先頭の文字が大文字になります。

コンテンツ ポリシー

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

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

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

注: ユーザーがアプリをインストールする必要がある場合は、ディープリンクでユーザーを Play ストア内のアプリのインストール ページに誘導してください。インストール後に適切なパスの詳細に移動してログインできるように、遅延ディープリンクを使用することをおすすめします。