災害や非常事態下では、マップを素早く拡散するため、正確で情報量が多く、考え抜かれたデザインであることが不可欠です。ユーザーからよく質問される内容やコロナマップ事例から、マッピングする際に有効的なベストプラクティスと、避けるべき落とし穴をまとめました。
適切なカラー選択
赤以外の選択肢
色を選択するときは、マップの意図について考えましょう。明るい赤は人目を引きますが、パニックを引き起こす色でもあります。カラーピッカーツールは、他の色のオプションを識別するのに適しています。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f20faa1bd4a0ed46c29_5fc85bb9c535c72eb5cbe9d3_0*2iGTKDxlo3jjVA6-.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f206b9a61332218cff4_5fc85bb9d5b04c409be3e680_0*WxBAZc5EenWn-za1.png)
色覚多様性を意識したカラーパレット
色覚多様性にも対応したカラーパレットがあります。このカラーガイドやMapbox Studioの色覚多様性シミュレーターは、色覚多様性を持つユーザーの見え方を想定するのに役立ちます。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f20fbc157a775a99844_5fc85bb92a0418f0c83fc3db_0*y_vcLa39xFAcyU1z.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f214f27aab7fd05662d_5fc85bb976d2685f3d027098_0*vaem82IdXmBYLOVe.png)
前者の赤と緑のパレットは、3つの一般的な色覚多様性を持つユーザーにはどのように見えるでしょうか。以下に見え方を示します。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f217c9437585e20f217_5fc85bb954e9836395e1dc45_0*n6DHLVuUb54oSbUL.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f21c3912be6386fce9f_5fc85bba1b61b1a27325543e_0*XLoECeMpThLXqYqk.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f210bf8346d9c8855e9_5fc85bba901a44109a946e2c_0*sgH0DTLlvp1OoQfl.png)
以下は色覚多様性を持つユーザーにも優しいカラーパレットの場合の見え方です。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f2190900e783b571cef_5fc85bbb133a287e2707bdcd_0*g-K4pB1uli_Ndw-N.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f2285446d65b8858ead_5fc85bba9060576e0387e0ff_0*X1T2d8XclDPOOn4E.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f226b9a61f93918cff5_5fc85bbb2a041847d53fc430_0*FIZnmDu8_QkLZWJ6.png)
データは最大でも5〜7クラスに分割
人間の目は、一度に7色以上を区別するのは困難です。データの値を直接反映した色でない限り、クラスの数は7つ以下に抑えましょう。
データをどのように分類するかを決める際には、次の項目を考えてみてください。
- データは、カテゴリーか数値か
- データを表示する色は連続か不連続か?
ColorBrewerは、いくつかのデータ分類タイプについて、カラー選択に役立つツールです。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f2224ac7727d50543df_5fc85bbbbb91b078d4c4a83d_0*MW6QRIUi64ZI3F_a.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f226b9a616e4418cff6_5fc85bbb660c6b75271a3885_0*eTNljMcwkA_GLFzH.png)
手持ちのデータに合わせたデザイン
データの中には、マップに適さないものがあります。たとえば、時間データなどです。マップとグラフはお互いを補完するものであり、必ずしも置き換えるものではありません。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f228bd04761aff7730e_5fc85bbbe0e28b4ed272afc2_0*TGw47aY1eRhYUAq9.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f22fbc1572866a99847_5fc85bbb89d6790013092646_0*7N76nVpxssdK-biR.png)
データの地理的な歪みを避ける
この点は、事例数のコロプレスマップ(区画別段彩図)にとって重要なポイントです。パーセンテージなどの割合を表示するには、コロプレスマップが最適です。割合ではなく実数値を表示する場合、地理的な歪みを避けることができるため、比例円が一般にコロプレスマップよりも優れています。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f234b240c38bffe641b_5fc85bbcac56147834dab025_0*deDFn9y9KPlqpUxi.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f23266cd6bdf3cfd359_5fc85bbcbb91b0da21c4a83e_0*y1n8Ju-EAB1C-lCi.png)
見る人を意識したデザイン
情報の過多を避ける
情報は多ければ良いというものではありません。同じデータを表示する複数のレイヤー、多すぎる色、過剰なラベルは多くの落とし穴の一部です。マップは、データについてのストーリーを持つべきであり、できる限りシンプルであるべきです。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f2322dda057a19b0f27_5fc85bbc05e59053be8fcd14_0*IVwRDFw26163BTUV.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f23cdab0c59a9ad02e5_5fc85bbc075c1e9e7dd0d72e_0*ZYMAsWjcZgRke1uL.png)
様々なスケールに対応するデザイン
インタラクティブマップでは、多くのスケールでデザインすることが不可欠で、ズームにこだわるのは、マップ全体の完成度を上げるために非常に重要です。
グローバルスケールでデザインされた以下マップが、ナショナルスケールにズームされたとき、どのように見えるでしょうか?
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f23df1dcd6b337d37e6_5fc85bbc901a44624a946eac_0*mS8v_ElZJCTKB0Z-.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f2339a1a6c26079f62a_5fc85bbdd5b04c73d8e3e8d4_0*wzNWhu5Gr_oBMAhB.png)
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/614d5f230bf83425d78855ea_5fc85bbd54e983e8b5e1dc9d_0*BKvJp1JUOI8KGGsJ.png)
Mapbox Studioで早速マップデザインを開始しましょう!
*本記事は、Mapbox Inc. Blogの翻訳記事です。