生成AIの導入を検討している企業や個人事業主の方は多いのではないでしょうか？
でも、こんな声が聞こえてきそうです。
「うちにはエンジニアがいないから、AIを使ったアプリ開発は難しそう…」
「ChatGPTに質問するくらいならできるけれど、“仕組み”に組み込むのは無理かも」
今回ご紹介している レシートOCRデモアプリ は、まさにその不安に答えるために作ったものです。
このデモアプリは、
- ブラウザから レシート画像をアップロード
- 生成AI（Google Gemini）が 日付・店舗名・合計金額・カテゴリ・全文テキスト を抽出
- 結果を Googleスプレッドシートに自動で反映
- 完了画面には、最新の結果が見えるスプレッドシートのURLを表示
という動きをします。
ポイントは、ここまでの機能を「ソースコードを書かずに」構築していることです。
使っているのは、
- ワークフロー自動化ツール：n8n
- 画像対応の生成AI：Google Gemini
- 結果を保存する場所：Googleスプレッドシート
といった、すでに馴染みのあるサービスばかり。
この組み合わせだけで、「AIを使ったアプリらしい体験」を作り上げることができます。
何がどこまで「ノーコード／ローコード」でできるのか？
1. 画面（フォーム）は n8n が返してくれる
専用のWebアプリを一から作ったわけではありません。
- n8n の Webhookノードから、そのまま HTMLフォームを返しています。
- ユーザーは https://n8n.j-makoto.online:8443/webhook/receipt-formにアクセスするだけで、
- 画像アップロードボタン
- 「送信中…」「完了しました」のメッセージ といった基本的なUIを利用できます。
ここに必要なのは HTMLを1ファイル書く程度で、サーバサイドのルーティングやTLS設定などは n8n や既存インフラが面倒を見てくれます。
2. レシートの読み取りは丸ごと生成AIに任せる
「画像から日付・店舗名・合計金額を取り出す」ロジックは、一切手書きしていません。
- 画像入力対応の Google Gemini に対して、
- 「このJSON形式で返してほしい」
- 「amount には“合計金額（お釣りではない）”を入れてほしい」 といった指示（プロンプト）を書いているだけです。
ソースコードというより、「仕様書に近い日本語の条件」を書いているイメージに近いと思っていただければOKです。
3. 生成AIの結果を“業務の常識”で軽く補正する
生成AIは便利ですが、ときどき人間の感覚とは違う解釈をします。
実際のレシートでは、
- 合計：2,619円
- お釣り：2,401円
と書かれているのに、AIが お釣りを合計金額と勘違いしてしまうことがありました。
ここで使ったのが、ローコードの得意分野です。
- n8n の Functionノード（1つ） に、
- OCR全文（raw_text）から「合計 ¥XXXX」のパターンを正規表現で拾い、
- AIが出した amount と食い違っていたら、合計金額で上書きする という、10〜20行ほどの軽い補正ロジックを入れました。
これにより、
- AIの柔軟さは活かしつつ
- 金額の取り違えといった“業務的に致命的なミス”を防ぐ
という ちょうどいいバランスを実現しています。
ここに書いている程度のJavaScriptが少し書ける／読めるだけで、
「AIの出力を実務のルールに合わせて調整する」ことができる、というのもポイントです。
4. 「見せるデータ」と「貯めるデータ」を分ける
セールスデモとしては、
- ユーザーに見せたいのは「自分が送ったレシート1件分」だけ
一方で運用者としては、
- どんなレシートが多いのか
- どこで誤認識が起きやすいのか
といった履歴も残しておきたいところです。ブラッシュアップは欠かせません。
そこで、Googleスプレッドシートを 2ファイル 用意しました。
- 公開用 Demoシート
→ 常に2行目（A2〜E2）だけを上書きし、「最新のレシート1件だけ」を表示 - 非公開 Logシート
→ すべての投稿をAppendで蓄積（履歴・分析用）
n8n の Google Sheetsノードを2つに分けるだけで、
- ユーザーには DemoシートのURLだけを案内
- 改善などが行えるようにLogシートに履歴を残す
という設計が実現できます。
これも、「コードというより、ツールの設定とちょっとしたロジック」で十分対応できる範囲です。
ここから見えてくる、クライアント業務への応用イメージ
このレシートOCRデモは、技術的にはシンプルですが、業務に置き換えると非常に具体的なヒントになります。
● 手入力の“ボトルネック”を AI＋ローコードで外していく
- 経費精算のレシート入力
- 仕入れ伝票の転記
- 現場から上がってくる紙ベースの報告書
など、「人が目で読んで、スプレッドシートやシステムに打ち込んでいる部分」は、今回のような構成でかなりの割合を自動化できます。
● いきなり大規模開発ではなく、「小さな1本のワークフロー」から試せる
今回のデモの良いところは、
- 専用アプリを一から開発していない
- 既存のインフラ（VPS / Docker / Cloudflare）と
- 既存のSaaS（Google Drive / Sheets）
- ローコードツール（n8n）
- 生成AI（Gemini）
の組み合わせだけで、「動くデモ」が作れていることです。
つまり、
ソースコードが書けなくても、「自社向けの生成AIアプリ」は作れる
ここまでのレシートOCRデモから見えてきたのは、
ソースコードを大量に書けなくても、生成AIの使い方と、ローコードツールの“つなぎ方”さえ押さえれば、自社業務に直結する小さなアプリは十分に作れる
ということです。
今回の構成では、
- 生成AI（Google Gemini）には
→ 「何を読み取って、どの形式で返してほしいか」を 日本語の指示（プロンプト） で伝える - n8n には
→ 「どのタイミングでAIを呼ぶか」「結果をどこに流すか」を ノードをつないで定義 する - 必要なコードは
- JSONをパースする部分
- 金額を少し補正する部分
- 日付から年月を取り出す部分
など、数十行の“業務ルールを落とし込むロジック”だけ
です。
多くの企業さま・個人事業主さまにとって、
- 「フルスクラッチでアプリを開発する」のはハードルが高くても
- 「生成AI＋既存ツール＋ローコードを組み合わせて1本のワークフローを作る」ことなら、
現実的な難易度になってきています。
まとめ
本記事で紹介した「レシートOCRデモ」は、いろんなケースに置き換えられます。
- 「ソースコードを書くエンジニアがいなくても」
生成AIと n8n のようなローコードツールを使えば、- レシート/伝票の自動入力
- 日報・点検報告の自動整理
- 顧客からの問い合わせの自動要約 といった“小さな専用アプリ”を社内に持てます。
- 「まずは1つのワークフローから」
いきなり基幹システムをAI化する必要はありません。
今回のように、- 入力が紙やPDFの業務
- 出力がスプレッドシートや既存DB になっている部分を1箇所切り出し、「読み取り→整理→保存」を自動化するだけでも効果があります。
