日経ビジュアルデータにおける スクロールテリングと地図/nikkei-tech-talk-26

日経ビジュアルデータにおけるスクロールテリングと地図 というタイトルで発表しました #nikkei_tech_talk

日本経済新聞社 編集 先端ビジュアルセンター
ニュースルームエンジニア
千﨑 亮平

https://nikkei.connpass.com/event/331637/

Transcript

1. 1 2024/10/24 NIKKEI Tech Talk #26 日本経済新聞社 編集 先端ビジュアルセンター ニュースルームエンジニア 千﨑 亮平 日経ビジュアルデータにおける スクロールテリングと地図
2. 2 自己紹介 千﨑 亮平（せんざき りょうへい ） 日本経済新聞社　2022年入社 編集 先端ビジュアルセンター 戦略コンテンツグループ ニュースルームエンジニア 日経ビジュアルデータでのビジュアライゼーションに関するフロントエン ド開発に携わっています 大阪出身
3. 3 本日話すこと • 日経ビジュアルデータ ◦ スクロールテリングとは • ビジュアルデータの制作裏側の紹介 ◦ 羽田空港、JAL機衝突事故 ▪ スクロールテリングと3Dモデルの活用 ◦ 万博開幕まで半年　大阪再始動 ▪ 地図ライブラリ ▪ ベースマップ（PMTilesの活用）
4. 日経ビジュアルデータとは 4
5. 5 https://www.nikkei.com/special/vdata
6. 6 氾濫する生成AIアニメ 9万枚調査で見えた権利侵害 https://vdata.nikkei.com/newsgraphics/ai-anime/ 出所：civitai,pixai.art,seaart.aiで公開された画像
7. 7 「地震列島」日本　地図とデータで見る https://vdata.nikkei.com/newsgraphics/japan-epicenter-map/ 出所：気象庁
8. 8 日経ビジュアルデータ デザイン さまざまな手法を駆使して ニュースをよりわかりやすく、より深く 先端表現 データ分析 プログラミング 取材 編集 ビジュアルジャーナリズムを切り拓く
9. 9 日経ビジュアルデータ デスク シニアニュースルーム デザイナー・エンジニア （ディレクター） 伝える事の管理 出稿部(記事を書く部署)との調整 クオリティ管理 工数管理 記者 ニュースルーム デザイナー ニュースルーム エンジニア 伝えるべきこと 伝え方 伝えるための仕組み
10. スクロールテリングとは 10
11. 11 スクロールテリング スクロールテリング（Scrollytelling）とは、「Scroll」と「Storytelling」を組み合 わせた「画面のスクロールと連動したストーリーテリング」を表す造語[1] 通常のWebページと同様にテキストによるストーリーと、スクロールに連動 してインタラクティブなビジュアルを組み合わせて表現 複雑なデータや重要な出来事を視覚的に伝えるために利用 [1] : https://note.com/kazukio/n/n53837e8121b2
12. 12 スクロールテリング スクロールに応じて、背景のビジュアルが変化 読者の理解をテキストとビジュアルで促している 原発処理水を海洋放出へ　福島第一、廃炉へ新段階 https://vdata.nikkei.com/newsgraphics/fukushima-water-release/
13. ビジュアルデータ制作の裏側を紹介 13
14. 14 ビジュアルデータ制作の裏側 地理空間情報を用いた2つのコンテンツを紹介 • JAL機炎上、そのとき何が　検証・羽田空港衝突事故 • 万博開幕まで半年　大阪再始動 https://vdata.nikkei.com/newsgraphics/haneda-runway-collision/ https://vdata.nikkei.com/newsgraphics/expo2025-osaka-restart/
15. 15 JAL機炎上、そのとき何が　検証・羽田空港衝突事故 2024年1月、羽田空港でJAL機が海上保安庁機とぶつか り、炎上した事故に関するコンテンツ 滑走路での衝突はどうして起きたのかなどを、現場の映 像や交信記録、3Dモデルから検証しています 2024年度 新聞協会賞 受賞コンテンツ →発生から１週間で公開 　コンテンツの制作の裏側を紹介します https://vdata.nikkei.com/newsgraphics/haneda-runway-collision/
16. 16 JAL機炎上、そのとき何が　検証・羽田空港衝突事故 1. 飛行機以外の衛星地図の動きをGoogle Earth Studioで動画として出力 2. 1. のカメラの動きをBlenderに読み込ませる 3. 「フライトレーダー24」からJAL機の航跡データ （KMLファイル）を取得 4. KMLファイルをBlenderに読み込み、飛行機の動 きを作成。動画に出力 → 1. と4. の2つの動画を重ねて、完成 https://www.nikkei.com/article/DGXZQOFH122VP0S4A110C2000000/
17. 17 JAL機炎上、そのとき何が　検証・羽田空港衝突事故 書き出した動画 → 連番画像のスクロールアニメー ションとして実装 パラパラ漫画のように、スクロール に合わせて表示される画像が切り 替わる
18. 18 JAL機炎上、そのとき何が　検証・羽田空港衝突事故 どうして、パラパラ漫画方式で実装しているのか メリット デメリット 画像連番（パラパラ漫画方式） 動作が安定している ファイルサイズやファイル数が増えてしま う 動画（videoタグに動画を実装し、スクロー ル量と再生位置を同期） 画像連番に比べるとファイルサイズやファ イル数は少ない ブラウザや環境によって、意図しない挙動 があり、安定性に欠ける 3Dライブラリ(Three.jsやCesium.jsなど)を 利用 実装の自由度は高い リッチな3Dの場合、データ量が大きく、読み 込みに時間がかかる 報道機関として、どのような環境にいる読者にも、 環境に依存しない同一の情報を伝える必要がある。
19. 19 万博開幕まで半年　大阪再始動 10月13日で大阪・関西万博の開幕まで半年。 会場の「夢洲」ではパビリオンの建設が着々と進 み、大阪の街中も大きく変わっています。 万博は長く停滞してきた関西経済の復活の起爆剤 になるのか。変化の波を追います。 https://vdata.nikkei.com/newsgraphics/expo2025-osaka-restart/
20. 20 万博開幕まで半年　大阪再始動 • 地図ライブラリ：MapLibre GL JS • PC画面にはスクロールテリング ◦ スクロールテリングの実装には IntersectionObserver でスクロール 要素(右図の赤枠)を監視 ◦ 適切なタイミングで地図を移動した り、表示するデータを切り替えたりす る MapLibre : https://maplibre.org/
21. 21 万博開幕まで半年　大阪再始動 • スマホ画面では静止画の地図 ◦ 地図とテキストが重なることによる地図の視認性低下を避ける PCでは地図を右側に配置し、スクロールテリングで地図が遷移する
22. 22 万博開幕まで半年　大阪再始動 地図に表示するデータの作成 → QGIS でのジオリファレンスを活用 • 大阪メトロ中央線 夢洲駅への延伸区間 • 万博会場、IR予定地 • グラングリーン大阪 Open Street Mapと大阪市の資料をもとに作成 https://www.city.osaka.lg.jp/port/page/0000002900.html https://www.city.osaka.lg.jp/osakatokei/page/0000005308.html ジオリファレンス：衛星画像や図を地図の座標系に結び 付けて、正確な位置に対応させる
23. 23 地図で用いるタイル画像について • XYZ Tiles ◦ 予めタイル状に分割した画像を配信。多くのウェブ地図で利用されている • MBTiles ◦ SQLiteデータベースを利用。地図タイル（ラスタ、ベクトル）を1つのファイルにまとめられ る ◦ タイルデータの配信にはTileServer GLなど専用のサーバー実装が必要 • PMTiles ◦ MBTiles同様、1つのファイルにタイルデータを格納 ◦ HTTP Range Requests に対応し、部分的なデータ取得が可能 ▪ Webサーバーへのアップロードだけで地図を公開できる ▪ MapLibreなどの地図ライブラリでベースマップとして実装可能
24. 24 万博開幕まで半年　大阪再始動 ベースマップの作成方法 • OpenStreetMap(OSM) を使用 ◦ OSMのデータをPMTilesに変換していく OpenStreetMap : https://www.openstreetmap.org/copyright/ja Geofabrik Download Server : PBFファイルな どのOSMのデータをダウンロードできる planetiler : OSMのデータをMBTilesに変換したも のを出力してくれる https://download.geofabrik.de/ https://github.com/onthegomap/planetiler/tree/main
25. go-pmtiles : MBTilesデータを PMTiles に変換 25 万博開幕まで半年　大阪再始動 Maputnik : MapLibreスタイルに基づいたビジュアルエ ディタ。スタイルJSONを出力でき、それをMapLibreで読 み込む ベースマップの作成方法 • OSMのデータをPMTilesに変換していく • スタイルを Maputnik で調整 https://github.com/protomaps/go-pmtiles https://maputnik.github.io/editor/
26. 26 課題や展望 • 表現が先行して、読者にとってわかりにくくなっていないか ◦ 「リッチ」な表現を誰でも簡単に作れるようになった ◦ 地図（地図以外にもリッチな表現を含む）が必要な文脈とは何かを考える必要がある • スクロールテリングが最適な見せ方なのか ◦ スクロール量が多いと読者の離脱につながることも ◦ デバイスに合わせた表現に ▪ 「万博開幕まで半年　大阪再始動」：スマホではスクロールテリングをしない • 読者にとって最適な表現の模索を続けていく必要がある
27. 27 ありがとうございました！