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と一緒に書きました。