プログラミング知識ゼロの主婦が、AIで「身内用ガレージセールのツケ管理アプリ」を3分で作ってみた話

はじめに

「自作アプリが簡単にできちゃう！」なんて最近よく聞くじゃないですか。

でも、ガチで何もわからない主婦としては、正直手を動かす気にならなかったんです。

「へ〜楽しそう！」とは思いつつ、ダラダラ何もせず過ごしていましたが、きっかけは突然やってきました。

きっかけは「ガレージセールのお知らせ」

「ガレージセールやります！アイテム多数！良ければ来てください🎵」

帯同家族の方が何組か合同でガレージセールを実施するとのこと。楽しそう〜！と思ってお知らせを見ていると、ふと気になる一言が。

「※現金のみでのお支払いをお願いします！」

〜〜〜ここから妄想スタート〜〜〜

なるほど……LINEグループのメンバーだけ来るとは限らないから、このためだけに決済アプリを入れるのも面倒だし、現金決済で統一しておけばトラブル少ないよね。

でも、もし私が主催側だったら、持ち前のうっかりミスで「売り上げ合計が合わないよ〜〜〜〜！」って慌てふためきそう（で、もう一回チェックしたら合ってた、みたいなやつ）。

だったら、顔見知りの身内メンバーの買い物だけでも「ツケ（後払い）メモアプリ」を作って、その日の夜に送金依頼文をサクッと送れるようにしたら？ ついでに回収・未回収が一目でわかれば、抜け漏れなくて便利じゃない？？

〜〜〜妄想終了〜〜〜

というわけで、ついに重い腰を上げてアプリ自作に取り掛かってみることにしました！

（流石に「初めて作りました！テストほぼやってないけど使ってください！」なんて主催の方に押し付けるわけにはいかないので、自分の趣味だけでやってます）

※注意点

正直、裏で何が起きてるのかは全然わかりません！詳細はググって丁寧に解説している人の記事や動画を見てくださいね！ ほら、LINEだって「どういう仕組みでメッセージが送信されているか」なんて考えて使ってないじゃないですか。それと同じ「体感オンリー記事」としてお付き合いください。

ほんとに3分でアプリが出来ちゃった

使ったAI

今回は「Gemini」と 「v0」 というブラウザで使えるAIを使いました！

GeminiやChatGPTは、お馴染みの「アイデアの整理に付き合ってくれるAI」で、

V0は「言葉で伝えるだけで、アプリを作ってくれるAI」というイメージです。他にも検索すると色々あるよね。私はGeminiに紹介されるがまま利用しました。

この言葉で伝えるだけで作ることを「バイブコーディング」と言うんだそうです。このキーワードで検索すると、入門者向けの動画なども沢山出てますね。調べると更に楽しくなりそう！

手順

もうシンプルです。メールアドレス登録してAIに作ってもらうだけ。

Step 1: 無料のVibe Codingツールに登録する

まずは、指示（日本語）を入れるだけで一瞬で画面と動きを作ってくれるAIツールに登録します。

• おすすめ：v0.dev
  • Vercelという会社が運営している、Web画面を作るのが超得意なAIツールです。
  • Googleアカウントなどで1分で無料登録できます。

Step 2: AIにそのまま日本語でお願いする

v0の登録が完了したら、画面中央の入力欄に「作りたいもの」を日本語で入力するだけ。以下の文章は、Geminiにやりたいことを書いて整理してもらった内容をそのままコピペしたものです。

コピーして使えるプロンプト案：

ガレージセールで使う、出品者向けの超シンプルな「ツケ・請求管理Webアプリ」を作ってください。

【機能要件】

1. 購入者と金額の入力：
   • 「購入者の名前（または特徴）」と「合計金額（ドル）」を入力して「ツケを追加」ボタンを押すと、リストに追加される。
2. ツケ一覧リストの表示：
   • リストには名前、金額、追加した日時が表示される。
   • 各アイテムに「未払い」「回収済み」の切り替えスイッチを付ける。
