このガイドでは、Google がブランドと画像を使用してマイクロモビリティ アプリとの統合を促進する方法について説明します。また、関連する必須仕様やその他の詳細についても説明します。
ロゴアイコンの仕様
モバイル版 Google マップ（GMM）でルート検索結果が表示される際、アプリのロゴを使用して UI 上でサービスが識別されます。商品のロゴのアイコンを 1 つ Google に提供し、次の仕様に準拠する必要があります。
- ロゴアイコンは、612x612 ピクセルの SVG 1.1 画像にする必要があります。
- ロゴアイコンは、GMM のライトモードとダークモードの両方で視覚的に識別できる必要があります。図 1 はこの原則を示しています。
- ロゴアイコンでは、GMM インターフェース自体に干渉する可能性のある色の組み合わせは避ける必要があります。図 2 はこの原則を示しています。
- アイコンの背景は透明にする必要があります。
- アイコン画像は、半径 76 ピクセルの丸みを帯びた角にするか、円形にする必要があります。
<style>タグはサポートされていないため、必要に応じてインライン スタイルを使用する必要があります。- プロダクト アイコンでは、すべての SVG 機能がサポートされているわけではありません。詳しくは、MetroSVG をご覧ください。
車両アイコンの仕様
マイクロモビリティでは、近くで利用可能なドックレス車両をマイクロモビリティ プロダクトのユーザーに表示するオプションが用意されています。Google に商品の車両アイコンを提供し、次の仕様に準拠してください。
- 車両アイコンは、120×120 ピクセルの PNG 画像にする必要があります。
- 車両アイコンは、GMM のライトモードとダークモードの両方のインターフェースで視覚的に識別できる必要があります。図 1 はこの原則を示しています。
- 車両アイコンでは、GMM インターフェース自体に干渉する可能性のある色の組み合わせは避ける必要があります。図 2 はこの原則を示しています。
- 図 1 に示すように、車両は透明な背景の無地の円の中に表示する必要があります。
- 車両は中央に配置し、地面に置かれているかのように水平方向に配置する必要があります。
- 車両タイプは、自転車、電動自転車、電動スクーターなど、認識可能で識別可能なものでなければなりません。
表示されるアイコンに関するベスト プラクティス
優れたユーザー エクスペリエンスを実現するため、ブランディングを表現し、ブランドや商品のカラーパレットを反映した画像を Google に提供してください。
これらのアイコンは、さまざまなサイズや解像度の画面に表示されるため、GMM では鮮明で太字のアイコンを使用することが重要です。次の例は、高解像度では見栄えがよいアイコンが、低解像度ではピクセル化されて読みにくくなる様子を示しています。
図 3. モバイル デバイスで視認性が低いアイコン。
アイコンの視認性をあらゆるスケールで確保するには、アイコンとともに、簡潔で明確な太字のテキストまたは記号を使用します。Google に提供する前に、さまざまなサイズでアイコンの視認性をテストしてください。次の例は、これらの条件を満たしています。
図 4. モバイル デバイスで適切にスケーリングされるアイコン。
GMM では、ライトまたはダークのインターフェース テーマを選択できます。また、デバイスと同じテーマを使用することもできます。次の例に示すように、さまざまな背景色でアイコンをテストすることをおすすめします。
図 5. 明るい背景と暗い背景の両方で適切に表示されるアイコン。
また、GMM インターフェース自体に干渉する可能性のある色や透明度はアイコンで使用しないことをおすすめします。次の図は、これらの悪い例を示しています。
図 6. 明るい背景では見やすいが、暗い背景では見にくいアイコン。
図 7. 透明度のあるアイコンが暗い背景に表示され、見えにくい。