はじめに
初めまして！
Aniline(アニリン)という名前で活動しているものです。
普段は仕事で開発のマネジメント側をすることが多く、あまり開発には携われないので
「「それなら自分でつくってやる！」」
と意気込んでWebアプリを作ってみました。
作ったのは「OshiKusa」という観葉植物の管理webアプリです。
初めての個人開発アプリになりますのでぜひご意見をいただけると幸いです！
OshiKusa
(ローカルには挫折した時の残骸がいくつかありますが公開していないのでノーカウントで...)
この記事で書いていること
- OshiKusaを作った理由
- OshiKusa解説
- 技術スタック
- 大変だったこと
詳細については長くなるので、また別記事で書いていきたいと思います。
OshiKusaを作った理由
きっかけと題材選び
冒頭に書きましたが仕事でなかなか開発ができないので自分で作ってやろうと思ったことがきっかけです。
どのようなアプリにするかですが、挫折経験と先人の言葉から自分の悩みを解決するアプリがいいと考えました。
私は植物をいくつか育てていて、
- いつ水やりしたっけ...次いつ頃しないといけないっけ...
- 前に肥料やったのいつだっけ...
- 植替えってそろそろ...？
みたいな悩みは尽きないのでこれを解決できるアプリを題材として決めました。
(今回はまず植物の登録と水やりの記録を機能として実装したところまでで公開してます。)
OshiKusaを作る目的
ということできっかけがあり題材も決まったので荒っぽいですが目標を立てました。
- 挫折しない ← 一番大事！！！
- 0から1のサービス開発経験を積む
- 開発スキルを向上させる
- 植物管理という私の持つ課題を解消する
- アプリの公開は2026/1/1(2025/9下旬ごろスタート)
このように今回は挫折して途中で辞めないことを一番の目標にして開発しました。
そのため設計しやすい機能からまずは実装して公開しています。
OshiKusa解説
ここではどんなアプリなのかをスクショとともに解説したいと思います。
ユーザー登録をしていただければ利用できるようになっています。
EmailとGoogle認証に対応しています。
主な機能
- 植物の登録・管理
- 水やりの記録・表示
画面紹介
LP
デザインは悩みましたが文字大きめのデザインにしてます。
植物一覧画面
リストで登録した植物を見ることができます。
いつ水やりしたのかも表示されるのでパッと確認もできます。
水やり画面
表形式で水やりの記録を確認できます。
また、「水+」 を押すと押した日の日付で水やりを登録することができます。
右上の「編集する」ボタンからも水やりの追加削除が可能で、一括で変更することができます。
技術スタック
Webフレームワークとしては一番馴染みのあるNext.jsを選定しました。
ただ、Next.jsはSPAの開発でしか触ったことはなかったため学習も兼ねてNext.jsでバックエンドまで開発するNext.jsフルスタック開発という形をとってみました。
| カテゴリ | 技術 |
|---|---|
| フロントエンド/バックエンド | Next.js 15 (App Router), TypeScript |
| スタイリング | Tailwind CSS v4, shadcn/ui |
| DB/認証 | Supabase (DB, 認証) |
| ホスティング | Vercel |
| AI Agent | Claude Code, Cursor |
大変だったこと
時間の確保
会社員として仕事をしながらのため当たり前ですが時間を確保するのが難しいです。
平日はだいたい2-3時間程度確保するのがやっとでしたし、仕事や予定があるとほぼ時間が取れない時もありました。
どうしても外部要因で時間が取れなくなることは多々あるのでできる時にやるという当たり前のことが大事だと改めて実感しました。
デザイン
デザインについては完全に素人で勘所もないため結構時間がかかりました。
現在でも納得は全然いっていないのですがこのままだと開発が前に進まなくなってしまうため無理やり納得しています。
基本的にはClaude Codeと何度も話しながら現在の形までは進めてます。
(多分最初からFigma makeとかを使いながらデザインをやり切った方がよかったのかな？)
プライバシーポリシーとか利用規約
恥ずかしながらここは盲点でした。
どのような条文にしないといけないかとか、どのような法律が絡んでくるかとか未知の世界だったため理解に時間がかかりました。
調べてもそんなに情報があったわけではないので結構時間がかかりました。
AIとの関係
今回の開発ではClaude CodeとCuserを利用しておりVibe Coding的に開発させるととてつもないスピードを出せました。
ただここで大きな問題が発生しました。それは、
「開発がおもんない」
でした。
もちろんプロダクトを作ってなんぼですので利用しない手はないのですが、開発がしたいという欲求に従って個人開発を始めたのにAIに書いてもらうと結局マネジメントっぽく感じて面白く無くなってしまいました...
さらにいうと全くスキルが向上している気がしませんでした。
そのため時間はかかりますが途中から自分でもコーディングをするような方法でも開発を進めました。
大雑把ですが以下の基準でAIにどこまでを開発させるかを決めています。
開発に時間がかかりそう / 実装のイメージがあまり湧かない
→ AIにざっと開発してもらってコードを読んで学習
ある程度開発のイメージはつく
→ 自分で実装して後からAIにも実装させて差分を見てみる
ほぼ開発内容が頭でイメージできる
→ AIに実装させてレビュー
今後の展望
- 植え替え記録機能追加
- 水やりリマインド機能追加
- 肥料記録機能
- ユーザーにあった植物提案機能
- パフォーマンス改善(表示に時間がかかるページがあるので)
おわりに
初めて個人開発で公開まで進めることができました。
アプリとしては完成度がまだまだですので今後も改善を続けていきますし、他のアプリもどんどん作っていきます！
正直、自分以外に見せるのが恥ずかしいくらいですが、見てもらわないと始まらないので今回公開しました。
どんどん意見ください！
Xもやってますのでフォローいただけると嬉しいです。
(情報発信が大事だと聞いて始めたはいいもののしょうもない投稿しかできていないアカウントで恥ずい...)