Software Overview · ソフトウェア解説

戦国時代
勢力変遷可視化

SVG Story Data Visualization — 歴史・年表

このソフトウェアとは?

戦国時代(1542〜1582年)の勢力変化を、動く地図+年表で視覚的に体験できるWebアプリケーションです。教科書の文字情報だけでは掴みにくい「誰が・どこを・いつ支配したか」を、色・地図・矢印でひと目で理解できます。

HTML・CSS・JavaScriptのみで動作するため、インストール不要。ブラウザで開くだけで即座に利用できます。授業・プレゼン・歴史学習のリファレンスとして幅広く活用できます。

全8シーンを収録。スライダーや再生ボタンで年代を自在に行き来しながら、戦国乱世の40年間を追体験できます。

🗾
SVG動く地図
日本列島を9地域に分割し、年代ごとに勢力の色がリアルタイムで変化します。どの地方を誰が支配しているか一目瞭然です。
📅
インタラクティブ年表
画面上部の年表バーをクリック・スライダーを操作するだけで、好きな年代にジャンプできます。
⚔️
合戦地点の表示
桶狭間・長篠・川中島など主要な合戦地点がパルスアニメーションで地図上に表示されます。
自動再生モード
再生ボタンを押すだけで40年の歴史が約18秒で自動再生されます。スライドショー感覚で鑑賞できます。
📋
解説パネル
各時代の出来事・主要勢力・支配領域が右パネルにまとめて表示されます。文字情報と地図情報を同時に確認できます。
🏹
進軍矢印
武将の移動・侵攻方向を破線矢印で可視化。たとえば武田信玄の西上ルートや信長の上洛路が直感的に分かります。

収録シーン一覧(全8シーン)

天文11年から天正10年までの約40年間を、歴史的転換点ごとに8つのシーンに分けて収録しています。

1542年
政治戦国乱世の幕明け
各地に戦国大名が割拠。今川・武田・上杉・北条・毛利の初期配置を確認できます。
1555年
合戦川中島の戦い・厳島合戦
武田信玄 vs 上杉謙信の川中島合戦(第二次)と、毛利元就が厳島で陶晴賢を破った合戦を収録。
1560年
合戦桶狭間の戦い
織田信長がわずか2千の兵で今川義元2万5千の大軍を奇襲。信長の天下への道が開かれた瞬間。
1568年
政治織田信長、上洛を果たす
足利義昭を奉じた信長が畿内を制圧。信長包囲網が形成され始める転換点を可視化。
1572年
合戦武田信玄 西上・三方ヶ原の戦い
信玄の最大版図を地図で確認。三方ヶ原での徳川家康壊滅と、信玄陣中急逝の転換点。
1575年
合戦長篠の戦い — 鉄砲三千挺
鉄砲×馬防柵の新戦術で武田騎馬隊を壊滅。戦国最強武田軍の没落と信長勢力の拡大を描写。
1580年
勢力信長の全盛期
石山本願寺降伏で最大の敵を屈服。東国は徳川、西は羽柴秀吉が担う分業体制を色分けで表示。
1582年
合戦本能寺の変 — 天下人の最期
明智光秀の謀反により畿内が赤く染まるシーンが圧巻。羽柴秀吉の中国大返しを矢印で可視化。

操作方法

直感的な操作で誰でもすぐに使えます。マウス・キーボードどちらでも操作可能です。

▶ / ⏸
自動再生 / 一時停止 約2.2秒おきに自動でシーンが進みます。もう一度押すと停止します。
前へ / 次へ
1シーンずつ移動 ボタンをクリックして1年代ずつ前後に移動できます。
━━●━━
スライダー操作 バーをドラッグして好きな年代に直接ジャンプできます。
● 年表ドット
年表クリック 画面上部の年表バーにある丸いドットをクリックすると該当シーンに移動します。
← →
キーボード矢印キー 左右の矢印キーでシーンを前後に切り替えられます。
Space
スペースキー スペースキーで再生・一時停止をトグルできます。
💡 おすすめの使い方 まず▶ボタンで自動再生して全体の流れを掴み、その後スライダーで気になる年代に戻って右パネルの解説を読み込む、という2ステップがおすすめです。

登場する主要勢力

各勢力は固有の色で地図上に表示されます。色凡例と照らし合わせながら地図を読み解いてください。

武将名 拠点・主な支配地 主な活躍期
織田信長 尾張 → 畿内・東海・北陸 1560〜1582年
武田信玄 甲斐 → 信濃・駿河・東海 1542〜1573年
上杉謙信 越後 → 北陸・関東 1542〜1578年
今川義元 駿河・遠江・三河 1542〜1560年
毛利元就 安芸 → 中国地方全域 1542〜1571年
北条氏康 相模・伊豆・武蔵・関東 1542〜1560年代
明智光秀 丹波 → 畿内(一時的) 1582年(本能寺の変)
徳川家康 三河 → 東国全域 1560〜1582年(後継者)

技術仕様

外部ライブラリ・サーバー不要。モダンブラウザであれば、HTMLファイルをダブルクリックするだけで動作します。

🌐 HTML5
🎨 CSS3 / CSS変数
⚙️ Vanilla JavaScript
🖼️ SVG(Scalable Vector Graphics)
🔤 Google Fonts(Noto Serif JP)
📱 レスポンシブ対応
🖼️
SVGによる地図描画
日本地図を9つのSVG ポリゴンで構成。CSSトランジションで勢力色がなめらかに変化します。どの解像度でもクリアに表示されます。
アニメーション
合戦地点のパルスエフェクトはSVG <animate> タグで実装。CSS トランジションとSVGアニメーションを組み合わせた軽量実装です。
📱
レスポンシブ設計
PC・タブレット・スマートフォンすべてに対応。画面幅900px以下では縦並びレイアウトに自動切替します。
✅ 動作環境 Chrome・Firefox・Safari・Edgeの最新版で動作確認済み。インターネット接続時はGoogleフォント読み込みあり。オフライン環境でも機能には影響ありません。