ロシアのユーザーを対象としている場合は、[スマートフォンに保存] を使用してください。 ボタンが表示されないことがあります。詳しくは、 個の関連性の高いアセットと ガイドラインをご覧ください。ロシア以外のユーザーを対象としている場合は、 アセットをダウンロードして [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 |
---|---|
![]() |
![]() |
基本形のボタンは、白い背景と明るい色の背景で使用します。 | メインの表示位置に十分なスペースがない場合は、簡易表示のボタンを使用します。 指定することもできます。 |
クリアスペース
上下左右に常に 8 dp 以上のクリアスペースを確保する必要があります。 [Google ウォレットに追加] ボタン。クリアスペースは、 グラフィックやテキストが途切れることはありません。
![[Google ウォレットに追加] ボタンの上下左右には 8 dp のスペースが必要です。](https://developers-dot-devsite-v2-prod.appspot.com/static/wallet/images/branding/add-to-wallet-clear-space.png?authuser=9&hl=ja)
最小の高さ
すべての [Google ウォレットに追加] ボタンには、最小の高さが必要です 48 dp とする。
![[Google ウォレットに追加] ボタンの高さは 48 dp 以上にする必要があります。](https://developers-dot-devsite-v2-prod.appspot.com/static/wallet/images/branding/add-to-wallet-min-height.png?authuser=9&hl=ja)
推奨事項と禁止事項
推奨事項 | 禁止事項 |
---|---|
良い例: Google が提供する [Google ウォレットに追加] ボタン。 | 非推奨: 独自のルールを作成する [Google ウォレットに追加] ボタンを使用するか、フォント、色、 ボタンの半径、ボタン内のパディングなどを指定できます。 |
推奨: 同じスタイルのボタンを使用する サイト全体でトラッキングします | 禁止事項: [Google ウォレットに追加] ボタンが他のボタンよりも小さくなりました。 |
推奨事項: クリエイティブのサイズを [Google ウォレットに追加] ボタンが同じか大きくなっている 他のボタンと異なります。 | 不可: ボタンの色を変更しないでください。 |
推奨事項: ボタンの縦横比を維持したままにする [Google ウォレットに追加] ボタンのサイズ変更時。 | 非推奨: ボタンを縦横比を変えない。 |
良い例: 提供されたローカライズ済みの あります。 | 不可: 独自のローカライズ版を作成する 使用できます。 |
ボタンの配置に関するベスト プラクティス
確認アプリに [Google ウォレットに追加] ボタンを表示する ウェブページ、メールなどです。UI の指針となる次のベスト プラクティスを参照してください。 考えています
搭乗券
[Google ウォレットに追加] ボタンを 購入フロー、確認アプリの画面、ウェブページ、メールなどでユーザーに表示されます。水 [Google ウォレットに追加] を ] ボタンが表示されていれば、ユーザーはそこからパスにアクセスできます。
![Sky Air の搭乗券](https://developers-dot-devsite-v2-prod.appspot.com/static/wallet/images/passes/branding/sky-air-boarding-pass.png?authuser=9&hl=ja)
![汎用搭乗券](https://developers-dot-devsite-v2-prod.appspot.com/static/wallet/images/passes/branding/boarding-pass.png?authuser=9&hl=ja)
テキスト内で 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 ウォレットに追加] ボタン。
ロゴ
ロゴ画像に関するガイドライン
ロゴが円形にマスクされます。
ユーザー インターフェースで使用するロゴ画像の推奨事項は次のとおりです。ガイドライン | 説明 |
---|---|
優先するファイル形式 | PNG |
最小サイズ | 660 x 660 ピクセル |
画像のアスペクト比 | 1:1 |
アートワークのアスペクト比 | 1:1 |
実際のピクセルサイズ | デバイスサイズに合わせたスケーリング |
ロゴの円形マスク |
ロゴは円形のデザイン内に収まるようにマスキングされます。必ず、 ロゴがセーフエリア内に収まるようにしてください。画像アセットを事前に ロゴ。余白なしの背景色の正方形の中にロゴを配置します。 ロゴの余白は 15% にして、途中で切れないように マスクされます。 ![]() |
ロゴが円形にマスクされます。
ワイドロゴ画像に関するガイドライン
イベント チケット、搭乗券、QR コードによる交通機関のパス、 ポイントカード、クーポン、ギフトカード、汎用パス、汎用プライベート パス。 ユーザー インターフェースで使用するワイドロゴ画像の推奨事項は次のとおりです。
ガイドライン | 説明 |
---|---|
優先するファイル形式 |
PNG 最良の結果を得るには、背景色付きの画像を使用してください(同じ色を使用することをおすすめします 使用します)。 |
推奨されるサイズ | 1,280 x 400 ピクセル |
最小サイズ | 高さは 400 ピクセル、幅は比例(詳しくは推奨アスペクト比のセクションを参照)
幅の広い長方形の画像を使用します。 |
推奨されるアスペクト比 |
画像が推奨のアスペクト比に設定されていない場合は、アスペクト比に合わせてサイズが変更されます。 アスペクト比を指定します。次の図では、画像アセットが アスペクト比に基づいてサイズが変更されます。 ![]() |
カードの背景色
背景色はフィールドで設定できます
hexBackgroundColor
。値を設定しない場合、アルゴリズム
ロゴを分析して主要な色を特定して背景に使用
指定します。
メイン画像
class.heroImage
フィールドは、全幅のバナーとして表示されます。
渡します。
ヒーロー画像に関するガイドライン
ユーザー インターフェースで使用するヒーロー画像の推奨事項は次のとおりです。
ガイドライン | 説明 |
---|---|
優先するファイル形式 | PNG |
推奨サイズ |
1,032 x 336 ピクセル 幅の広い長方形の画像を使用します。 最良の結果を得るには、色付きの背景の画像を使用してください。 |
アスペクト比 | 3:1 以上 |
表示サイズ |
カードの全幅とそれに比例する高さ。 ![]() |
全幅画像
クラスまたはオブジェクトの *.imageModulesData.mainImage
フィールド
パスでは全幅画像として表示されます。
全幅画像に関するガイドライン
ユーザー インターフェースの全幅サイズに関する推奨事項は次のとおりです。 images:
ガイドライン | 説明 |
---|---|
優先するファイル形式 | PNG |
最小サイズ |
幅 1, 860 ピクセル、高さ可変。 幅の広い長方形の画像を使用します。 最良の結果を得るには、色付きの背景の画像を使用してください。 |
アスペクト比 | 変数 |
表示サイズ |
テンプレートの全幅とそれに比例する高さ。 ![]() |
ロゴと同じカラーパターンを使用してください。 |
バーコード画像
一部の業種では、バーコードの上下に画像を表示できます。
バーコードの上の画像
ユーザー インターフェース上の上の画像の推奨事項は次のとおりです。 使用します。
ガイドライン | 説明 |
---|---|
優先するファイル形式 | 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
|
クラスまたは同じで、
|
linksModuleData
|
次のどちらかで、合計で最大 4 つの
クラスに 2 つの |
textModulesData
|
クラス間で最大 2 つの
クラスに 1 つの |
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 ウォレットどのように表示されるかを確認するには、
カテゴリを渡す。