Mapbox Studioで自分好みの地図デザイン ｜ ウェビナー発表スライド#210630 / design-maps-02

本スライドは、2021年6月30日に開催されたMapbox Japanによるウェビナー「これからはじめるMapbox活用 #2 - デザイン編」の発表スライドです。

▼ウェビナー概要▼
デジタル地図におけるデザインの重要性から、地図デザインツール「Mapbox Studio」の活用方法まで。
Mapboxの活用を検討している方に役立つ情報を、デモを交えてご説明します！

地図情報サービスの開発プラットフォームであるMapboxはこれまでに、Yahoo! JAPANやSnap Inc.、Shopifyなど、多くの企業から信頼を受け、様々な業界・用途でご活用いただいております。 なぜMapboxが選ばれるのか。その理由の一つに地図デザインの高い自由度が挙げられます。

本ウェビナーでは、デジタル地図におけるデザインの重要性と、Mapboxの無償デザインツールであるMapbox Studioの紹介を通じて、これまでにないユーザー体験を提供する地図デザインのエッセンスをご紹介いたします。

また、Mapbox Japanのテクニカルパートナーであるtagbangersさんからは、Mapbox Studioの利用方法とデザインの作成から地図への反映といった一連の流れをご紹介していただきます。

Transcript

1. Mapbox Studioで自分好 みの地図デザイン | Sylvester Abeng これからはじめるMapbox活用 #2 - デザイン編 1/66
2. 2/66 🏕 ふもとっぱらキャンプ場
3. 3/66
4. Agenda 1. Sky layer で月を再現 2. 山のスタイリング 3. Fog 機能の活用 4. キャンプ場の Dataset とTilesetの作成 5. キャンプ場の POI を追加 6. Publishing と Sharing 4/66
5. Mapbox studio 5/66
6. Mapbox studio 6/66
7. Mapbox studio 7/66
8. Mapbox studio 8/66 Exaggeration 1 → 3
9. Sky layerで月を再現 9/66
10. Sky layerで月を再現 10/66 Before After
11. Sky layerで月を再現 11/66 Type: 空の種類（atmosphere or gradient） Atmosphere Sun center: 太陽の位置 Sun Intensity: 太陽の明るさ Sun halo color: 太陽周りの色 Atmospheric color: 空の色 Gradient Gradient center:グラデーションの中心点 Gradient radius:グラデーションの半径 Gradient color: グラデーションの色 Sky layer properties
12. Sky layerで月を再現 12/66 Azimuthal（方位角）: 210 → 110 Polar（仰角）: 30 → 85 Sun Center
13. Sky layerで月を再現 13/66 Before After Azimuthal（方位角）: 210 → 110 Polar（仰角）: 30 → 85
14. Sky layerで月を再現 14/66 明るさ: 10 → 2.5 Sun intensity
15. Sky layerで月を再現 15/66 Before After 明るさ: 10 → 2.5
16. Sky layerで月を再現 16/66 月周りの色: #ffffff → #2483ff Sun halo color:
17. Sky layerで月を再現 17/66 Before After 月周りの色: #ffffff → #2483ff
18. Sky layerで月を再現 18/66 空の色: #979dc8 → #055276 Sun halo color:
19. Sky layerで月を再現 19/66 Before After 空の色: #979dc8 → #055276
20. Sky layerで月を再現 20/66 Before After
21. Sky layerで月を再現 21/66
22. 山のスタイリング 22/66 Label layer の表示・非表示
23. 山のスタイリング 23/66 Before After
24. 山のスタイリング 24/66 Hillshade layer で立体感を出す Before After
25. 山のスタイリング 25/66 Before After Opacity を 0.38 に固定
26. 山のスタイリング 26/66 Before After
27. 山のスタイリング 27/66 アンチエイリアスを有効
28. 山のスタイリング 28/66 Before After
29. 山のスタイリング 29/66 Hillshade layer は zoom leel 16 以上になると表示されない
30. 山のスタイリング 30/66 Zoom extent を変えるため terrain component を eject
31. 山のスタイリング Max: 16 → 22 Zoom extent 31/66
32. 山のスタイリング 32/66 Before After
33. 山のスタイリング 33/66 Before After
34. 山のスタイリング 34/66 もう少しテクスチャー（シャドー、ハイライト）を出したいため、新しい layer を追加
35. 山のスタイリング 35/66 Layer の光源が viewport に固定されるため、地図を回すと光源も変わります
36. 山のスタイリング 36/66 Layer の光源を地図に固定 Viewport → Map Illumination anchor
37. 山のスタイリング 37/66 Before After
38. 山のスタイリング 38/66 335 → 110 Illumination direction 光源を月明かりに合わす
39. 山のスタイリング 39/66 #ffffff → #eff6ee Highlight color: #000000 → #024527 Accent color: Before After
40. Fog 機能の活用 40/66 Enable fog: false → true Range - near: 0.5 → 2 Range - far: 10 → 20 Color: #ffffff → #c0dddb Fog
41. Fog 機能の活用 41/66 距離感が把握しやくなり、距離に応じて読み込まれるタイルの数を減らす ことができるのでパフォーマンスの最適化にもなる
42. Fog 機能の活用 42/66 Before After
43. キャンプ場の Dataset と Tileset の作成 43/66 Dataset は最初から作ることもアップロードして編集すること可能
44. キャンプ場の Dataset と Tileset の作成 44/66
45. キャンプ場の Dataset と Tileset の作成 45/66
46. キャンプ場の Dataset と Tileset の作成 46/66
47. キャンプ場の Dataset と Tileset の作成 47/66
48. キャンプ場の Dataset と Tileset の作成 48/66 Tileset として export
49. キャンプ場の POI を追加 49/66 キャンプ場の Tileset を追加
50. キャンプ場の POI を追加 50/66
51. 山のスタイリング Color: #ffffff Font: Noto Sans CJK bold Size: 20px Letter spacing: 0.1em Line height: 1.4em Max width: 30em Transform: Uppercase Halo color: #000000 Halo width: 0.8px Text justify: Left Text anchor: Bottom Left Text offset: 1, 0 Icon offset: 20, -30 Text Position 51/66
52. 山のスタイリング 52/66
53. キャンプ場の POI を追加 53/66 Mapbox GL JS documentation - Expressions より
54. キャンプ場の POI を追加 54/66
55. キャンプ場の POI を追加 55/66
56. キャンプ場の POI を追加 56/66 Before After
57. キャンプ場の POI を追加 57/66 改行を追加
58. キャンプ場の POI を追加 58/66 Before After
59. キャンプ場の POI を追加 Font: Overpass Mono Bold Size: 12px Color: #ffffff Letter spacing: 0.1em Line height: 1.3em Transform: Uppercase Halo color: #000000 Halo width: 0.5px Halo blur: 1px Text justify: Left Text anchor: Bottom Left Text offset: 1.5, 4.2 Text Position 59/66 Layerが重なっているので、一番上の layerしか表示されません。 なので、下にいる layers の allow text overlap を true にします。
60. キャンプ場の POI を追加 60/66 Before After
61. キャンプ場の POI を追加 61/66
62. キャンプ場の POI を追加 62/66 Text opacity 初期値
63. キャンプ場の POI を追加 63/66
64. Publishing と Sharing 64/66
65. Publishing と Sharing 65/66
66. ありがとうございました！ 🏔 プレビュー 66/66