肉のハナマサの非公式応援サイトを公開｜AIで過去記事を料理検索に整理
肉のハナマサの非公式応援サイトを公開しました。
開くと、黄・黒・赤のトップページが出ます。そこから料理検索と、小分けの計算へ進めます。
並んでいるのは、私が50kgダイエットのブログに書いてきた、ハナマサでの買い物と料理の記録です。その過去記事をAIで探して整理し、読む人が使える入口にまとめました。
今回は使い方だけでなく、どうやって作ったかも順番どおりに書きます。元の記事を集めて日付を確かめる所から、公開した後に中身を読み直す所までです。
この記事の要点
- 応援サイトでは、過去の記録から料理を探せます。まとめ買いした肉を何回分に分けられるかも計算できます
- 料理は元のブログ記事へ案内します。価格や在庫は、今のものではありません
- 作る順番は「記録を集める→読む人の行動とページを決める→データにする→ページを作る→確かめて公開する」。整理と実装はAIに任せ、見た目と公開は私が決めました
目次
応援サイトで、まず試してほしい2つのこと
最初に試してほしいのは、料理検索です。
検索欄に「餃子」と入れてみてください。出てくるのは1件、「冷凍餃子のあったか鍋」です。餃子と豆腐と野菜を鍋に入れる料理で、2021年1月28日に書いた記事へ案内します。
検索できる料理は6件です。冷凍食品、肉・加工品、ごはん・麺の分類と、鍋・フライパン・オーブン・グリル・蒸すの作り方で絞れます。
もう一つは、小分けの計算です。
まとめ買いした肉の重さと、1回に使う量を入れると、何回分になるかが出ます。2000gを250gずつなら8回分。1000gを300gずつなら3回分で、100g余ります。
この計算が出すのは、回数と余りだけです。保存期限、栄養、アレルギーは判定しません。そこは食品の表示とお店で確かめてください。
サイトは全部で8ページです。会員登録や投稿の機能はありません。店舗とチラシは、肉のハナマサの公式サイトへ案内しています。
肉のハナマサの買い物の記録を、料理を探せる入口にした
記録のいちばん古いものは、2016年7月5日の記事です。ビルの建て直しで2年近く休んでいた芝浦店が、リニューアルオープンした日でした。朝9時に行って、買った物をその日にブログに載せています。
特売の値段をたくさん並べた記事なんですが、その中に、こんな一文があります。
何より最寄りの肉のハナマサが復活して嬉しい。
（出典：50kgダイエットのブログ 2016年7月5日の記事）
値段の話をあれだけ書いておいて、「何より」と書いたのは、近所の店が戻ってきたことでした。今読み返すと、応援サイトの出発点はこの一文にあるなと思います。安く買えることより前に、近くにあの店があること。それ自体が嬉しかったんですよね。
それから10年ほどたった2026年10月3日にも、ハナマサで買い物をしました。翌朝ふり返って、お金という愛と食品という愛、どちらにも真心が詰まっている、と感じたんです。2016年の一文と並べてみると、私にとってハナマサでの買い物は、ずっと値段だけの話ではなかったんだと思います。
そこから、ハナマサで買った物を使った料理の記事が続きます。検索に並べた6件は、2021年から2025年に書いたものです。
- 冷凍餃子のあったか鍋（2021年1月）
- 合鴨ロースとひよこ豆のピザ（2021年5月）
- 蒸しキャベツで包む冷凍焼売（2021年8月）
- コンビーフのキャベツチーズ焼き（2021年9月）
- 新玉ねぎと冷凍焼売の蒸し料理（2022年2月）
- ジャーキーのチャーハン（2025年1月）
読み返していて、いちばん私らしいなと思ったのは、2021年8月の焼売の記事のこの所です。
焼売ってお口にポイポイ運んであっという間に食べてしまうので、できる限り食べごたえがほしいなって思うんです。
（出典：50kgダイエットのブログ 2021年8月23日の記事）
食べるのを我慢するのではなく、食べ方を変える。手でちぎったキャベツの上で焼売を蒸して、包んで食べれば、1個でもしっかり食べごたえが出る。ダイエットの記録というより、好きな物と仲良く付き合うための工夫の記録だったんだな、と今は感じます。
2021年5月の合鴨ロースのピザも、前に作ったトマト煮込みとコーンオムレツの残りをのせて、魚焼きグリルで焼いた一皿でした。私は、安い物や残り物でも美味しくできる所に、料理の面白さを感じています。ハナマサの記録は、その面白さの記録でもあります。
サイトには、レシピの全文を写していません。料理名と短い説明、書いた日付を見せて、元の記事へ案内します。作り方は、元の記事で読んでください。
日付を見せているのには理由があります。どれも、書いた時点の記録です。価格、在庫、取扱いは、今のものではありません。今の商品はお店と公式のチラシで確かめてください。
記事は書いた時点のまま残っています。でも、読む人にとっては、探す手間がかかります。検索と日付があれば、その手間が一つ減ります。
TBS出演とAIで作ったCMの記録
応援の記録として、テレビのことも書いておきます。
2024年8月、私はTBS「熱狂マニアさん！」に、ハナマサマニアとして出演しました。番組では、AIで作った自主制作のCMも紹介されました。出演の後に書いた記事には、こう残しています。
結構たっぷり時間出演できてAIも紹介されて嬉しいです。
（出典：50kgダイエットのブログ 2024年8月24日の記事）
この「AIも紹介されて」の所が、今回のサイトにつながっています。出演そのものより、AIで作った物が誰かに届いた記録です。記憶で語るより、日付のある記事を指せるほうが、読む人は確かめられます。だからこの記事では、出演後の記事をそのまま出典にしました。
その後、前に作ったCMを作り直しました。歌詞だけを残して、曲と映像を作り直した記録は、AI氣道の記事に書いています。
肉のハナマサの非公式CMを最新版にした話｜歌詞だけ残して曲と映像はAIに任せてみた
その記事には、作り直しの方針をこう書きました。
歌詞だけ残して曲と映像は全部AIに任せてみた
（出典：肉のハナマサの非公式CMを最新版にした話）
残すものを決めて、作る所はAIに渡す。今回の応援サイトも、同じ分け方です。残したのは、私が書いてきた買い物と料理の記録。探して、分けて、ページにする所をAIに任せました。
2024年に番組で紹介されたのは、前に作ったCMです。上の記事は、その前作をもとに2026年に作り直した制作記です。会社から頼まれた広告ではありません。私が応援として作った物です。
作り方1：元の記事を集め、日付と出典を確かめた
ここからは、このサイトをどう作ったかを順番に書きます。先に分担を書いておくと、調べる・整理する・作る・絵を描く・確かめる作業はAIが受け持ちました。どんな見た目にするかと、公開するかどうかは私が決めました。
最初にやったのは、プログラムを書くことではありません。材料集めです。
AIに、50kgダイエットのブログからハナマサが出てくる記事を探してもらいました。本文を読んで、記事の題、書いた日付、URL、載っている写真を1件ずつ控えていきます。材料になったのは、料理の記事6件と、2016年の芝浦店オープンの記事、2024年のTBS出演の記事、2026年のCM作り直しの記事です。
いちばん気をつけたのは日付です。2021年の記事に出てくる商品は、2021年の記録です。日付を外して並べると、今も同じ物が同じように買えるように読めてしまいます。だから料理ごとに、書いた日付と元の記事のURLを必ず組にしました。
作り方2：読む人の行動から、8ページを決めた
次に決めたのは、ページの数ではなく、読む人にしてほしいことです。サイトの働きに合わせて並べると、こうなります。
- 今日の料理を、過去の記録から探す
- まとめ買いした肉を、何回分に分けるか考える
- 今の店とチラシは、公式で確かめる
- このサイトが非公式の応援サイトだと分かる
そこから逆算してページを並べたら、8ページになりました。役割で言うと、トップ、はじめての人向けの案内、料理検索、買う時の手引き、使う時の手引き、楽しむためのページ、このサイトについて、運営の方針です。
どの行動にも、会員登録は要りません。だから登録や投稿の仕組みは入れていません。
作り方3：料理6件をJSONにまとめ、Node.jsでページを作った
集めた料理6件は、JSONという書き方で1つのファイルにまとめました。例えば recipes.json という名前のファイルです。
JSONは、データを決まった形で並べるための書き方です。表の1行ぶんを、名前の付いた欄に入れていく、と考えると分かりやすいと思います。料理ごとに、題、短い説明、分類、作り方、元の記事のURL、書いた日付、画像の場所を持たせています。
例えば「冷凍餃子のあったか鍋」は、こんな形です（6件のうち1件・画像の欄は省いています）。
{
"id": "gyoza",
"title": "冷凍餃子のあったか鍋",
"description": "餃子、豆腐、野菜を鍋に。",
"categories": ["冷凍食品"],
"methods": ["鍋"],
"source": "https://www.50kgdiet.com/entry/2021/01/28/173244",
"date": "2021-01-28"
}こうしておくと、料理データの中心は recipes.json ですが、1件足す時はここに書き足すだけでは終わりません。画像を image-manifest.json に登録し、build.mjs の中に固定で書いてある「6件」の表示と、テストの画像の件数も直します。そのあとページを作り直して、検索・画像・リンクがちゃんと動くかを確かめたら、追加は完了です。8ページを1枚ずつ直す必要がありません。
ページを作るのは、build.mjs という小さなプログラムです。Node.js（パソコンの上でJavaScriptを動かすための道具）で動かすと、recipes.json を読んで、ページの中身になるHTML、見た目を決めるCSS、動きを受け持つJavaScriptを書き出します。
これを静的生成と言います。読む人が開くたびにページを組み立てるのではなく、前もって完成したページを作っておき、それを配るやり方です。料理で言えば、作り置きですね。
作り置きにしたので、データを貯めて出し入れするデータベースは要りません。外からの部品（npmのパッケージ）も足していません。部品が増えるほど、更新や組み合わせの手間も増えるからです。
作り方4：検索と小分け計算は、ブラウザの中で動かした
料理検索は、読む人のブラウザ（ChromeやSafariなど、ページを見るためのアプリ）の中で動くJavaScriptで作りました。6件のデータから、入れた言葉、分類、作り方に合う料理を絞り込みます。「餃子」で1件になるのは、この絞り込みです。
入力された文字は、NFKCという決まりで形をそろえてから探します。全角の「ＡＢＣ」と半角の「ABC」のように、見た目は似ていても別の文字として扱われる物を、同じ文字にそろえる決まりです。打ち方の違いで見つからない、ということを減らすためです。
検索した言葉は、ページのURLの末尾にも付きます。そのURLを人に送れば、相手も同じ検索の結果から見られます。
小分けの計算も、ブラウザの中でやる割り算です。中では、重さを1000倍した整数にしてから計算しています。コンピューターは小数の計算で、ごくわずかなずれを出すことがあるので、余りの重さに半端な数字が出ないようにしました。数字として扱えない値が入った時は、計算しません。
AIが栄養や保存期限を判断する仕組みではありません。出すのは、何回分と余りだけです。
作り方5：色と画像で「非公式」と「本物の記録」を分けた
トップの色は、黄・黒・赤にしました。見た目は私が選んでいます。そのうえで、会社の公式ロゴは使っていません。非公式の応援サイトであることは、はっきり書いています。
画像は12枚です。
- 元の料理の記事に載せた写真：6枚
- 買い物の写真：2枚
- 私のプロフィール写真：1枚
- このサイトのためにAIで作ったイラスト：3枚
実際の記録の写真と、AIで作った絵は、注記で分けています。私の顔をAIの絵で作り直すこともしていません。
画像は cwebp という変換の道具で、WebP（ページで軽く扱いやすい画像の形式）にしました。1枚につき大きさの違う3つを作ったので、合わせて36ファイルです。ページの側では srcset という書き方で、画面の幅に合う大きさをブラウザに選ばせています。スマホの小さな画面に、大きすぎる画像を送らないためです。
元の画像は手元に残し、配る画像からは撮影情報などのメタデータ（画像に付いている付属の情報）を消しました。ただ、実際に使う人の環境で、読み込みの速さは測っていません。
作り方6：16画面を確かめて公開し、公開後に中身を読み直した
公開の前に、確かめる作業を3つ重ねました。
1つ目は自動テストです。決めた動きが壊れていないかを、機械が毎回確かめる仕組みで、7本用意しました。
2つ目は画面の確認です。8ページを、パソコンの幅（1280px）とスマホの幅（390px）の2通りで開いて、16画面を見ました。はみ出し、抜けた画像、動いている途中のエラーが無いことを確かめ、検索と計算も実際に操作しています。これはブラウザで幅を変えた確認で、スマホの実機で試したものではありません。
3つ目は、別の目です。作ったのとは別のAI（Grok）に中身を読み直してもらい、コードのレビューも通しました。
そのうえで、公開するかどうかを私が決めました。置き場所はCloudflare Pages（作ったファイルを置くと、ネットに配ってくれる仕組み）で、このサイト専用の場所を用意しています。
公開して終わりにはしていません。公開した後に、配っているファイル49個と、ページが見つからない時に出す404ページを、手元のファイルと照らし合わせました。照らし合わせに使ったのはSHAという値です。ファイルの中身から計算する指紋のようなもので、1文字でも違えば別の値になります。全部、手元と一致しました。
あわせて、安全のための応答ヘッダー（ブラウザに「このページはこう扱ってください」と伝える設定）が付いていることも確かめました。この設定を書いた _headers というファイルを含めて、サイトは全部で51ファイルです。
あえて簡単にしたところ
作りながら、足さないと決めた物もあります。
- データベースは置かない（作り置きのページを配るだけ）
- 会員登録や投稿の仕組みは入れない
- 外からの部品を足さない
- レシピの全文は写さず、元の記事へ案内する
- 計算は、回数と余りだけにする
元の記事を読み返していて、2022年2月の焼売の記事に、この言葉を見つけました。
たまにはこういう手抜き（手間抜き）もいいかも。
（出典：50kgダイエットのブログ 2022年2月26日の記事）
新玉ねぎと冷凍焼売を、電鍋に入れて蒸すだけの料理でした。そこで私は、「手抜き」をわざわざ「手間抜き」と書き直しています。抜いたのは手間で、美味しさではない、ということだと思います。
サイトでやったことも、これに近いと思います。仕組みを増やす手間は抜いて、日付と出典を確かめる所は残しました。
AIに整理を任せ、出典と公開は人が確かめる
ここまでの分担を、もう一度まとめます。
AIに任せたのは、形にする作業です。過去のブログから料理の記事を探す。日付とURLを控える。分類を付ける。検索と計算が動くページにする。イラストを作る。表示と、公開後の中身を確かめる。
人が決めたのは、出典と公開です。どの記録を入口に並べるか。日付と元の記事が合っているか。公式ではないことが伝わる書き方か。どんな見た目にするか。そして、出すかどうか。
この分け方は、AIへの指示書の話とも重なります。AI氣道で、飯塚浩也さんのAGENTS.mdの動画を紹介した記事に、私はこう書きました。
私なら、AGENTS.md は短い案内役にして、AIが毎回読む量を積み減らします。
（出典：AGENTS.mdでClaude CodeとCodexの指示書を一本にする方法を、飯塚浩也さんの動画で整理する）
案内役を短くできるのは、大事な所が先に決まっている時です。今回も、出典と公開は人が決める所、と先に分けてから、探す・分ける・形にするをAIに渡しました。決める所が短くはっきりしていると、AIに任せる所を広く取れます。
あなたの過去の発信でも、同じ順番で始められます。
- 自分の記事のURLを3〜5本選び、AIに題・日付・話題を整理してもらう
- 読む人にしてほしいことを1つ決め、要るページをAIと一緒に決める
- 検索か計算を、小さく1つだけ作ってもらう
- パソコンの幅とスマホの幅で、表示と動きを確かめてもらう
- 公開の前に、出典・日付・書き方を自分で読み直し、出すかどうかを自分で決める
このサイトのプログラムは配っていません。上の順番を、あなたの記事で試すための道しるべにしてください。
探す・分ける・形にするはAIに任せる。何を出すかと、出典が合っているかは自分で見る。手作業を増やさずに、記録を使える入口へ変えられます。
ひろくんコラム：好きの記録を、使える入口に
前に、こんな一文を書いていました。
AIが形にしてくれる。何にワクワクするか、誰を応援したいかは、自分で選ぶ。
（出典：推し活で応援したくなる相手は、目的が似ている人だった）
今回の応援サイトは、この一文に、小さな形で答えたものです。
形にする所は、AIに任せました。過去の記事を探して、料理を分類して、検索と計算が動くページにする。ここを一つずつ手でやると、まとめる時間がそのまま増えます。
でも、選ぶ所は手放していません。応援する相手を肉のハナマサにしたこと。どの記録を並べるか。レシピを写さず、元の記事へ案内すること。公式ではないと、どこに書くか。そして、公開するかどうか。ここは選ぶ側に残しました。
2016年の芝浦店オープン当日の買い物から、2021年から2025年の料理まで。どれも、好きで書いてきた記録です。記事のままだと、読む人は日付をさかのぼって探すしかありません。入口を作ると、同じ記録が「今夜の一品を探す」「買った肉を分ける」に使えます。
AIが形にしたのは入口です。中に並んでいるのは、私が選んだ記録です。この順番が逆にならないように、出典と公開だけは自分で確かめました。
あなたにも、好きで書き続けてきた話題がありませんか？それを応援の形にするなら、まず何を選ぶかを決めてください。形にする所は、AIに渡せます。
AIエージェントに渡す依頼文：自分の過去の発信を、使える入口にする
この記事の作り方を、あなたの過去の記事で試すための依頼文です。Claude CodeやCodexなどのAIエージェントに、そのまま貼ってください。枠の中にこの記事のURLが入っているので、AIは最初にこの記事を読み、短い質問を一つずつしてから、あなたの環境で使える追加の依頼文を作ります。返ってきた結果は、出典と日付を含めて、自分の目で読み直してください。
依頼文を開く
【記事のURL】
https://ai-kidou.jp/hanamasa-fan-site/
最初にこのURLの記事を読んでください。読めない時は、読めなかったと伝えてから、下の要点だけを材料にしてください。
【参照元（先に読む）】
https://hanamasa-fan-dd196a1c.pages.dev/
【記事の要点】
・過去の買い物と料理の記録を、料理検索と小分け計算の入口にまとめた非公式の応援サイトの話
・料理は元の記事へ案内し、書いた日付を見せる。価格や在庫は今のものではない
・作る順番は、元の記事を集めて日付を確かめる→読む人の行動からページを決める→データにまとめて前もってページを作る→表示を確かめて公開→公開後に中身を照らし合わせる
・調べる・整理する・作る・確かめるはAIに任せ、見た目と公開は人が決める
【目的】
私の過去の記事や記録を、読む人が使える入口（テーマ別の一覧、検索、計算など）に整える計画を、一緒に立ててください。
【やってよいこと】
1. 記事を読んだあと、短い質問を1つずつ聞いてください。聞くこと：整えたい過去の記録はどこにあるか／読む人に何をしてほしいか／自分で確かめたい所はどこか／使っているAIエージェントや道具は何か。
2. 答えに合わせて、入口の形を1つと、作る手順（記事の順番を、私自身の記事を材料にして当てはめた形）を整理してください。
3. 私の環境にそのまま貼れる追加のプロンプトを1〜3本つくってください。各プロンプトの中に、この記事のURL（https://ai-kidou.jp/hanamasa-fan-site/）を入れてください。
【守ること】
・購入、設定の変更、削除、公開、送信は実行しないでください。確認と提案として書くだけにしてください。
・パスワードやAPIキーなどの秘密は聞かないでください。貼るよう求めないでください。
・記事と私の答えに無い数字、実績、効果を足さないでください。
・価格や在庫など、今の情報が必要な所は「出典で確かめる」と書いてください。
・他の会社やお店の名前を使う時は、公認や提携と受け取られる書き方をしないでください。
【返す形】
1. 私の答えの整理（箇条書き）
2. 入口の案1つと、作る手順
3. 公開の前に人が確かめる所の一覧（出典・日付・書き方）
4. 追加のプロンプト（1〜3本・記事のURL入り）
5. 自分の目で読み直す所を1行よくある質問
肉のハナマサの公式サイトですか？
いいえ、非公式の応援サイトです。株式会社花正との提携や公認はありません。店舗とチラシは、肉のハナマサの公式サイトで確かめてください。
載っている料理の商品は、今もお店で買えますか？
分かりません。料理の記事は2021年から2025年に書いた記録で、価格、在庫、取扱いは今のものではありません。今の商品は、お店と公式のチラシで確かめてください。
小分けの計算で、保存期限や栄養も分かりますか？
分かりません。計算が出すのは、何回分になるかと余りの重さだけです。保存期限、栄養、アレルギーは、食品の表示とお店で確かめてください。
このサイトのプログラムは配っていますか？
いいえ。コードを公開している置き場はありません。作り方の順番は、この記事の「作り方1」から「作り方6」に書きました。
スマホでの表示は確かめましたか？
ブラウザをスマホの幅（390px）にして、8ページの表示と、検索・計算の動きを確かめました。スマホの実機で試したものではありません。
まとめ
非公式応援サイトは、こちらです。
まず検索欄に「餃子」と入れてみてください。次に、手元の肉の重さで小分けを計算してみてください。
作り方で真似できるのは、順番です。記録を集めて日付を確かめる。読む人の行動からページを決める。データにして、ページを作り置きする。確かめてから出して、出した後にもう一度読み直す。
それから、あなたの過去記事を一つ思い浮かべてください。どの記録を、どんな入口にしたいか。そこが決まれば、形にする所はAIに任せられます。
🎁 無料プレゼント
Aiport（ClaudeCode AIエージェント実践会）
ClaudeCodeでAI秘書＋分身AI＋AIカンパニーが無料で作れるキット＆解説動画をプレゼント！
▶ 無料で入会してキットを受け取る🤖 AI生成コンテンツについて
この記事はAIツール（Claude Code）を活用して制作しています。構成・文章生成・画像制作にAIを使用し、最終的な内容の確認・編集・公開判断はひろくん（田中啓之）本人が行っています。「分身AIひろくん」（bunshin-ai.com）とは別のコンテンツです。
