概要
ロゴはあなたのアイデンティティであり、最も親しみやすく適応しやすいアセットです。 すべての決済ベンダーは、Google エコシステムのさまざまな領域で使用するロゴを Google に提供することが義務付けられています。たとえば、これらのロゴは、ユーザーがお支払い方法（FOP）を選択する必要がある Google Pay や Google Play でのさまざまな支払い手続きに表示されます。次の図に、そのような例を示します。
仕様一覧
支払いベンダーは、以下の 5 つの仕様をそれぞれ満たすアセットを Google に提供する必要があります。各仕様では、サイズ、カラーパレット、枠線のパディングなどの属性が制御されています。これにより、Google の支払いフローで多様性に富んだ魅力的な人間中心のエクスペリエンスを実現できます。各仕様には、合計 10 個の必須画像アセットに対して 2 つのファイル形式が必要です。
以下に、5 つの仕様のリストを示します。
推奨事項と要件
推奨事項
以下の推奨事項は、ロゴがはっきりと鮮明で、さまざまな画面サイズや OS テーマ（ライトモードとダークモードなど）に適合するようにするものです。
- 細部まで鮮明に表現するには、アセット スペース全体を使用して、ロゴが最大サイズに収まるようにします。
- ロゴをデザインする際は、Android と iOS のライトモードとダークモードの暗い背景でロゴがどのように見えるかを考慮してください。詳しくは、ダークモードに関する考慮事項をご覧ください。
要件
ロゴの仕様に関係なく、次の要件は、すべてのロゴが従うべき一般的なガイドラインのセットです。
- ストロークや枠線のない透明な境界ボックス（仕様と同じ寸法のシェイプ）を含めます。
- 単色ロゴで使用するのは 1 色のみにする必要があります。詳しくは、単色ロゴに関する考慮事項をご覧ください。
- 各ロゴ仕様の規則を遵守したファイル名でファイルをエクスポートします。
ダークモードに関する考慮事項
Android と iOS の最新バージョンはどちらも、すべての画面、ビュー、メニューに暗いカラーパレットを使用するダークモードをサポートしています。Google Play と Google Pay のネイティブ Android アプリもこのテーマをサポートしています。テーマを有効にすると、それに応じてインターフェースが暗くなります。画面の色が暗くなると、ロゴの色と全体的なデザインの選択方法に影響します。ダークモードで背景が暗くなると、色とりどりのロゴが部分的または完全に判読不能になることがあります。下の図の例をご覧ください。
上の図は、ダークモードで背景が暗くなると、Acme Bank ロゴの「Acme」という濃いグレーのテキストがほとんど見えなくなります。単独のテキストで使用する場合は、マルチカラーのロゴにこのような暗い色を使用しないでください。ダークモードでのロゴデザインに関するベスト プラクティスについては、ダークモード用のマルチカラーロゴのデザインをご覧ください。
ダークモードの詳細については、こちらをご覧ください。
ダークモード用のマルチカラーロゴをデザインする
Google の UX チームによるプログラムによる調整と微調整は、ロゴをダークモードで最適に機能させるのに役立ちますが、以下のベスト プラクティスに従うことで、必要な変更回数が最小限に抑えられ、ロゴの元の見た目を維持し、画面の他の領域とスムーズに溶け込ませることができます。
- パステルカラーやグレーと白が組み込まれたシェードなど、彩度の低い色を使用します。完全に彩度の高い色は使用しないでください。
- 白など「オン」な色や、さまざまな濃淡の白を使用します。
- ロゴとその周辺領域のコントラスト比を許容範囲内にします。コントラスト比について詳しくは、w3.org をご覧ください。
- シャドウは暗い背景では見づらくなるので、使用しないでください。
- 暗い色の背景でロゴデザインをテストし、テストします。
単色ロゴに関する考慮事項
ライトモードとダークモードの色合い調整
単色のロゴの場合は、周囲の背景に対して理想的な色のコントラスト比が維持されるように色合いが調整されます。たとえば、OS がライトモードとダークモードのどちらを使用しているかによって、下のロゴの色がどのように変化するかに注目してください。
許容されるコントラスト比と a11y について詳しくは、w3.org をご覧ください。
アセットのサイズ変更の影響
サイズアップ
ロゴをさまざまな画面サイズと表示密度に適応させる必要があるため、Google はアプリとウェブサイト内で使用されているアセットの最大サイズを取得する必要があります。たとえば、320 x 320 ピクセルの要件は、Google Play のロゴの最大表示サイズです。それより小さい画像は、この寸法に合うようにサイズを大きくする必要があり、画像がぼやけたり、歪んだりすることがあります。このぼかしは、主に png などのベクター以外の画像形式で発生します。以下の例では、より小さい画像のサイズを最大 320 × 320 ピクセルにした場合を考えます。サイズを大きくすると、モザイクとぼやけが生じます。
サイズダウン
また、ロゴのサイズが縮小される場合があります。たとえば、320 × 320 ピクセルのアセットは、32 × 32 ピクセルに縮小できます。この縮小はロゴデザインの細部に影響する可能性があるため、Google にアセットを送信する前にテストする必要があります。以下に示すロゴは、小さいサイズに縮小したときに全体的な外観が維持されることに注意してください。
仕様リスト
ロゴの 5 つの仕様の詳細は以下のとおりです。各仕様は、SVG と PNG の 2 つのファイル形式である必要があります。
320 × 320 ピクセルの色のスクエア
必須属性
| 合計ディメンション | 320 × 320 ピクセル |
| ロゴのサイズ | 320 × 320 ピクセル |
| アスペクト比 | 1:1 |
| パディング | none |
| ボーダー | none |
| カラーパレット | フル RGB カラー |
| 背景色 | transparent |
必要なファイル
| 形式 | ファイル名の規則 | 例 |
|---|---|---|
| PNG | [brand]_320x320_color_no_padding.png | acmebank_320x320_color_no_padding.png |
| SVG | [brand]_320x320_color_no_padding.svg | acmebank_320x320_color_no_padding.svg |
320 × 320 ピクセルのカラースクエア（パディングあり）
必須属性
| 合計ディメンション | 320 × 320 ピクセル |
| ロゴのサイズ | 200 × 200 ピクセル |
| アスペクト比 | 1:1 |
| パディング | 60px |
| ボーダー | none |
| カラーパレット | フル RGB カラー |
| 背景色 | transparent |
必要なファイル
| 形式 | ファイル名の規則 | 例 |
|---|---|---|
| PNG | [brand]_320x320_color_padding.png | acmebank_320x320_color_padding.png |
| SVG | [brand]_320x320_color_padding.svg | acmebank_320x320_color_padding.svg |
1,170 × 730 ピクセルの色の長方形の長方形
必須属性
| 合計ディメンション | 1,170 x 730 px |
| ロゴのサイズ | 1,170 x 730 px |
| アスペクト比 | 8:5 |
| パディング | none |
| ボーダー | none |
| カラーパレット | フル RGB カラー |
| 背景色 | transparent |
必要なファイル
| 形式 | ファイル名の規則 | 例 |
|---|---|---|
| PNG | [brand]_1170x730_color_no_padding.png | acmebank_1170x730_color_no_padding.png |
| SVG | [brand]_1170x730_color_no_padding.svg | acmebank_1170x730_color_no_padding.svg |
1,170 x 730 ピクセルの色の長方形（パディングあり）
必須属性
| 合計ディメンション | 1,170 x 730 px |
| ロゴのサイズ | 970 × 530 ピクセル |
| アスペクト比 | 8:5 |
| パディング | 100px |
| ボーダー | none |
| カラーパレット | フル RGB カラー |
| 背景色 | transparent |
必要なファイル
| 形式 | ファイル名の規則 | 例 |
|---|---|---|
| PNG | [brand]_1170x730_color_padding.png | acmebank_1170x730_color_padding.png |
| SVG | [brand]_1170x730_color_padding.svg | acmebank_1170x730_color_padding.svg |
320 × 320 ピクセルの単色のスクエア
必須属性
| 合計ディメンション | 320 × 320 ピクセル |
| ロゴのサイズ | 320 × 320 ピクセル |
| アスペクト比 | 1:1 |
| パディング | none |
| ボーダー | none |
| カラーパレット | 黒 （16 進数 #000000） |
| 背景色 | transparent |
必要なファイル
| 形式 | ファイル名の規則 | 例 |
|---|---|---|
| PNG | [brand]_320x320_single_color_no_padding.png | acmebank_320x320_single_color_no_padding.png |
| SVG | [brand]_320x320_single_color_no_padding.svg | acmebank_320x320_single_color_no_padding.svg |
320 × 320 ピクセルの単色のスクエア（パディングあり）
必須属性
| 合計ディメンション | 320 × 320 ピクセル |
| ロゴのサイズ | 200 × 200 ピクセル |
| アスペクト比 | 1:1 |
| パディング | 60px |
| ボーダー | none |
| カラーパレット | 黒 （16 進数 #000000） |
| 背景色 | transparent |
必要なファイル
| 形式 | ファイル名の規則 | 例 |
|---|---|---|
| PNG | [brand]_320x320_single_color_padding.png | acmebank_320x320_single_color_padding.png |
| SVG | [brand]_320x320_single_color_padding.svg | acmebank_320x320_single_color_padding.svg |
ロゴをアップロードしています
GSP - LOGOs upload を使用してロゴアセットをアップロードします。フォームへのアクセスや使用に問題がある場合は、アカウントに割り当てられた技術エンゲージメント担当者または技術担当者にお問い合わせください。