ブランドの取り扱いガイドライン

ロシアのユーザーを対象としている場合は、[スマートフォンに保存] を使用してください。 ボタンが表示されないことがあります。詳しくは、 個の関連性の高いアセットと ガイドラインをご覧ください。ロシア以外のユーザーを対象としている場合は、 アセットをダウンロードして [Google ウォレットに追加] ボタンを更新する ご覧ください

このドキュメントのこのセクションは、イメージとファイルを作成する際に役立ちます。 ユーザー インターフェース要素を変更して、 Google ウォレット アプリ。

アセット

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

[Google ウォレットに追加] ボタンは、 アプリやウェブサイトからウェブサイトに直接パスやカードを保存する 。[Google ウォレットに追加] ボタンは、 Google Wallet API のフロー。このフローにより Google ウォレット アプリが表示され、 手順に沿ってパスを Android デバイスに保存できます 確認します。このボタンは、アプリ、ウェブサイト、 できます。

[Google ウォレットに追加] ボタンは、Android XML、SVG、 PNG 形式でアップロードされます

アセットのダウンロード - Android XML アセットをダウンロードする - SVG をご覧ください。 アセットのダウンロード - PNG

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

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

[Google ウォレットで表示] ボタンは、SVG 形式と PNG 形式で提供されています。

アセットをダウンロードする - SVG アセットのダウンロード - PNG をご覧ください。

サイト、アプリ、メールに表示されるボタンはすべて、ブランドに沿ったものでなければなりません このページで概説しているガイドラインです。ガイドラインの例を以下に示しますが、これらに限定されません。 次のとおりです。

  • ページの他の類似ボタンや要素と比較したサイズ
  • ボタンの形状や色は変更できません
  • クリアスペース

ローカライズされたボタン

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

[Google ウォレットに追加] ボタンは、アルバニア語、 アラビア語、アルメニア語、アゼルバイジャン、ボスニア語、ブルガリア語、カタルーニャ語、中国語 （香港）、中国語（繁体）、クロアチア語、チェコ語、デンマーク語、オランダ語、英語 （インド、シンガポール、南アフリカ、オーストラリア、カナダ、英国、英国） 州）、エストニア語、フィリピン語、フィンランド語、フランス語（カナダ）、フランス語（フランス）、 グルジア語、ドイツ語、ギリシャ語、ヘブライ語、ハンガリー語、アイスランド語、インドネシア語、イタリア語、 日本語、カザフ語、キルギス語、ラトビア語、リトアニア語、マケドニア語、マレー語、ノルウェー語、 ポーランド語、ポルトガル語（ブラジル）、ポルトガル語（ポルトガル）、ルーマニア語、ロシア語 （ベラルーシ）、セルビア語、スロバキア語、スロベニア語、スペイン語（ラテンアメリカ）、スペイン語 （スペイン）、スウェーデン語、タイ語、トルコ語、ウクライナ語、ウズベク語、ベトナム語。

ローカライズされた名前

ユーザーがわかりやすくするため、Google ウォレットのプロダクト名は一部の言語にローカライズされています。 ありますこれらの国のユーザー向けに開発を行う場合は、必ず 以下に、ウェブ、メール、印刷用のローカライズされた名前を示します。独自に作成しない ローカライズ版に移行しました。該当する市場がない場合は、 「Google ウォレット」（英語）。

国 名前
ベラルーシ Google Бо voiceелек
ブラジル カルテイラ ド Google
チリ Billetera de Google
チェコ ペンニェゼンカ Google
ギリシャ Coursera
香港 Google 錢包
リトアニア Google ピニギネ
ポーランド Portfel Google
ポルトガル カルテイラ ダ Google
ルーマニア Portofel Google
スロバキア ペニャゼンカ Google
台湾 Google 錢包
トルコ Google キュズダン
アラブ首長国連邦 محفظة Google
ウクライナ Google IARC
米国（スペイン語）
*米国で UI がスペイン語の場合は、この名前を使用してください 		Billetera de Google

サイズ

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

スタイル

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

プライマリ Condensed
メインの [Google ウォレットに追加] ボタン [Google ウォレットに追加] ボタンの簡易表示
基本形のボタンは、白い背景と明るい色の背景で使用します。 メインの表示位置に十分なスペースがない場合は、簡易表示のボタンを使用します。 指定することもできます。

クリアスペース

上下左右に常に 8 dp 以上のクリアスペースを確保する必要があります。 [Google ウォレットに追加] ボタン。クリアスペースは、 グラフィックやテキストが途切れることはありません。

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

最小の高さ

すべての [Google ウォレットに追加] ボタンには、最小の高さが必要です 48 dp とする。

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

推奨事項と禁止事項

推奨事項 禁止事項
推奨: Google が提供する [Google ウォレットに追加] ボタン。 非推奨: 独自のルールを作成する [Google ウォレットに追加] ボタンを使用するか、フォント、色、 ボタンの半径、ボタン内のパディングなどを指定できます。
推奨: 同じスタイルのボタンを使用する サイト全体でトラッキングします 禁止事項: [Google ウォレットに追加] ボタンが他のボタンよりも小さくなりました。
推奨事項: クリエイティブのサイズを [Google ウォレットに追加] ボタンが同じか大きくなっている 移動します。 不可: ボタンの色を変更しないでください。
推奨事項: ボタンの縦横比を維持したままにする [Google ウォレットに追加] ボタンのサイズ変更時。 非推奨: ボタンを縦横比を変えない。
良い例: 提供されたローカライズ済みの あります。 非推奨: 独自のローカライズ版を作成する 使用できます。

ボタンの配置に関するベスト プラクティス

