設計チェックリスト
以下のガイドラインでは、地図のスタイルを作成または編集する際に陥りがちなデザイン上の注意点を説明しています。また、グラフィック デザイナーに相談して、デザインの組み立てと確認を行うことをおすすめします。
色のコントラストをはっきりさせる: コントラストがあると、テキストが読みやすくなり、地図上の特定の対象物を区別できるようになります。詳しくは、塗りつぶしの色とストロークの色のコントラストをはっきりさせるをご覧ください。
さまざまなズームレベルでチェックする: さまざまなズームレベルでスタイル要素が適切に表示されるかどうかをテストします。
色覚障害のあるユーザーにとって問題となることがわかっている色の組み合わせを避ける:
色覚障害のあるユーザーにとって使いやすいデザインにします。
夜間モードを確認する: モバイル向けデザインの場合は、デザインが夜間モードに対応するようにします。
塗りつぶしの色とストロークの色のコントラストをはっきりさせる
塗りつぶしの色とストロークの色のコントラストをはっきりさせ、地図上の対象物を背景や類似の対象物と区別できるようにします。
ラインのポリゴン: ラインの詳細がわかるよう、コントラストがはっきりとした色を選択します。たとえば、トレイルが点線で示されている場合、色のコントラストが十分でないと実線のように見えます。高速道路は外枠が描かれているため、コントラストがなければ無地に見えるため、他の種類の道路と混同される可能性があります。
シェイプのポリゴン: コントラストにより、隣り合うポリゴンの境界線が見やすくなります。
テキストのストロークと塗りつぶし: テキストの場合、ストロークの色が枠線の色となりす。ストロークの色により、背景色に対してテキストが読みやすくなります。ストロークの色が塗りつぶしの色に近すぎると、フォントが不明瞭になったり、ぼやけたりする可能性があります。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2023-12-26 UTC。
[null,null,["最終更新日 2023-12-26 UTC。"],[[["These guidelines provide recommendations for designing or editing map styles, emphasizing color contrast, zoom level considerations, and colorblind-friendly design."],["It is crucial to ensure sufficient contrast between fill and stroke colors for clear visibility of lines, shapes, and text on the map."],["Testing the map style at various zoom levels is important to guarantee visual appeal and functionality across different scales."],["Color choices should consider the needs of colorblind users to ensure usability for all."],["Mobile map designs should be verified in Night mode to ensure compatibility and readability in low-light conditions."]]],["Map style design guidelines recommend consulting a graphic designer. Key actions include ensuring sufficient color contrast between fill and stroke colors for readability and feature distinction, especially in lines, shapes, and text. Test designs at various zoom levels and consider colorblind users. For mobile, verify compatibility with Night mode. Contrast helps avoid issues like solid lines appearing instead of dotted lines or blurry text. Platforms for customization include Android, iOS, JavaScript, and Web Service.\n"]]