ホーム 記事一覧 ブック DH週間トピックス 検索 このサイトについて
English
StoryMapJS:地図ベースのストーリーテリングツール活用ガイド

StoryMapJS:地図ベースのストーリーテリングツール活用ガイド

はじめに 歴史的な旅路、探検の記録、文化遺産の分布など、「場所」と結びついた物語を伝えるには、地図を使ったストーリーテリングが効果的です。地図上のポイントを順に辿りながら、各地点にまつわるテキストや画像を表示することで、読者は空間的な文脈を理解しながら物語に没入できます。 StoryMapJS は、ノースウェスタン大学の Knight Lab が開発した、地図ベースのストーリーテリングツールです。スライド形式のインターフェースで、地図上のポイントを巡るインタラクティブな物語を作成できます。ライセンスは MPL-2.0 で、無料で利用可能です。 StoryMapJSの特徴 1. スライドベースのナビゲーション StoryMapJSでは、各ポイント(場所)を一つのスライドとして構成します。読者がスライドを進めると、地図がアニメーション付きで次のポイントまで移動します。この滑らかな遷移により、物語の流れと地理的な移動が視覚的に結びつきます。 2. 直感的なオーサリングツール Knight Labが提供するWebベースのエディタを使えば、プログラミング不要でStoryMapを作成できます。地図上でポイントをクリックし、テキストと画像を追加するだけで完成します。 3. Gigapixel(ギガピクセル)モード StoryMapJSのユニークな機能の一つが、Gigapixelモードです。通常の地図の代わりに、高解像度の画像(絵画、古地図、設計図など)を「地図」として使用できます。画像上の特定の箇所にポイントを配置し、拡大しながら詳細を解説するという使い方が可能です。 これは美術作品の分析や、歴史的地図の解説に非常に有効です。 4. 多様なメディア対応 各スライドには、画像、YouTube動画、Vimeo動画、Twitter、Flickr、Wikipediaなど、さまざまなメディアを埋め込むことができます。 作成手順 オンラインエディタを使う方法 StoryMapJS公式サイトにアクセス 「Make a StoryMap」をクリックし、Googleアカウントでログイン タイトルスライドを作成 「Add Slide」で新しいポイントを追加 地図上の位置を指定し、テキストとメディアを入力 すべてのポイントを追加したら「Share」から公開URL・埋め込みコードを取得 JSON形式で作る方法 より高度なカスタマイズが必要な場合は、JSON形式でデータを定義し、JavaScriptライブラリを使って表示することも可能です。自分のサーバーでホスティングする場合はこちらの方法が適しています。 活用例 歴史的旅路の追体験 松尾芭蕉の「奥の細道」のルートをStoryMapで再現する例を考えてみましょう。江戸から出発し、日光、那須、松島、平泉、出羽三山、象潟、金沢、大垣と巡る旅路を地図上にプロットします。各地点のスライドには、該当する俳句の本文と現代語訳、現地の写真、関連する歴史的背景を添えることで、文学作品の空間的理解を深めるリソースが完成します。 文化遺産のマッピング 世界遺産や国宝建築物の分布を地図上に示し、各スポットの写真と解説を添えることで、文化遺産のデジタルガイドを作成できます。 移民・移動の記録 歴史的な移民の経路を追跡し、出発地での状況、経由地での出来事、定住地での生活といった物語を地理的文脈の中で語ることができます。 研究フィールドワークの報告 考古学や民族学のフィールドワークにおいて、調査地点を地図上にプロットし、各地点での発見や観察結果をスライドで報告するという使い方も考えられます。 Gigapixelモードの活用 美術作品の分析: 大型絵画の各部分を拡大しながら、描写技法や象徴的なモチーフを解説 歴史的地図の解読: 古地図の特定の区域を拡大し、地名や建造物を現代と比較 建築図面の解説: 歴史的建造物の設計図上で、構造的特徴を順に解説 カスタマイズ 地図タイルの変更 デフォルトの地図スタイルのほか、OpenStreetMapやStamenなどの地図タイルを選択できます。歴史的なテーマには、アンティーク調の地図タイルが雰囲気に合うでしょう。 言語設定 インターフェースの言語を変更できます。日本語にも対応しており、ナビゲーションボタンなどが日本語で表示されます。 注意点 オンラインエディタで作成したStoryMapはGoogleドライブに保存されます 画像は外部URLで指定する必要があり、ローカルファイルの直接アップロードには制限があります Gigapixelモードを使うには、画像をタイル化するツール(Zoomifyなど)で事前に処理する必要があります モバイル端末では、画面サイズの制約からスライドの見え方が変わることがあります TimelineJSとの組み合わせ StoryMapJSは同じKnight Labが開発したTimelineJSと組み合わせることで、時間と空間の両軸でストーリーを語ることができます。タイムラインで時系列の概要を示し、StoryMapで地理的な詳細を補足するといった使い方が効果的です。 まとめ StoryMapJSは、地図上のポイントを辿りながらストーリーを語るインタラクティブコンテンツを、簡単に作成できるツールです。スライドベースの直感的なナビゲーション、アニメーション付きの地図遷移、そしてGigapixelモードという独自機能により、DH研究の成果発信から教育コンテンツの制作まで、幅広く活用できます。

