Gemini×10分で領収書AIアプリを作る！初心者でもできる4ステップ開発術

「AIでアプリを作ってみたいけど、プログラミングなんてできない…」

そんな方でも大丈夫。Gemini AIに指示を出すだけで、実用的な業務アプリが作れます。

この記事では、YouTube動画で実演した「領収書スキャナーアプリ」の作り方を、初心者にもわかりやすく4ステップで解説します。

今回作るアプリ

領収書AIスキャナー

機能	説明
カメラスキャン	レシートを撮影するだけ
AI自動解析	日付・店名・金額を自動抽出
データ保存	ブラウザ内で安全に管理
CSV出力	確定申告・経費精算に使える
完全無料	月15回まで無料

所要時間：たった10分

ステップ1: 要件定義（AIに何を作るか伝える）— 2分
ステップ2: AIがコード生成 — 1分
ステップ3: Google Cloud Console設定 — 5分
ステップ4: 実際に使ってみる — 2分

プログラミング経験がなくても、指示の出し方さえ分かれば誰でも作れます。

【ステップ1】要件定義：AIに何を作るか伝える（2分）

AIアプリ開発で最も重要なのは「AIに何を作ってほしいか」を明確に伝えること。

プログラミングの知識は不要ですが、ゴールと制約を具体的に言語化する必要があります。

今回の要件定義

Gemini APIを使った領収書スキャナーWebアプリを作ってください。

【基本仕様】
• 1枚の完結型HTMLファイル（CDN使用OK）
• スマホ・PCの両方で動作
• カメラでレシートを撮影→自動解析→CSV出力の流れ

【必須機能】
1. カメラ機能
   - リアルタイムプレビュー表示
   - 背面カメラ優先
   - シャッターボタンで撮影
   - 鏡モード（左右反転）切り替え
   - 自動撮影モード（ピント検出後に自動シャッター）

2. AI解析機能
   - Gemini API連携（gemini-1.5-flash使用）
   - レシート画像から以下を抽出：
     * 日付（YYYY/MM/DD形式、年がない場合は現在年を自動付与）
     * 支払先（店名）
     * 金額（税込）
     * 勘定科目（会議費/消耗品費/旅費交通費/接待交際費/通信費/福利厚生費/その他）
     * 備考（内容要約）
   - JSON形式でレスポンス受信

3. 確認・編集機能
   - 解析結果をモーダルで表示
   - 全項目を修正可能
   - 保存前の最終確認

4. データ管理機能
   - LocalStorageで保存（サーバー不要）
   - 履歴一覧表示
   - 日付範囲でフィルタリング
   - 個別編集・削除
   - 全データクリア

5. CSV出力機能
   - ヘッダー付きCSV生成
   - BOM付き（Excel対応）
   - フィルタ適用後のデータのみ出力

6. 設定機能
   - APIキー管理（localStorage保存）
   - 使用モデル選択（API経由で利用可能モデル取得）
   - APIキー未設定時の警告表示

【技術要件】
• フレームワーク：React（CDN経由）
• スタイリング：Tailwind CSS（CDN経由）
• アイコン：Phosphor Icons（CDN経由）
• データ保存：LocalStorage
• レスポンシブ対応必須

【UI/UX要件】
• モダンで洗練されたデザイン
• アニメーション効果（フラッシュ、ローディングなど）
• タッチ操作最適化
• ダークモード（カメラ画面）
• ガイド枠表示（レシート配置の補助）

【セキュリティ】
• APIキーはlocalStorageに保存
• データは全てクライアント側で完結
• サーバーへのデータ送信なし

ポイント: 「こんな感じで」ではなく、具体的な機能を箇条書きで伝えるのが成功の秘訣です。特に出力フォーマット（日付形式、勘定科目リスト）まで明記すると、手戻りが激減します。

【ステップ2】AI（Gemini）がコード生成（1分）

要件定義をGemini（またはChatGPT）に投げると、数秒で400行のHTMLコードを生成してくれます。

生成されたコードの内容

React + Tailwind CSS（モダンなUI、CDN経由で軽量）
カメラAPI（リアルタイムプレビュー、鏡モード、自動撮影対応）
Gemini API連携（画像解析 + 勘定科目の自動分類）
データ編集機能（モーダルで項目修正可能）
LocalStorage（データ保存 + 日付フィルタリング）
CSV出力機能（BOM付きUTF-8、Excel直接開ける）
設定画面（APIキー管理 + モデル選択）

