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
230904_Geo-Lang_kato
Search
Hajime Kato
September 04, 2023
Design
0
1.6k
230904_Geo-Lang_kato
第5回 「地理空間と言語処理」勉強会の発表資料です。
https://connpass.com/event/291648/
Hajime Kato
September 04, 2023
Tweet
Share
More Decks by Hajime Kato
See All by Hajime Kato
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
530
オープンデータを利用して色々なものを作った話
hjmkth
1
100
日本最大級!地図・技術界隈の文化祭「FOSS4G 2024 Japan」に参加した話
hjmkth
1
53
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
660
現代風歴史マップ「れきちず」フロントエンドのウラとオモテ|フロントエンドカンファレンス北海道2024 / frontend of Rekichizu
hjmkth
0
340
240803_tochiji-hai_hackathon_kato
hjmkth
2
310
231229_Datavizjp_kato
hjmkth
1
1.1k
231206_Book-launch-event_kato
hjmkth
2
1.6k
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
620
Other Decks in Design
See All in Design
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
190
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
1
1k
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
650
Social Anxiety
ksmith2024
0
230
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
3
350
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
400
Echoes Boomerang
artcloudyu
PRO
0
220
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.5k
portfolio_YumiYasuda
yum0418
0
250
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
110
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
280
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Practical Orchestrator
shlominoach
188
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
4 Signs Your Business is Dying
shpigford
183
22k
Designing for humans not robots
tammielis
253
25k
A better future with KSS
kneath
239
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.4k
Music & Morning Musume
bryan
46
6.6k
Transcript
地図とかデザインとか (加藤 創) ウェブ地図サイト 「れきちず」について
01 02 03 04 CONTENTS 自己紹介 背景(きっかけ) 既往事例 目的 05
06 07 方法 結果 今後の展望
01 自己紹介
デザイナー 加藤 創 Hajime Kato
お仕事 ━ • 会社のプロモーションツール、ノベルティ等の デザインを担当
None
趣味 ━ • 地図や路線図が好きで、 Twitterにデザインと絡めた作品を投稿
None
02 背景(きっかけ)
きっかけ(社会) ━ • 昨今、街歩き・街道歩きがブームとなっている • 関連した書籍や地図など様々なサービスがある
• 自分は昔から地図が好きで、 古地図・絵図などにも興味があった しかし… きっかけ(個人) ━
天保国絵図「武蔵国」国立公文書館デジタルアーカイブ
None
天保国絵図「安房国」国立公文書館デジタルアーカイブ 小…? 朝…? …? 村😵
• 「小」だと思っていたら 実は「北」だった! 「北」(U+5317) 日本古典籍くずし字データセットより http://codh.rois.ac.jp/char-shape/unicode/U+5317/ = 北 北 朝
夷 村 😃 き た あ さ い
• 地図・歴史好きの人は見るのが楽しいが、 そうでない人にはややハードルが高い 古地図・絵図の課題 ━
03 既往事例
• 江戸の古地図『江戸切絵図』を復刻したものが いくつか存在した(制作当時) ◦ gooマップ古地図(人文社)※2023年9月27日サービス終了 ◦ 大江戸今昔めぐり(大江戸今昔めぐり製作委員会) など 既往事例 ━
• デザインは当時の絵図を踏襲 「築地八町堀日本橋南絵図」 国立国会図書館デジタルコレクション 筆者の再現イメージ
「築地八町堀日本橋南絵図」国立国会図書館デジタルコレクション 文字の向きが バラバラ…😢
「築地八町堀日本橋南絵図」国立国会図書館デジタルコレクション 文字の向きは、 建物の表門の 位置を表して いた!😲 NHK 美の壺 「File105 江戸の古地図」 https://www.nhk.or.jp/tsubo/ arc-20081010.html 表門
表門
• デザインは当時の絵図を踏襲している • 当時の絵図は文字の向きがバラバラ • 地図や歴史にそこまで興味のない人にとっては 視認性・可読性に少々難のある可能性がある • 地図領域が江戸とその周辺にほぼ限定されている 既往事例の課題
━
04 目的
天保国絵図「武蔵国」国立公文書館デジタルアーカイブ 「築地八町堀日本橋南絵図」国立国会図書館デジタルコレクション 文字の可読性に やや難がある 文字の向きが バラバラ
• 歴史・地理にそこまで詳しくない・興味がない人に とってもわかりやすい地図を作る • 江戸を含む、より広い領域の地図とする 目的 ━ 現代の地図デザインで制作する
05 方法
• 2019年、Googleマップ風の地図として制作して公開 した • 著作権の問題、1枚画像であることもありウェブサ イトしての公開には問題があった 当初 ━
None
• 当時の江戸時代の絵図を見てみると… 制作方法の検討 ━
天保国絵図「武蔵国」国立公文書館デジタルアーカイブ
「安政改正御江戸大絵図」国立国会図書館デジタルコレクション
• とても素敵なのですが、現代の地図と重ねて 描き起こせるほどの精度は残念ながら無い • ではどうするか? 当時の絵図の精度 ━
• 明治初期(1880年代)の地図(迅速測図)を 農研機構の「歴史的農業環境閲覧システム」が公開 • 明治〜平成にかけての旧版地図を故 谷謙二先生の 「今昔マップ」が公開 明治初期の地図を使用 ━
「2万分の1迅速測図」農研機構 歴史的農業環境閲覧システムより
• 位置データの閲覧・ 編集ができるオープン ソースのGISソフト • 世界的に広く使用 https://qgis.org/ 地図の土台づくり ━
• 江戸時代の絵図、明治初期の地図と さらに誤差を補正するために 国土地理院の「地理院タイル」を用いて 海岸線・街道・国境・航路などをQGIS上で描画する 地図の土台づくり ━
国立公文書館デジタルアーカイブ 農研機構 歴史的農業環境閲覧システム 江戸時代の絵図 明治初期の地図 国土地理院 地理院タイル 道筋・海岸線等を 判断・抽出 道筋・海岸線等を
描画 誤差を補正
背景画像は国土地理院「地理院タイル」
• 江戸時代の絵図、『江戸名所図会』などの当時の文献 をもとにPOI(ポイント情報)をプロット • 村・宿場町の位置は明治の地図および 「角川日本地名大事典」より推定 地図情報をつくる ━
「江戸名所図会 7巻 [1] 第1-3冊: 巻1」 国立国会図書館デジタルコレクション https://dl.ndl.go.jp/pid/2559040/1/37 なるほど、 わからん🤯
「江戸名所図会 巻1 (日本図会全集)」 国立国会図書館デジタルコレクション https://dl.ndl.go.jp/pid/1176676/1/32 読める… 読めるぞ!
• 地図のデザインやアイコンも オリジナルで作成! 地図デザイン・アイコン ━
峠 渡/湊 寺 劇場 関所 門 茶屋 山 宿場 神社
史跡 橋 城 市/店
None
• 参考にした文献等は国・行政機関・地方自治体や 博物館などの信頼性の高い出典元を極力使用した • Googleマップ等、商業地図の情報は使わない 情報をつくる上で留意した点 ━
• QGISの「タイル作成機能」を使用しウェブ上で 閲覧できる形に書き出した上、MapLibreという オープンソースの地図ライブラリに読み込み サーバ上にアップロードを行った ウェブ地図化する ━
ウェブ地図化する ━ https://qgis.org/ https://maplibre.org
None
06 結果
https://rekichizu.jp/map/ れきちず 検索
07 今後の展望
• POI(ポイント情報)などが少ない、バラツキがある • ある程度までしかズームできない • POIの表示の挙動もあまりよくない (重要度を高くしている地点が途中で消えたりする) 現状の課題 ━
None
• 現在の地図と2画面で比較・重ね合わせる • 地点を押すと情報表示できる • 多言語表示やふりがなを表示できる • 経路検索機能(できれば) 今後機能を強化したい点 ━
2画面表示 ━
情報表示 ━ 「名所江戸百景 五百羅漢さゞゐ堂」 国立国会図書館デジタルコレクション
多言語表示 ━ 「名所江戸百景 五百羅漢さゞゐ堂」 国立国会図書館デジタルコレクション
経路検索 ━
None
• 国立情報研などが運営する「ROIS-DS人文学オープン データ共同利用センター」の江戸の地名等のデータ セットを今後活用し地図を強化していきたい オープンデータの活用 ━
• ここまで反響を頂けるとは思っておらず、感謝です • 資料がデジタル化されていることのありがたさ! • 土地の歴史調べ・街道巡り等に活用いただければ • 自分は素人なので、「ここは違うよ!」 「こうした方がいいよ!」等の情報を募集中です 公開した感想
━
ありがとうございました!