2026.07.10

【いなぎ観測所】稲城市のオープンデータを使って市のデータを可視化できるサイトを作りました！

koko

お久しぶりです。ココです。

だいぶこのサイトを放置してしまったのでブログ名も「いなぎ観察日記」に名称変更・リニューアルしつつ、稲城市のイベントや市にまつわるもののレポートなど書いていこうと思います。

話は飛びますが、最近Webサイトの制作も請け負ってますのでお店だったり個人のサイトだったり作りたい方はご連絡ください！

いなぎ観測所をリリースしました！

さて、本題。

このたび稲城市のオープンデータ可視化サイト「いなぎ観測所」をリリースしました！

構想はだいぶ前からあったんだけど、技術不足でなかなかできなかったんよね。

それがAIの普及により実現できました！めっちゃうれしい！！

そんで今回どうやって作ったのか？とかどう動いてるの？とか簡単にご紹介できればと思います。

どうやって作ったの？

基本は「Claude」というAIです。ChatGPTの親戚のようなAIでプログラムのコードが得意なタイプですね。みんな使った方がいいよ。めっちゃ簡単にいろんなことできる。

無料プランでも使えるので試したことない方は是非使ってみてください。「おー、すげー」ってなりますよ。

Proプランを使ってみたい方はこちらのリンクから登録すると1週間無料で使えます。よろしければお使いください。（3名限定）

データはどこから？

稲城市のデータ（オープンデータ）ダウンロードページ｜稲城市公式ウェブサイト
https://www.city.inagi.tokyo.jp/shisei/toukei/1009442/1013792.html

こんなところや、個別ページにもいくつか転がってたりする。そのエクセルファイルを片っ端からダウンロードしてきました。もうちょっとまとめてくれるとうれしいな？笑

でも、中身みたら職員さん達マジ頑張ってたんやな・・・って思うよ。

みてこの数字の羅列。これを読み取る方も大変だけど書き込む方も大変だったろうね。。

これは利用者側でしっかり使ってあげないとダメだなって思ったよ。

最初のプロンプトは？

AIへの指示文をプロンプトというのですが、初回のプロンプトはこんな感じ。

これで形作って、何度もラリーを行って今の形になってます。

稲城市のオープンデータを使い、ポータルサイトのようなものを作りたい。
サイト名：いなぎまちノート

このサイトは非公式サイトになるので公式サイトではないことを明記しておいてください。
人口比率などオープンデータを使ってグラフィカルで見栄えのようにサイトにしてください。月次、年次データと揃えて過去とも比較出来るようにしてください。
各公共施設やその営業時間など個別ページを使って見やすく提供してください。カレンダー形式でも表示すると良い。
各ページにはデータの出典元を記載するようにし、いつのデータかも記載してください。
人口などは毎月更新されるので更新しやすいようにしてください。今回提供したデータだけではなく他にも後で提供する予定。jsonなどデータベースを使わずやっていきたい思っている。
広告スペースも確保してください。

地図を作成する場合はD3.jsとcartocss/topojsonを使って地図を描いてください。
CDNから japan.topojson を読み込んで使用してください。

正確な情報提供をしたいのでわからなければ聞くようにしてください。

参考データ
稲城市の特産物は梨です。洋梨ではなく日本の梨。

初回草案の時点では「いなぎまちノート」だったりしたんですよね。ゴロ悪いのとなんかちげーなーってコトで今のいなぎ観測所になりました。最後の参考データ部分の「洋梨ではなく日本の梨」と入れたのは実験してた時にどうしても洋梨のアイコンを生成してきやがるんで明示的に入れました。アメリカ製ソフトだとどうしてもそういうとこあるよねー。