はじめに

歴史的な旅路、探検の記録、文化遺産の分布など、「場所」と結びついた物語を伝えるには、地図を使ったストーリーテリングが効果的です。地図上のポイントを順に辿りながら、各地点にまつわるテキストや画像を表示することで、読者は空間的な文脈を理解しながら物語に没入できます。

StoryMapJS は、ノースウェスタン大学の Knight Lab が開発した、地図ベースのストーリーテリングツールです。スライド形式のインターフェースで、地図上のポイントを巡るインタラクティブな物語を作成できます。ライセンスは MPL-2.0 で、無料で利用可能です。

StoryMapJSの特徴

1. スライドベースのナビゲーション

StoryMapJSでは、各ポイント（場所）を一つのスライドとして構成します。読者がスライドを進めると、地図がアニメーション付きで次のポイントまで移動します。この滑らかな遷移により、物語の流れと地理的な移動が視覚的に結びつきます。

2. 直感的なオーサリングツール

Knight Labが提供するWebベースのエディタを使えば、プログラミング不要でStoryMapを作成できます。地図上でポイントをクリックし、テキストと画像を追加するだけで完成します。

3. Gigapixel（ギガピクセル）モード

StoryMapJSのユニークな機能の一つが、Gigapixelモードです。通常の地図の代わりに、高解像度の画像（絵画、古地図、設計図など）を「地図」として使用できます。画像上の特定の箇所にポイントを配置し、拡大しながら詳細を解説するという使い方が可能です。

これは美術作品の分析や、歴史的地図の解説に非常に有効です。

4. 多様なメディア対応

各スライドには、画像、YouTube動画、Vimeo動画、Twitter、Flickr、Wikipediaなど、さまざまなメディアを埋め込むことができます。

作成手順

オンラインエディタを使う方法

  1. StoryMapJS公式サイトにアクセス
  2. 「Make a StoryMap」をクリックし、Googleアカウントでログイン
  3. タイトルスライドを作成
  4. 「Add Slide」で新しいポイントを追加
  5. 地図上の位置を指定し、テキストとメディアを入力
  6. すべてのポイントを追加したら「Share」から公開URL・埋め込みコードを取得

JSON形式で作る方法

より高度なカスタマイズが必要な場合は、JSON形式でデータを定義し、JavaScriptライブラリを使って表示することも可能です。自分のサーバーでホスティングする場合はこちらの方法が適しています。

活用例

歴史的旅路の追体験

松尾芭蕉の「奥の細道」のルートをStoryMapで再現する例を考えてみましょう。江戸から出発し、日光、那須、松島、平泉、出羽三山、象潟、金沢、大垣と巡る旅路を地図上にプロットします。各地点のスライドには、該当する俳句の本文と現代語訳、現地の写真、関連する歴史的背景を添えることで、文学作品の空間的理解を深めるリソースが完成します。

文化遺産のマッピング

世界遺産や国宝建築物の分布を地図上に示し、各スポットの写真と解説を添えることで、文化遺産のデジタルガイドを作成できます。

移民・移動の記録

歴史的な移民の経路を追跡し、出発地での状況、経由地での出来事、定住地での生活といった物語を地理的文脈の中で語ることができます。

研究フィールドワークの報告

考古学や民族学のフィールドワークにおいて、調査地点を地図上にプロットし、各地点での発見や観察結果をスライドで報告するという使い方も考えられます。

Gigapixelモードの活用

  • 美術作品の分析: 大型絵画の各部分を拡大しながら、描写技法や象徴的なモチーフを解説
  • 歴史的地図の解読: 古地図の特定の区域を拡大し、地名や建造物を現代と比較
  • 建築図面の解説: 歴史的建造物の設計図上で、構造的特徴を順に解説

カスタマイズ

地図タイルの変更

デフォルトの地図スタイルのほか、OpenStreetMapやStamenなどの地図タイルを選択できます。歴史的なテーマには、アンティーク調の地図タイルが雰囲気に合うでしょう。

言語設定

インターフェースの言語を変更できます。日本語にも対応しており、ナビゲーションボタンなどが日本語で表示されます。

注意点

  • オンラインエディタで作成したStoryMapはGoogleドライブに保存されます
  • 画像は外部URLで指定する必要があり、ローカルファイルの直接アップロードには制限があります
  • Gigapixelモードを使うには、画像をタイル化するツール（Zoomifyなど）で事前に処理する必要があります
  • モバイル端末では、画面サイズの制約からスライドの見え方が変わることがあります

TimelineJSとの組み合わせ

StoryMapJSは同じKnight Labが開発したTimelineJSと組み合わせることで、時間と空間の両軸でストーリーを語ることができます。タイムラインで時系列の概要を示し、StoryMapで地理的な詳細を補足するといった使い方が効果的です。

まとめ

StoryMapJSは、地図上のポイントを辿りながらストーリーを語るインタラクティブコンテンツを、簡単に作成できるツールです。スライドベースの直感的なナビゲーション、アニメーション付きの地図遷移、そしてGigapixelモードという独自機能により、DH研究の成果発信から教育コンテンツの制作まで、幅広く活用できます。