「ブロッコリーって何分ゆでればいいんだっけ？」——料理中にスマホで検索するたび、レシピの中から加熱時間だけを掘り出す面倒さにうんざりしていた。野菜ごとに調理法別の加熱時間だけをさっと確認できるアプリ「火加減ずかん（HeatBook）」を作った経緯と機能を紹介する。
きっかけは「炒め時間」がわからない問題
料理をしていると、ふと迷う瞬間があります。「ブロッコリーは何分ゆでればいいんだっけ？」「にんじんを炒めるとき、どのくらいで火が通る？」
レシピを検索すれば出てくるけれど、野菜単体の加熱時間だけを調べたい場合、ほしい情報がすぐに見つかりません。「○○ 炒め 時間」で検索すると、特定のレシピページが出てきて、肝心の「炒め時間」だけを取り出すのに手間がかかる。
「野菜ごとに調理法別の加熱時間が一覧で見られるアプリがあればいいのに」——そう思って作り始めたのが火加減ずかんです。
火加減ずかんでできること
主な機能
- 野菜50種の加熱時間データ：炒める・ゆでる・蒸す・焼く・揚げる・電子レンジの6調理法ごとに目安時間を収録。
- 調理法から探す：「今日は炒め料理にしたい」という逆引き検索。生食タブも搭載し、加熱不要の野菜もすぐ確認できる。
- 旬フィルター：今が旬の野菜にはカードに緑の枠が付き、旬優先ソートで上位に表示される。
- 切り方タグ：各野菜の下ごしらえ情報に切り方をタグ表示。「薄切り」「乱切り」など50種類のデータを収録。
- 英語対応（i18n）：多言語ルーティングで英語版を用意。英語圏の野菜12種（ケール、ビーツ、リーク等）も追加。
- PWA対応：ホーム画面に追加すればオフラインでも使えるアプリとして動作。
技術スタック — キッチンで使うための設計判断
火加減ずかんの技術選定は「キッチンで片手で操作する」というユースケースから逆算した。Next.js 15のApp Routerで/[locale]/構造の多言語ルーティングを組み、静的エクスポート（output: 'export'）でCDN配信している。trailingSlash: trueの設定は、Firebase Hostingでの直リンクリロード時に404が出る問題を解消するために追加した。
野菜データは日本語版（vegetables.ja.json）と英語版（vegetables.en.json）をJSON分離管理。ビルド時にデータが静的HTMLに埋め込まれるため、表示速度が速く、オフラインでも問題なく動作する。PWA化したのもキッチン利用を想定してのことで、水に濡れた手でもホーム画面のアイコンからさっと起動できる。
デザインのこだわり
glassmorphismとノイズテクスチャを組み合わせたモダンなCSSに全面書き直しています。野菜カードはstaggered animationで順番にフェードインするようにして、「ずかん」らしい温かみのある見た目を目指しました。
旬の野菜には緑の外枠を追加し、トップページのデフォルトソートを「旬優先＋名前あいうえお順」にしています。季節感を意識しながら使ってもらえるような設計です。
OGタグ・Twitterカード・JSON-LD構造化データも充実させ、SNSでシェアされたときの見た目とSEOもしっかり整えています。
使い方のイメージ
調理中にスマートフォンで「ほうれん草 炒め」と探せば、何分かがすぐわかる。「今日ある野菜でどんな調理法が使えるか」を調理法から逆引きする。旬の野菜を眺めて今週の献立のヒントにする。そんな使い方を想定しています。
ホーム画面に追加しておけばオフラインでもさっと開けるので、キッチンで使う道具として手元に置いてもらえると嬉しいです。