HistoryMaps - どのように構築したか

歴史には常に「物語」があります—または、HistoryMapsの場合は、何百もの物語があります！読者を時間と地理を通じて歴史を探求するように誘う、没入型の教育サイトであるHistoryMapsは、インタラクティブな地図をストーリーテリングの媒体として使用する美しい例です。HistoryMapsの作成者であるNono Umasyと連絡を取り、HistoryMapsの構築について詳しく聞きました。

HistoryMapsを初めて見たとき、それは大規模なクリエイターチームの製品だと思いましたが、それはあなただけです！何があなたにそれを作成するきっかけを与えたのですか？

HistoryMapsは、私の情熱から生まれたプロジェクトです。子供の頃から歴史が好きで、最近、歴史を空間的、時間的につなげ、楽しく直感的な方法で探求し、研究する方法を探していました。しかし、私が望む機能を備えたアプリが見つからなかったので、自分で作成しました。

データのほとんどすべてはWikipediaおよびその他のいくつかのソースからのもので、ビデオコンテンツはYoutubeからのもので、画像は主にWikipediaまたはPinterestからのものです。大量の優れたコンテンツが存在しますが、少し煩雑です。HistoryMapsは、すべてのノイズの上に構造を提供し、イベントを適切な時間と場所に整理します。HistoryMapsには、ストーリーマップ、タイムライン、ホームページのグローバルマップという3つの主要なコンポーネントがあります。それぞれが、没入型のガイド付きナラティブとして、時間経過とともに、または地理全体にわたって、異なるモードで歴史的イベントを提示します。

HistoryMapsで構築したもので、特に気に入っている点は何ですか？

‍私のお気に入りの機能は、タイムラインと地図です。なぜなら、歴史的イベントの「場所」と「時期」をより直感的に理解できるからです。ナポレオンについて話すなら、彼の写真を見せることができるのに、なぜ彼の外見を説明するのでしょうか。時間と場所も同じです。地図とタイムラインを表示します。あなたの脳はそれほど考える必要はありません。物事がどこに属し、他の出来事や場所との関係でどこに適合するかを知っています。それは歴史を単純化します。

Mapboxの地形機能は、歴史の別の側面も明らかにします。それは、地理の影響です。地理は、政治から経済、宗教、移住など、歴史的な出来事がどのように展開されたかにおいて、強力な変数です。優れた3DのMapbox地形を使用すると、多くの「アハ」モーメントが得られます。地理は、チベットにおける仏教の普及の遅れに影響を与えたのでしょうか？ナポレオンがエジプト遠征に行ったのはなぜでしょうか？これらの出来事の多くは、地図上で見るとより意味をなします。

HistoryMapsのデザインは非常に考え抜かれていると感じます。デザインのアイデアはどこから得ていますか？

私のインスピレーションのほとんどは、子供の頃から好きだったものすべてに基づいています。絵本、図書館、古い地図、ゲーム、物語、映画、イラスト、美術館、絵画、語り手などです。実際、これらの影響のそれぞれが、サイトの設計と実装に見られ、感じられます。 

たとえば、マップのスタイリングを取り上げます。マップがズームインされると表示されるフォグレイヤーがあります。それは、物語のイラスト付きの本からのように、「寓話の物語」のような外観を作成します。また、マップ周辺の多くのノイズを隠して、最も関連性の高い場所に焦点を当て続け、マップ周辺のUI要素を目立たせるための視覚的なトリックです。物語の最初の文字にドロップキャップスタイリングを使用したり、メニューを本の目次のようにデザインしたりするなど、小さなデザインのタッチで、その古い本の雰囲気を続けています。

イベントによっては、カメラコントロールを備えた監督のように考えることがあります。ほとんどのイベントでは、地図のflyTo()はピッチ、ベアリング、ズームのプロパティがランダム化されます。しかし、戦闘や包囲などの特定の種類のイベントでは、さらにズームインします。なぜなら、これらは詳細が多く含まれる「より深い」ストーリーであり、より近く、より親密な視点で見たいからです。カメラは広角であるべき場合もあれば、望遠であるべき場合もあるため、HistoryMapsは柔軟に対応できるように構築されています。

Mapboxを使った構築はいかがですか？

私は数年前からMapboxを使用しています。最初に他の人のプロジェクトでそれに出会いました。以前はLeafletを使用しており、ここ数年はGoogle Mapsを使用していました。各プラットフォームは少しずつ異なることを行い、一方の機能が他方よりも優れている点もありますが、現時点ではMapboxが本当に気に入っています。 

