MECHOOSE 企画者がAIに指示して1人で構築:タイ向けファッションコマース+AIバーチャル試着、mechoose.store で稼働中
稼働中⚡ アイデア→リリース Web公開まで約1週間 · App Storeまで約6週間
2026.02 – 2026.07(稼働中) / 1人(AIをチームとして活用) / Web · iOS · Android
課題 タイの消費者には、服を選び、バーチャル試着し、注文するまでを1か所で手軽に行う手段がなかった。
担当 企画 · 基準設定 · AIへの開発指示 · デプロイ
使用技術 React 18 · TypeScript · Supabase (Postgres · Auth · Edge Functions) · Capacitor · Vercel 成果
アイデア → Webサービス公開 約1週間 アイデア → Webサービス公開
アイデア → App Store 審査通過(Google Play でも公開) 約6週間 アイデア → App Store 審査通過(Google Play でも公開)
バックエンドAPIルート(エッジ関数) 137 バックエンドAPIルート(エッジ関数)
自分のコミット(全241件中、残りは Figma の自動同期) 100+ 自分のコミット(全241件中、残りは Figma の自動同期) ⚡ アイデア→リリース
Web公開まで約1週間 · App Storeまで約6週間
2026-02-03
最初の指示 · 最初の動作ビルド
+6 days
2026-02-09
Web公開(mechoose.store)
+36 days
2026-03-17
App Store 審査通過
+120 days
2026-07-15
最新コミット
2026-02-03
最初の指示 · 最初の動作ビルド
+6 days 2026-02-09
Web公開(mechoose.store)
+36 days 2026-03-17
App Store 審査通過
+120 days 2026-07-15
最新コミット
アイデア → Webサービス公開まで約1週間、App Store 審査通過・リリースまで約6週間(2026-03-17)。Google Play でも公開。git コミットベースで実作業 約33日
最初の指示:「コーディングの知識がないので Figma Make の AI と GPT でコマースアプリを作っているんですが、マイページでエラーが続いて行き詰まっています。手伝ってもらえますか?」
原文(韓国語):「기술이 없어서 Figma Make랑 GPT로 커머스를 만들고 있는데, 마이페이지에서 에러가 자꾸 나 막혀요 — 도와줄래요?」
タイの消費者向けに、服を選び、バーチャル試着して、そのまま注文できるファッションショッピングサービスを作りたいと考えました。コマースの基本機能(カタログ、決済、注文、管理)に加えて、AIバーチャル試着とスタイリスト相談を1か所で提供することを目標にしました。
サービス範囲と画面フロー(カタログ、注文、決済、管理)を自分で企画
運用の基準:配送に必要な情報(電話番号、住所、LINE ID)が欠けている場合、決済時にブロックするのではなくアプリ起動時に入力してもらう
1人で運用するスピードを最優先に、AIと技術スタックを選定:1つのWebコードベースを Capacitor でiOS/Androidアプリ化し、APIはサーバーレスの Supabase Edge Functions に集約
Fig. mechoose-direction
AIへの指示プロセス
01 最初の指示
カタログ・カート・マイページの画面と、エッジ関数上のAPIを作らせる。
02 確認したこと
本番サイトで実際に注文し、決済が止まる箇所や、住所入力で誤字・入力漏れが起きる箇所を見つけました。
03 修正
ユーザーの困りごとを機能の指示に置き換えました —「止まった決済を再開できるように」「住所を自動補完して、郵便番号も自動入力されるように」。
実際の指示(抜粋)
› 全体を上書きしないで、変更点だけをパッチして。Original 전체를 덮어쓰지 말고 바뀐 부분만 패치해줘.› 変更前に副作用を説明して、私が承認してから修正して。Original 바꾸기 전에 부작용을 먼저 설명하고, 승인받은 뒤에 고쳐.Fig. mechoose-03
課題を言葉で指示し、機能に変える
Before
決済が中断された注文がそのまま放置 ユーザーがどこで止まったか分からない 私の指示(抜粋)
“ 決済が中断された注文を、続きから決済できるようにして”
Original 결제가 끊긴 주문을 다시 이어서 결제하게 해 줘After
✓ 「決済待ち」バナー+マイページで強調表示 ✓ 中断した箇所から再決済できるフロー
未決済のまま放置される注文 :中断された決済がそのまま放置されていました。「決済待ち」の状態をバナーとマイページで表示し、中断した箇所から再開できる再入場フローを追加するようAIに指示し、離脱を減らしました。
住所入力のミス :手入力の住所に誤字が多発していました。郵便番号を自動入力する住所補完を追加し、配送失敗の原因を減らしました。
顧客向け画面(タイ語):決済待ちの注文を強調し、決済に戻る導線を用意 Case 01
決済が中断された注文がそのまま放置され、購入につながらなかった。 ! 症状
決済が中断された注文がそのまま放置され、購入につながらなかった。
› AIへの説明
止まった決済をユーザーが再開できるようにしたい」とフローとして説明。Original 결제가 끊긴 주문을 사용자가 다시 이어서 결제하게 하고 싶다"고 플로우로 전달. ↺ AIの最初の試み
単純なステータス表示だけでは、ユーザーはどこで止まったか分からなかった。
◎ 自分が気づいた点
決済待ち」の状態をバナーとマイページで目立たせ、止まった箇所から再開させる必要があった。
✓ ⟲ 再発防止
中断されうるフローでは、「中断—再開」の状態を最初から設計に組み込む。
mechoose.store ドメインで稼働中
実開発 約8週間(自分のコミット100件。全241件中、残りは Figma の自動同期ボット)
フロントエンドのソースコード 約38,600行 、エッジ関数は137ルート (単一関数)
稼働中の機能:未決済注文の再入場フロー、住所の自動補完、AIバーチャル試着
管理画面 — ポートフォリオ用にUIの文言を英語に翻訳 Fig. mechoose-08
1つのWebコードベースで Web・iOS・Android、サーバーレスのバックエンド
フロントエンド React · Vite · TypeScript Webコードベース1つ
Web Vercel mechoose.store
アプリ化 Capacitor iOS · Android
バックエンド Edge API(サーバーレス関数) 137ルート · 注文・決済・管理
Data DB · ストレージ
AI AIバーチャル試着(外部API)
AIと設計した、1人で運用できる構成。サーバー管理なしで、APIを1つのエッジ関数に集約しました。 音声で指示すると機能は速く追加できましたが、初期の画面構造が1ファイルに詰め込まれ、変更しにくくなりました。次は、画面と状態管理を役割ごとに小さく分ける基準を最初に決めます。
その他の画面 · 3枚
UI shown in English for portfolio; product data is the live Thai catalog (seller photos blurred).
(01) Review
Honest Review 開発者が作っていたら?
● 強み3
機能範囲 — 本格的なコマースサービスとして稼働中
ショップ、カート、お気に入り、実際のカード決済と返金、クレーム・返品、在庫、レビュー、スタイリストアプリ、管理画面、4種類のソーシャルログイン、プッシュ通知とLINE通知 — Web・App Store・Google Play で稼働中。
パフォーマンス — メインバンドル 1.6MB → 454KB
ベンダーコードを5つのチャンクに分割、管理画面アプリは必要時のみ読み込み(664KBを分離)、5分間のデータキャッシュ、画像の遅延読み込み。
スピードとコスト — Web公開まで約1週間、App Storeまで約6週間
実開発 約8週間、約51K行、自分のコミット100件。
◐ 同等4
セキュリティの基本 — 小規模チームと同等
すべての管理用ルートで管理者チェック、決済金額をサーバーで再確認、オリジンの許可リスト、レート制限、セキュリティヘッダー、サーバーキーはアプリに含めない。
リリースと運用 — 1つのコードベースでWebと2つのアプリストアに展開
WebはVercel、iOS/AndroidはCapacitor。ディープリンク、PWA、参照ID付きのエラー画面。
多言語対応 — タイ語優先の単一市場
翻訳キー245個。ハードコードされたテキストが一部残っています。
ドキュメント — アーキテクチャと意思決定を記録
ドキュメント内の一部の数値がコードとずれていました。
↗ 次のステップ(改善中)4
テストと自動化 — テスト・CI・lint・型チェックは未導入
リリースのたびに、実際の購入フローを手動で確認しました。
改善計画 → まず決済・注文ロジックに10〜20件のユニットテスト、その後コミットごとのビルド+型チェック+テスト。
アーキテクチャ — バックエンドが単一のキーバリューストア上の6,299行の1ファイルに肥大化
137のAPIルートが1ファイルにあり、データも1つの汎用ストアにあるため、データベースでリレーションを保証できません。
改善計画 → ドメイン単位(注文 → 決済 → 管理)で分割し、注文と決済はマイグレーション付きの正式なテーブルへ移行。
コードの一貫性 — 緩い型付けと残存する複製ファイル
型なし(`any`)が940箇所。高速な反復のため、サーバーコードの複製3つとバックアップファイルが残っています。
改善計画 → 厳格な型チェックをリリース条件にし、決済から `any` を除去。古い複製を削除。
履歴と監視 — 追跡しにくいコミット履歴、アラートなし
241件のコミット中141件がデザインツールの自動同期。エラーにはIDが付きますが、自動で通知される仕組みはありません。
改善計画 → 明確なメッセージの機能コミットをデザイン同期と分離。デプロイ手順にエラートラッキングと定期バックアップを追加。
Chapter 02
Chapter takeaway
このプロジェクトから得た教訓
01 ユーザーの困りごと(止まる決済、住所の誤り)を指示に変えれば、それが機能になる。02 稼働中のサービスは、それ自体が「動いている」という最も強い証拠になる。03 スピードの代償は構造 — 分離の基準は最初に決めるほうが安く済む。次のプロジェクト →
AIに指示して同じアプリをiOSとAndroidの両方でネイティブ開発 — カップルの思い出を自動でまとめるアプリ
© 2026 Hyunjun Kim. Next.js・Tailwind CSS・Motion で、AIと一緒に作りました。
Back to top ↑