はじめに
「物価が上がっている」というニュースはよく聞きますが、それはあくまで全国平均の話です。自分が住んでいる街は、全国平均より物価が上がっているのか、それとも落ち着いているのか——気になって、それを地図とグラフで確かめられるWebアプリ PriceLens を作りました。
https://price-lens-sapporo.vercel.app
きっかけは単純で、「自分の街だけの物価の実感」って、ニュースからは分からないな、と思ったことです。日本政府が毎月公開している公式統計データを使えば、都市ごとの実際の価格と全国の物価指数を並べて見られるはずだと思い立ち、作ってみました。
この記事は前半・後半の2部構成です。
- 前半：PriceLensで何ができるか（技術の話はナシ、誰でも読めます）
- 後半：どうやって作ったか（技術の話です。ただし専門用語には都度かんたんな説明を添えます）
PriceLensでできること
使い方は2ステップ：街を選んで、品目を入力するだけ
- 地図から街を選ぶ（国の調査対象になっている全国81都市から選べます）
- 「たまご」「米」のように、調べたい商品名を日本語でそのまま入力する（多少の表記ゆれもOKです）
たったこれだけで、選んだ街のその商品の価格トレンドが表示されます。
トップ画面。地図から街を選ぶか、上の検索窓から始められます。
グラフの見方：自分の街の実売価格 vs 全国の物価指数
メインのグラフでは、選んだ街のその商品の「実際の店頭価格」の推移と、CPI（消費者物価指数＝国全体の物価の動きを表すモノサシ、と考えてください）の推移を、1つのグラフで重ねて比較できます。単位が違う2つの数字（円の価格と、指数という数字）をそのまま比べても意味が無いので、同じ時点を100として揃えた上で、動き方だけを比較しています。
例えば、東京都特別区部の「米」を見ると、次のような数字が並びます。
- 東京都特別区部の米の最新価格：¥4,741（2026年5月）
- 東京都特別区部の前年比：-0.6%
- 全国CPIの前年比：-5.4%
- 全国との乖離：+4.8pt（＝全国よりも下がり方がゆるやかだった、ということ）
品目ごとの価格トレンド画面。街の実価格（円）と全国CPI（指数）を同じグラフに重ねています。
このように「全国は下がっているのに、自分の街はそこまで下がっていない」といった違いが、数字とグラフで一目で分かるのがこのアプリの一番の見どころです。
そのほかの機能もひとこと紹介
メインの品目トレンド以外にも、いくつか機能があります。
- インフレ番付：選んだ街の中で、全国平均より特に値上がり（または値下がり）している品目のランキング
- 費目別の物価比較カード：品目の属するカテゴリ（例：野菜、日用品）単位での比較
- 都市間比較：複数の街を選んで、同じ品目の価格を横並びで比較
インフレ番付。この街では「電球」が全国平均より突出して値上がりしている、といったことが分かります。
どうやって作ったか
ここからは技術寄りの内容です。専門用語が出てきますが、初めて聞く方向けに都度ひとことだけ説明を添えます。
全体のしくみを1枚の図で
まずは全体像です。ブラウザで操作すると、PriceLens本体（Next.jsというフレームワークで作ったWebアプリ）が、国の統計データを提供するe-Stat APIと、入力された商品名を解釈するOpenAI API（AI）にそれぞれ問い合わせて、結果を画面に返す、という流れになっています。
PriceLensのしくみ全体図。①〜④が利用者のリクエストが処理される流れ、点線がバックグラウンドの自動処理です。
ポイントは、データベースを持っていないことです。必要なデータはそのつど国の統計API（e-Stat）から取得し、1日単位で保存（＝キャッシュ、一度取得したデータを保存しておいて使い回すしくみ、のことです）して使い回しています。自前でデータを溜め込まず、いつでも「今の公式データ」を見に行く構成にしています。
データの出どころ：国の統計API「e-Stat」
価格データの出どころは、総務省統計局が提供するe-Statという公式の統計API（API＝プログラム同士がデータをやり取りするための窓口、のことです）です。ここから2種類のデータを取得しています。
- 各都市の実際の店頭価格（小売物価統計調査）
- 全国の物価指数（2020年基準の消費者物価指数）
登録さえすれば誰でも無料で使える公的データで、しかも国の調査に基づいた数字なので、変な出どころのデータではないという安心感があります。個人開発でここまで信頼できるデータを扱えるのは、e-Statのようなオープンデータのおかげです。
ただし、e-Statへの問い合わせは軽くはないので、一度取得したデータは1日単位でキャッシュし、同じ問い合わせを毎回繰り返さないようにしています。
自由入力を理解させる：AI（OpenAI API）＋フォールバック
「じゃがりこ」のような自由な入力を、アプリが内部に持っている約200品目のカタログのどれかに対応づける必要があります。ここでAI（OpenAI APIの軽量なモデル）を使い、入力された言葉の意味を解釈させています。
ただし、AIの応答には時間がかかることも、失敗することもあります。そこでPriceLensでは、AIが使えない・遅い場合に備えて、アプリ内にあらかじめ用意した別名辞書で照合するフォールバック（＝主な手段がうまくいかなかったときの予備の手段、のことです）を用意しています。入力がすでに知っている表記（別名）と一致すれば、AIを呼ばずに一瞬で解決しますし、AIが失敗してもこの辞書に切り替わるので、アプリ全体が止まることはありません。
「AIに任せきりにせず、うまくいかないときの逃げ道を用意しておく」というのは、個人開発でAI機能を組み込むときに実際にやってよかった工夫でした。
使った技術と公開のしかた
最後に、使った技術をざっと紹介します。細かいバージョンなどには深入りしないので、興味がある方だけ読んでください。
- フロントエンド：Next.js（画面とサーバー側の処理をまとめて書けるフレームワーク）＋ React ＋ TypeScript。地図の表示にはLeaflet、グラフの表示にはRechartsというライブラリを使っています。
- 公開先：Vercelという無料プランのあるホスティングサービス。よく見られそうな街×品目の組み合わせのページはあらかじめ作っておいて1日ごとに更新する仕組み（ISR、ページを毎回作り直さずに一定間隔で自動更新するしくみ、のことです）にしていて、SNSでシェアしたときのプレビュー画像も自動で生成されるようにしています。
- 自動化：GitHub Actionsという仕組みで、1日1回、公開中のアプリに自動でアクセスしてキャッシュを温めています。これにより、その日最初にアクセスしたユーザーでも表示が速くなります。
おわりに
無料で使える公式データと、無料プランのホスティングサービスだけで、思っていたよりちゃんとしたものが作れました。個人開発だと「データの出どころが怪しい」「すぐサービスが終わる」となりがちですが、公的なオープンデータを使うことでその不安がかなり減らせたのは良い発見でした。
今後は、GitHubリポジトリと連携して自動デプロイできるようにしたり、スマホでの操作性をもう少し改善したりしたいと考えています。
自分の街の物価が今どうなっているか、よかったら覗いてみてください。