ソフトウェア開発において、通常、最高のプラットフォームは適応できるものです。Mapboxは、成熟した、適切に実行された機能を適切な速度で提供しています。すべてのAPIが平等に作成されているわけではありません。Mapbox GL JSは使いやすく、包括的です。実装したいことのほとんどが揃っています。私の一番好きなところは、インタラクティブな地図を数分で（文字通り）作成できることです。ライブラリが正常に動作し、アイデアを妨げないときはとても嬉しいです。

デザイナーとして、私はMapbox Studioの多くの機能を高く評価しています。もしあなたが私のような完璧主義者で、細部が重要であるならば、すべてのピクセルをコントロールしたいと思うでしょう。その点において、Mapboxは最高のツールだと思います。 

Pysal、Gdal、Geopandasなどの他のライブラリで利用できる、より多くの空間分析ツールがMapboxに組み込まれることを期待しています。私は現在、2次ベジエ曲線を使用してスプラインを作成するライブラリに取り組んでいます。これは、地球儀でうまく機能する滑らかなルート線と弧を描画できるようにしたいからです。また、カスタムgeojsonを作成および編集して、過去のポリゴンを作成したいからです。Turf.jsやgeojson.ioのようなツールスイートをまとめることで、空間データの作成がはるかに簡単になり、時代遅れのGISソフトウェアに匹敵するものができるでしょう！

このプロジェクトで苦労したことは何ですか？また、他のクリエイターにアドバイスはありますか？

‍当初の課題のほとんどは、私が持っていたすべてのアイデアを実装することでした。私は30年以上テクノロジー業界でプロダクトデザイナーとして働いており、進化する製品を作成するのは私にとって自然なことです。私は決してアイデアが尽きることはありません。それは私の呪いです。

アイデアの中には、「実装方法はわからないが、これができればクールだ」というカテゴリーのものがあり、実験とプロトタイピングが必要です。その例が、伝統的な語り部からインスピレーションを得た「ストーリーテラーモード」です。ユーザーは「再生」ボタンをクリックすると、タイムライン上のイベントが自動スクロールされ、地図がそれぞれのイベントマーカーにflyTo()します。この機能には、設計と実装の両方で多くの可動部分があるため、正しく動作させるには時間がかかりました。そして、まだ改善の余地があります。現在、BGMを試したり、地図が移動するにつれて各イベントが読み上げられるテキスト読み上げプロトタイプに取り組んでいます。まるでミニ映画のようです。

プロジェクトを開始する場合は、まずMapboxのチュートリアルから始めるか、Youtubeのビデオを見て、Mapbox GL JS APIの機能に慣れることをお勧めします。そうすれば、アイデアが頭に浮かび、これらのチュートリアルで得た筋肉の記憶が、後で解決策を見つけるのに役立ちます。私のようにデザインのバックグラウンドをお持ちの方は、自分のアイデアを自由に実装し、反復したい場合は、コーディングを学ぶ時間を作ることをお勧めします。私はパンデミックの間に独学でコーディングを学びましたが、今ではインスピレーションや好奇心が湧くたびに、すぐに試してアイデアの深掘りを楽しむことができます。

HistoryMapsの今後の展開

Globeビューを待っていましたが、期待を裏切られませんでした。今後数か月間、これを楽しんでいきます。Globeビューは、マゼランの航海のように、開始から終了までグローバルな旅全体を流動的に表示したいHistoryMapsコンテンツに最適です。

ワールドヒストリータイムラインは、最初から実装したいと思っていたアイデアの1つで、現在も取り組んでいます。基本的に、すべてのストーリーからのすべてのイベントが1つの巨大なグローバルタイムラインに結合され、タグまたは期間でフィルタリングできます。これは、比較歴史研究に最適です。オスマン帝国がバルカン半島を征服していたとき、中央アメリカでは何が起こっていたのでしょうか？十字軍が起こっていたとき、日本では何が起こっていたのでしょうか？何かパターンはありますか？イベント間の因果関係を見つけることができたら、あるいは、プラットフォームがこれらの隠れたシグナルをあなたのために表面化させたらどうでしょうか。HistoryMapsでグラフ理論を使用して、イベント間の隠れた因果関係や相関関係を表面化させることを計画しています。私もデータサイエンティストなので、これらの筋肉を伸ばすのは良いことです。HistoryMapsは私自身のクリエイティブプロジェクトなので、好きなようにできますが、成熟して他の人に楽しんでもらえるものにしたいとも思っています。つまり、他とは一線を画す機能を試してみるということです。

Nono様、インスピレーションと経験を共有していただきありがとうございます！HistoryMapsで増え続けるコンテンツを探索し、Twitterで@nonoumasyをフォローして、彼の最新の実験や新機能をチェックしてください。