Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地...
Search
Hajime Kato
February 15, 2025
Design
1
360
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
2025.2.15に開催されたState of the Map Japan 2024にて発表した資料です。
Hajime Kato
February 15, 2025
Tweet
Share
More Decks by Hajime Kato
See All by Hajime Kato
オープンデータを利用して色々なものを作った話
hjmkth
1
77
日本最大級!地図・技術界隈の文化祭「FOSS4G 2024 Japan」に参加した話
hjmkth
1
34
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
620
現代風歴史マップ「れきちず」フロントエンドのウラとオモテ|フロントエンドカンファレンス北海道2024 / frontend of Rekichizu
hjmkth
0
270
240803_tochiji-hai_hackathon_kato
hjmkth
2
280
231229_Datavizjp_kato
hjmkth
1
1.1k
231206_Book-launch-event_kato
hjmkth
2
1.5k
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
560
231007_tokyor_kato
hjmkth
6
1.6k
Other Decks in Design
See All in Design
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.3k
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
2
170
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
6
4.9k
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
1
180
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
150
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
7
73k
Dinosaur Mayhem
storyartist
PRO
0
160
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
250
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
900
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
730
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
320
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
160
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
For a Future-Friendly Web
brad_frost
176
9.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Speed Design
sergeychernyshev
28
850
Become a Pro
speakerdeck
PRO
27
5.2k
Being A Developer After 40
akosma
89
590k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
690
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Transcript
©OpenStreetMap contributors 2025.2.14 State of The Map Japan 2024 Hajime
Kato オリジナルの デザイン地図を 作ってみた! OpenMapTilesとMaputnikを 活用した地図スタイル
⽕曜まで開催されていた さっぽろ雪まつりにて… 筆者撮影
「ラバーダック・デバッグ」 雪像を社内有志で制作! 筆者撮影
⽔曜の朝、こうなって いました。諸行無常😭 立入可能エリアから撮影
筆者撮影 とはいえ、 ものづくりは 楽しいなと 改めて実感! とはいえ、 ものづくりは 楽しいなと 改めて実感!
• 加藤 創 Hajime Kato 地図とかデザインとか @chizutodesign ▪ 株式会社MIERUNEのグラフィック デザイナー
▪ 北海道に移住して3年目! ▪ FOSS4G Hokkaido 2024 運営も少々
None
None
None
None
01 はじめに
Q みなさんは、 どのように 地図を作って ますか? . 質問
Adobe Illustrator, Inkscape, LibreOffice Draw, 手描き… 色々なやり方があると思います
今回はOpenMapTilesと Maputnikを使って、 オリジナル地図を作ります!
0 2 OpenStreetMapと OpenMapTiles
▪自由な地図をみんなで 作るプロジェクト ▪釈迦に説法かと思うので 詳しい説明は省きます🙏 OpenStreetMap ©OpenStreetMap contributors
▪OpenStreetMap(OSM)の データを基に、ベクトル タイルが提供 ▪OSMFJのタイルサーバ から読み込み OpenMapTiles https://tile.openstreetmap.jp/
0 3 Maputnik とは?
▪オープンソースの 地図スタイルエディタ ▪コーディング不要で 直感的にスタイルを 編集できる Maputnik https://maplibre.org/maputnik/
▪オープンソースの 地図ライブラリ ▪簡単に地図を表示する ことができる MapLibre https://maplibre.org/
0 4 オリジナル地図を 作る&デモ
0 4 - 1 夜景風
▪飛行機や宇宙ステーション からの夜景が好き ▪実際の写真を見ると、建物 ではなく道路の街灯が光っ ていることがわかる 夜景風マップ 飛行機からの夜景:筆者撮影
筆者撮影
▪道路による街灯の色の違い を再現する ❶高速道路:太く・オレンジ色 ❷主要道路:やや細く・白色 ❸住宅地の街路:点線・白色 ❹歩道等:点線・暗め 夜景風マップ ©OpenStreetMap contributors
DEMO https://chizutodesign.github.io/ map-styles/#night-view ©OpenStreetMap contributors
0 4 - 2 伊能図風
▪あの有名な伊能忠敬の地図 ▪「れきちず」は歴史地図を 現代風デザインにしたもの ▪逆に、現代地図を伊能図風 のマップにしてみる 伊能図風マップ 〔大日本沿海輿地全図 〕 第93図 武蔵・相模(相模・横須賀・馬入川・武蔵 ・神奈川) 国立国会図書館デジタルコレクション
▪毛筆のような書体に ◦Google Fontsの“Yuji Syuku” ▪フォントをpbf形式に変換 ▪Maptunik上で書体設定 ▪文字を縦書き表示! 伊能図風マップ https://fonts.google.com/specimen/Yuji+Syuku
DEMO https://chizutodesign.github.io/ map-styles/#inozu ©OpenStreetMap contributors
0 4 - 3 れきちず現代
▪「れきちず」は、現代風の デザインで歴史的な地図を 閲覧できるWebサービス ▪江戸時代後期を公開中 れきちずとは https://rekichizu.jp/map
▪「れきちず」で現代地図も 閲覧したい! ▪「れきちず」のデザインで OSM(OMT)を読み込む れきちず現代スタイル https://rekichizu.jp/map
▪「れきちず」のデザインを 踏襲しつつ、アイコン等を 新規で作成した れきちず現代スタイル https://rekichizu.jp/map
DEMO https://rekichizu.jp/map ※右下から「現代地図」を選択 ©OpenStreetMap contributors
0 5 まとめ
▪一度スタイルを作れば、全世界 に同じデザインが適用される ▪拡大縮小等の操作が自由自在 ▪自動で最新の情報に更新される (1週間に1回ほど更新) 地図スタイルのメリット
地図スタイルのデメリット …
▪時間が無限に溶ける 地図スタイルのデメリット
▪OMT(OSM)+Maputnik+MapLibreを利用して全世界 にわたる独自デザインの地図を作ることができる ▪新たな地図表現が生まれることに期待 ▪オープンソースに携わっている方々へ、 ありがとうございます (自分ももっとOSMコントリビュートします…) まとめ