本記事は、育休中という限られたリソースの中で個人開発をしてみた一例を共有するものです。
すべての人・環境に当てはまるものではなく、あくまで個人の体験・判断として読んでいただければ幸いです。
はじめに
はじめまして。tubone24と申します。
育休中の身ですが、個人開発でアプリを作ってみました。
SottoMeというアプリです。SottoMeは認知行動療法（CBT、Cognitive Behavior Therapy）の考え方を取り入れた寄り添いAIアプリです。
なぜSottoMeを作ったのか、というプロダクトへの思いは別のnoteでまとめていますのでそちらをご覧ください。
SottoMeは医学的診断、治療、医学的アドバイスを提供するものではありません。また、医療専門家による診察の代替となるものではありません。
心身に不調を感じた場合は、医師または医療専門家にご相談ください。
SottoMeの概要
SottoMeは認知行動療法の自動思考記録表（コラム表）を参考に、自身の気分や活動を記録しながらネガティブになってしまう認知を再構築することを目的にしたアプリです。
カレンダー機能
このアプリの基本となる機能がカレンダー機能です。カレンダーUIにその時の気分や活動記録、予定などが統合されて表示されます。カレンダーを見るだけで、自分がその日どんな気分だったかを振り返ることができます。
実際に紙のスケジュール帳に書き込むような感覚で、矢印と気分アイコン、吹き出しで表現しています。
自動思考記録
気分を記録するときに、ネガティブな感情があれば、自動思考の記録を書いて自分の認知のクセを振り返ることができます。
また、次にご紹介するAIナビゲーターがお悩みからヒアリングを重ね、自動思考の記録をサポートしてくれる機能もあります。
AIナビゲーター
一応、AIエージェントに関する本を執筆している立場として、AIエージェント機能をアプリにいれないと示しがつきません。SottoMeにはAIナビゲーターというAIエージェントがいます。
例えば仕事の悩みを相談すると、自動思考記録のヒアリングなどを実施してくれたり、最近の気分の分析をしてくれたりします。
その他色々機能はあるのですが、アプリの中にチュートリアルを作っていますので、詳しい解説はそちらに任せようと思います。
また、認知行動療法や自動思考記録表（コラム表）については、認知行動療法マップがわかりやすく動画付きで解説されていますのでそちらが参考になるかと思います。（私も参考にしました）
お財布に優しいアプリ構成図
ざっくり構成図はこちらです。
インフラ部分だけ見ても、ホスティング(Vercel)・バックエンド(Supabase)・チャットAPI(Render)とかなり複雑な構成になってますが、ちゃんと理由があります。
また、StorybookのホスティングとコンポーネントのUIテストはChromaticで実施してます。Storybookを作っておくと、コンポーネントの管理・確認がスキマ時間でできるのでとても重宝しています。(正直UIテストはあまり活用できていません。)
あらゆるサービスの無料枠を賢く使う
Vercel + Supabaseの構成は無料で作れるよくある構成かと思います。このアプリも基本的にはVercelでホスティングし、データベースや画像のアップロードはSupabaseで実装しています。
VercelもSupabaseも、趣味程度の個人開発アプリ程度であれば、十分に無料版で事足ります。
厄介なのはAIエージェントのストリーミングAPIです。今回はRenderを使うことでインフラ完全無料化を実現しました。
MastraとRender
SottoMeではAIエージェントはMastraで開発しています。
本来はVercelやSupabaseのEdge FunctionsにMastraを載せたかったのですが、VercelやSupabaseではMastraや必要なライブラリをすべて含めたバンドルサイズに制限があり、1回あたりの実行時間にも限界があったため、両者ともに無料でやり切るのが厄介でした。
よりバンドルサイズを軽量にするため、AI SDKのみで軽量にAIエージェントを作る手もあったのですが、より複雑なAIエージェントを作っていきたい気持ちもあったのでAPIだけ別の基盤にデプロイする必要が出てきました。
そこで色々調べたところRenderのWeb Servicesでexpressを立ち上げることでバンドルサイズの制限は無料枠でも十分突破できることがわかりました。なので、このアプリで一部APIがRenderを使った実装となっています。
| Vercel Edge Functions | Supabase Edge Functions | Render Web services | |
|---|---|---|---|
| バンドルサイズ |
250 MB (gzip展開後) |
20MB (After bundling using CLI) |
無制限なはず （明記なし） |
| 実行時間 | 300s (お金を払えば最大800sまで) |
150s (Paid planでは400s) |
instance hoursまで動かせる |
もちろん、Renderの無料枠にも制限があります。
無料枠では、ワークスペース単位で毎月750時間のFree instance hoursが付与されるため、サーバーを常時稼働させる使い方は難しいです。
そこでWebサービスの自動スピンダウンを設ける必要があるのですが、そうすると初回リクエスト時に30秒ほどの立ち上がりラグが起きてしまいます。
ちなみに、SottoMeは自動スピンダウンを設けていますので、AIエージェントの立ち上がりが遅いです。
今考えるとCloudflareなども良い選択肢だったかもしれません。
出来上がったキメラ
本当はプラットフォームを統一したいのですが、各サービスの有料プランを前提にした運用が難しく、結果として無料枠の寄せ集め構成になっています。
当面は考えていませんが、サービスの有料化を考える場合はVercelでは明確に利用規約違反になってしまうので、それならいっそのことAWSなどに正式に移行しようと考えています。
育休の制度や状況は家庭や会社によって異なりますが、我が家の場合は育休に入ると数ヶ月は無給で生活しなければいけなかったです。
かといって支出が減ることもないので、あくまで一家庭の状況ではありますが、がっつり個人開発にお金をかけられるほどの金銭面の余裕を感じることが難しかったのも事実です。
プロダクトにAIエージェントを組み込む「いろは」
SottoMeの特徴としてAIナビゲーターというAIエージェントを使える点があります。
昨今では、様々な企業がAIエージェントを自プロダクトに組み込む、もしくはAIエージェントメインのプロダクトを開発していると思いますが、一定期間AIエージェントの開発をやってきた自分としてしみじみ思う反省をSottoMeには反映しています。
かなり個人の主観が入ったことを言いますがご了承いただければと思います。
「何でも質問してください」汎用AIチャットをアプリの先頭に持ってこない勇気
あくまでも個人の意見として聞いていただければと思います。
文中で出てくる汎用AIチャットの価値はもちろん高いですが、個人開発のプロダクトとしては、もう一段踏み込んだ専用体験を用意しないと差別化は難しいと感じています。
LLMを使ったアプリといえば真っ先に思い浮かぶのが「何でも質問してください」と待ち構え、インプットと送信ボタンだけがあるいわゆる汎用AIチャットだと思います。
ChatGPTやClaude、Geminiなど主要なAIアプリが「何でも質問してください」的な汎用AIチャット画面からスタートする形になっています。
よって、AIエージェント=「何でも質問してください」汎用AIチャットと考える頭になってしまいがちです。
ですが、個人開発でこれらのモデルを活用する場合、（彼らのモデルを利用させてもらっている以上は）ChatGPTやClaude、Geminiのようなモデルベンダーの作るAIアプリにない新しい価値を出さないといけないはずです。
ということは、「何でも質問してください」的なAIチャット画面だけでは当然価値を出しにくい、ということでもあるのです。
例外としてツールやデータソースの強化をしたDeepResearch型のAIエージェントでモデルベンダーの作るAIチャットを超えるプロダクトアプローチや企業向けにセキュリティ特化したLLMを選択するプロダクト戦略はあるかと思います。
ですが、個人開発ですとここらへんに踏み込むのはリソース面で難しいのも事実です。
そこで、AIエージェントをユースケース特化にしていく、というアプローチが考えられます。全体のアプリ体験や業務の一部にAIエージェントがいる、という感覚がちょうどいいように感じます。
SottoMeでの事例
簡単な例だと「何でも質問してください」的なAIチャットではなく、チャット欄とは別にワンタップで会話が進むような体験を作っておくと、ユーザーが何から始めるかわかりやすく、自然言語で入力させるより、そのAIエージェントの価値につながる体験を作りやすいです。
他にも生成AIのテキストをただストリーミングで出すのではなく、AIエージェントと一緒に行っている業務や体験のステップがどこまで進んでいるかをアプリ上にテキストストリーミングとは別に可視化してあげることも有用です。
SottoMeでは思考記録をAIエージェントといっしょに進める機能がありますが、結構AIからの質問が続くので、ユーザーにどこまで進んでいるか、チャット欄とは別の形で示すようにしています。
さらに、途中経過だけでなく、AIエージェントが出す結果を視覚的に伝える工夫も重要です。
テキストだけでなく、グラフやボタンなどを会話吹き出し中に表示してあげることで、単なるテキストストリーミングから一歩進んだ体験を作ることができます。
AIエージェントとメイン機能を行き来する体験を作る
もしあなたのプロダクトがAIエージェントメインのプロダクトではなく、メインの機能が他にある場合は、AIエージェントとの機能の棲み分けに悩むことも多いと思います。
ただ、AIエージェントとメインの機能は決して喧嘩するものではなく、それぞれを補い合うことができます。
例えばSottoMeではメインの機能としてはカレンダー機能ですが、入力の様々なトリガーでAIナビゲーターに誘導する仕組みがあります。
逆に、会話の流れをくんでAIチャットから主機能にアクセスするような導線も作ることで、AIエージェントとメインの機能双方シームレスに行き来することができます。
プロダクトに取り入れるべきは優しさだった
SottoMeはところどころ可愛らしいキャラクターを使ったチュートリアルが出てきます。
丁寧なマニュアルを作ったり、直感的なUI/UXを作ることも重要ですが、可愛らしいキャラクターと一緒に伴走するユーザー体験をさせることで、ユーザーに親近感を持ってもらったり、めんどくさい操作の心理的ハードルを下げる形になります。
つまりSottoMeでは、キャラクターやストーリーに重きを置いたUXデザインの考え方を大切にしています。
他のアプリで有名な例としては、Duolingoのフクロウ型ナビゲーションや、ワンバンクのワンバンくんなどが有名です。
筆者は日々の業務でキャラクターデザインをやったことはないのでこの分野はド素人です。
なので、SottoMeの戦略が正しいアプローチなのか不明です。
むぎぼーについて
キャラクターやストーリーに重きを置いたUXデザインを最も個人的なモチーフに落とし込んだのが、「むぎぼー」という柴犬セラピードッグのキャラクターです。
気分を入れるアイコンや、チュートリアルで度々登場します。
日々のデイリーガイドでも度々登場します。
一応、プロダクトのランディングページとは別に、むぎぼーのキャラクターコンセプトを示すページも作ってます。
このむぎぼーというのは我が家の愛犬「豆柴犬のむぎ」がモチーフになっております。むぎは暴れん坊ですが、落ち込んだときに自ら散歩に誘ってくれたり、甘えてきたりと我が家を明るく照らすセラピードッグなのです。
i18n、a11yへの対応
SottoMeでは日本語と英語の多言語対応（Internationalization、i18n）を実施しています。
また、できる限りアクセシビリティ(Accessibility、a11y)への対応も心がけています。
育休中エンジニアはこうやって開発タスクを消化した！
どうしても育休中はまとまった時間が取れません。その中でどのようにして開発タスクを回すのでしょうか？
ここからは、そんな育休期間中に実際にやっていた開発の工夫を紹介します。
思考の整理にGitHub Issue / Projectsを賢く使おう
育休中は細かい家事が多いです。そして結構中断されます。そこで、思いついたことをスマホでGitHubにIssueとして書き込んでいきます。
PBIのように色々書く必要はありません。タイトルだけさっと書く、これでOKです。後で思い出せればいいのですから。
Issueコメントで残しておけば後で振り返れる
GitHub Projectsを作っておけば記載したIssueがカンバンになり、後々アプリを作るときの管理に役立ちます。
スタンディングデスクと抱っこ紐のススメ
育休中はどうしても手のかかる新生児・乳幼児を前にパソコンへどっしり向かってコーディングはできないものです。
そこで活躍するのが抱っこ紐とスタンディングデスク。
子どもにもよると思いますが、我が子は抱っこ紐だとスヤァ〜だったので、抱っこ紐をしているときがコーディングタイムでした。
逆に抱っこ紐をしたまま料理や掃除は慣れていないこともあり危なっかしくてできなかったので、コードを書く時間を作る意味でも割り切って、「抱っこ紐のときはコーディング！」と考えるといいかもしれません。
時間がないときはスマホのClaude Code Webを使ってみよう
とはいえ、永遠に抱っこ紐をしているわけにも行かず、やはり開発の時間は限られます。
そこで便利なのが、Claude Code Webです。特にスマホで使うのがおすすめです。
どうしてもスマホで入力するので入力がしにくく、わかりやすい構造化されたプロンプトにはならないです。ならないですが画像のようないい加減なプロンプトでも最近のモデルだとちゃんと作ってくれるのです。素晴らしい。
スマホで寝る前に書いたわかりにくいプロンプト
こんな空き時間に使ってみよう！
散歩中、犬がクンクンして動かないとき。それはコーディングのチャンスかもしれません。（必ず安全なところに立ち止まって実施しましょう）
歩きながらのスマホは大変危険なのでやめましょう。地域によっては条例で禁止されているところもあります。
家のトイレでしばらく粘るとき。それはコーディングのチャンスかもしれません。（次にトイレを使いたい人への思いやりは忘れずに）
寝る前や起きたとき。まだ子どもが起きていないならそれはコーディングのチャンスかもしれません。（寝不足には注意）
ClaudeであればClaude Code GitHub Actionsとかを使う方法もあります。
ですが、Claude Code GitHub Actionsだと、元になるIssueをきっちり書かないといけないため、思い立ったらIssueでメモ→空いている時間に実装という流れが作りにくいことが欠点でした。なので、空いたときにどこでも実装できるClaude Code Webが便利でした。
できる限り早く用意したほうがいいテストと検証環境とデプロイパイプライン
育休中にアプリを作るならさっとしたスキマ時間に動作確認したいものです。
PRを作ったらいつでも確認できる環境があるとアプリ開発が捗ります。
そこで、Vercelのブランチプレビュー機能や、検証環境についてもSupabaseのマイグレーションをGitHub Actionsと連携させることで、ほぼすべてのデプロイを本番とは切り離した環境でいつでも確認ができます。
特にClaude Code Webと組み合わせると、PCなしで動作確認できる仕組みを作っておくのは非常に有用でした。
この仕組みを早い段階で作っておくかが、育休のスキマ時間にアプリを作るコツだと思います。また、vitestでのUnit Testやe2e Testなども育休中忙しい開発者の確認の手間を減らせる取り組みなので、積極的に導入したいものです。
デプロイパイプラインを制するものが育休個人開発を制する
それでもRLSな怖いバグ
SottoMeはSupabaseのData API（PostgREST）を使っています。
何の気無しにVibeコーディングな開発をしているとAIが作ったコードにRLS(Row Level Security)の設定漏れやポリシーにヌケモレがあったり、SECURITY DEFINERなFunctionや実質的にRLSをバイパスするViewにとんでもないセキュリティーホールがあったり。
コードレビューをすると見つかるケースがあります。(結構あります）
本当に怖いです。夜も眠れません。
それくらい、RLSは「静かに壊れる」類の仕組みだと感じています。
ちゃんと人間が確認するのはもちろんなのですが、それでもヌケモレが怖いのでSottoMeでは上記に加え、SupabaseのSecurity Advisorの確認に加え、RLSやRLSをバイパスするFunctionのテストをCI上で走らせています。
ここまでやっていてもRLSでシステムを作り切るのは至難の業に感じました。
というのも、セキュリティに関わる重要なロジックがポリシーという存在のみで担保されるからです。
「自分自身のレコードしかCRUD操作できない」のように単純なポリシーであれば問題ないのですが、「AさんとBさんだけ見ることができる」とか、「いわゆるAdmin権限を持つユーザーのみテーブルの書き込みができる」など複雑なロール設計が入るとRLSだけでやり切るのが難しくなり、結果的にSECURITY DEFINERなFunctionを作る必要があります。
もしくはprivateなスキーマにテーブルを作成し、Edge FunctionsからService Roleでアクセスする、ということも可能です。
これは公式ドキュメントHardening the Data APIでも推奨されていますが、一方でFrontend + Data APIという軽快な開発体験は損なわれてしまうかもしれません。
e2eテストなどDBも絡めたテストを実施することでその機能にバグが無いことは確認できるものの、直接 Data APIを叩かれた場合に発生するRLSやSECURITY DEFINER Functionの設計ミスによる攻撃面の露呈には脆弱です。
RLSを中心に据えたアクセス制御設計だけで、複雑な権限モデルを破綻なく維持するような判断をせず、Edge Function経由でDBを操作するほうがAIコーディング時代にはリスクを最小限にできるのではないか、とも思いました。
妻のユーザーテスト
プロダクトがある程度完成したところで、妻に触ってもらう機会を作ったところ、めちゃくちゃバグを見つけてくれたり機能要望を出してくれました。
特に新生児期は、お互いの睡眠時間確保のために別々の部屋で寝ていたのですが、私が朝起きたらびっしりIssueが書き込まれていて感激したのを覚えています。
別のnoteでも書きましたが、この育休期間は本当に妻に支えられました。アプリ開発でも支えてもらったので、返しきれない恩をもらってしまいました。
育休明けきっちり働いて働いて働いて参ります（育児ももちろん！）。
まとめ
育休に入る前、正直育休中にアプリが作れると思っていませんでした。ですが、Claude Code Webを賢く使ったり、プラットフォームの無料枠を使ったりすることで歩みは遅くともアプリが作れる経験は自信に繋がったのでとても大きかったです。
それでは！良いクリスマス・年末年始を！