地図デザインの重要性とMapbox ｜ ウェビナー発表スライド#210630 / design-maps-01

本スライドは、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 2021/6/30 Tomohiro.Ichimura@mapbox.com Senior Solution Architect, Mapbox
2. About Me • Tomohiro Ichimura ◦ シニアソリューションアーキテクト ◦ Mapbox Japan ◦ @tomoichimura ◦ tomohiro.ichimura@mapbox.com
3. Mapbox 、位置情報による新しい世界を実現する ロケーション・プラットフォームを提供しています
4. Mapboxと目指すゴール 目指す ゴール 最初 ゴール スタート コスト 移行性 マップユーザー 利便性 提供者 利便性 デザイン カスタマイズ 前回 (#1) 今回 (#2)
5. マップ(Webマップ)に必要な要素 - データ - マップで表現したいも - ラスターデータ - ジオメトリ - レンダラー - データを視覚化するも - スタイル - 視覚化するために必要なデザイン ルール - クライアント - マップを統合するクライアントソフトウェア
6. Mapbox Maps より詳細な内容や、目的に応 じた表示により、これまでにな い地図体験が提供可能です。
7. 地図上にデータ 全て データレイヤに アクセス可能 境界 道路 衛星 地形 あなた データ 場所 他 地図
8. データとデザイン デザイン 定義 スタイル マップ描画 デザインを ドキュメントとして定義。 データ自体 持たず、ソースとレイ ヤーをデータソースと関連づけ、レ ンダリング方法を指定 20XX Vestibulum congue tempus Mapbox Style Specification https://docs.mapbox.com/mapb ox-gl-js/style-spec/ 20XX Vestibulum congue tempus MBTiles Specification https://github.com/mapbox/mbt iles-spec データ 集合 タイルセット ラスタあるい ベクタデータとして、 地理データ、位置情報データ、メタ データを格納。 スタイル要素 含めない
9. 競合も（ようやく）認めるスタイル 重要性 是非、Mapboxと比べてみてください
10. マップ デザインとスタイル • マップをデザインする ◦ データ 指定(カスタム地理データ 利用 ) ◦ 色やフォント、アイコン管理 ◦ データドリブンな可視化、など • スタイル (Style) ◦ マップデザイン コア ◦ JSONフォーマットにて、描画方法を定義 • オープンな仕様 ◦ Mapbox スタイル仕様に従い、Webやモバイ ルアプリケーション、あるい サードパーティ ライブラリなど、マルチプラットフォームで、 Mapboxスタイルを使った安定した描画が可 能 デモ Cartogram
11. 快適なユーザ体験を提供するデザインツール • コード不要 デザイン • 各レイヤー毎 細かな制御 • ズームレベルに応じたスタイル調整 • データ可視化にも使えるベースマップをデフォルト で提供、あるい スクラッチで作成も可能 • Style Editor: スタイル 編集 • Dataset Editor: データセット 編集 Mapbox Studio
12. データドリブンなスタイル 例 レイヤー 属性に応じて円 サイズを変更 レイヤー 属性に応じて塗りつぶし 配色を変更 レイヤー 属性に応じて線 配色を変更 レイヤー 属性に応じて高さを変更
13. ベクタタイル 特徴 • ダイナミックなスタイリング ◦ Mapbox GL JS やMapbox Maps SDKs for Android/iOS を使って、追加 タイルをダウンロードす ることなくマップ 外観を動的に変更が可能 • なめらかな操作性 ◦ クライアント側でロードされるため、す やく再レンダリングが可能、なめらかなズームや傾斜、回転 が可能 • サイズとスピード ◦ ベクタタイルフォーマットとして 特製である軽量さとスピードに加えて、 Mapbox カルトグラファー によるバランス とれたタイルを提供 • ダイナミックなクエリ ◦ ベクタタイルセットに含まれるデータ属性にアクセスが可能 . リファレンス: https://docs.mapbox.com/vector-tiles/reference/ 仕様: https://docs.mapbox.com/vector-tiles/specification/ Mapbox Vector Tile対応ツール: https://github.com/mapbox/awesome-vector-tiles/
14. Vector vs Raster https://blog.mapbox.com/mapbox-%EF%B8%8F-leaflet-d60b1be96615 ベクタタイル ラスタタイルに比べて、通常 20-50%程度ほど小さいサイズとなります。
15. Vector vs Raster https://blog.mapbox.com/mapbox-%EF%B8%8F-leaflet-d60b1be96615
16. 道路や建物情報、POIを含め国内全域 99%をカバー https://blog.mapbox.com/high-quality-japan-data-available-for-all-developers-b4b9c971d907 ゼンリン社データ 活用 【Mapsにて対応している地理情報】 • 道路情報 • 住所 • POI （店舗、公園、建物ほか） • 屋内エリアデータ （駅、大型商業施設ほか ） Mapsを使った描画において 、追加コスト不要
17. Mapbox Vector Tiles :デザインを拡張するデータ インドアマップ (Indoor Map) 路線図 (Transits) ムーブメント (Movements) Mapbox Transit v2 | Vector tiles Mapbox Indoor v1 | Vector tiles Movement Data
18. クライアントレンダリングとデータ GL(GL JS) api.mapbox.com データソース レイヤー ソース レイヤー ソース レイヤー ソース マップ スタイルとデータ 読 み込み 外部データ 読み込み カスタムデータ 読み込み ☁ ☁ 外部データをアップロード
19. Web アプリケーション Mapbox GL JSを利用することで、インタラクティブで、カスタマ イズが可能なWebアプリケーションを、Mapboxスタイルとベク タタイルを利用して作成可能 Leafletなどを利用する場合 、 Static Tiles APIを利用するこ とで、クライアントにラスタタイルで 提供が可能 静的なコンテンツを必要とする、あるい 印刷目的であれ Static Images APIが利用可能 Mapbox.js 、一世代前 JavaScriptライブラリで、Leaflet.js をベースとしており、旧来 スタイル、あるい ラスタスタイルを 利用、あるい クライアントスペックが不十分な場合で 利用が 想定される。 デモ
20. Mapbox GL JS Mapbox GL JS Web GL(*)をベースとした JavaScriptライブラリ Mapbox マップ技術を用いたWebアプリケー ション 作成を実現 主なユースケース • クライアントサイドで ダイナミックな描画やスタイル 適 用 • マップ上 データをつかったクエリやフィルタリング • 地理データ 可視化、アニメーション化 • お持ち データをカスタムレイヤとしてスタイル内に適用 可能 デモ 主な特徴 • クライアントサイドで レンダリング • カメラ ◦ Center: 経度(lng)、緯度(lat) 順 ◦ Zoom: ズームレンジない 任意 値 . ◦ Bearing: 0から360まで 値で、マップ 方角を示す ◦ Pitch: 0から60まで 値で、傾斜を指定 • レイヤー ◦ 従来 、ベースレイヤーとオーバレイレイヤー 二つ み ◦ Mapbox GL JSに ベースレイヤとオーバレイレイヤとい う区別がないため、自由な編集が可能 ＊WebGL 一般にブラウザベースで ゲーム作成で利用されてきた技術で、より先進的なインタラクション を可能とし、滑らかなズーム操作や、カメラ 方角や傾斜 変更、マップデータ クエリ、動的なフィルタなど が可能
21. Static Tiles API Static Tiles API を利用することで、ラスタタイル 提供が可能 クライアントサイドで、ラスタタイルを必要とされ るケースにて利用 利用されるライブラリとして 、Leaflet.jsや Mapbox.jsが想定される 主なユースケース • 初期ロード スピードを求める場合 ◦ GLと併用して、GLをバックグラウンドでロードさせな がら、Static Tiles APIを使ってマップを表示すること で、GL 初期レンダリング 遅れを補完することが 可能 • フォールバックとして 利用 ◦ WebGLに対応していないブラウザやデバイス向け 対策 • インタラクティブ性 少なく、表示箇所もオーバレイも少 ないケースで 利用
22. Static Images API Static Images API 、インタラクティブ性を必 要としないクライアントに向けたAPI ベクタタイルが含まれる場合 PNGで出力 ラスタタイル み場合 JPEGで出力 画像イメージで 地図を提供するため、幅広い 対象 クライアントで 利用が想定される 主なユースケース • モバイル通知時に静的な地図を表示 • ユーザプロファイルページや SNSなどで フィード時に利 用 • アウトドア、あるい フィットネス アクティビティ 可視 化 • ライドシェアやeコマース レシートで 利用
23. Web アプリケーション 作成 Mapbox GL JS - コードを書くに当たって、 JavaScriptライブラリと、CSSファイルが必要 - MapboxがCDNにてホストする場合と、パッケージ管理ツールで呼び出す場合 いずれかでライブラリを ロード( 以降 、ホストされている場合を想定） - HTML <head>タグにて以下 内容を定義 <script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' /> v2.1.1: 2021/3/1現在 移行性
24. マップ 初期化 • 基本となる mapboxgl.Mapクラス • Mapクラスをインスタンス化することで、最 低限 マップ表示が可能 ◦ Container: マップを配置するHTMLエレメントIDを指定 (こ 例で id="map") ◦ Style: 利用するスタイル URLを指定 mapbox://styles/mapbox/streets-v11. ◦ Center: 地図 中心を指定 (Mapbox GL JSで 、(lng, lat) 順番な で 注意) ◦ Zoom: ズームレベルを指定 var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [-74.50, 40], zoom: 9 }); 移行性
25. ベクターマップをコアとしたMapboxエコシステム クライアント アプリケーション api build デザイン（スタイル) データ api api >_ MTS, tippecanoe, rasterio Mapbox Studio, Mapbox Styles GL JS, GL Native, mapbox.js, leaflet.js 描画(レンダラー) SDK
26. Mapbox GL JS v2 • 従来 GL JSに比べて大幅な性能向上 ◦ ロード時間、初期化時間 • 3D機能 拡張 ◦ 丘陵、山岳、水平線、空 描画 • カメラ機能 拡張 ◦ 平面移動から、立体的な移動を実現 現行 GL JS と 互換性やスタイルを維持し ながら、新しい地図体験を提供 sky レイヤにより、時 間や季節、あるい 天 候イベントなどにも対 応が可能 カメラAPI
27. GL JS v2.3 リリース • 3Dマップで霧 表現 ＋ 標高データ ク エリが高速化 • 衛星画像マップ 工場 • 海底地形タイルセットへ 対応 詳細 是非ブログをご確認ください https://blog.mapbox.jp/
28. スタイル活用 ポイント レイヤー 管理 04 • コードで操作可能(addLayerなど) • Mapbox Studio スタイルで管理も可 • customLayer Feature 操作 03 • queryRenderedFeatures • feature-state データドリブンな描画 02 • ズームレベルや属性内容を活用 • ダイナミックな描画 • パフォーマンスや見やすさなどにも影響 スタイル 01 • スタイルをデザイン • Mapbox Studio 活用
29. さあ、Mapboxを じめましょう！ https://docs.mapbox.com/jp/yolp-to-mapbox/how-to-start/
30. 次回開催予定 これから じめるMapbox活用 #3 - モバイルアプリ編 2021/7/28(水) 13:00-15:00 ( 120分拡大版 ) https://mapbox-jp.connpass.com/event/ 次回 、モバイルSDKを利用したアプリケーションについて、ご紹介いたします。2時間 拡大版 予定です。ご期待ください！
31. ありがとうございました
33. デザイン性 従来で 実現できなかった、 ユニークで美しい地図を実現 ・地図デザイン 作成 ・インタラクティブなデザイン カスタマイズ性 従来で 実現できなかった、 地図 カスタマイズを実現 ・データ 持ち込み ・データ 重 合わせ コスト 従来 Webマップにかかっていた コストを削減 ・ライセンス ・開発 ・運用 移行性 既存資産を活かしながら、 新しいWebマップへ移行 新規アプリケーションとして 開発容易性 移行 ポイント パフォーマンス 向上、ユニークで美しいマップ 提供
34. Mapbox Maps Map Styles 地図 テンプレートとなるスタイル • Streets • Outdoors • Dark • Light • Satellite • Satellite Streets Maps Libraries/SDKs 地図を描画するために必要なツール • Mapbox GL/JS • Mapbox JS • iOS SDK • Android SDK • Unity SDK Map Tilesets スタイル 要素となるレイヤー群 • Streets • Terrain • Boundaries • Traffic • Transit • Indoor ( Beta ) • Satellite ( Raster ) Maps APIs 地図要素となるデータ 操作 • Vector Tiles API • Raster Tiles API • Static Images API • Static Tiles API • Styles API • Tilequery API • Uploads API • Mapbox Tiling Service (Beta) • Datasets API • Fonts API
35. さまざまなユースケースもご参考に！ nagix
36. GL JSを用いた描画機能 例 https://docs.mapbox.com/jp/mapbox-gl-js/example/ Webアプリケーション向けサンプル マップ 場所をスライドショーとして再生 マーカーでカスタムアイコンを追加 マーカーインスタンスにポップアップを添付 フィーチャをリアルタイムで更新 ベクター・タイルジオメトリを使用してローカル JSONデータを結合 カスタムプロパティで HTMLクラスター表示 ホバー効果を作成 データドリブンプロパティで線を設定 可変ラベル 配置 カスタマイズ性
37. Mapbox GL JS 拡張 GL JS用 プラグイン - mapbox-gl-geocoder - mapbox-gl-directions - mapbox-gl-draw - など 他フレームワークと 連携 - React - Angular - Nginx - Deck.gl - L7 サンプル Use Mapbox GL JS in a React app https://docs.mapbox.com/mapbox-gl-js/plugins/
38. コスト:リーズナブルな料金体系 40 ※Cost per 1,000 5万 10万 20万 応相談 Free! $5 $4 $3 Map Loads for Web Map SDK for Mobile 単価 (USD) 2.5万 12.5万 25万 125万 100万 ※Cost per 1,000 応相談 Free! $4 $3.2 $2.4 単価 (USD) Source：https://www.mapbox.com/pricing/ GL JS セッション(<ページビュー)が対象 Mobile SDK 月次 MAU*を対象 *Monthly Active User コスト
39. GLがもたらすデータビジュアライゼーション 価値 米国Weather Channel社におけるリアルタイム気象 データ 視覚化 - 気象データ 断続的に変化 -> 気象マップ 表示も同じように変化が必要 - Maps SDK for iOS/Androidにおけるランタイムスタイリング機 能により、リアルタイムにあらゆるレイヤ 変更が可能 -> こ 事例で 、暴風レーダー レイヤ配色 変更をリアルタイムに 実現
40. GL: Graphic Library • GL Graphics Library 略 ◦ グラフィックカード (GPU)上で動くソフトウェアを指す • グラフィックカード レンダリング用に用意されたハードウェア ◦ CPUよりも高速なレンダリング ◦ CPUよりも様々な数値計算が高速 • なぜ注目するべきか？ ◦ クライアントで レンダリング処理 ◦ 非常に強力でインタラクティブなグラフィックを実現 ◦ より視覚的効果が高められる • Mapbox GL = GPUを活用したマップ レンダリング