ChatGPTとCodexで作った、100種類から選ぶ「今日の冷奴診断」

今日の冷奴、何をのせる？

暑い日は、なるべく火を使わず、手早く食事を用意したいものです。そんな日に頼りになる冷奴も、いつも同じ薬味としょうゆでは少し飽きてしまいます。

そこで、5分ほどで作れる100種類の冷奴アレンジから、その日の気分に合う3品を提案する「今日の冷奴診断」を作りました。

このサイトも「やさいのミカタ」と同じく、AIを活用して身近な困りごとを解決するWebサイトを募集する「お悩み解決サイト選手権」への応募を目指して制作しています。

最初に使ったのは、ChatGPTのDeep Researchです。

夏場に作りやすい冷奴という条件で、火を使わず、安く、短時間で用意できるアレンジを調べ、100種類のレシピ候補を出しました。

ただし、100種類の情報がそろっただけでは、診断サイトのデータとしてすぐには使えません。似たレシピが並んでいたり、材料名や味の分類にばらつきがあったりすると、診断結果にも偏りが出てしまいます。

そこでCodexとのやり取りを重ねながら、レシピ名を分かりやすく整え、特殊な材料はスーパーで買いやすいものへ置き換えました。さらに、材料、調味料、作り方、調理時間、安さ、満足感、注意点などを、同じ形式で扱えるデータへ整理しました。

今回の中心になるのは、100種類の中から、その人に合うレシピを選ぶ仕組みです。

質問は全部で8問。それぞれ4つの選択肢から答えます。

各回答には「さっぱり」「おつまみ」「韓国風」「満足感」といった診断用のタグを付けました。回答のタグとレシピのタグが一致するほど点数が高くなり、上位3件をおすすめとして表示します。

一方で、「辛いものを避けたい」「にんにくは使いたくない」「マヨネーズは苦手」といった回答も大切です。避けたいタグを含むレシピは点数を下げ、好みではない料理が上位に出にくいようにしました。

同点になった場合は、夏らしさを表す点数が高いレシピを優先します。それでも同じなら順番をランダムにし、診断するたびに少し違う候補と出会える仕組みです。

100種類の冷奴レシピから8つの質問を通してトップ3を選ぶ診断の流れ

100種類の候補と8つの回答を照らし合わせ、その日の気分に合うトップ3を提案します。

診断結果は、1位から3位までをカード形式で表示します。

カードにはレシピ名だけでなく、一言キャッチコピー、材料、調味料、作り方、調理時間、安さ、満足感、おすすめの気分、注意点までまとめました。結果を見て終わりではなく、そのまま台所で作れることを意識しています。

また、「別のおすすめを見る」ボタンを押すと、4位から6位の候補も確認できます。1位の材料が家になかったときや、少し違う味を選びたいときの逃げ道です。

サイトは、HTML、CSS、JavaScriptだけで動く1ページ構成にしました。APIやデータベース、フレームワークは使っていません。

100種類のレシピはJavaScriptの配列としてサイト内に持たせています。そのため、通信環境や外部サービスに頼らず診断でき、あとからレシピを修正したり、新しい候補を追加したりしやすい構成です。

画面は、トップ、8問の質問、診断結果を順番に切り替えます。白、水色、淡い青、薄い緑を中心に、夏らしく涼しげな雰囲気にしました。スマートフォンで片手でも回答しやすいよう、選択肢やボタンは大きめにしています。

画面が情報だけで単調に見えないよう、ページの下には冷奴をイメージした豆腐のイラストも加えました。診断の邪魔をしない位置に小さな遊びを入れることで、最後まで涼しげで親しみやすい雰囲気になるよう整えています。

「やさいのミカタ」では、最初にイラストなどの画像を作り、目指す雰囲気を確認してからサイトを実装しました。一方、今回の「今日の冷奴診断」では、まず診断が動くサイトを作り、その後で色、余白、ボタン、イラストなどの見た目を整えています。

いつもと逆の順番だったため、作り始めたときは、最後までまとまりのあるデザインに仕上げられるか少し心配でした。それでも、先に質問や採点などの機能を完成させてから、実際の画面を見ながらデザインを調整することで、今回も無理なく形にできました。

Codexとのやり取りでは、「まず動くものを作る」「次に使い勝手と見た目を確認する」と段階を分けて進めました。画像を先に作る方法だけでなく、サイトを先に作り、必要な装飾を後から加える方法でもうまく進められることを確認できました。

画像を先に用意する制作手順と、動くサイトを先に作る制作手順の比較

「やさいのミカタ」は画像から、今回は動くサイトから。どちらの順番でも、段階を分けることで形にできました。

最初にDeep Researchの結果から100種類のレシピを取り出し、Codexと一緒に名前やタグ、点数に使う項目を整理しました。レシピデータの件数とJavaScriptの構文を確認してから、診断画面と採点処理を加えています。

完成後は、8問に回答するとトップ3が表示されること、「別のおすすめを見る」で4位から6位へ切り替わることを確認しました。サイト制作とデータ整理を分けたことで、どこに問題があるのかを見つけやすくなりました。

100種類のレシピを集めるところから、診断に使える形へ整え、動くサイトにするところまで、ChatGPTとCodexを役割分担して進めました。

Deep Researchは多くの情報を集めるのに便利ですが、その情報をどのように分類し、どんな体験として見せるかは別の仕事です。今回は「夏の食事を少し楽にする」という目的に合わせて、レシピを選ぶ質問と採点方法を何度も整理しました。

AIが出した大量の情報をそのまま並べるのではなく、「使う人が迷わず選べる形に編集すること」が、Webサイトにするうえで大切だと感じました。

今後はサイトの画面を確認しながら、この記事にも制作の流れが伝わる画像やサムネイルを加える予定です。暑い日の献立に迷ったとき、気軽に使える診断サイトとして多くの人に試してもらえたらと思います。