TimelineJS:スプレッドシートで作るインタラクティブ年表ガイド

TimelineJS:スプレッドシートで作るインタラクティブ年表ガイド

はじめに 歴史的な出来事の流れや、プロジェクトの進行過程を分かりやすく伝えるには、年表(タイムライン)が最も効果的な手段の一つです。しかし、見栄えの良いインタラクティブな年表を作成するには、通常はプログラミングの知識が必要とされます。 TimelineJS は、ノースウェスタン大学の Knight Lab が開発したオープンソースのタイムライン作成ツールです。Google スプレッドシートにデータを入力するだけで、美しいインタラクティブな年表を自動生成できます。ライセンスは MPL-2.0 で、無料で利用可能です。 TimelineJSの特徴 1. プログラミング不要 TimelineJSの最大の魅力は、コードを一切書かずにタイムラインを作成できることです。Knight Labが提供するGoogleスプレッドシートのテンプレートにデータを入力し、公開設定を行うだけで完成します。 2. メディアの統合 各イベントには、画像、動画、音声、ツイート、Wikipedia記事など、さまざまなメディアを埋め込むことができます。URLを指定するだけで自動的にメディアが表示されるため、視覚的にリッチなタイムラインを簡単に作れます。 対応メディアの例: 画像(JPEG、PNG、GIF) YouTube / Vimeo の動画 SoundCloud の音声 Twitter のツイート Wikipedia の記事 Google Map の地図 Flickr の写真 3. 美しいデザイン 生成されるタイムラインは、モダンなデザインで視覚的に洗練されています。レスポンシブ対応のため、PCでもスマートフォンでも快適に閲覧できます。スライド間のアニメーション遷移も滑らかです。 4. 多言語対応 TimelineJSは60以上の言語に対応しており、日本語でのインターフェース表示も可能です。日付フォーマットも各言語に合わせて自動調整されます。 作成手順 ステップ1:テンプレートの準備 TimelineJS公式サイトにアクセス 「Make a Timeline」セクションの「Get the Spreadsheet Template」をクリック Google スプレッドシートのテンプレートが開くので、コピーを作成 ステップ2:データの入力 スプレッドシートの各列にデータを入力します。主要な列は以下の通りです。 列名 説明 例 Year 年 1868 Month 月(任意) 1 Day 日(任意) 3 Headline イベントのタイトル 明治維新 Text 説明文 日本の近代化の始まり… Media メディアURL https://example.com/image.jpg Media Credit メディアのクレジット 国立国会図書館 最初の行(Title slide)はタイムライン全体のタイトルスライドになります。 ...