Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mapbox Studioで自分好みの地図デザイン | ウェビナー発表スライド#210630 ...

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の利用方法とデザインの作成から地図への反映といった一連の流れをご紹介していただきます。

Mapbox Japan

July 01, 2021
Tweet

More Decks by Mapbox Japan

Other Decks in Technology

Transcript

  1. Agenda 1. Sky layer で月を再現 2. 山のスタイリング 3. Fog 機能の活用

    4. キャンプ場の Dataset とTilesetの作成 5. キャンプ場の POI を追加 6. Publishing と Sharing 4/66
  2. 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
  3. Fog 機能の活用 40/66 Enable fog: false → true Range -

    near: 0.5 → 2 Range - far: 10 → 20 Color: #ffffff → #c0dddb Fog
  4. 山のスタイリング 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
  5. キャンプ場の 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 にします。