このトピックでは、Places UI Kit の帰属表示の要件について説明します。Places UI Kit のその他の用語については、Google Maps Platform 利用規約をご覧ください。
Google マップの帰属情報の表示
Google マップのアトリビューションは、プレイス UI キットに含まれています。
- 表示場所にかかわらず、含まれる帰属情報は削除しないでください。帰属表示を変更、非表示化、隠したりしないでください。また、背景に対して見やすくしてください。
- 枠線、背景色、シャドウ、十分な余白などの UI の手がかりを使用して、Google Maps Platform のコンテンツを他のコンテンツと視覚的に区別してください。
- 視覚的な変更を行う場合は、Google マップの帰属表示要件に準拠する必要があります。詳しくは、次のセクションをご覧ください。
Places UI キットのアトリビューションの例
必須のアトリビューションが Place Details コンパクト コンポーネントに適用されます。 この Google 以外の地図では、Google マップの帰属が明確に表示され、Google Maps Platform のコンテンツが他のコンテンツと視覚的に区別されています。
Google マップの帰属表示の要件
可能な限り、帰属情報には Google マップのロゴを使用します。スペースに限りがある場合は、「Google マップ」というテキストを使用できます。Google マップによって提供されているコンテンツは、エンドユーザーに常に明確に示さなければなりません。
ロゴのアトリビューション
アプリやウェブサイトで Google マップのロゴを使用するには、以下の要件を満たす必要があります。
Google マップのロゴをダウンロードする
公式の Google マップ ロゴ ファイルを使用してください。以下のロゴをダウンロードし、このセクションのガイドラインに沿って使用してください。
ダウンロード: google_logo_ui_kit.zip
Google マップのロゴを使用する際は、以下のガイドラインに従ってください。
- ロゴにいかなる変更も加えないでください。
- ロゴのアスペクト比を維持して、歪みを防ぎます。
- 地図や画像など、複雑な背景には輪郭付きのロゴを使用します。
- 単色や微妙なグラデーションなど、単純な背景には輪郭のないロゴを使用します。
ロゴのサイズ仕様
Google マップのロゴのサイズ仕様は次のとおりです。- ロゴの最小高さ: 16 dp
- ロゴの最大高: 19 dp
- ロゴの最小クリアスペース: 左、右、上 10 dp、下 5 dp
dp について詳しくは、マテリアル デザインのウェブサイトのピクセル密度をご覧ください。
ロゴのユーザー補助
Google マップのロゴについては、以下のユーザー補助要件に準拠してください。- ロゴと背景の間にアクセシビリティに配慮したコントラストを維持します。
- ユーザー補助ラベルに「Google マップ」というテキストを含めます。
テキスト属性
インターフェースのサイズが Google マップのロゴの使用をサポートしていない場合は、テキストで「Google マップ」と表記できます。次のガイドラインに沿って対応してください。
- テキスト「Google マップ」は一切変更しないでください。
- Google マップの文字は大文字と小文字を変更しないでください
- Google マップを複数行に折り返さない
- Google マップを他の言語にローカライズしないでください。
- HTML 属性
translate="no"を使用して、ブラウザが Google マップを翻訳しないようにします。
次の表に示すように、Google マップのテキストのスタイルを設定します。
Google マップのテキスト スタイル設定の要件 プロパティ スタイル フォント ファミリー Roboto。フォントの読み込みは任意です。 代替フォント ファミリー 商品ですでに使用されているサンセリフの本文フォント、またはデフォルトのシステム フォントを呼び出すための「サンセリフ」 フォント スタイル 標準 フォントの太さ 400 フォントの色 白、黒（#1F1F1F）、グレー（#5E5E5E）背景に対してアクセシビリティに配慮したコントラスト（4.5:1）を維持します。 フォントサイズ 最小フォントサイズ: 12sp
最大フォントサイズ: 16sp
sp について詳しくは、マテリアル デザインのウェブサイトのフォントサイズの単位をご覧ください。文字間隔 標準
CSS の例
次の CSS では、白または明るい背景に Google マップを適切なタイポグラフィ スタイルと色でレンダリングします。
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); .GMP-attribution { font-family: Roboto, Sans-Serif; font-style: normal; font-weight: 400; font-size: 1rem; letter-spacing: normal; white-space: nowrap; color: #5e5e5e; }
ビジュアルの要件
Google マップの帰属表示のビジュアル処理については、以下の要件に準拠してください。帰属情報は、コンテンツの上部または下部付近の同じビジュアル コンテナ内に配置します。1 行のコンテンツの場合、アトリビューションは右または左に配置できます。
枠線、背景色、シャドウ、十分な空白スペースなどの UI の手がかりを使用して、Google Maps Platform のコンテンツを他のコンテンツと視覚的に区別します。
- Google Maps Platform 以外のコンテンツを Google マップと関連付けることで、Google マップを不実表示しないでください。
- アトリビューションは常に表示されて読みやすくする必要があります。削除、非表示化、ぼかし、変更しないでください。
次の図は、これらの視覚的な要件の例を示しています。
