震度7の​2日後に、​地震記録サイトを​1日で​作った​ ──画面より​先に​「消える​データ」を​止めた​制作事例

2026年7月28日の令和8年熊本地震のあと、CAG主宰の甲斐ショウジが被災地から2日で地震記録サイト「地震ログ」を公開しました。最初に書いたのは画面ではなく、数日で消えるデータの保全です。リアルタイム系と確定系という性質の違う2つの情報源を同じ画面部品で描く設計、除外件数まで画面に出す方針、そして1日で公開まで持っていった組み立てを、実物の数字とともに記録します。

甲斐ショウジ甲斐ショウジ
CAG主宰/合同会社ATK CAIO(最高AI責任者)
制作事例9分で読めます
制作事例技術震度7の2日後に、地震記録サイトを1日で作った ──画面より先に「消えるデータ」を止めた制作事例

このたびの令和8年熊本地震で被災された皆さまに、心よりお見舞い申し上げます。

2026年7月28日16時27分、熊本で最大震度7の地震がありました。CAG主宰の甲斐ショウジは熊本在住で、その場にいます。2016年4月の平成28年熊本地震でも、同じ場所で2度の震度7を経験しています。

その2日後、地震記録サイト「地震ログ」(jishinlog.comを1日で公開しました。個人プロジェクトとして非営利で運営しているもので、広告・課金・アフィリエイト・データ販売はありません。CAGの受注案件でも、株式会社GMJの事業でもありません。

この記事は、そのサイトをどう作ったかの記録です。扱うのは4つ。①最初に書いたのが画面ではなくデータの保全だった理由、②リアルタイム系と確定系という性質の違う2つの情報源を、同じ画面部品で描くための設計、③「黙って落とさない」をどう実装したか、④2日で公開まで持っていった組み立て。

本文中の数値は、2026年8月1日13時00分時点に公開画面で確認したものです。地震ログは更新が続いているので、いま見ると数字は変わっています。

暗い部屋でスマートフォンに表示された地震記録ダッシュボード。数字が主役で、色がついているのは震度の表示だけ
使う場面は「夜中・暗い部屋・スマートフォン・不安」。そこから逆算した画面になっている。

01 何を​作ったか​ ──震源ではなく、​その​場所から​見る​記録

地震が続いているあいだに知りたいのは、震源の大きさではありません。いま自分がいる場所で、どのくらいの間隔で、どのくらいの強さの揺れが起きているのか。そのペースは昨日より落ちているのか、増えているのか。

既存の地震情報は震源が基準です。マグニチュードがいくつで、どこが震源か。探した範囲では、いま自分がいる地点を軸に「何回、震度いくつ」を並べて見られる場所が見つかりませんでした。だから作った、というのが出発点です[2]

トップには2つの地震活動が並んでいます。同じレイアウトです。

項目令和8年熊本地震平成28年熊本地震
起点2026年7月28日 16:27
M7.1・最大震度7
2016年4月14日 21:26
M6.5・最大震度7(前震)
状態取り込み中・5日目記録終了・確定データ(以後更新されない)
記録期間継続中727日(2018年4月10日まで)
熊本県で有感(累計)337回4,087回
震度5弱以上5回23回

同じ形で並んでいるので、行き来するだけで比較になります。サイトの側は一言も解釈しません。「10年前より多い/少ない」とは書かない、というのが最初に引いた線のひとつです[2]

02 画面より​先に、​消える​データを​止めた​ ──取得には​期限が​ある

この制作でいちばん効いた判断は、最初の数時間に起きています。

データの取得元を調べたところ、使おうとしていた配信元は履歴を一定件数しか保持しておらず、本震直後の記録が数日で押し出されて消えることが分かりました。そこで設計をいったん止めて、まず生データを全部保存する側から書いた。結果として、本震も、その22秒後の緊急地震速報も間に合っています[2]

配信元のバッファ(保持できるのは決まった件数だけ) ← 新しい記録 押し出されて消える 先に作った保存側(消える前に落とす) 全件 消える前に、全部落とす 表示はいつ作ってもいい。取得だけは、待ってくれない。
先に書いたのは画面ではなく、この下段。開発記録の記述をもとにCAGが作図。

一般化すると、取得と表示は、締切の性質がまったく違います。表示は落ち着いてから何度でも作り直せますが、取得には期限があり、過ぎたら二度と取り返せません。消えるデータを前にしたとき、設計の美しさは後回しでかまわない、という順序です。

0​3 性質の​違う​2つの​情報源を、​同じ​部品で​描く​ ──揃える​ものと、​揃えない​もの

サイトのフッタには、出典が3つ明記されています。P2P地震情報 JSON API v2 / 気象庁発表の地震情報 / 気象庁 震度データベース[3]

設計として面白いのはここからで、並んでいる2つの地震活動は、裏で使っているデータの性質がまったく違います

観点令和8年熊本地震(2026)平成28年熊本地震(2016)
データの性質リアルタイム(速報が続報で上書きされる)確定(過去データとして固まっている)
主な取得元P2P地震情報 JSON API v2 + 気象庁XMLで突合気象庁 震度データベース
状態表示取り込み中・5日目記録終了・以後更新されない
震源座標の粒度0.1度単位で発表(同じ位置に重なる)丸められていない(拡大すると1件ずつ分かれる)
観測点テーブルの並び直近24時間に揺れた順有感回数順

それでも、画面の部品は同じです。地震活動を1件定義すれば、同じレイアウトのページが1枚増える作りになっている[2]。だから日本のどこで大きな地震が起きても、同じ形で記録を足していけます。

リアルタイム系 P2P JSON API + 気象庁XMLで突合 確定系 気象庁 震度データベース 共通モデル 地震活動 + 揺れ + 観測点 令和8年のページ 平成28年のページ 揃えたもの:画面部品とデータモデル 揃えなかったもの:座標の粒度・並び順・状態表示 ── 出自の違いは、画面に書く
同じ形に見せるために、違いを消したわけではない。実サイトの表示をもとにCAGが作図。

ポイントは、揃えるものと、揃えてはいけないものを分けているところです。揃えたのは画面部品とデータモデル。揃えなかったのは、データの出自による違い——座標の粒度、並び順、状態表示。

たとえば震源の地図には、令和8年側に「震源座標は0.1度単位で発表されるため、同じ位置に重なることがある」、平成28年側に「震源座標は丸められていないため、拡大すると1件ずつ分かれて見える」と、それぞれ違う説明が書いてあります[3]。同じ地図部品なのに見え方が違う理由を、画面の側で説明している。ここを無理に揃えると、確定データに速報のふりをさせることになります

04 ​「黙って​落とさない」を、​数字で​見せる​ ──捨てた件数を​出せる​仕組みか​どうか

実際の画面には、こういう数字が常時出ています(2026年8月1日13:00時点)[3]

  • 気象庁XMLとの突合:309件・食い違いなし
  • 重複・除外:84件(速報と続報の重複)
  • 平成28年側の重複・除外:5件

さらに、収録範囲が地震活動の終息ではなく期間で切れている場合は、その理由まで書かれています。平成28年熊本地震のページには「気象庁がこの地震活動を『2年間』としてまとめているのに合わせている」とあります[3]

データ品質のパネル。突合した件数と、重複により除外した件数が並んで表示されているダークな画面
出さなくても画面は成立する数字を、あえて画面に置いている。

普通、除外した件数は出しません。出さなくても画面は成立しますし、出せば「84件も捨てているのか」と見えます。それでも出しているのは、捨てた件数を出せないパイプラインは、正しさを主張する手段を持たないからです。件数が出ていれば、読む側は「84件のうち何が捨てられたのか」を問えます。出ていなければ、そもそも問いが立ちません。

この構造は、テストが通っているのに本番で壊れる話と地続きです。失敗が数字として現れない仕組みは、失敗していないことの証明にならない。

サイレント障害の記事のサムネイル 関連記事 | 黙って壊れる仕組みテストが通っても、本番で壊れる ──"動いて見える"3つの罠を、実機検証で捕まえた話

05 動かして​よいのは、​実データと​実時刻だけ ──リアルタイム感の​線引き

「いま動いている」という手ざわりは、記録サイトにとって重要です。ただし線を引いています。動かしてよいのは、実際に起きたことに対応するものだけという線です[2]

入れたもの ── 実データ・実時刻に対応する 新着ハイライト 実際に行が増えた 経過時間カウンタのリセット 実際に揺れた 「いま」を示す縦線 実時刻 分刻みのヒストグラム 揺れのなかった分は空のまま 空 = 揺れなし 入れなかったもの 連続波形風のアニメーション 対応する実データがない = 常時観測しているように   見えてしまう 見ている人は、不安のなかでその画面を信じる。だから演出でデータを作らない。
動きの有無ではなく、「その動きに対応する事実があるか」で分けている。開発記録の記述をもとにCAGが作図。

取れないデータを演出で作ると、嘘になります。それらしく波形が動いていれば「常時観測している」ように見えますが、見ている人は不安のなかでその画面を信じます

情報設計も同じ思想で通っています。使う場面が「夜中・暗い部屋・スマートフォン・不安」だと分かっていたので、背景を暗くし彩度を落とし、画面の中で色がついているのは震度だけにしてあります[1][2]

06 2日で​公開に​持っていけた​組み立て​ ──速さは、​決めた​順序の​結果

本震から2日後に着手し、その日のうちに公開しています。速さの理由は3つと書かれています[2]

  • 作るものが自分で分かっていた。 要件を人に聞く時間がない。自分が夜中に何を見たかったかが、そのまま仕様だった。
  • 消えるものを先に止めた。 02のとおり。ここを間違えると、あとから何をやっても取り返せない。
  • 判断の線を先に引いた。 やらないこと4つ(予測しない/こちらから比較して語らない/震源ではなくその場所から見る/黙って落とさない)を最初に決めていたので、迷う場面がほとんどなかった。

外から確認できる技術構成としては、Next.js(Turbopack)でVercelに載っており、配信リージョンは東京(hnd1)、トップページは no-store で毎回サーバー側から描かれています[5]。地図には地球地図日本(国土地理院)と、J-SHIS(防災科学技術研究所)の活断層が重ねられています[3]

速さは技術の証拠であって、主役ではありません。 1日で公開まで届いたのは、実装が速かったからというより、決めるべきことを先に決め、取り返しのつかない作業から順に並べたからです。この順序づけ自体が設計だと考えています。

流れてくるデータのレコードが、バッファから押し出される前に保存領域へ落ちていく様子を示すダークな管理画面
着手して最初に動かしたのは、この取り込みと保存だけの部分だった。順序を間違えなかったことが、そのまま速さになっている。
MLB速報オーバーレイの制作事例のサムネイル 関連記事 | 1日で作る制作事例MLB速報オーバーレイを"1日"で。AI駆動開発の制作事例

07 まとめ ──記録サイトの​信頼は、​出した​数字で​決まる

判断ポイントありがちなやり方地震ログ
最初に書くもの画面データの保全
性質の違うデータ別々の画面にする部品は同じ・出自の違いは画面に書く
除外したデータ出さない件数と理由を常時表示
リアルタイム感それらしく動かす実データ・実時刻に対応するものだけ
比較サイトが「多い/少ない」と言う同じ形で並べ、判断は読む人に委ねる
  • 取得には期限がある。 表示はあとから何度でも作り直せるが、消えたデータは戻らない。着手順はそこから決まる。
  • 揃えるのは部品とモデル。 データの出自による違いは、揃えずに画面へ書く。揃えると、確定データに速報のふりをさせることになる。
  • 捨てた件数を出せない仕組みは、正しさを主張する手段を持たない。 都合の悪い数字を出せるかどうかが、記録の信頼をほぼ決める。

電脳技巧集団​(AI職人ギルド)

データの取り込みから画面までを含めて、システムの設計・実装を手がけています。相談する

出典

  1. 株式会社GMJ「【お知らせ】当社 代表取締役CTO兼CAIO 甲斐ショウジが個人開発した地震記録サイト「地震ログ」のご紹介」2026年7月31日。gmj.ne.jp/news/jishinlog/
  2. 甲斐ショウジ「地震ログ開発記録 ── 震度7にあったCTOが、2日後に地震ダッシュボードを作った」GMJ CTOブログ、2026年7月31日。gmj.ne.jp/jishinlog-dev-log/
  3. 地震ログ(トップ/令和8年熊本地震/平成28年熊本地震の各ページ)。2026年8月1日13時00分にCAGが閲覧して確認。jishinlog.com
  4. 気象庁「平成28年(2016年)熊本地震」。前震は2016年4月14日21時26分・M6.5・最大震度7、本震は4月16日1時25分・M7.3・最大震度7。data.jma.go.jp/eqev/data/2016_04_14_kumamoto/index.html
  5. 技術構成は2026年8月1日にCAGがHTTPレスポンスヘッダと公開ページから確認できた範囲。内部実装の詳細は非公開。
  6. 地震ログは甲斐ショウジの個人プロジェクトであり、非営利で運営されている。CAGおよび株式会社GMJが提供するサービスではない。

言語化できるものは、全て作る。

あなたの「作りたい」を、定価とスピードで形に。まずは無料の相談から。

制作事例を見る