気象庁HPがクソである理由～①防災情報ページ編～

「気象庁の防災情報ページ（https://www.jma.go.jp/bosai/） がクソである理由」を構造的・技術的・運用的に分類して、わかりやすくまとめていこうと思う。

🔍 その1. 検索に全く引っかからない（SEOが死んでいる）

まずはこちらのリンクを見てもらいたい。
👉
https://www.jma.go.jp/bosai/#pro&disp=panel,forecaster_comment,amedas_table,warning_summary,radar!hrpns,information,typhoon&col=8z8w93dedkdcdm&row=b4b4b4&area_type=class20s&area_code=4735700

すると、このようなページが表示される

見てわかる通り、これは気象庁HPの南大東村の防災情報のページである。

続いて、「南大東村　防災情報　発表中」で検索をかけて検索一覧にこのページが出るか検証してみよう。

結果がこちらだ。↓

おわかりいただけただろうか。
あろうことか、先ほど見た南大東村の防災情報のページが一切載っていない。
「もっと下まで検索を辿れば表示されるんじゃないの？」と思うかもしれないが、実を言うと、このページは絶対に検索一覧には載らないようになっている。
つまり、ユーザーは検索一覧からは絶対にこのページには辿り着けないようになっているということになる。

原因はこの2点に集約される

以下の二つが主な原因であり、気象庁HPのクソである理由の根源でもある。

1. URLに「#」ハッシュを使用している

   • まず、先ほどお見せした南大東村の防災情報のページはhttps://www.jma.go.jp/bosai/#pro&... のようなURL構成になっている
   • 実はGoogleなどの検索エンジンは https://www.jma.go.jp/bosai/ までしか認識せず、 # より後ろをインデックスしない
   • そのため、「#」で切り替えている部分（南大東村などの地域指定情報）は検索エンジンからは存在しない扱いになる。
   • つまり、#ハッシュを使ったページは、ページの内容がサーバー側に認識すらされず、検索一覧に載ることは絶対にないということになる。

2. 実際のコンテンツはJavaScriptで動的生成
   サーバーはhttps://www.jma.go.jp/bosai/までしか認識できないので、空のHTMLだけを返し、後からJavaScriptが表示内容を描画する形式になっている。
   → 結果として、Googlebot や SNS のクローラには 「中身が無いページ」と認識される

つまり、動的に生成された 「発表中の防災情報」「警報・注意報」「気象台からのコメント」 などはサーバー側に認識すらされず、
例えば、「南大東村　防災情報　発表中」などで検索しても、検索一覧にこのページは表示すらされない。

これはインターネット上に存在しないも同然であり、ユーザーは常にこのページをブックマークしておくか、地台HPのトップページから辿るしかないというクソ仕様になっている。

「皆がどうやって検索一覧のトップに載せようか必死になっている時代にSEO対策すらしていないとか正気か？」と思う。

---

🧭 その2.「情報の共有性が絶望的に低い」

気象庁HPの防災情報は共有性が絶望的に低い。
その原因は以下の通りだ。

1. 「#」付きURLはブラウザ依存
   URLを共有しても、環境によっては正常に開けない。
   古いブラウザや一部SNSでは「#以降が無視」され、防災情報が表示されないこともある

2. SNSでの共有プレビューが出ない
   ページにOGP（Open Graph Protocol）のメタタグが設定されてない。
   → つまり、SNSに貼っても「タイトル」「概要」「画像」などのプレビューが一切表示されない
   （これは本当かどうか疑わしいと思うかもしれないが、ぜひ試してみてほしい）

「表示できればOK」「動けばOK」で、検索されること・共有されることを全く想定していないクソ仕様。
「このSNS全盛期の時代にOGPすら対応してないページを堂々と提供するとか正気か？」と思う。SNSを防災に活用するとか何とかほざくのなら、まずはHPに SSR（サーバーサイドレンダリング） を導入しろ。あるいはせめてVueかReactを使え。話はそれからだ。

---

⚠️ その3. アクセシビリティが壊滅している

• JavaScript無効では何も表示されない
  JS無効環境（セキュリティ重視の業務端末など）では空白の画面しか表示されない

• 支援技術への対応も弱い
  JavaScriptで動的に書き換えるDOM構造は、スクリーンリーダーなどの支援技術と相性が悪い。（読み上げ対象が動的に変わってしまう。）
  結果として、視覚障害者などのユーザーは情報にアクセスしづらい。

---

🏗️ その4. SSR（サーバーサイドレンダリング）を導入していない

• 完全なクライアントサイドレンダリング（CSR）
  Vanilla JS＋jQueryで疑似SPA（Single Page Application）として作られている。
  つまり、VueやReactどころか、フレームワーク世代以前の構造で作られている。当然SSRは未導入

• 静的なHTMLを出力しないためSEOもOGPも壊滅
  本来は Next.js / Nuxt.js などでSSR対応すればいいのに、なぜかやっていない

• 「Webアプリを気取っただけ」
  見た目だけモダンで、中身は旧来のjQuery構成。

  「モダンなSPA構成を、jQuery時代の技術で無理やり再現している」

　という非常に残念な設計となっている。

---

技術的に考えて「知らない」はあり得ない

気象庁HPの防災情報がクソである技術的理由を述べてきたが、これらを気象庁のHP制作担当が知らなかったとは思えない。
理由は明白だ。

1. #ルーティング問題は10年以上前から常識

   • まず、「#を使うと検索に載らない」なんてのは2010年代前半から知られている常識。
   • Vue Router / React Router ですら、デフォルトが history モード（ハッシュ非使用）になって久しい。
   • つまり、“#ルーティングは避けるべき”はフロントエンド界の基礎教養レベル。ちょっとWEB知識をかじったことのある大学生でも知っている話。

2. OGP非対応は明白な怠慢

   • SNS共有が主流の今、OGPのmetaタグすら出さないのは情報共有を自ら妨害しているに等しい。
   • しかも防災情報という「公共性の高いコンテンツ」でこれは致命的。ハッキリ言ってこれは職務怠慢に等しい。

3. 生のJavaScript採用は技術的退行でしかない

   • 今どき公共系でも React / Vue / Svelte などのフレームワークを使うのが普通。
   • 生JS＋XHR＋DOM直書きでSPAっぽい動作を実現しているのは、2010年代のjQuery世代の発想。
   • つまり、技術的にはやろうと思えばNext.jsで解決する話なのに、わざと旧式構成を維持している。正気とは思えない。二度と技術官庁を名乗るな。

---

🧠 結論：気象庁HPは時代遅れ（周回遅れ）の失敗作

疑似SPA化の結果：

• SEOが死に、検索に出てこない
• OGPが死に、SNSで共有できない
• アクセシビリティが死に、誰にも優しくない

という「Webアプリ失敗例の典型」になっている。

これはもはや、公共Webシステムの負の教材とすら呼べる代物だ。かえって天然記念物ものかもしれない。

加えて、

「公共情報を“秘匿化”する設計」という意味の分からない仕様。

気象庁の防災情報ページは、

• 表面上は「モダンWeb」っぽいが、
• 中身は「2000年代的・閉鎖的Web思想」のまま。

つまり、
Webアプリを気取ったHTMLファイル群が、国民の命を救う情報を見えづらくしている
という設定思想レベルで欠陥を抱えている。

---

（ちょっと思ったけど、これ別に私が最初に気づいたことじゃないよな。絶対みんな気づいてるよな？だっておかしいもん...。）

---