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

非エンジニアのデザイナーがウェブ地図サイト「れきちず」を作った話 / MIERUNE JCT #01

MIERUNE
August 29, 2023

非エンジニアのデザイナーがウェブ地図サイト「れきちず」を作った話 / MIERUNE JCT #01

20230830開催のオンラインイベントMIERUNE JCT #01 での発表
非エンジニアのデザイナーがウェブ地図サイト「れきちず」を作った話/地図とかデザインとか

MIERUNE

August 29, 2023
Tweet

More Decks by MIERUNE

Other Decks in Technology

Transcript

  1. 地図とかデザインとか (加藤 創)
    非エンジニアの
    デザイナーが
    ウェブ地図サイト
    「れきちず」を作った話

    View full-size slide

  2. 01
    02
    03
    04
    CONTENTS
    自己紹介
    れきちずのきっかけ
    れきちずの制作
    れきちずの今後

    View full-size slide

  3. 01 自己紹介

    View full-size slide

  4. デザイナー
    加藤 創
    Hajime Kato

    View full-size slide

  5. 前職
    ● 東京のデザイン制作会社で
    グラフィックデザイナーとして7年間勤務
    ● 主に販促・広告デザインなどを制作

    View full-size slide

  6. 趣味
    地図や路線図が好きで
    Twitterにデザインと絡めた作品を投稿

    View full-size slide

  7. 仕事
    ● Twitterの投稿を見た社長から誘われ、
    去年MIERUNEに転職。
    ● 会社ではデザイン全般の制作を担当

    View full-size slide

  8. 名刺
    メールアドレス

    View full-size slide

  9. ロールアップバナー

    View full-size slide

  10. 会社案内リーフレット

    View full-size slide

  11. プラグインアイコン

    View full-size slide

  12. YouTubeサムネ

    View full-size slide

  13. MIERUNE BBQロゴ

    View full-size slide

  14. MIERUNE JCTロゴ
    (アイキャッチ)

    View full-size slide

  15. マスキングテープ

    View full-size slide

  16. クリアボトル

    View full-size slide

  17. 奈文研・産総研
    3D DB Viewer ページ
    https://sitereports.nabunken.go.jp/3ddb

    View full-size slide

  18. 02 れきちずのきっかけ

    View full-size slide

  19. きっかけ
    ● 昔から地図が好きで、
    古地図・絵図なども興味がありました。
    しかし…

    View full-size slide

  20. 天保国絵図「武蔵国」国立公文書館デジタルアーカイブ

    View full-size slide

  21. 天保国絵図「安房国」国立公文書館デジタルアーカイブ
    小…?
    朝…?
    …?
    村😵

    View full-size slide

  22. ● 「小」だと思っていたら
    実は「北」だった!
    「北」(U+5317) 日本古典籍くずし字データセットより
    http://codh.rois.ac.jp/char-shape/unicode/U+5317/
    = 北



    村🤗





    View full-size slide

  23. 古地図・絵図の問題点
    ● 地図・歴史好きの人は見るのが楽しいが、
    そうでない人にはややハードルが高い

    View full-size slide

  24. 改善するために
    ● 全員にわかりやすく伝えるためには?
    現代の地図デザインに置き換えよう!

    View full-size slide

  25. 03 れきちずの制作

    View full-size slide

  26. どうやって作る?
    ● 当時の江戸時代の絵図を見てみると…

    View full-size slide

  27. 天保国絵図「武蔵国」国立公文書館デジタルアーカイブ

    View full-size slide

  28. 「安政改正御江戸大絵図」国立国会図書館デジタルコレクション

    View full-size slide

  29. 当時の絵図は…
    ● とても素敵なのですが、現代の地図と重ねて
    描き起こせるほどの精度は残念ながら無い…

    View full-size slide

  30. 明治初期の地図を使おう!
    ● 明治初期(1880年代)の地図(いわゆる迅速測図)を
    農研機構の「歴史的農業環境閲覧システム」が公開
    ● 明治〜平成にかけての旧版地図を故 谷謙二先生の
    「今昔マップ」が公開

    View full-size slide

  31. 「2万分の1迅速測図」農研機構 歴史的農業環境閲覧システムより

    View full-size slide

  32. 地図の土台を作る
    ● 江戸時代の絵図、明治初期の地図と
    さらに誤差を補正するために
    国土地理院の「地理院タイル」を用いて
    海岸線・街道・国境・航路などをQGIS上で描画する

    View full-size slide

  33. 背景画像は国土地理院「地理院タイル」

    View full-size slide

  34. 地図の情報を作る
    ● 江戸時代の絵図、『江戸名所図会』などの当時の文献
    をもとにPOI(ポイント情報)をプロット
    ● 村・宿場町の位置は明治の地図と「角川日本地名大事
    典」より推定

    View full-size slide

  35. 地図デザイン・アイコンの作成
    ● 地図のデザインやアイコンも
    オリジナルで作成!

    View full-size slide

  36. 峠 渡/湊 寺 劇場 関所 門 茶屋
    山 宿場 神社 史跡 橋 城 市

    View full-size slide

  37. 背景画像は国土地理院「地理院タイル」

    View full-size slide

  38. 情報を作る上で気をつけたこと
    ● 参考にした文献等は国・行政機関・地方自治体や
    博物館などの信頼性の高い出典元を極力使用した
    ● Googleマップ等、商業地図の情報は使わない

    View full-size slide

  39. 地図をウェブ地図化する
    ● QGISの「タイル作成機能」を使用しウェブ上で
    見れる形に書き出した上、MapLibreという
    オープンソースの地図ライブラリに読み込み
    サーバ上にアップロードを行った

    View full-size slide

  40. 04 れきちずの今後

    View full-size slide

  41. 現状の課題
    ● POI(ポイント情報)などが少ない、バラツキがある
    ● ある程度までしかズームできない
    ● POIの表示の挙動もあんまりよくない
    (重要度を高くしている地点が途中で消えたりする)

    View full-size slide

  42. 今後、機能を強化したいところ
    ● 現在の地図と2画面で比較・重ね合わせる
    ● 地点を押すと情報表示できる
    ● 多言語表示やふりがなを表示できる
    ● 経路検索機能(できれば)

    View full-size slide

  43. 既存のオープンデータの活用
    ● 国立情報研などが主催する「ROIS-DS人文学オープン
    データ共同利用センター」の江戸の地名等の
    データセットを今後活用し地図を強化していきたい

    View full-size slide

  44. 今回公開してみて
    ● ここまで反響を頂けるとは思っておらず、感謝です
    ● 資料がデジタル化されていることのありがたさ!
    ● 土地の歴史調べ・街道巡り等に活用いただければ
    ● 自分は素人なので、「ここは違うよ!」
    「こうした方がいいよ!」等の情報を募集中です

    View full-size slide

  45. ありがとうございました!

    View full-size slide