📦 スマホで出荷記録を手軽に実現！出荷記録アプリをAIと一緒にゼロから作ってみた
紙のメモ帳よ、さらば ― 記録・集計・CSV出力まで30分で完成
コピペで使う
ブラウザで完成
出荷記録アプリ
本格アプリ
「今日の出荷、ミニトマト何ケースだっけ？」
パートさんに聞かれて、手元のメモ帳を探す。見つからない。昨日の分は？……ノートの3ページ前にあったはず。
こんな「出荷記録あるある」、心当たりはありませんか？
今回は、これまでのVibe Coding連載で学んだことを活かして、実際に毎日使える「出荷記録アプリ」を一緒に作ってみます。
Google AI Studio の Build モードで、約30分で完成させましょう。
- 出荷記録アプリの「要件整理」の考え方
- AI Studioへの指示文の書き方（実践レベル）
- 段階的に機能を追加する「育てる開発」の進め方
- 完成アプリのデプロイ＆現場への導入方法
野菜農家が毎日の出荷を記録し、品目別・出荷先別に集計。月末にCSVでダウンロードしてJA提出用の実績レポートにそのまま使えるアプリです。
📝記録 → 📊集計 → 📥CSV
🍅ミニトマト・🥒きゅうり・🍆なす対応
📌 なぜ「出荷記録」をアプリにするのか？
「出荷伝票」が「デジタルの畑ノート」に変わる。
書いた瞬間に整理され、いつでも振り返れます。
→
📱 After：出荷記録アプリ
| 📝 紙のメモ・伝票 | 📱 出荷記録アプリ | |
|---|---|---|
| 記録方法 | 手書き → 後でExcelに転記 | スマホでその場入力 |
| 検索 | ノートをめくって探す | 日付・品目で絞り込み |
| 集計 | 月末にまとめて電卓 | リアルタイムで自動集計 |
| 共有 | コピーして渡す | URLで即共有 |
| 紛失リスク | 高い 😰 | データはブラウザに保存 ✅ |
📋 まず「何を記録するか」を整理する
アプリを作る前に、記録する項目を整理します。これが「要件整理」です。
必須項目（フェーズ1で実装）
- 📅 出荷日（日付）
- 🥬 品目（ミニトマト / きゅうり / なす / その他）
- 📦 数量（ケース数 or kg）
- 🏪 出荷先（JA / 直売所 / 飲食店 / EC）
あったら便利（フェーズ3で追加）
- 🏅 等級・サイズ（秀 / 優 / 良）
- 💰 単価（円）
- 📝 メモ（傷み多い、など）
「あったら便利」は後から追加すればOK。Vibe Codingは「育てる開発」が基本です。
🔨 アプリを作ろう！（30分）
ここからはAI Studio Buildモードを使って、3つのフェーズに分けてアプリを作ります。
基本記録
10分
集計+CSV
10分
仕上げ+公開
10分
まず動くものを作る ― 基本4項目の記録
10分
最初のゴールは「記録する → 一覧で見る」の基本サイクルを完成させること。まずはこれだけでOKです。
出荷記録アプリを作ってください。
【機能】
– 出荷日（デフォルト今日の日付）を入力
– 品目をドロップダウンで選択（ミニトマト、きゅうり、なす、その他）
– 数量（ケース数）を数値入力
– 出荷先をドロップダウンで選択（JA、直売所、飲食店、EC）
– 「記録する」ボタンで下の一覧に追加
– 記録は新しい順に表示
– データはブラウザのローカルストレージに保存（リロードしても消えない）
【デザイン】
– 緑を基調とした農業らしいデザイン
– スマホでも使いやすい大きなボタンと入力欄
– タイトルは「📦 出荷記録」
いきなり全部盛りにしない。農薬散布と同じで、少量ずつ、確認しながら進めるのが基本です。（Step 2の復習！）
フェーズ1：基本記録機能の完成画面
- 品目と出荷先がドロップダウンで選べる
- 「記録する」を押すと一覧に追加される
- ページをリロードしても記録が消えない（LocalStorage）
すべてOKなら、フェーズ2に進みましょう！
集計＋CSVダウンロード機能を追加
10分
基本記録が動いたら、次は自動集計とCSVダウンロードを追加します。
– 画面上部に「今月の出荷サマリー」を表示
・品目ごとの合計ケース数
・出荷先ごとの合計ケース数
– 集計は記録が追加されるたびに自動更新
– 集計部分は見やすいカード形式で表示
– ファイル名は「出荷記録_YYYY-MM.csv」（今月の年月）
– 文字コードはShift-JISで、Excelで文字化けしないようにしてください
毎日
アプリで記録
月末に
CSVダウンロード
Excelで
開いて確認
JAに
提出！
「フェーズ1＝畝を立てて種を蒔いた」
「フェーズ2＝追肥と支柱で育てている」段階です。
フェーズ2：集計＋CSVダウンロード機能
仕上げ＋公開 ― 実用レベルに磨き上げる
10分
いよいよ仕上げ。等級・単価・メモを追加して実用レベルに。さらにデザインも整えます。
– 等級（ドロップダウン：秀 / 優 / 良）
– 単価（円、数値入力）
– メモ（テキスト入力、1行）
集計サマリーに「今月の推定売上合計」も追加してください。
（計算式：各記録の ケース数 × 単価 の合計）
– ヘッダーに農場名を入れられる欄を追加
– 品目ごとにアイコンを表示（🍅ミニトマト、🥒きゅうり、🍆なす）
– 記録一覧に「削除」ボタン（誤入力対応）
– 全体のフォントを見やすく整える
🚀 完成したアプリを公開する
Step 2で学んだDeployの手順と同じです。
フェーズ3：仕上げ後の最終版
📱 現場で使うためのヒント
📐 さらに発展させるなら
| レベル | やること | AIへの指示の例 |
|---|---|---|
| ★☆☆ | 品目を追加する | 「ピーマンとオクラも追加して」 |
| ★★☆ | グラフ表示 | 「月別の出荷推移を棒グラフで表示して」 |
| ★★★ | クラウド保存 | 「Supabaseに接続して複数端末でデータ共有」 （→ Step 5記事で解説！） |
⚠️ 知っておきたい注意点
LocalStorageを使っているため、スマホAとスマホBのデータは別々です。定期的にCSVダウンロードでバックアップしましょう。
「閲覧履歴の削除」をするとLocalStorageも消える場合があります。月末のCSV保存を忘れずに。
AI Studio Buildの無料Deployは個人・小規模利用向けです。大規模な運用にはStep 4〜5で紹介する方法がおすすめです。
まとめ
- 出荷記録のアプリ化 ＝ 紙のメモ帳からスマホ入力へ。検索・集計・共有がラクに
- 要件整理が大事 ＝ 最初は必須4項目だけ。「育てる開発」で徐々に進化
- AI Studio Buildモードで「基本記録」→「集計+CSV」→「仕上げ+公開」と段階的に開発
- CSVダウンロードで月末のJA提出資料も時短
- 完成したアプリはDeployして、QRコードで作業場に貼るのがおすすめ
💬読者の声をお聞かせください
この記事に関するご質問・ご感想をお待ちしています。
