10年越しの夢をAIと叶えた地域共創アプリ開発記録
はじめまして。ミセリクです。
普段は会社員としてUX/UIデザイナーをしていますが、今回は副業として独力で開発したWebアプリケーションについてお話しします。
作成したのは、地域共創型マッチングプラットフォーム『ミセリク』。
現在ベータ版として公開しており、将来的な商用化・事業化を目指しているプロダクトです。
【ミセリク β版】 https://miseriku.vercel.app/
完全無料ですので、ぜひ実際に使ってみてください！
2015年の壁、2025年の翼
このサービスの構想自体は、実は10年前から私の頭の中にありました。
私は一人の住民として、近所の空き地やシャッターの閉まった店舗を見るたびに思っていました。「ずっとこのままで土地利用が非効率だな」「ここに100均ができれば街がもっと便利になるのに」と。
「それなら、そんな住民の声を直接事業者に届けられるサービスがあればいいのでは？」
そう思いついたものの、10年前の私には、Webアプリケーションを独力で開発するスキルも、一から学習するための時間も気力もありませんでした。
当時のWeb開発は、レンタルサーバーを契約し、Linuxコマンドでサーバーを構築し、jQueryや生のJavaScriptでゴリゴリとコードを書く…そんな「フルスタックなエンジニアリング」が求められる世界。
ReactやTypeScriptはもちろん、SupabaseやVercelのような便利なサービスもありませんでした。
私自身、システムエンジニアとして14年、UX/UIデザイナーとして2年の経験がありますが、プログラミング経験は「ほぼゼロ」。
コードが書けないことは、長年のコンプレックスでした。
しかし、時代は変わりました。
生成AIという「最強のパートナー」と、Supabase / Vercel といった「便利なインフラ」が無料で使えるようになったのです。
10年の時を経て、私はAIを「共同創業者兼スーパーエンジニア」として迎え入れ、企画からデザイン、実装、デプロイまでを独力で完遂することに挑戦しました。
開発したアプリ「ミセリク」とは？
主な機能と技術スタック
機能: 地図上へのリクエスト投稿、カテゴリ検索、いいね・コメント機能など
技術: React, TypeScript, Material UI, Leaflet, Supabase, Vercel
開発記録
今回はGoogle AI Studioを常に隣に置いたアシスタントのように使い、二人三脚で開発を進めていきました。
Phase 1: 企画・設計の壁打ち
まずはGoogle AI Studioと「ビジネスの壁打ち」を行いました。
私のビジネスアイデアをプロンプトとして入力し、SWOT分析、ペルソナ定義、機能リスト、画面設計書、データベース設計書等を作成。
AIは「指示待ち」ではなく、私の設計思想を補完してくれる優秀なプランナーとして機能しました。
プロンプト
出店希望者（住民）と出店検討者（事業者）のペルソナを作りたい。
前者は住環境の向上を望む意識が高く、SNSなどの投稿や口コミに積極的な20〜30代ぐらいの女性をイメージしている
後者はまずは大企業というより個人店舗や中小企業かなと思っている。
Phase 2: クリエイティブの生成
この記事の見出し画像や、サイトトップに掲載しているロゴやメインビジュアルも、Google AI Studio内のNano Bananaで生成しました。
細かく指示を出すが、実際の描画はAIに任せる。この分業により、イメージ通りのビジュアルが即座に手に入りました。
プロンプト
子連れの30代の日本人女性とその夫が自宅のリビングで楽しそうな表情で地図に赤ペンで丸を付けている画像を生成して。50mmレンズで、陽の光が差し込む明るい部屋にして。茶色の毛の柴犬も入れて。
Phase 3: 実装
私はコードは書けませんが、Phase 1で作成した画面設計書等のドキュメントがあります。Google AI StudioのBuildモードは、これらを読み込むだけで、Reactの環境構築からSupabaseのSQL作成を含むコーディングを進めてくれました。
私が実際に行った指示は、以下のようなUX/UI観点でのフィードバックが中心です。
「ヘッダーの余白が狭いので、もう少し広げて」
「ボタンの色を、ロゴに合わせてこのカラーコードに変更して」
「地図の下のリスト表示が見づらいので、レイアウトを調整して」
BuildモードはWebブラウザで動くため、電車での移動中など、PCが開けないスキマ時間にスマホで実装を進められたのも大きな利点でした。
Phase 4: 全貌把握と改善
開発が進むにつれ、ファイル数が増大し、Web上のBuildモードでは限界が見えてきました。そこで私は、「ローカル環境へ移行し、全情報をGeminiの頭の中に突っ込む」という作戦に出ます。
プロジェクト内の全ソースコードとそれらの相対パスを1つのテキストファイルに結合。
結合した巨大なコードファイルとDB定義を、丸ごとプロンプトに入力。
これにより、Geminiはプロジェクトの全貌を完全に把握した状態へと進化しました。
これは例えるなら、「新しく入った超優秀なエンジニアに、初日で全資料を読ませて即戦力にした」ような感覚です。
デザイン指示で実装が進む: デザイナーとして「フォームの送信ボタンを右寄せにして、背景色をプライマリーカラーのオレンジに変更して」等と指示を出すだけで、AIがそれを実現するためのReactコードを生成してくれます。
リファクタリング: 「全体を見て共通化できるところは？」と聞けば、プロのReactエンジニア視点でコードを最適化してくれます。
ドキュメント作成: コードだけでなく、「開発ガイドライン」や「デプロイ手順書」といったドキュメント類も、現状のコードベースを元にAIに生成させました。
Geminiの「100万トークン」という圧倒的なコンテキストウィンドウがあったからこそ、言語を知らない人間でも商用レベルのアプリを修正・改善し続けることが可能になったのです。
Phase 5: 品質担保
商用化を見据える上で避けて通れないのが「品質」です。
ここでもSEとしての経験が活きました。
コードは書けないけれど、どんなテストが必要かはわかります。
私はGeminiに指示を出し、Vitestによる単体テストと、PlaywrightによるE2E（End-to-End）テストの環境を構築。
さらに、セキュリティ脆弱性診断ツールSnykを導入し、コードを継続的にスキャンしました。
テスト自動化: 「全機能やユースケースを網羅したテストを書いて」と頼めば、AIが単体テストやE2Eテストのスクリプトを生成してくれます。
脆弱性診断: Snykが検出したオープンリダイレクト等の脆弱性レポートをGeminiに読み込ませ、「この問題を解決するコードを書いて」と指示するだけで、セキュリティ対策済みのコードが手に入りました。
開発で苦労したこと
もちろん、すべてが順風満帆だったわけではありません。
AIにコーディングを任せる中で、特有の難しさにも直面しました。
1. 粘り強さが試される「指示と修正」の繰り返し
AIは一度で完璧なコードを出力してくれるわけではありません。バグが出ればエラーログを貼り付けて修正を依頼し、仕様と異なる挙動があれば「設計書ではこうなっているはず」と指摘する。この地道な動作確認と指示の繰り返しこそが、開発の中心でした。
2. 「迷走」するAI
特に明確なエラーメッセージが出ない不具合（表示崩れなど）の修正は鬼門でした。AIはありとあらゆる修正案を試そうとし、結果的にソースコードが継ぎ接ぎだらけになり、元に戻すことすら困難になる…という「迷走状態」に陥ることが何度かありました。
そのような場面では、私が具体的な数値で指示を出したり、「原因の切り分けをしたいのでログを仕込んだコードを書いて」とAIを導いたりする必要がありました。
3. 最新情報とGUIへの弱さ
AIの知識は学習データに基づいているため、ライブラリの最新バージョンの仕様を知らないことがあります。特に苦労したのは、VercelやSupabaseといった外部サービスのGUI（管理画面）に関するハルシネーションです。
AIは「設定画面の〇〇というボタンを押してください」と指示してくれますが、そのボタンは古いUIのもので、実際には存在しない…ということが頻発しました。結局、AIが教えてくれた手順をヒントにしつつ、最後は自分で現在のGUI画面と公式ドキュメントを見比べて操作する必要がありました。
開発を終えて学んだこと
「設計スキル」×「AIの実装力」＝ 最強
今回実感したのは、「プログラミング言語の知識がなくても、システム設計やUI/UXの知識があれば、AIを使ってハイクオリティなアプリが作れる」ということです。
コンプレックスだった「コードが書けない」という弱点が、AIというパートナーを得たことで克服され、むしろ過去の経験全てが武器になりました。Google AI Studioのおかげで、10年来の夢をカタチにできたことは、言葉にできないほどの喜びです。
驚くべきコストパフォーマンス
もしこのアプリ開発を外注していたら、数百万円の費用と半年以上の期間がかかっていたかもしれません。
しかし、今回かかったのは、平日昼間は会社員として働きながらの「約1ヶ月」という期間だけで、費用は一切かかりませんでした（Google AI Studio、Vercel、Supabase、Snykの無料枠利用）。
おわりに
こうして完成した『ミセリク』は、現在ベータ版として稼働しています。
最後に、この記事のタイトルや構成、そして本文の執筆自体も、開発ログを読み込ませたGeminiと相談しながら作成しました。私の頭の中にある「つくりたい」を、AIがカタチにしてくれる。
まさに #AIとつくってみた を体現する、エキサイティングな開発体験でした。
私と同じように、技術の壁でアイデアを諦めてしまった方へ。
今こそ、そのアイデアを形にする時です。AIという最強のパートナーがいれば、10年越しの夢だって叶えられます。
これからはこのパートナーと共に、ミセリクの収益化・事業化に向けてさらなるブラッシュアップを続けていきます！
アプリは無料で使えますので、ぜひ実際に触ってみて、改善点やご意見などのフィードバックをいただけると嬉しいです。
【ミセリク β版】 https://miseriku.vercel.app/
#AIとつくってみた #GoogleGemini #生成AI #個人開発 #プログラミング #副業 #AI副業 #バイブコーディング #はじめてのnote #自己紹介
