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
非エンジニアのデザイナーがウェブ地図サイト「れきちず」を作った話 / MIERUNE JCT #01
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
MIERUNE
PRO
August 29, 2023
Technology
1.5k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
非エンジニアのデザイナーがウェブ地図サイト「れきちず」を作った話 / MIERUNE JCT #01
20230830開催のオンラインイベントMIERUNE JCT #01 での発表
非エンジニアのデザイナーがウェブ地図サイト「れきちず」を作った話/地図とかデザインとか
MIERUNE
PRO
August 29, 2023
More Decks by MIERUNE
See All by MIERUNE
連続的な到達圏を表示する QGISプラグインを作ってみた
mierune
PRO
0
910
Facade Patternで磨く、コードの可読性と分解力 / MIERUNE BBQ #13
mierune
PRO
0
670
ハザードマップゲームの作り方〜ハザード情報をゲームのパラメーターに落とし込む〜 / FOSS4G 2024 Japan
mierune
PRO
0
1k
MIERUNEとQGIS、そしてQGIS事業のご紹介 / FOSS4G 2024 Japan
mierune
PRO
0
950
QGISで実現するもっと分かりやすい森林ゾーニング / FOSS4G 2024 Japan
mierune
PRO
0
1.1k
君はこの色の違いを見ることができるか / MIERUNE BBQ #12
mierune
PRO
0
770
クーダでハニワ / MIERUNE BBQ #12
mierune
PRO
0
730
位置情報とオープンソースがやりたくてMIERUNEに転職した話 〜経歴、事例紹介、GISへのいざない〜 / MIERUNE JCT - Tokyo 2024
mierune
PRO
0
1.9k
クロージング / MIERUNE JCT - Tokyo 2024
mierune
PRO
0
1.5k
Other Decks in Technology
See All in Technology
テスト設計の本質を改めて考えてみる~生成AIを活用する時代だからこそ、作ったテストの説明性を高めよう~
yamasaki696
1
110
AIは、人間らしい仕事の夢を見るか?─ AI時代のtoB/toEプロダクトを再設計する
techtekt
PRO
0
160
iOS アプリの「これって不具合ですか?」を AI に調べてもらう
miichan
0
150
元・セキュリティ学習経験0大学生による業務紹介 / An Introduction to the Job by a Former College Student with Zero Security Training Experience
nttcom
0
860
起点・思考・出力で分解する 〜PM業務の自動化設計〜
kazu_kichi_67
2
1.1k
Oracle Cloud Infrastructure:2026年6月度サービス・アップデート
oracle4engineer
PRO
1
370
そこにあるから地図ができる~位置を示す"モノ"を愉しむ~ - Interface 2026年6月号GPS特集オフ会 / interface_202606_GPS_offline
sakaik
1
110
現場のトークンマネジメント
dak2
1
200
打造你的 AI 工作流:Agent Skill + MCP 實戰工作坊
appleboy
0
120
クラウドファンディング版StackChan 3体(4体)をインタラクティブな体験型作品にして展示もした話 / スタックチャンお誕生日会2026
you
PRO
0
200
AWS Security Agent といっしょに脅威モデリングをやってみよう
amarelo_n24
1
210
From Prompt Engineering to Loop Engineering
shibuiwilliam
1
270
Featured
See All Featured
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
260
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
450
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.8k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
570
The browser strikes back
jonoalderson
0
1.3k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
150
The Spectacular Lies of Maps
axbom
PRO
1
820
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.6k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
260
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
140
The World Runs on Bad Software
bkeepers
PRO
72
12k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
1k
Transcript
地図とかデザインとか (加藤 創) 非エンジニアの デザイナーが ウェブ地図サイト 「れきちず」を作った話
01 02 03 04 CONTENTS 自己紹介 れきちずのきっかけ れきちずの制作 れきちずの今後
01 自己紹介
デザイナー 加藤 創 Hajime Kato
前職 • 東京のデザイン制作会社で グラフィックデザイナーとして7年間勤務 • 主に販促・広告デザインなどを制作
趣味 地図や路線図が好きで Twitterにデザインと絡めた作品を投稿
None
None
None
None
None
None
None
仕事 • Twitterの投稿を見た社長から誘われ、 去年MIERUNEに転職。 • 会社ではデザイン全般の制作を担当
名刺 メールアドレス
ロールアップバナー
会社案内リーフレット
プラグインアイコン
YouTubeサムネ
MIERUNE BBQロゴ
MIERUNE JCTロゴ (アイキャッチ)
マスキングテープ
クリアボトル
奈文研・産総研 3D DB Viewer ページ https://sitereports.nabunken.go.jp/3ddb
02 れきちずのきっかけ
きっかけ • 昔から地図が好きで、 古地図・絵図なども興味がありました。 しかし…
天保国絵図「武蔵国」国立公文書館デジタルアーカイブ
天保国絵図「安房国」国立公文書館デジタルアーカイブ 小…? 朝…? …? 村😵
• 「小」だと思っていたら 実は「北」だった! 「北」(U+5317) 日本古典籍くずし字データセットより http://codh.rois.ac.jp/char-shape/unicode/U+5317/ = 北 北 朝
夷 村🤗 き た あ さ い
古地図・絵図の問題点 • 地図・歴史好きの人は見るのが楽しいが、 そうでない人にはややハードルが高い
改善するために • 全員にわかりやすく伝えるためには? 現代の地図デザインに置き換えよう!
03 れきちずの制作
どうやって作る? • 当時の江戸時代の絵図を見てみると…
天保国絵図「武蔵国」国立公文書館デジタルアーカイブ
「安政改正御江戸大絵図」国立国会図書館デジタルコレクション
当時の絵図は… • とても素敵なのですが、現代の地図と重ねて 描き起こせるほどの精度は残念ながら無い…
明治初期の地図を使おう! • 明治初期(1880年代)の地図(いわゆる迅速測図)を 農研機構の「歴史的農業環境閲覧システム」が公開 • 明治〜平成にかけての旧版地図を故 谷謙二先生の 「今昔マップ」が公開
「2万分の1迅速測図」農研機構 歴史的農業環境閲覧システムより
地図の土台を作る • 江戸時代の絵図、明治初期の地図と さらに誤差を補正するために 国土地理院の「地理院タイル」を用いて 海岸線・街道・国境・航路などをQGIS上で描画する
背景画像は国土地理院「地理院タイル」
地図の情報を作る • 江戸時代の絵図、『江戸名所図会』などの当時の文献 をもとにPOI(ポイント情報)をプロット • 村・宿場町の位置は明治の地図と「角川日本地名大事 典」より推定
地図デザイン・アイコンの作成 • 地図のデザインやアイコンも オリジナルで作成!
峠 渡/湊 寺 劇場 関所 門 茶屋 山 宿場 神社
史跡 橋 城 市
背景画像は国土地理院「地理院タイル」
情報を作る上で気をつけたこと • 参考にした文献等は国・行政機関・地方自治体や 博物館などの信頼性の高い出典元を極力使用した • Googleマップ等、商業地図の情報は使わない
地図をウェブ地図化する • QGISの「タイル作成機能」を使用しウェブ上で 見れる形に書き出した上、MapLibreという オープンソースの地図ライブラリに読み込み サーバ上にアップロードを行った
None
04 れきちずの今後
現状の課題 • POI(ポイント情報)などが少ない、バラツキがある • ある程度までしかズームできない • POIの表示の挙動もあんまりよくない (重要度を高くしている地点が途中で消えたりする)
None
今後、機能を強化したいところ • 現在の地図と2画面で比較・重ね合わせる • 地点を押すと情報表示できる • 多言語表示やふりがなを表示できる • 経路検索機能(できれば)
None
既存のオープンデータの活用 • 国立情報研などが主催する「ROIS-DS人文学オープン データ共同利用センター」の江戸の地名等の データセットを今後活用し地図を強化していきたい
今回公開してみて • ここまで反響を頂けるとは思っておらず、感謝です • 資料がデジタル化されていることのありがたさ! • 土地の歴史調べ・街道巡り等に活用いただければ • 自分は素人なので、「ここは違うよ!」 「こうした方がいいよ!」等の情報を募集中です
ありがとうございました!