ChatGPTとCodexで作った、野菜選びと保存を助けるサイト「やさいのミカタ」
「野菜を選ぶ・保存する」を、もっと手軽にしたい
スーパーで野菜を選ぶとき、「どれがおいしいのだろう」と迷うことがあります。家に帰ってからも、「冷蔵庫に入れるべき？」「冷凍できる？」「どのくらい日持ちする？」と、そのたびに検索していました。
一つひとつは小さな疑問ですが、毎日のことになると意外に手間がかかります。そこで、買い物中にも帰宅後にもスマホですぐ確認できる野菜ガイド「やさいのミカタ」を作りました。
このサイトは、AIを活用して身近な悩みを解決するWebサイトを募集する「お悩み解決サイト選手権」への応募をきっかけに制作しました。
「買う前」と「帰宅後」を切り替え、野菜を検索できるスマホ向けの画面です。
まずはChatGPTで情報を集める
サイト制作の最初の一歩は、コードを書くことではなく、掲載する情報を集めることでした。
ChatGPTのDeep Researchを使い、日常的によく使う20品目の野菜について、旬の時期、おいしい野菜の見分け方、保存方法、保存期間の目安などを調査しました。生活に関わる情報だからこそ、見た目の楽しさだけでなく、信頼できる情報であることも大切です。そのため、参考にした情報を各野菜の詳細から確認できる構成にしました。
最初から品目数を増やしすぎると、情報の確認や使い勝手の調整が難しくなります。そのため、まずはスーパーでよく見かける定番20品目に絞り、将来追加しやすいデータ構造で作ることにしました。
いきなり作らず、Codexと設計図を作った
調査結果がまとまった後は、Codexにすぐ実装を依頼するのではなく、先にサイトの設計図を作りました。
重視したのは、次の3点です。
- スーパーでも自宅でも、スマホ片手で使いやすいこと
- 「買う前」と「帰宅後」で、必要な情報をすぐ切り替えられること
- 実用的でありながら、かわいくて開きたくなること
サイト名は、「野菜の見方」と「ユーザーの味方」をかけて「やさいのミカタ」にしました。デザインは、淡い色、付箋、チェックリストなどを使った、やさしい手帳風の方向に決めました。
設計図をもとに、Codexには「まずスマホサイズのデザイン案を作る」「次に、検索や切り替えができるサイトとして実装する」と、段階を分けて依頼しました。HTML、CSS、JavaScriptを使い、検索、絞り込み、詳細表示までを1ページで完結できる構成にしています。
完成した主な機能
「やさいのミカタ」には、次の機能を入れました。
- 野菜名による検索
- 「買う前」と「帰宅後」の表示切り替え
- 今月の旬、冷凍OK、常温保存、野菜カテゴリによる絞り込み
- おいしい野菜の見分け方
- 保存方法と保存期間の目安
- 参考にした情報へのリンク
検索では、カタカナだけでなく、「とまと」や「きゃべつ」のようなひらがな入力でも見つけられるようにしました。入力する人が表記を意識しなくてもよい、小さな工夫です。
また、「買う前」「帰宅後」という言葉だけでは何が変わるのか分かりにくかったため、それぞれに「選び方を見る」「保存方法を見る」という説明を加えました。詳細画面にも、「おいしい野菜はここを見る」「長持ちのコツをすぐ確認」といった短い案内を添えています。
一番苦労したのは、野菜のイラスト
制作の中で特に苦労したのが、20品目の野菜イラストでした。
最初は、外部画像に頼らず軽く表示できるよう、CodexにSVGイラストを描いてもらいました。しかし、形を単純化しすぎたため、何の野菜か分かりにくいものや、形が大きく崩れたものもありました。
そこで、葉脈、ヘタ、断面、皮の筋など、野菜を見分ける特徴を加えて描き直しました。それでも目指していた雰囲気には届かなかったため、「水彩のような塗り」「細い手描き線」「少し実物に近いけれど、かわいさは残す」という方向を具体的に伝えました。
野菜ごとの特徴を加えて描き直した段階。形は分かりやすくなりましたが、まだ目指す雰囲気とは異なっていました。
最終的には、同じタッチで20品目分のイラスト素材を作り、一つずつ画像として切り出してサイトへ配置しました。背景が四角く見えないように透過処理も行い、手帳風のカードになじむ見た目へ調整しました。
最終的に採用した、水彩と色鉛筆のようなやさしいタッチのイラストです。
「イラストを入れて」と一度伝えるだけでは、思い描いた結果にはなりませんでした。どこに違和感があるのか、何を残し、何を変えたいのかを具体的に言葉にしながら、何度も調整しました。
実際に触りながら、使いやすさを直す
見た目が整った後も、スマホで実際に使う場面を想像しながら修正を重ねました。
たとえば、野菜の詳細を読んだ後、元の一覧へ戻る操作が分かりにくい問題がありました。そこで「一覧へ戻る」ボタンを追加し、押すと先ほど選んだ野菜の位置へ戻るようにしました。最初は詳細の上部に置きましたが、片手で操作しやすく、情報を読み終えた後に自然に押せるよう、最終的には参考情報の下へ移動しました。
情報を読み終えた流れで押せるよう、「一覧へ戻る」ボタンは詳細画面の下部に配置しました。
このほかにも、検索、モード切り替え、フィルター、スクロール位置などを繰り返し確認しました。Codexに「少し使いにくい」「意味が伝わりにくい」と相談し、その理由を一緒に整理しながら修正することで、少しずつ使いやすい形に近づけました。
AIで作って実感したこと
今回、ChatGPTのDeep Researchで情報を集め、Codexで設計と実装を進めました。コードをすべて自分で書けなくても、困りごとを整理し、必要な機能や理想の見た目を言葉にすることで、動くサイトまで形にできました。
一方で、AIが最初に出したものが、そのまま完成形になるわけではありません。特にイラストやスマホでの操作感は、実際に見て、触って、違和感を伝える作業が欠かせませんでした。
AIに任せきるのではなく、「自分が利用者として判断し、AIと一緒に直していくこと」が、サイトの完成度を上げるうえで大切だと感じました。
まずは定番20品目から
現在の「やさいのミカタ」では、定番の野菜20品目を掲載しています。今後は品目を少しずつ増やしながら、買い物や保存で本当に役立つ情報を、迷わず確認できるサイトへ育てていきたいと思います。
スーパーで野菜選びに迷ったときや、買った野菜の保存方法を確認したいときに、ぜひ使ってみてください。