Next.jsで制作したレシピ生成・検索ウェブアプリ「YourMix」

概要

個人的にカクテルが好きなので、レシピを検索するウェブアプリを作成しました。ドッグフーディングできることは重要だと考えているので、自分の趣味を反映しました。

他のレシピサイトとの差別化として、材料を指定するとAIがオリジナルのレシピを生成してくれる機能を中心にしています。一般的なレシピ検索機能も備えていますが、あくまでメインはAIが作成する、実質的に無限のレシピにあります。

作り始めた時期は2025年5月ですが、独学での制作に限界を感じたため、職業訓練の授業が十分進むまで保留していました。

納得いくまで作り込んでからリリースするつもりでいましたが、ポートフォリオが必要のため、未完成のまま一旦公開しています。今後は随時記事を更新/追加公開していこうかと考えています。

背景

YourMixは、もともと転職活動中にある企業から課題として企画書を出すよう指示された際に考えた内容に由来しています。塩漬けするのももったいないと思い、内容を多少変え、実際に制作・公開することにしました。

当時の企画書の内容は以下に記載しました。今見ると拙い部分も多いですが、自分が成長できた証拠だと考えるようにします。

投稿型カクテルサイト企画書

# 投稿型カクテルサイト企画書

## 事業内容

主にカクテルのレシピに関する情報を掲載する新規サイトを立ち上げる。

カクテルを作るのが趣味の人、作ってみたいと思っている人、飲むのが好きな人、カクテル作りを生業にする人も含めて、関係者が集まり賑わうカクテルサイトとして成長させ、市場で独占的な地位を築くことを目的とする。

近年の大規模プラットフォームの成功例に基づき、UGCを中心としたコミュニティを作ることができる投稿型サイトを目指す。

投稿内容としては画像・動画・レビューコンテンツ・アレンジレシピ・オリジナルカクテルなどを網羅し、カクテルを媒介としてユーザー間が繋がりを作れる場所を提供する。

## 市場調査

2017年の調査によれば（ https://prtimes.jp/main/html/rd/p/000000004.000024545.html )、75.4％が「自分でカクテルを作ってみたい」と考えており、4人中3人は潜在的なターゲットであると言える。また、カクテルに詳しい相手を「カッコイイと思う」人は8割を超えており、ポジティブなイメージを持たれていることが伺える。

2019年の調査によれば（ http://wine-bzr.com/topic/report/11848/ ）、カクテルは20～30代の若年層に人気が高いため、将来性があると考えられる。

若者の酒離れが懸念として挙げられるが、むしろこのサイトをきっかけにして若い層にも飲酒の楽しさを伝え市場を大きくすることを狙う。また、ノンアルコールや酒っぽさのない味のカクテルもあることを訴求材料とする。

「カクテル」に類するクエリで検索すると、レシピ検索サイトかレシピ紹介記事が上位表示されるが、SEO調査ツールによれば決して高い評価とは言い切れない。直接的な競合となる投稿型サイトは更新停止しており存在感を出せていないため、機会としては狙い時と思われる。

SNS上では以下のように投稿件数・視聴回数は多い模様。

