はじめに
初めて、個人開発に挑戦しました！「アイデア出し⇒MVP作成⇒プロダクト作成」を自力で行い、作りたいものを作るということに挑戦、やり遂げることができました。
この記事では、作成過程や開発初心者が0→1で作れるようになるまでに得た気づきを書きたいと思います。
作ったものの紹介
添加物が気になる人のためのお酒検索アプリ🍶
なぜ作ったのか
ニッチです。添加物って何？と思う方もいらっしゃるのではないでしょうか。
商品を手に取らないと添加物がわからない
私は、お酒が大好きです。
その一方で、食品や飲み物を買うときに添加物が入りすぎていないか気になってしまいます。スーパーで缶チューハイを手にとっては成分表を眺めていました。
添加物が入っていないものを調べるのに手間がかかる
趣味で加入しているトレーニングサロンの集まりで、意外と添加物を気にしている人は多い印象がありました。食品を手に取った際は成分表を見てしまう、ないものを探すのが大変との意見もありました。公式サイトなどで調べることもできますが、調べるにも検索→商品情報や成分表のページを探す→入っているか確認する手間がかかります。
健康に気を使っている人や、特定の原材料を避けたい人も一定数いることはわかっていましたが、現状簡単に調べられるものが少ないと感じていました。
毎回同じものを選んでしまう
シンプルなもので作られているドリンク（ウォッカと果汁のみなど）を買いたいなと思いつつもあまりなく、見つけることが難しいです。そのため同じドリンクを選びがちでした。
なぜ添加物を気にする人がいるのか
私は人工甘味料が入った飲み物やお菓子を摂取しすぎると、お腹がゆるく感じることがありました。
なるべく人工甘味料が入っていない飲み物を選びたいと思ったことが、添加物を気にするきっかけでした。
トレーニングサロンのメンバーからは、様々な意見を聞きました。
- 小さいころからアレルギーやアトピーで悩んでいて、特定のものを避けたい
- 子どもの体調を気にかけて、避ける傾向にある
- 発がん性があったり、負担があったりと何となく不安
- なるべく自然由来の物を摂りたい
科学的な意見は様々あり、食品の安全性を保つためにも添加物は必要とはわかっているものの、気にする人が一定数いることも事実です。
そういった方々が安心して選べるようにしたいと思いました。
このアプリでどのように解決できるのか
上記の問題を解決するために、「簡単に添加物有無がわかる」「添加物がない・少ないお酒を簡単に調べられる」「自分の希望にあう新しいお酒に出会える」ことを目指して作成しました。
「商品を手に取らないと添加物がわからない」
商品カードに添加物有無のアイコンと添加物情報欄を設け、簡単に「添加物有無」と「添加物情報」がわかるようにしました。
→毎回お酒を手にとって確認する必要がなくなります。
「添加物が入っていないものを調べるのに手間がかかる」
検索項目が多いと簡単に調べられない/手間が増えると考えていました。
メインの検索フォームには商品名と添加物有無のフィルター項目のみ設け、「添加物あり/なし」、「気になる商品に添加物があるか」に特化しました。
→添加物がない・少ないお酒を簡単に調べられます。
「毎回同じものを選んでしまう」
様々な飲料メーカーのサイトから情報を収集し、豊富なデータを揃えるようにしました。
→いつも同じものを選んでしまうことを解決、新しいお酒を見つけることができるようにしました。
機能概要
1. 添加物チェック
各カードに添加物有無のアイコンをつけて一目でわかる、
カード内では添加物情報を設け、気になるものが入っていないかわかるようにしました。
2. 検索機能
商品名・添加物有無で検索： お酒の商品名、添加物有無で気軽に検索
詳細検索： 特定の添加物や添加物名称、主要な飲料メーカーで絞りこみ
3. お酒情報詳細
添加物以外にも、健康志向の人に向けた情報を追加しました。
アルコール度数、糖質量、カロリー、おすすめレシピやペアリングなども紹介できるようにしました。
4. 自動データ登録バッチ
定期的に新しい情報や商品情報を収集、登録できればと思い、バッチコマンド実行で、メーカーサイトから情報を収集、登録できるようにしました。
技術スタック
| カテゴリ | 技術 |
|---|---|
| フロントエンド | TypeScript, React, Tailwind CSS, Vite |
| バックエンド/DB | Supabase, TypeScript |
| デプロイ | Firebase |
| テスト | Jest, React Testing Library |
| CICD | GitHub Actions |
| 他 | Claude API, puppeteer |
テーブル構成
バッチのフロー図
開発中は10データほど手動で投入して行っていましたが、データ数を増やすにあたり、同じように投入するのは現実的でない、面倒だと思いました。
Puppeteerでスクレイピング、取得した情報を元に、ClaudeAPIを使って詳細情報（おすすめレシピ、ペアリングや飲み方）を考えてもらい、データを登録する仕組みを作成しました。
初めての個人開発から得た気づき
1. アイデア出しが非常に難しい
（価値を届けるプロダクトを作ることの難しさ）
1から何かを作ってみたいけど、何を作ったらいいかわからない状態からスタートしました。
思いついても、大抵は既に世の中にあるものと被っています。
自分が作ったサービスやプロダクトでしか提供できない、そのサービスを使わなければいけないものを作ることは本当に難しいと思いました。
コミュニティ内で壁打ちしてもらいつつ考えたアイデアのため、正直今もアイデアを考えられるようになった！とは思っていません。
ただ日々の中で、今世の中にないもの、新しい組み合わせは何かないか、今使っているもので、こんなものがあったらいいのに、エンジニア以外の人が使ってみたいと思えるものは何だろう？などを考える癖がつくようになったと感じています。
以前は「技術的に実装が面白そう」「プロダクトを作りたい」という視点で考えがちでしたが、「エンジニア以外の家族や友人が本当に困っていることは何か」を考えることも大切だと思うようになりました。
2. 完璧な計画よりもまずは「価値」を届けることの大切さを知る
これまでの業務を通して、見積もりからリリースまでどのくらいかかるか厳密に見積り、スケジュール通りに進めることが当たり前だと思っていました。
アイデア出しをした当初、実際にプロダクトを作るまでにどんな機能を作るか、完成までにどの位の期間がかかるか一通り考え、スケジュールもかっちり作ろうとしてました。
ここで、コミュニティの教えからMVPの考え方を知ります。
参考サイトより引用
MVP（Minimum Viable Product）とは、ユーザーに必要最小限の価値を提供できるプロダクトのこと。
一般的には、目的を達成できる最低限の状態の製品やサービスをユーザーに提供し、得られたフィードバックを参考に新機能の追加や改善を繰り返すMVP開発で活用されます。
最初は、MVPはどのように作ったらいいの？最小で価値を提供するとはどういうこと？状態でした。
調べていくうちに、ユーザーストーリーと受け入れ基準の概念を知りました。
参考サイトより引用
「〇〇（ユーザー）として、✕✕（行動）をしたい。それは、▲▲（目的）だからだ」
実際に使う人の立場になってユーザーストーリーを作成、どうすれば実現できるのか受け入れ基準を書きだしました。
考えたユーザーストーリーと受け入れ基準
## 1.人工甘味料や着色料を避けたい
「添加物を気にしている人は、添加物が入っていないお酒を成分表示からすぐに確認したい、なぜなら体に良くないといわれているものを摂取したくないからだ」
他にも考えられるロール：健康意識の高い人、添加物を気にしている人
他にも考えられるなぜ：添加物が入っていないお酒やチューハイが飲みたいから
**受け入れ基準**
商品名検索で5秒以内に結果が表示される
添加物の有無が「あり/なし」で明確に表示される
ある場合は具体的な添加物名と種類（着色料・甘味料など）が表示される
データがない商品は「情報なし」と表示される
## 2. 定期的な新発見
「お酒を飲む人は定期的に添加物の少ない新しいお酒を探したい。なぜなら健康に配慮しながらも新しいお酒を知りたい・同じお酒ばかり飲んでマンネリ化することを避けたいからだ」
**受け入れ基準**
最近追加された商品が「新着」として表示される
カテゴリー別（ビール、チューハイなど）に添加物の少ないお酒が表示される
## 3.飲み会での選択
「社交の場に参加する健康志向者として、私はその場で提供されているドリンクの中から添加物の少ないものを素早く識別したい。なぜなら周囲に気を遣いつつ自分の健康も守りたいからだ」
**受け入れ基準**
検索結果に添加物の有無が視覚的に分かりやすく（色やアイコン）表示される
例：添加物なし→緑のチェックマーク、あり→黄色の注意アイコン
添加物の種類（着色料、甘味料など）でフィルタリングができる
居酒屋などでよく提供される一般的なお酒のリストを素早く閲覧できる
## 4.アレルゲン情報
「アレルギー持ちの飲酒者として、私は特定のアレルゲンを含まないお酒だけを表示したい。なぜなら安全に楽しむための選択肢を知りたいからだ」
**受け入れ基準**
主要アレルゲン（小麦、大豆など）でのフィルタリングが可能
複数のアレルゲンを同時に除外検索できる
アレルゲン情報がない商品は「情報なし」と明示される
アレルゲンの詳細説明（なぜ含まれているか）が表示される
完璧なものを完成させようとせず、まずは小さい機能単位で、問題を解決する、価値を届けることの大切さを学びました。
3. 自己満足になっていないか不安との戦い、フィードバックをもらうことの大切さ
作成中、自分が作りたいものと、世の中で必要とされているものにギャップがあるのではないか、これって自己満じゃない？と思うことが何度もありました。
開発中はMVP毎に、コミュニティの人にフィードバックをもらうようにしました。
最初は、フィードバックをもらうことを恐れていましたが、そもそも使ってもらわないとわからないよね？となりフィードバックをもらうようにしました。
フィードバックをもらって思ったことは、自分が満足した状態でも、実際に使ってもらうことで気づかなかった指摘をいただけることです。
自分で動作確認する際は同じ操作を無意識に行っていたため、気づけなかったバグがたくさんありました。指摘をいただくことで操作性を向上することができました。
ありがたいことにもっとこうしたほうがいいよ、この機能追加したらいいのでは？などのアドバイスをいただき、自分では思いつかなかった新しい観点や考えを取り入れられる、より使いやすいものにすることができました。
4. キャッチアップの目的意識が変わった
今まで、Udemyの視聴や書籍を読む、サンプルアプリを作っていた段階では明確なゴールがなく、こんな技術の使い方があるんだなあ、こういう流れで開発を進めるんだなあというざっくりとした印象で、課題解決のための引き出しを増やすこと以外に目的がありませんでした。
実際に1からプロダクトを作ってみて、もっとこうしたい、ここを変えたい！でも解決方法を調べないとわからない、調べてもしっくりこない状態が開発中に何度もありました。
ここ最近のインプットやアウトプット活動で、検索アプリでこの機能作ったけど、この技術やコードの書き方を知っていればもっといいものになったかもと思えるようになりました。
また、新しい概念を理解しようとする際には、今から私は何を勉強して、どう応用できるのか（プロダクトの作成に活かせるのか）を考えながらキャッチアップをすることを心掛けるようになりました。
今後の展望と課題
1ヶ月での開発だったため、改善の余地があります。特にバッチ処理の安定化が次の目標です。
機能面の改善
-
ページング改善: データ数を増やした結果、全件表示したときに全て一つのページで表示されています。10 件ずつ表示などでもっと見やすくしたいです。
-
データ数を増やしたい: カテゴリーがカクテル、ビール、チューハイのみのため、ワインや日本酒など様々な種類を検索できるようにしたいです。
-
アレルゲンでのフィルタリング: ユーザーストーリーを考えたときに、添加物だけではなくアレルギー持ちの方向けに特定の原材料でフィルタリングもできたらいいなと考えていました。期間を考え優先度をさげましたが、原材料フィルタリングも追加したいと考えています。
-
バッチ機能の向上: 現在Puppeteerで特定のサイトから自動データ収集をするように作成しています。もっと様々の種類の情報を収集ができるように精度をあげたいです。
安定したら、ワークフローからcron実行して週に１度実行、定期的に商品を増やせるようにしたいと考えています。
おわりに
自分が抱えていた勉強しているのに何も作れない状態をまずは脱却できたと思っています。
2年くらい悩んでいましたが、学習方法を変えてから約５か月で脱却できたことは本当に嬉しいです。
まだまだ技術力、プロダクトを作成するにあたり、知識が不足しています。
しかし、まずは作ることができた自分を素直に褒めたいと思いました。
今後は、ただ作るだけではなく、これがないと困る！これがあってよかった！と思ってもらえるようなプロダクト作りができるようになるよう日々学習をしていきます。
参考
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