このコードを「領収書アプリ.html」というファイル名で保存すれば、もうアプリは完成しています。

※ 解説: AIは「何を作るか」を理解できれば、実装の詳細は自動で決めてくれます。具体的な保存方法は【ステップ3-5】で説明します。

【ステップ3】Google Cloud Console設定（5分）

AIが作ったアプリを動かすには、Gemini APIキーが必要です。無料で取得できます。

3-1. Google Cloud Consoleにアクセス

https://console.cloud.google.com/

普通のGoogleアカウント（Gmail）でログインOK
クレジットカード登録不要

3-2. プロジェクトを作成

画面上部の「プロジェクトを選択」→「新しいプロジェクト」
プロジェクト名：領収書アプリ
「作成」をクリック

3-3. APIを有効化（超重要）

この手順を飛ばすと動きません！

左メニュー「APIとサービス」→「ライブラリ」
検索：「Generative Language API」
「有効にする」ボタンをクリック

注意: 注意: 「Gemini API」では見つかりません。必ず「Generative Language API」で検索してください。

3-4. APIキーを取得

「APIとサービス」→「認証情報」
「＋認証情報を作成」→「APIキー」
生成されたキーをコピー

（推奨）APIキーを制限：

「APIキーを編集」→「APIの制限」→「Generative Language API」のみにチェック

3-5. アプリにAPIキーを設定

【ステップ2】で保存したHTMLファイル（領収書アプリ.html）をダブルクリック
- → Chrome・Edge・Safariなどのブラウザで自動的に開きます
アプリが開いたら、右上の「設定アイコン」（設定）をクリック
APIキーを貼り付け
「同期・モデル修復」→「gemini-1.5-flash」を選択
「設定を保存」

これで準備完了！

【ステップ4】実際に使ってみる（2分）

レシートをスキャン

アプリを開くとカメラが自動起動します。

レシートを画面中央のガイド枠に収める
白い丸ボタンをタップ
AIが自動解析（数秒で完了）

データを確認・修正

AIが抽出した内容が表示されます：

日付（YYYY/MM/DD形式、年がない場合は自動補完）
支払先（店名）
金額（税込）
勘定科目（会議費/消耗品費/旅費交通費/接待交際費/通信費/福利厚生費/その他）
備考（内容の要約）

間違いがあれば修正して「保存して次へ」。

CSV出力（確定申告・経費精算用）

「履歴・管理」タブをタップ
「CSV書き出し」ボタンをクリック
Excelで開けるCSVファイルがダウンロードされます

CSV形式例：

日付,支払先,金額,勘定科目,備考
2026/03/28,"スターバックス",1280,会議費,"打ち合わせ"

完成！たった10分で実用アプリができました

ここまでの流れ：

要件定義（60秒）
AIがコード生成（30秒）
API設定（5分）
動作確認（2分）

合計：10分以内

プログラミング経験ゼロでも、AIに適切な指示を出せば、実用的なアプリが作れる時代になりました。

よくあるトラブルと解決方法

▼ Q1. カメラが起動しない

原因: カメラ許可が拒否されている

解決方法:

ブラウザのアドレスバー左側「」をクリック
「カメラ」を「許可」に変更
ページをリロード（F5）

▼ Q2. APIエラーが出る

エラー例: 404 Not Found、API key not valid

解決方法:

Generative Language APIが有効化されているか確認（← 最多原因）
APIキーにスペースが入っていないか確認
アプリの設定で「同期・モデル修復」を実行

▼ Q3. CSV出力が文字化けする

原因: テキストエディタで開いている

解決方法:

NG: メモ帳で開く
OK：Excelで開く

CSVファイルを右クリック → 「プログラムから開く」→「Excel」

完成版を今すぐ使いたい方へ（ダウンロード）

「自分で作るのは面倒…」という方のために、完成版を無料配布しています。

ダウンロード方法

方法1：ワンクリックダウンロード（推奨）

下のボタンをクリックするだけで、完成版HTMLファイルがダウンロードされます（ログイン不要）。