確認アプリに [Google ウォレットに追加] ボタンを表示する ウェブページ、メールなどです。UI の指針となる次のベスト プラクティスを参照してください。 考えています

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

確認画面に [Google ウォレットに追加] ボタンを表示します。 ウェブサイトやアプリにボタンを表示したり、 関連性の高いメールを 送信できるようになります

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

テキスト内で Google ウォレットのプロダクト名を使用する場合

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

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

常に大文字の「G」を使用するまたは大文字の「W」があります。その後に小文字が続きます Google ウォレットについてご説明します。名前を大文字にしない 「Google ウォレット」UI の字体に合わせる場合は除きます

Google ウォレットを略さない

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

UI のスタイルに合わせる

[Google ウォレット] を設定するフォントと字体は 注意してくださいGoogle の字体は模倣しないでください。

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

常に「Google ウォレット」と表記します。翻訳する必要があります。

デザイン

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

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

メイン画像

class.heroImage フィールドは、全幅のバナーとして表示されます。 渡します。

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

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

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

1,032 x 336 ピクセル

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

最良の結果を得るには、色付きの背景の画像を使用してください。

アスペクト比 3:1 以上
表示サイズ

カードの全幅とそれに比例する高さ。

表示サイズのアスペクト比は 3:1 以上にする必要があります。

全幅画像

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

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

ユーザー インターフェースの全幅サイズに関する推奨事項は次のとおりです。 images:

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

幅 1, 860 ピクセル、高さ可変。

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

最良の結果を得るには、色付きの背景の画像を使用してください。
アスペクト比 変数
表示サイズ

テンプレートの全幅とそれに比例する高さ。

表示サイズのアスペクト比は 3:1 以上にする必要があります。
ロゴと同じカラーパターンを使用してください。

バーコード画像

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

バーコードの上の画像

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

ガイドライン 説明
優先するファイル形式 PNG
最大の高さ

20 dp（最大アスペクト比）

推奨されるサイズは、高さが 80 ピクセル、幅が 80 ～ 780 ピクセルです（2 つの場合）。 画像があります。横に並べて表示できます。

一方の画像が正方形でもう一方が長方形の場合、画像は 80×80 ピクセルと 780×80 ピクセルにする必要があります。

アスペクト比

制約なし。単一の画像の高さと幅が最大 20 dp である アスペクト比 20:1 を使用してください。

バーコードの上に 1 つの画像のみを配置する場合は、全幅を使用します。 （パディングを除く）。画像のサイズは 1,600x80 ピクセルである必要があります。

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

バーコードの下の画像

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

ガイドライン 説明
優先するファイル形式 PNG
最大の高さ

20 dp（最大アスペクト比）

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

正方形の場合は 80×80 ピクセル。

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

アスペクト比の制限なし。高さと幅が最大 20 dp の場合は、次のコマンドを使用します。 アスペクト比 20:1 全幅画像（パディングを除く）が必要な場合は、画像を 1,600×80 ピクセル。
最大表示サイズは、高さ 20 dp、幅 400 dp です。  

モジュール

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

ガイドライン 説明
imageModulesData クラスまたはクラスで imageModulesData を 1 つだけ使用する 作成されます。
infoModuleData

クラスまたは同じで、infoModuleData を 2 つまで使用できます 作成されます。

infoModuleData では、ユーザー アカウント固有の [メンバー名] などの[メンバーシップ番号]を入力します

linksModuleData

次のどちらかで、合計で最大 4 つの linksModuleData URI を使用します。 オブジェクトで宣言します。

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

textModulesData

クラス間で最大 2 つの textModulesData フィールドを使用する オブジェクトが含まれます。

クラスに 1 つの textModuleData URI を は、プログラムの詳細と別の textModulesData を定義します。 ユーザー アカウント固有の詳細を定義するオブジェクト。

infoModuleData

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

linksModuleData

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

ガイドライン 設定の例 画像例
ウェブサイトに URI を割り当てる場合は、http: 接頭辞を使用します。または、 Google マップで場所を確認できます。この接頭辞を使用すると、 リンクをクリックしてウェブサイトに移動するか、Google マップで場所を表示します。 また、この接頭辞を使用すると、リンクまたはマップのアイコンが ご確認ください。 'uri': 'http://maps.google.com/?q=google' 地図上の位置を示すピン インジケーター。
'uri': 'http://developer.google.com/wallet/' ウェブサイトの地球インジケーター。
電話番号を定義する場合は、tel: プレフィックスを使用します。この プレフィックスを使用すると、消費者はリンクにタッチして番号を発信できます。この接頭辞 テキストの説明の前に電話のアイコンを作成します。 。 'uri': 'tel:6505555555' 電話リンクの電話インジケーター。
メールアドレスを定義する場合は、mailto: 接頭辞を使用します。 このプレフィックスを使用すると、消費者がリンクをタッチしてメールを送信できます。 あります。このプレフィックスを使用すると、メールのアイコンが カード上の説明テキスト。 'uri': 'mailto:jonsmith@email.com' メールを送信するためのリンクのメール インジケーター。

見出し、ラベル、名前

見出し、ラベル、名前は語頭を大文字にして記述し、各単語が先頭を 使用します。

コンテンツ ポリシー

パスの各フィールドの内容は、 お支払いに関するコンテンツ ポリシーをご覧ください。参照しているウェブサイトのコンテンツ それらのポリシーに準拠する必要があります。

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

さまざまな機能を搭載したアプリやウェブサイトにユーザーが テストにパスする場合は、必ずアプリのディープリンクを パスのクラスまたはオブジェクト内のウェブサイト linksModuleData.* プロパティ。これによりユーザーは 表示されます。このパスは、 Google ウォレットどのようにレンダリングされるかを確認するには、 カテゴリを渡す。