火加減ずかん」の最初のバージョンは、野菜39種のデータとSEO基盤だけのシンプルな構成だった。そこから2週間で、デザイン刷新・50種への拡充・多言語対応・PWA化・マイメモ機能まで積み上げた。コミットログを振り返りながら、その過程をまとめる。

MVPの状態(3月20日)

最初のリリースは機能よりも「データとSEOの土台」を優先したシンプルな構成でした。

  • Next.js App Routerで構築
  • 野菜39種の加熱時間データ
  • 野菜個別ページ(SEO用)
  • JSON-LD構造化データ・sitemap・robots.txt
  • Firebase Analytics

「とりあえず動く状態」から始めて、使いながら必要な機能を積み上げていく方針です。

デザイン刷新・野菜50種・多言語対応(4月3日)

完成形の機能一覧は紹介記事に詳しいので、ここでは各アップデートの技術的判断と実装の裏側を中心に記録する。

デザインの全面書き直し

glassmorphismとノイズテクスチャを使ったモダンなCSSに刷新しました。野菜カードのstaggered animationや洗練された配色で、全体的な印象が大きく変わりました。

野菜を50種に拡充

英語圏でよく使われる野菜12種(ケール、芽キャベツ、ビーツ、リークなど)を追加し、計50種類になりました。

英語対応(i18n)

多言語ルーティング(/[locale]/)を実装し、英語版野菜データ(vegetables.en.json)を追加。about・not-found・sitemapも多言語対応しました。favicon(SVG/PNG/ICO)、apple-touch-icon、OG画像の生成・設定も合わせて行い、OGタグとTwitterカードも充実させました。

UIと検索・ソートの改善(4月3日)

同日、細かいUX改善もまとめてリリースしました。

  • フォントカラーを濃くして視認性向上
  • 複数選択パネルのスクロール不具合を修正
  • 調理法ビューに「名前順(昇順/降順)」「時間が長い順」ソートを追加
  • ビュー切替時に複数選択状態をリセット
  • トップのデフォルトソートを「旬優先+名前あいうえお順」に変更
  • 旬の野菜カードに緑色の外枠を追加
  • 検索バーの虫眼鏡アイコンの縦位置を修正
  • サイトドメインを heatbook.thekarou.com に変更

aboutページの遷移・リロード問題(静的エクスポート時の404)は trailingSlash: true を追加して解消しました。

PWA対応・野菜画像の追加(4月5日)

PWA化

Service Worker・manifest.json・PWAアイコンを追加し、スマートフォンのホーム画面に追加できるようになりました。キッチンで使うアプリとしてオフラインでも動くのは重要な要件だったので、早めに対応しました。

野菜画像50種

全50種の野菜画像(webp形式)を追加しました。画像はビルド対象から除外するよう .gitignore も整備しています。

生食フィルター・マイメモ・切り方タグ(4月5日)

現時点での最新アップデートです。

生食タブ

「調理法から探す」に生食タブを追加しました。加熱なしで食べられる野菜をまとめて確認でき、名前順ソートにも対応しています。

マイメモ機能

各野菜ページでメモを書けるようにしました。localStorageに保存されるので次回訪問時も残っています。メモがある野菜にはカードに📝バッジが表示されます。「この野菜は薄切りが好み」「子どもが嫌いだから少し多めに炒める」——そういった個人的なメモを野菜ごとに残せる機能です。

切り方タグの表示

下ごしらえ情報の下に切り方をタグ形式で表示するようにしました。全50種のデータに切り方情報を追加しています。

ソートラベルの改善

時間ソートのラベルを「短時間順」「長時間順」と直感的な表記に変更しました。

振り返り——「ツール」と「コンテンツ」の境界

MVPから約2週間で、データの量・質を上げつつPWA化・多言語対応・マイメモまで揃えた。しかし、振り返って気づいたのは、このアプリが「ツール」なのか「コンテンツ」なのかという問いだ。

加熱時間のデータ自体はどこかのレシピサイトにも載っている。しかし「野菜ごとに調理法別で一覧できる」「旬フィルターで今の季節の野菜を優先表示する」「自分だけのメモを野菜に紐づけて残せる」——こうした切り口の違いが、情報を"使える道具"に変える。50種のデータ整備や英語版生成はAIに任せ、自分は「どう見せればキッチンで使いやすいか」という体験設計に時間を使った。

次は検索精度の改善やメモのエクスポートあたりを考えている。

→ 火加減ずかんを使ってみる

火加減ずかんを作った話次の記事:火加減ずかんの最新アップデートまとめ一覧