📦 完成版アプリのダウンロード

💾 HTMLをダウンロード

※ クリックすると自動的にHTMLファイルがダウンロードされます

ダウンロード後の使い方：

ダウンロードされたreceipt_scanner.htmlをダブルクリック
Chrome・Edge・Safariなどのブラウザで自動的に開く
【ステップ3】のAPI設定を行う → 完了！

補足: 補足: HTMLファイルは通常ダブルクリックするだけでブラウザが起動します。もし開かない場合は、ファイルを右クリック → 「プログラムから開く」→ ブラウザを選択してください。

方法2：コードをコピー&ペースト

▼ コピペ手順を表示（クリックで展開）

Windows（メモ帳）の場合：

上のGitHubリンクを開き、receipt-scanner-app.htmlの内容をコピー（Ctrl + A → Ctrl + C）
「スタートメニュー」→「メモ帳」を開く
メモ帳に貼り付け（Ctrl + V）
「ファイル」→「名前を付けて保存」
- ファイル名：領収書アプリ.html
- ファイルの種類：「すべてのファイル (*.*)」（重要！「テキスト文書」ではダメ）
- 保存場所：デスクトップ
デスクトップに保存された「領収書アプリ.html」をダブルクリック
- → Chrome・Edgeなどのブラウザで自動的に開きます

Mac（テキストエディット）の場合：

Launchpadから「テキストエディット」を開く
メニューバー「フォーマット」→「標準テキストにする」（必須！これを忘れると動きません）
上のGitHubリンクを開き、receipt-scanner-app.htmlの内容をコピー（Command + A → Command + C）
テキストエディットに貼り付け（Command + V）
「ファイル」→「保存」（Command + S）
- 名前：領収書アプリ.html
- 「.txtを使用」のチェックを外す（重要！）
- 保存場所：デスクトップ
デスクトップに保存された「領収書アプリ.html」をダブルクリック
- → Safari・Chromeなどのブラウザで自動的に開きます

ダウンロード後は、【ステップ3】のAPI設定を行えばすぐに使えます。

このアプリの活用シーン

個人事業主・フリーランス

確定申告の準備（青色申告・白色申告）
経費の記録・月次集計

企業の経理担当者

社員の経費精算チェック
領収書の電子化・ペーパーレス化

一般の方

家計簿代わり
月次支出の把握

料金について

無料枠で十分使えます

Gemini 1.5 Flash: 月15リクエストまで無料
画像1枚の解析 = 約1リクエスト
月15枚までのレシートなら完全無料

詳細：https://ai.google.dev/pricing

データのプライバシー

安全な設計：

データは全てブラウザ内のみで処理
サーバーへの送信は一切なし
APIキーもブラウザ内に保存

注意: バックアップ推奨：

データはブラウザのLocalStorageに保存
定期的にCSV出力でバックアップを推奨

開発者向け：カスタマイズ方法

「機能を追加したい」「自分で一から作りたい」という方向けに、動画で使用した実際のプロンプトを公開します。

▼ カスタマイズ用プロンプト集（クリックで展開）

📋 基本プロンプト（アプリ作成用）

以下のプロンプトをGeminiまたはChatGPTに投げると、完全なHTMLコードが生成されます。

使い方: このプロンプトをコピーして、Gemini（https://gemini.google.com/）に貼り付けるだけ。

Gemini APIを使った領収書スキャナーWebアプリを作ってください。

【基本仕様】
• 1枚の完結型HTMLファイル（CDN使用OK）
• スマホ・PCの両方で動作
• カメラでレシートを撮影→自動解析→CSV出力の流れ

【必須機能】

1. カメラ機能
   - リアルタイムプレビュー表示
   - 背面カメラ優先
   - シャッターボタンで撮影
   - 鏡モード（左右反転）切り替え
   - 自動撮影モード（ピント検出後に自動シャッター）

2. AI解析機能
   - Gemini API連携（gemini-1.5-flash使用）
   - レシート画像から以下を抽出：
     - 日付（YYYY/MM/DD形式、年がない場合は現在年を自動付与）
     - 支払先（店名）
     - 金額（税込）
     - 勘定科目（会議費/消耗品費/旅費交通費/接待交際費/通信費/福利厚生費/その他）
     - 備考（内容要約）
   - JSON形式でレスポンス受信