3. ワンタップ請求メッセージ生成：
   • リストの横に「請求文をコピー」ボタンを配置する。
   • ボタンを押すと「〇〇さん、本日はありがとうございました！合計$〇〇になります。お時間のあります時にZelle（example@email.com）まで送金をお願いいたします！」という文章がクリップボードにコピーされる。
4. デザイン：
   • スマホ（iPhone等）の画面で見やすい、シンプルで清潔感のあるデザイン。

Step 3: 画面を見ながら「修正指示」を出す

数秒〜十数秒で、右側に完成したアプリの画面と動きが表示されます。 実際に触ってみて、「ここをもう少し大きくして」「Zelleのメールアドレスを変更できるように入力欄を追加して」など、友達にLINEで頼むような感覚で日本語で追加指示を出していくだけでどんどん完成度が上がります。

出来上がったものがこちら

作成したアプリは、URLを共有すると、受け取った人も使えます。

誰かに共有したくて、夫にLINEで共有してみました。問題なく表示されたようです。

アプリで起こりうるトラブル＆テスト項目

もし実際に使ってみるなら、テストが必要ですよね。テストは「狙い通りの操作ができるか？」も勿論大事ですが、以下のような「いじわるな操作」を試しておくと安心。予期せぬ挙動が見つかったら、修正してもらって精度アップ！

• 1. 小数点や記号の入力（$15.50 などの端数）
  • トラブル: 小数点や「$」マークを入れたときに、正しく計算されるか？
  • テスト: 金額欄に 12.5 や $20 と入力して「ツケを追加」を押してみる。
• 2. 請求文のコピー機能がスマホで動かない
  • トラブル: パソコンのブラウザではボタン一つでコピーできても、スマホのSafariやChromeのセキュリティ制限で「クリップボードへのアクセス権限」がブロックされ、コピーに失敗することがあります。
  • テスト: PublishしたURLをスマホで開き、「請求文をコピー」を押して実際にLINEやメモ帳に貼り付けられるか試す。
• 3. 画面を閉じたり、再読み込みしたときのデータ消失
  • トラブル: ブラウザのキャッシュを消去したりすると、入力したツケデータが全消去されるリスクがあります。
  • テスト: 一度データを入力した後、ブラウザのページを再読み込み（リロード）してもデータが残っているか確認する。
• 4. 同姓同名や、名前が思い出せないケース
  • トラブル: 「〇〇さんの奥さん」「赤い服の人」など、名前が曖昧なときに入力しづらい。
  • テスト: メモ欄（どんな服を着ていたか、何を買ったか）を追加した方が運用しやすいか考えてみる。

冒頭の「？」に初心者の私が答えてみるよ！

• アプリ制作を始めるのに何が必要？
  • ChatGPTやGeminiなどの「AI」がいればOK！「こういうの作りたい」と相談して、AIに指示文（プロンプト）を作ってもらえば、あとはコピペするだけです。
• アプリが作れるAIってどれ？ブラウザでできる？
  • 今回は 「v0」 というブラウザで使えるAIを使いました！メールアドレス（Googleアカウント等）の登録だけで無料で使えます。
• お金はかかるの？
  • 今回作ったツケ管理アプリは完全無料で作れました！
• ダウンロードするの？Webではできないの？
  • Webアプリとしてブラウザ上で動きます！出来上がったリンク（URL）をLINEで友達に共有して一緒に使うこともできます。
• ストアで既存のアプリをダウンロードすれば良くない？
  • それは本当にそう！（笑）天才が作った便利なアプリがあればそれを使うのが一番安全で手軽です。
• ストアに無くて欲しいアプリなんて思いつかないけど？
  • それが、あったんです。似たような割り勘アプリはあっても、「ドル表記が良い」「相手に操作させず、自分だけで集金状況を管理したい」みたいなちっちゃいワガママって絶対あるんですよね。それを自分の思い通りにサクッと作れちゃうのが自作アプリの良さだと思います。

まとめ

やってみたら、知識ゼロの私でも本当に数分で「動くアプリ」ができちゃいました。

自分の「困った」や「こうだったらいいのに」がその場で形になる感覚、めちゃくちゃ楽しいです！「AIでアプリ作りなんて難しそう…」と思っている人こそ、ぜひ一度遊ぶ感覚で試してみてください！