- Instagramの「#カクテル」の投稿件数：166.3万件
    - [https://www.instagram.com/explore/tags/カクテル/](https://www.instagram.com/explore/tags/%E3%82%AB%E3%82%AF%E3%83%86%E3%83%AB/)
- Tiktokの「#カクテル」の視聴回数：225.8M
    - [https://www.tiktok.com/tag/カクテル](https://www.tiktok.com/tag/%E3%82%AB%E3%82%AF%E3%83%86%E3%83%AB)

## 拡大戦略

- 上記にあるようにSNS映えすると考えられ、SNSを中心とした広告出稿が効果的と予想される
- カクテルコンペティションの支援等をきっかけに日本バーテンダー協会などの団体と提携
- 酒類製造・販売会社との協力
- バーを主題にしたドラマや漫画等のコラボレーション
- 実店舗に協力を依頼しリアルイベント実施

## 収益化

- カクテルの材料となる酒類や割材のアフィリエイト広告
- サイト内に広告枠を用意
- ユーザー向けに付加価値をつけた有料プランを作り、サブスクリプションで加入してもらう

アーキテクチャ

C4Container
  title YourMix アーキテクチャ図

  Person(user, "ユーザー", "ブラウザ経由でアクセス")

  System_Boundary(cloudflare, "Cloudflare") {
    Container(next_app, "Next.js Application", "Node.js, OpenNext", "UI提供、バックエンドAPI")
    ContainerDb(d1, "D1 Database", "SQL Database", "レシピ、材料データ等を保存")
  }

  System_Ext(google_ai, "Google AI", "Gemini API", "AIによるカクテルレシピ生成")

  Rel(user, next_app, "利用", "HTTPS")
  Rel_Back(user, next_app, "ウェブページ表示")

  Rel(next_app, d1, "読み書き", "Drizzle ORM")
  Rel(next_app, google_ai, "レシピ生成をリクエスト", "API")

技術選定

エディタ：いくつか試しており、まだひとつに定めてはいません。現時点ではレート制限を考えてGemini CLIを使う機会が増えているため、どのエディタを選ぶかは重要ではなくなってきています。
- VS Code
  - 一時期は盤石の地位が脅かされていると感じていましたが、AI関連のオープンソース化・アップデートにより巻き返しが進んでいると思います。今でも大きいシェアを持っているでしょうし、結果として真っ先にMCPなどの対応がされるなどの安心感から、手堅い選択肢だと考えるようになりました。
  - ただ、Copilot無料枠で選択できるモデルが少々力不足なので、最近では開発に使用していません。
- Cursor
  - ビジュアルエディタの搭載は興味深い方向性だと感じました。これがうまくいくかはわかりませんが、新しいUXを生み出そうとする気概に好感を持ちます。
  - とはいえ、月単位のレートリミットにあっという間に到達してしまうため、サブで使用することもあるエディタという立ち位置です。
  - また、VS Codeからショートカットキーがいくつか変更されているので戸惑います。
- Google Antigravity
  - 現在のメインエディタです。Google謹製でありGemini 3の能力をフルに活かせるであろうという安心感もさることながら、週単位という比較的緩いレートリミットで使用できるのが嬉しいポイントです。Gemini CLIとあわせて使用することで、無料でもAIを潤沢に使用した開発が行えています。Claude 4.5世代も使わせてくれるのが大変嬉しいので、このままを維持してほしいところです。
  - Gemini.mdで指定しても英語でArtifactsを出力してくることがあり、AIとのコミュニケーションコストがかかりがちなのが難点です。
ランタイム：Node.js
ホスティング：Cloudflare Workers
- 当初デプロイに失敗し続けていましたが、公式ドキュメント↗をきちんと読み直したところコマンドからの実行が正解でした。
- OpenNext↗を使ってNext.js製アプリをデプロイするのですが、互換性が完全ではないためなのかicon.tsxの配置時などエラーが起きることがあり、まだ安定性に欠ける印象です（OpenNextが原因かどうかの確信はありません）。
データベース：Cloudflare D1
- 一定の無料利用が可能であること、Workersとの連携を考えての採用です。
ORM
- Drizzleを採用しました。Prismaは職業訓練校で使用したので、せっかくなら別のものを使ってみようという考えです。選定の際にはGithub Star History↗を参考にすることがままありますが、今のところ両者の伸びは平行線のようです。健全な競争があるのはいいことですね。
フレームワーク：Next.js
- ウェブアプリ開発におけるデファクトスタンダードに近いかと考えているため、経験を積むためにも導入しました。機能をすべて使いこなせるとは思いませんが、できるだけ学んでいきたいと思います。
リンター・フォーマッタ：Biome
- 個別にESlintやPrettierを導入するより楽でした。configやプラグインの設定がほとんど不要というだけでも新規プロジェクトに採用したくなります。
UIライブラリ：MUI
- 以前から気になっていたので採用しました。そのままのデザインだとカクテルのサイトとしてはミスマッチになりそうだと考え、全体的に色彩を調整しています。
- Gemini 2.5世代でも知識が古いようで、生成するコードがMUI v7の仕様に沿っていないという事態が頻発します。公式ドキュメント↗に従えば解決しますが、モデル側のアップデートで解消することを期待しています。
テスト：Playwright、Vitest
- まだ不慣れなため、主にAIの書くテストに頼っています。Github ActionsでPlaywrightを実行するとエラーが頻発したので、やむなく手動での実行のみ行っています。

今後

技術的に難しいものもありますが、仕様書↗に記載がある内容は実装を進めていきたいと思います。直近で対応したいもの・現在対応中のものはGithub Projectsで管理するようにしています。

Next.jsで制作したレシピ生成・検索ウェブアプリ「YourMix」

目次

概要

背景

アーキテクチャ

技術選定

今後