ブランド ガイドライン

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

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

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

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

アセット

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

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

サイト、アプリ、メールに表示される [Google ウォレットに追加] ボタンはすべて、このページに記載されているブランド ガイドラインを遵守している必要があります。これらのガイドラインの例を以下に示します(ただし、これらに限定されません)。

  • ページの他の同様のボタンや要素との相対的なサイズ
  • ボタンの形状と色は変更できません
  • クリアスペース

ボタンのローカライズ

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

全アセットの再ビルドが必要

ローカライズされた名前

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

名前
ベラルーシ Google Кошелек
ブラジル Google の Carteira do do
チリ Google 請求書
チェコ Google でのお支払い
ギリシャ
香港 Google 錢包
リトアニア Google Piniginő
ポーランド Google のポートフォリオを作成する
ポルトガル Google の Carteira da Google
ルーマニア Portofel Google
スロバキア ペナジャッカ Google
台湾 Google 錢包
トルコ Google Cüzdan
UAE محفظة Google
ウクライナ Google gcrаманець
米国(スペイン語)
*UI がスペイン語の場合は、米国でこの名前を使用してください
Google 請求書

サイズ

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

スタイル

[Google ウォレットに追加] ボタンには、プライマリとコンデンスの 2 つのバリエーションがあります。[Google ウォレットに追加] ボタンは黒のみで、ボタンのローカライズ版が用意されています。独自にローカライズしたテキストのボタンは作成しないでください。

プライマリ Condensed
Google ウォレットへのメインの追加ボタン 短縮型 Google ウォレットに追加ボタン
白色と明るい背景ではメインのボタンを使ってください。 プライマリまたは全幅に対して十分なスペースがない場合は、短縮ボタンを使用します。

クリアスペース

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

[Google ウォレットに追加] ボタンの左右には、それぞれ 8 dp のスペースが必要です。

最小の高さ

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

[Google ウォレットに追加] ボタンの高さは 48 dp 以上でなければなりません。

推奨事項と禁止事項

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

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

確認アプリ画面、ウェブページ、メールに [Google ウォレットに追加] ボタンを表示する。UI の設計にあたっては、以下のベスト プラクティスを参考にしてください。

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

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

ギフトカード     コーヒーのポイントカード

テキスト内での Google ウォレットの商品名の使用

テキストを使用して、ポイントカードがデバイスに保存されていることをユーザーに知らせることができます。

「G」および「W」の文字を大文字にします。

Google ウォレットを参照するときは、常に大文字の「G」と小文字の「W」を使用します。UI の字体に合わせる場合を除き、フルネームの「Google ウォレット」は大文字にしないでください。

Google ウォレットは省略しないでください

常に「Google」と「ウォレット」という単語を書き留めます。

UI のスタイルに合わせる

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

ローカライズされたバージョンの「Google ウォレット」を必ず使用してください

ローカライズされたコピーには、必ず「Google ウォレット」と記入してください。

デザイン

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

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

メイン画像

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

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

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

ガイドライン 説明
使用するファイル形式 PNG
推奨サイズ

1032x336 ピクセル

幅の広い長方形の画像を使用します。

最善の結果を得るため、背景色の付いた画像を使用してください。

アスペクト比 3:1 以上
ディスプレイ サイズ

カードの全幅と比例した高さ。

ディスプレイ サイズには 3:1 以上のアスペクト比を使用してください。

全幅画像

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

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

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

ガイドライン 説明
使用するファイル形式 PNG
最小サイズ

幅 1, 860 px、高さ可変

幅の広い長方形の画像を使用します。

最善の結果を得るため、背景色の付いた画像を使用してください。

アスペクト比 変数
ディスプレイ サイズ

テンプレートの全幅と比例した高さ。

ディスプレイ サイズには 3:1 以上のアスペクト比を使用してください。
ロゴと同じカラーパターンを使用します。

バーコード画像

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

バーコードの上の画像

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

ガイドライン 説明
使用するファイル形式 PNG
最大高

