1 2024/10/24 NIKKEI Tech Talk #26 日本経済新聞社 編集 先端ビジュアルセンター ニュースルームエンジニア 千﨑 亮平 日経ビジュアルデータにおける スクロールテリングと地図

2 自己紹介 千﨑 亮平（せんざき りょうへい ） 日本経済新聞社　2022年入社 編集 先端ビジュアルセンター 戦略コンテンツグループ ニュースルームエンジニア 日経ビジュアルデータでのビジュアライゼーションに関するフロントエン ド開発に携わっています 大阪出身

3 本日話すこと ● 日経ビジュアルデータ ○ スクロールテリングとは ● ビジュアルデータの制作裏側の紹介 ○ 羽田空港、JAL機衝突事故 ■ スクロールテリングと3Dモデルの活用 ○ 万博開幕まで半年　大阪再始動 ■ 地図ライブラリ ■ ベースマップ（PMTilesの活用）

日経ビジュアルデータとは 4

5 https://www.nikkei.com/special/vdata

6 氾濫する生成AIアニメ 9万枚調査で見えた権利侵害 https://vdata.nikkei.com/newsgraphics/ai-anime/ 出所：civitai,pixai.art,seaart.aiで公開された画像

7 「地震列島」日本　地図とデータで見る https://vdata.nikkei.com/newsgraphics/japan-epicenter-map/ 出所：気象庁

8 日経ビジュアルデータ デザイン さまざまな手法を駆使して ニュースをよりわかりやすく、より深く 先端表現 データ分析 プログラミング 取材 編集 ビジュアルジャーナリズムを切り拓く

9 日経ビジュアルデータ デスク シニアニュースルーム デザイナー・エンジニア （ディレクター） 伝える事の管理 出稿部(記事を書く部署)との調整 クオリティ管理 工数管理 記者 ニュースルーム デザイナー ニュースルーム エンジニア 伝えるべきこと 伝え方 伝えるための仕組み

スクロールテリングとは 10

11 スクロールテリング スクロールテリング（Scrollytelling）とは、「Scroll」と「Storytelling」を組み合 わせた「画面のスクロールと連動したストーリーテリング」を表す造語[1] 通常のWebページと同様にテキストによるストーリーと、スクロールに連動 してインタラクティブなビジュアルを組み合わせて表現 複雑なデータや重要な出来事を視覚的に伝えるために利用 [1] : https://note.com/kazukio/n/n53837e8121b2

12 スクロールテリング スクロールに応じて、背景のビジュアルが変化 読者の理解をテキストとビジュアルで促している 原発処理水を海洋放出へ　福島第一、廃炉へ新段階 https://vdata.nikkei.com/newsgraphics/fukushima-water-release/

ビジュアルデータ制作の裏側を紹介 13

14 ビジュアルデータ制作の裏側 地理空間情報を用いた2つのコンテンツを紹介 ● JAL機炎上、そのとき何が　検証・羽田空港衝突事故 ● 万博開幕まで半年　大阪再始動 https://vdata.nikkei.com/newsgraphics/haneda-runway-collision/ https://vdata.nikkei.com/newsgraphics/expo2025-osaka-restart/

15 JAL機炎上、そのとき何が　検証・羽田空港衝突事故 2024年1月、羽田空港でJAL機が海上保安庁機とぶつか り、炎上した事故に関するコンテンツ 滑走路での衝突はどうして起きたのかなどを、現場の映 像や交信記録、3Dモデルから検証しています 2024年度 新聞協会賞 受賞コンテンツ →発生から１週間で公開 　コンテンツの制作の裏側を紹介します https://vdata.nikkei.com/newsgraphics/haneda-runway-collision/

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 JAL機炎上、そのとき何が　検証・羽田空港衝突事故 書き出した動画 → 連番画像のスクロールアニメー ションとして実装 パラパラ漫画のように、スクロール に合わせて表示される画像が切り 替わる

18 JAL機炎上、そのとき何が　検証・羽田空港衝突事故 どうして、パラパラ漫画方式で実装しているのか メリット デメリット 画像連番（パラパラ漫画方式） 動作が安定している ファイルサイズやファイル数が増えてしま う 動画（videoタグに動画を実装し、スクロー ル量と再生位置を同期） 画像連番に比べるとファイルサイズやファ イル数は少ない ブラウザや環境によって、意図しない挙動 があり、安定性に欠ける 3Dライブラリ(Three.jsやCesium.jsなど)を 利用 実装の自由度は高い リッチな3Dの場合、データ量が大きく、読み 込みに時間がかかる 報道機関として、どのような環境にいる読者にも、 環境に依存しない同一の情報を伝える必要がある。

19 万博開幕まで半年　大阪再始動 10月13日で大阪・関西万博の開幕まで半年。 会場の「夢洲」ではパビリオンの建設が着々と進 み、大阪の街中も大きく変わっています。 万博は長く停滞してきた関西経済の復活の起爆剤 になるのか。変化の波を追います。 https://vdata.nikkei.com/newsgraphics/expo2025-osaka-restart/

20 万博開幕まで半年　大阪再始動 ● 地図ライブラリ：MapLibre GL JS ● PC画面にはスクロールテリング ○ スクロールテリングの実装には IntersectionObserver でスクロール 要素(右図の赤枠)を監視 ○ 適切なタイミングで地図を移動した り、表示するデータを切り替えたりす る MapLibre : https://maplibre.org/

21 万博開幕まで半年　大阪再始動 ● スマホ画面では静止画の地図 ○ 地図とテキストが重なることによる地図の視認性低下を避ける PCでは地図を右側に配置し、スクロールテリングで地図が遷移する

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 地図で用いるタイル画像について ● XYZ Tiles ○ 予めタイル状に分割した画像を配信。多くのウェブ地図で利用されている ● MBTiles ○ SQLiteデータベースを利用。地図タイル（ラスタ、ベクトル）を1つのファイルにまとめられ る ○ タイルデータの配信にはTileServer GLなど専用のサーバー実装が必要 ● PMTiles ○ MBTiles同様、1つのファイルにタイルデータを格納 ○ HTTP Range Requests に対応し、部分的なデータ取得が可能 ■ Webサーバーへのアップロードだけで地図を公開できる ■ MapLibreなどの地図ライブラリでベースマップとして実装可能

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

go-pmtiles : MBTilesデータを PMTiles に変換 25 万博開幕まで半年　大阪再始動 Maputnik : MapLibreスタイルに基づいたビジュアルエ ディタ。スタイルJSONを出力でき、それをMapLibreで読 み込む ベースマップの作成方法 ● OSMのデータをPMTilesに変換していく ● スタイルを Maputnik で調整 https://github.com/protomaps/go-pmtiles https://maputnik.github.io/editor/

26 課題や展望 ● 表現が先行して、読者にとってわかりにくくなっていないか ○ 「リッチ」な表現を誰でも簡単に作れるようになった ○ 地図（地図以外にもリッチな表現を含む）が必要な文脈とは何かを考える必要がある ● スクロールテリングが最適な見せ方なのか ○ スクロール量が多いと読者の離脱につながることも ○ デバイスに合わせた表現に ■ 「万博開幕まで半年　大阪再始動」：スマホではスクロールテリングをしない ● 読者にとって最適な表現の模索を続けていく必要がある

27 ありがとうございました！