3. 確認・編集機能
   - 解析結果をモーダルで表示
   - 全項目を修正可能
   - 保存前の最終確認

4. データ管理機能
   - LocalStorageで保存（サーバー不要）
   - 履歴一覧表示
   - 日付範囲でフィルタリング
   - 個別編集・削除
   - 全データクリア

5. CSV出力機能
   - ヘッダー付きCSV生成
   - BOM付き（Excel対応）
   - フィルタ適用後のデータのみ出力

6. 設定機能
   - APIキー管理（localStorage保存）
   - 使用モデル選択（API経由で利用可能モデル取得）
   - APIキー未設定時の警告表示

【技術要件】
• フレームワーク：React（CDN経由）
• スタイリング：Tailwind CSS（CDN経由）
• アイコン：Phosphor Icons（CDN経由）
• データ保存：LocalStorage
• レスポンシブ対応必須

【UI/UX要件】
• モダンで洗練されたデザイン
• アニメーション効果（フラッシュ、ローディングなど）
• タッチ操作最適化
• ダークモード（カメラ画面）
• ガイド枠表示（レシート配置の補助）

【セキュリティ】
• APIキーはlocalStorageに保存
• データは全てクライアント側で完結
• サーバーへのデータ送信なし

追加機能の実装プロンプト

以下の機能を追加してください：

1. 自動撮影モード
   - ピント検出で自動シャッター
   - 手ブレ検出機能

2. データ分析機能
   - 月別・カテゴリ別の支出グラフ
   - 金額の合計表示

3. クラウド同期
   - Firebase連携で複数デバイス同期

🔧 エラー対処プロンプト

【カメラが起動しない場合】
カメラが起動しません。
エラー：`navigator.mediaDevices is undefined`
HTTPS環境が必要な場合の対処方法も教えてください。

【CSV文字化け対策】
CSV出力時にExcelで開くと文字化けします。
BOM（Byte Order Mark）を先頭に付与してください。

まとめ：AIで誰でもアプリ開発ができる時代

この記事で紹介した方法を使えば、プログラミング未経験でも実用的なアプリが作れます。

重要なのは「コード」ではなく「要件定義」

何を作りたいか（ゴール）
どう動いてほしいか（制約・機能）
誰が使うか（ターゲット）

これを具体的に言語化できれば、AIが実装してくれます。

次のステップ

実際に作ってみる（この記事の手順で）
自分の業務に合わせてカスタマイズ
他のアプリにも挑戦（見積書作成、在庫管理など）

🎥 動画でも詳しく解説しています

この記事の内容を動画でステップバイステップで実演しています。

YouTube: カサスブレインチャンネル
チャンネル登録・高評価もよろしくお願いします！

カサスブレイン - AIで仕事を効率化
他にもAI活用術・業務効率化のコラムを公開中です。

最終更新日: 2026年3月28日
執筆: カサスブレイン編集部

この記事の監修者：たくわん

プライム上場IT企業マーケティング責任者・AI実装BPR担当。10年以上の代表取締役経験を持ち、年商100億円規模の企業で業績を大幅向上させた実績を持つ。現在は、YouTube『たくわんの経営チャンネル』で経営・マーケティング・AI活用の実践ノウハウを発信。中小企業診断士、MBA（経営学修士）保有。本記事は、実際に企業で実践しているAI運用フレームワークを基に執筆。

AIを活用した業務効率化をサポートします

「自社に合ったAI活用方法を知りたい」「もっと高度なアプリを作りたい」という方は、ぜひお気軽にご相談ください。

無料相談を申し込む（45分）

※相談はオンライン（Zoom）で実施します
※無理な営業は一切ありません。まずは現状整理から始めましょう

執筆者プロフィール

カサスブレイン代表たくわん

10年以上の代表取締役経験（年商100億円規模の企業で経営全般を担当）を持ち、現在はプライム上場IT企業でマーケティング責任者・AI実装BPR担当として従事。MBA（経営学修士）保有。経営者として培った実務経験とAI実装の知見を活かし、中小企業のAI導入を支援。本記事は、実際に企業で実践しているAI運用フレームワークを基に執筆。