20 dp(最大アスペクト比)

画像が 2 つある場合の推奨サイズは、高さが 80 ピクセル、幅が 80 ~ 780 ピクセルです。これにより、並べて配置できます。

1 つの画像が正方形で、もう 1 つの画像が四角形の場合、80×80 ピクセルと 780×80 ピクセルの画像である必要があります。

アスペクト比

制約なし1 つの画像の高さと幅を最大の 20 dp にするには、20:1 のアスペクト比を使用します。

バーコードの上に 1 つの画像だけを配置する場合は、全幅(パディングを除く)を使用します。画像は 1,600×80 ピクセルである必要があります。

最大表示サイズ(単一の画像) 高さ 20 dp、幅 400 dp

バーコードの下の画像

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

ガイドライン 説明
使用するファイル形式 PNG
最大高

20 dp(最大アスペクト比)

推奨サイズは、高さ 80 ピクセル、幅 80 ~ 1,600 ピクセルです。

正方形の場合は、80 x 80 ピクセルです。

長方形の場合は、1, 600×80 ピクセルです。

アスペクト比は制約されません。高さと幅を最大の 20 dp にする場合は、20:1 のアスペクト比を使用します。 全幅(パディングなし)にする場合は、1,600×80 ピクセルの画像にする必要があります。
最大表示サイズは、高さが 20 dp、幅が 400 dp です。  

モジュール

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

ガイドライン 説明
imageModulesData クラスまたは作成するオブジェクトで使用する imageModulesData は 1 つだけです。
infoModuleData

クラスまたは作成するオブジェクトのいずれかで使用する infoModuleData を 2 つまでにします。

infoModuleData により、「メンバー名」や「メンバーシップ番号」などのユーザー アカウント固有の情報を定義できます。

linksModuleData

クラスまたは作成するオブジェクトで使用する linksModuleData URI を合計で 4 つまでにします。

クラスには 2 つの linksModuleData URI があり、1 つがウェブサイトの URI で、もう 1 つがヘルプセンターの電話番号などです。オブジェクト内の 2 つの linksModuleData URI は、ユーザー アカウント固有の URI と付近の場所を定義することがあります。

textModulesData

クラスと作成するオブジェクト間で使用する textModulesData フィールドを 2 つまでにします。

クラスに、プログラムの詳細を定義する textModuleData URI と、ユーザー アカウント固有の詳細を定義するオブジェクト内の textModulesData を 1 つずつ含む場合があります。

infoModuleData

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

linksModuleData

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

ガイドライン 設定例 画像例
URI をウェブサイトや Google マップ内の場所に割り当てる場合は、http: プレフィックスを使用します。このプレフィックスを使用すると、ユーザーがリンクをタッチしてウェブサイトに移動したり、Google マップ内の場所を表示したりできます。 このプレフィックスを使用した場合、リンクまたはマップのアイコンがカードの説明の前に表示されます。 'uri': 'http://maps.google.com/?q=google' 地図上の場所のピン インジケーター。
'uri': 'http://developer.google.com/wallet/' ウェブサイトの地球インジケーター。
電話番号を定義する場合は tel: プレフィックスを使用します。このプレフィックスを使用すると、ユーザーがリンクをタッチして番号をダイヤルできます。また、このプレフィックスは、カードのテキスト説明の前に電話のアイコンを作成します。 'uri': 'tel:6505555555' 電話リンクの電話インジケーターです。
メールアドレスを定義する場合は、mailto: プレフィックスを使用します。このプレフィックスを使用すると、ユーザーがリンクをタッチして、メールアドレスにメールを送信できるようになります。このプレフィックスを使用した場合、メールのアイコンがカードのテキスト説明の前に表示されます。 'uri': 'mailto:jonsmith@email.com' メールを送信するためのリンクのメール インジケーター。

見出し、ラベル、名前

各単語の先頭を大文字にするため、見出し、ラベル、名前をタイトルケースに書きます。

コンテンツ ポリシー

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

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

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