TL;DR
- 筆者は一級建築士（40代）。プログラミング経験ゼロ
- AI（Gemini / Antigravity Ultra）を使い、約2週間で割り勘精算Webアプリを2本リリース
- 技術スタック：Next.js (App Router) + Supabase + Vercel
- VercelやSupabaseが何なのか、正直いまだによくわかっていない
- それでもプロダクトは動いていて、Google検索「ファミカン」で1位
はじめに
僕は一級建築士です。40代で、子供が2人います。
コードを書いた経験はゼロ。HTMLすら知りませんでした。
もっとも、仕事の効率化のためにExcelマクロや、JavaScriptで動く簡単なHTMLファイルは4ヶ月前からAIに作ってもらっていました。ただ、「フレームワーク」とか「データベース」とか、Webアプリの世界は全くの未知でした。
そんな僕が、AIの力を借りて約2週間で 2本のWebアプリ をリリースしました。
- FAMI-KAN（ファミカン）：家族・友人向けの割り勘精算アプリ
- FAMI-KAN Smart：ビジネス向けの傾斜配分バージョン
この記事では、「プログラミングを知らない人間がAIとどうやってプロダクトを作ったか」を、技術的な視点からまとめます。
🔗 https://famikan.tetras-ltd.com/go/qiita-article
使用した技術スタック
まず、完成したプロダクトの技術構成を書いておきます。
| レイヤー | 技術 |
|---|---|
| フレームワーク | Next.js 14 (App Router) |
| 言語 | TypeScript |
| DB / Auth | Supabase (PostgreSQL) |
| ホスティング | Vercel |
| スタイリング | Tailwind CSS + カスタムCSS |
| フォント | Zen Maru Gothic (Google Fonts) |
| 分析 | Google Analytics 4 |
| SEO | 動的sitemap / 構造化データ / UTMリダイレクト |
| PWA | next-pwa |
正直に告白すると、この表の半分以上が何なのか、僕はよくわかっていません。
「Vercel」と「Supabase」の違いは？と聞かれたら答えられません。どっちがサーバーでどっちがデータベースなのかも怪しいです。「プッシュ」と「Git」の違いすら、いまだによくわかっていません。
でも、プロダクトは動いています。
開発ツール：Antigravity（Gemini Ultra）
開発に使ったのは、GoogleのAIコーディングアシスタント Antigravity（Gemini Ultra課金プラン）です。
VS Code上でAIと対話しながら、コードを生成・修正していく形です。
なぜAntigravityを選んだか
特に深い理由はありません。たまたま見つけて、課金したら使えたからです。
ただ結果的に、以下の点で非常に助かりました：
- ファイルの中身を理解した上で提案してくれる（プロジェクト全体を読んでくれる）
- 「これを修正して」と言えば、どのファイルのどの行を変えるか指定してくれる
- エラーが出たらエラーメッセージを貼るだけで直してくれる
最大の壁：「コードやUIの名前がわからない」
プログラミング未経験者がAI駆動開発をする上で、最大の壁は 「用語がわからない」 ことでした。
例えば：
- 「ボタンの横にある、あの…入力するやつ」→ input要素
- 「画面の下にずっと出てる帯」→ フッター / ナビゲーションバー
- 「押すとにゅっと出てくるやつ」→ モーダル / ドロワー
ちなみに「トースト」「パンくずリスト」というUI用語もあって、なぜパンに関係するのか未だにわかりません。
逆に感動したのは、画面をスクロールしたら出てくるボタンの存在。プログラミングが得意な友人に勧められて実装したのですが、こういう仕組みがあるんだ、と知った時は純粋にワクワクしました。
テキストで説明しようとしても、そもそも名前を知らないので説明できません。
解決策：設計図を直すように、スクリーンショットに書き込む
僕がやったのは、建築の仕事で図面を修正する時とまったく同じ方法でした。
- 画面をスクリーンショットで撮る
- 矢印や丸を描いて「ここをこう変えたい」と書き込む
- その画像をそのままAIに渡す
これが驚くほど有効でした。
AIは画像を読み取って、「このモーダルのことですね。このファイルのここを修正します」と正確に対応してくれました。
建築の世界では、図面に赤ペンで修正指示を書き込む文化が今も残っています。それとまったく同じことを、アプリ開発でもやっていたんだなと。
UI/UXの試行錯誤
正直に言うと、最初のバージョンは 本当に使いにくかった です。
割り勘の計算は裏側が複雑で、入力項目が多い。それをそのまま画面に並べてしまったので、初めて見た人は何をすればいいかわからない状態でした。
やったこと
- 入力フローを4ステップに分解（区分設定 → メンバー登録 → 支出入力 → 精算確認）
- 「今どこまで進んだか」がわかるステップ表示を追加
- よく使う操作は1タップで完了するように
- 「ママでも直感的に使えるか？」を基準に毎回テスト
UIの「正解」は、コードを書けるかどうかとは関係ない部分です。むしろ「使う人の気持ちを想像できるか」が重要で、ここは建築設計の経験が活きました。
建築でも「住む人がどう動くか」をシミュレーションして設計します。アプリも同じで、「使う人がどう操作するか」を想像して画面を設計するんです。
SEO：知らないうちに検索1位になっていた
SEOなんて言葉すら知りませんでした。
でもローンチから約1ヶ月後、Googleで「ファミカン」とカタカナで検索すると1位に表示されるようになりました。
どれくらいすごいことなのか、後から調べて驚きました。Google検索の1位とそれ以外では、クリック率が圧倒的に違うそうです。一般的に、1位は約30%の人がクリックするのに対して、2位は15%、3位は10%程度。企業が数十万〜数百万円かけてSEO対策をしている世界で、個人が無意識に1位を取っている。
AIに「検索に引っかかるようにして」と雑にお願いしたら、以下の対策を自動で入れてくれていました：
-
metadataの適切な設定（title, description, keywords） - 構造化データ（JSON-LD）の埋め込み
- 動的サイトマップの生成
- canonical URLの設定
- OGP画像の最適化
自分では何一つ理解していませんが、AIが「SEOのベストプラクティス」を知っていて、適用してくれた形です。
「共有機能」の設計が一番難しかった
アプリとして最低限の機能は2週間で作れました。
しかし、「どうやって広まるか」の仕組みがなかった。
使ってくれた友人の反応は「すごいね」だけで、その先に広がらない。
2月末、ずっと考えていたアイデアがようやく形になりました。
精算カード ——精算結果を、イベントの思い出の写真と一緒にカード形式で共有できる機能です。
ただ、ここで技術的な不安がありました：
- 写真を保存するとサーバーの容量が増える
- 個人情報に近いデータを預かることへの怖さ
「ダウンロードボタンが動かない」というバグで丸1日ハマったこともあります。AIに「セキュリティの制限で他のサイトの画像を加工できない」と言われましたが、正直今もよくわかっていません。
面白かったのは、アプリのアイコン画像の背景を透明にしたら、ブックマークした時にアイコンがほとんど見えなくなったこと。「背景透明がいい」と思っていたのに、実際は透明にしたらダメだった。こういう「やってみないとわからないこと」が山ほどありました。
反省と学び
うまくいったこと
- スクリーンショット書き込み方式：言葉で説明できなくても、画像で伝えればAIは理解してくれる
- 「何を作りたいか」を明確にすること：技術的な「How」はAIが担当。人間は「What」と「Why」に集中
- 建築の仕事との共通点：「住む人がどう動くかを想像して設計する」のが建築。「使う人がどう操作するかを想像して設計する」のがアプリ。考え方は同じだった
苦労したこと
- 用語の壁：最初の1週間は、AIに質問するための言葉すらわからなかった
- UI/UXの感覚：AIは「動くコード」は書けるが、「使いやすいUI」は人間が考える必要がある
- デバッグ：エラーメッセージをAIに貼れば大体直るが、再現性のないバグは地獄
- テストの壁：コードが読めないので、割り勘の計算結果が本当に合っているのか未だに不安。「テストをしてほしい」とAIに伝えたくても、テストにも「単体テスト」「E2Eテスト」など種類があって、そもそも意思疎通ができなかった
まとめ：作れた。でも、ここからが本番
2026年現在、AIの進化により「プログラミングができなくてもプロダクトは作れる」時代になりました。
ただ正直に言うと、「作れた」と「使われている」は全然違います。FAMI-KANはまだスケールしていません。ユーザー数もまだまだこれからです。
それでも、この経験を通じて感じたことがあります：
- 解決したい課題が明確であることが一番大事（僕の場合は「飲み会の最後の30分が精算で消える」というペイン）
- 「誰の、どんな困りごとか」を具体的に想像すること（幹事の30代会社員、家族旅行の会計係のお父さん、同棲カップルなど）
- 第三者の視点で「使いやすさ」を判断すること——これは簡単そうに聞こえるけど、自分で作ったものを第三者の目で見るのは本当に難しい
- 試行錯誤を繰り返す根気
プログラミングの知識はAIが補ってくれます。
VercelやSupabaseが何なのかわからなくても、とりあえず動くアプリは作れます。
偉そうなことを書きましたが、僕自身まだ道半ばです。ここから「使われるプロダクト」にしていく挑戦が始まったばかり。
同じように非エンジニアで挑戦している方がいたら、ぜひ情報交換しましょう。
リンク
-
FAMI-KAN：
-
グループ、複数人数割り勘アプリ https://famikan.tetras-ltd.com/go/qiita-article
-
傾斜配分特化型割り勘あぷり https://famikan.tetras-ltd.com/smart
-
note記事（開発ストーリー）： https://note.com/vibe_archi/n/n836eeacd59e2
※ちなみにこの記事も、用語がわからないのでAIと一緒に書きました。