設計チェックリスト
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
以下のガイドラインでは、地図のスタイルを作成または編集する際に陥りがちなデザイン上の注意点を説明しています。また、グラフィック デザイナーに相談して、デザインの組み立てと確認を行うことをおすすめします。
色のコントラストをはっきりさせる: コントラストがあると、テキストが読みやすくなり、地図上の特定の対象物を区別できるようになります。詳しくは、塗りつぶしの色とストロークの色のコントラストをはっきりさせるをご覧ください。
さまざまなズームレベルでチェックする: さまざまなズームレベルでスタイル要素が適切に表示されるかどうかをテストします。
色覚障がいのあるユーザーにとって問題となることがわかっている色の組み合わせを避ける:
色覚障がいのあるユーザーにとって使いやすいデザインにします。
夜間モードを確認する: モバイル向けデザインの場合は、デザインが夜間モードに対応するようにします。
塗りつぶしの色とストロークの色のコントラストをはっきりさせる
塗りつぶしの色とストロークの色のコントラストをはっきりさせ、地図上の対象物を背景や類似の対象物と区別できるようにします。
ラインのポリゴン: ラインの詳細がわかるよう、コントラストがはっきりとした色を選択します。たとえば、トレイルが点線で示されている場合、色のコントラストが十分でないと実線のように見えます。高速道路には外枠が描かれていますが、コントラストがなければ無地に見えるため、他の種類の道路と混同される可能性があります。
シェイプのポリゴン: コントラストにより、隣り合うポリゴンの境界線が見やすくなります。
テキストのストロークと塗りつぶし: テキストの場合、ストロークの色が枠線の色となります。ストロークの色により、背景色に対してテキストが読みやすくなります。ストロークの色が塗りつぶしの色に近すぎると、フォントが不明瞭になったり、ぼやけたりする可能性があります。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-08-27 UTC。
[null,null,["最終更新日 2025-08-27 UTC。"],[],[],null,["Select platform: [Android](/maps/documentation/android-sdk/cloud-customization/design-resources \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/cloud-customization/design-resources \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/cloud-customization/design-resources \"View this page for the JavaScript platform docs.\") [Web Service](/maps/documentation/maps-static/cloud-customization/design-resources \"View this page for the Web Service platform docs.\")\n\n\u003cbr /\u003e\n\nThe following guidelines address common design\npitfalls when creating or editing a map style. Google recommends\nyou also consult with a graphic designer to assemble and review your design.\n\n- **Make sure there is enough color contrast** : Contrast helps keep the text\n readable and helps distinguish certain map features. For details, see\n [Choose contrasting fill and stroke colors](#contrast).\n\n- **Check different zoom levels**: Test that your style elements look good at\n different zoom levels.\n\n- **Avoid color combinations known to be problematic for colorblind users**:\n Make sure your design is usable for people who are colorblind.\n\n- **Check Night mode**: For mobile designs, make sure your design works with\n Night mode.\n\nChoose contrasting fill and stroke colors\n\nMake sure there is enough contrast between fill and stroke colors to make sure\nyour map features are distinguishable from the background and from similar map\nfeatures.\n\n- **Polygons for a line**: Choose colors that contrast to show the detail on\n a line. For example, trails are dotted lines, and if the colors don't\n have enough contrast, it looks like a solid line. Highways are outlined on\n the outer edges, so without contrast, they may look solid, and therefore\n could be confused with other road types.\n\n- **Polygons for a shape**: Contrast helps you see the borders between\n polygons that are next to each other.\n\n- **Text stroke and fill**: For text, the stroke is your outline color, which\n helps to make the text readable against background colors. If the stroke\n color is too similar to the fill color, your fonts may also appear blurry or\n out of focus."]]