Lovableで『業務効率化アプリ』を作る完全ガイド｜Excel/スプシ集計地獄から抜け出す

こんな『業務のしんどさ』に心当たりありませんか？#

• 毎朝Excelを開いて、複数シートからコピペして報告メールを作っている
• 現場が更新するスプレッドシートを、上司用に整形し直すのが日課になっている
• 問い合わせフォームの内容を、誰かが手作業でCRMに転記している
• 『この数字、今いくつ？』と聞かれるたびにファイルを開いている
• kintoneやサイボウズを入れたいが、年間コストが重くて稟議が通らない

これらは全部、『見せ方』と『入力のしやすさ』を変えれば一気に楽になる業務です。ゼロから業務システムを作る必要はありません。すでに社内にあるGoogleスプレッドシートをそのまま“裏側のデータベース”にして、Lovableで『見るだけ・入力するだけのキレイな画面』を被せるのが最短ルートです。

この記事のゴール#

下記の3つを30〜60分で実現します。プログラミング知識・サーバー構築・データベース設計、すべて不要です。

1. Googleスプレッドシートで管理しているデータを、社内向けの専用Webアプリで“一覧表示”できる
2. アプリ上のフォームから入力すると、その内容がスプレッドシートに自動で追記される
3. ログインしたメンバーだけが見られるように制限し、社内に配布できる

今回の例：『案件管理アプリ』を作る#

営業部がスプシで管理している『案件一覧』を題材に、次の3画面を作ります。具体的にイメージしながら読むと、自分の業務にも置き換えやすくなります。

• 📋 一覧画面：全案件をカード形式で表示。担当者・ステータス・金額で絞り込み可能
• 📝 新規登録画面：フォームから入力 → スプシに自動追記
• 📊 ダッシュボード：今月の受注金額・進行中案件数を自動集計してKPIカードで表示

仕組みの全体像（30秒で理解）#

難しそうに見えますが、登場人物は3つだけです。

[ あなた・社員 ]                      [ Lovableで作った業務アプリ ]
       │  ブラウザでアクセス               │
       ├──────────────────────────────────►│
       │                                   │  ① 表示する／入力を受ける
       │                                   ▼
       │                          [ Lovableのサーバー関数 ]
       │                                   │  ② 安全に橋渡し
       │                                   ▼
       │                       [ Googleスプレッドシート ]
       │                                   │  ③ データの本体（社員も直接編集OK）
       │◄──────────────────────────────────┘

事前準備（5分）#

1. Googleアカウントを用意（会社のWorkspaceでもOK／個人Gmailでも可）
2. 案件管理用のスプシを1枚用意し、1行目に列名を入れる：案件名 / 担当者 / 金額 / ステータス / 登録日
3. テスト用に2〜3行ダミーデータを入れる

ステップ1：LovableとGoogle Sheetsをつなぐ#

Lovableのチャット欄で次のように頼むだけで、コネクタ接続のダイアログが立ち上がります。

Google Sheetsコネクタを接続したい。社内の案件管理スプレッドシートをアプリの裏側に使います。

1. ダイアログで『Connect』を押す
2. Googleの認証画面で、対象スプシを編集できるアカウントでログインする
3. アクセスを許可する（読み取り＋書き込み）
4. Lovableに『接続できました』と表示されればOK

ステップ2：スプレッドシートのIDをコピーする#

Lovableに『どのシートを見ればいいか』を教えるために、スプシのIDが必要です。スプシのURLを開くと次のようになっています。

https://docs.google.com/spreadsheets/d/【ここがID】/edit#gid=0
                                   ▲▲▲▲▲▲▲▲▲▲▲▲
                                   この部分をコピー

ステップ3：そのままコピペで“一覧画面”を作る#

Lovableチャットに下記をそのまま貼り付けてください。【ここに貼る】の部分を、先ほどコピーしたスプシIDに置き換えるのを忘れずに。

Google Sheetsから案件一覧を取得して、ダッシュボード形式で表示する画面を作って。

要件：
- スプレッドシートID: 【ここに貼る】
- シート名: シート1
- 列: 案件名, 担当者, 金額, ステータス, 登録日
- 上部にKPIカードを3つ：今月の受注金額合計 / 進行中案件数 / 今月新規登録数
- 下部に案件一覧テーブル（担当者・ステータスで絞り込めるドロップダウン付き）
- 右上に『＋新規登録』ボタン
- スマホでも崩れないようレスポンシブ対応

ステップ4：入力フォームを足す（スプシに自動追記）#

次のプロンプトを追加で送るだけで、画面右上のボタンから新規案件を登録できるようになります。入力された内容は、スプシの最終行に自動で追記されます。

『＋新規登録』ボタンを押すとモーダルが開いて、案件名・担当者・金額・ステータスを入力できるようにして。送信したら同じスプレッドシートの末尾に追記し、登録日は本日の日付を自動で入れて。登録後はモーダルを閉じて一覧を再取得。

ステップ5：『社員だけが見られる』ようにする#

せっかく作ったアプリも、URLを知っていれば誰でも見られる状態だと社内配布できません。次の一文で、ログインの仕組みが追加されます（Lovable Cloudの認証機能を使います）。

Lovable Cloudの認証を有効にして、メールアドレスでログインしないとこの業務アプリを見られないようにして。さらに、許可リストに登録されたドメイン（@example.co.jp）のメールアドレスだけがログイン可能にして。

つまずきポイントと対処法#

Q. 『データが取れません』と言われる

• スプシIDが間違っている → URLを開き直してコピーし直す
• シート名が違う（『シート1』ではなく『Sheet1』のことがある） → スプシ下部のタブ名を確認
• コネクタ接続時に『閲覧のみ』アカウントでログインした → 編集権限のあるアカウントで再接続

Q. 列名を後から変えたら全部壊れた

スプシの列名は“仕様”そのものです。変えるときは『列名Aを列名Bに変えました。アプリ側もBを参照するように修正して』とLovableに伝えてください。勝手に追従はしません。

Q. 同時編集で値がズレる

Google Sheetsは“同時に大量書き込み”が苦手です。1日数百件以上の書き込みが発生する規模になったら、Lovable Cloud（PostgreSQL）に引っ越す合図です。『今のアプリのデータをLovable Cloudのテーブルに移行して』と頼めば、Lovableがマイグレーション手順を提案してくれます。

Sheets運用を“卒業”すべきタイミング#

• 1日の書き込みが200件を超え始めた
• 同時に5人以上が編集することがある
• 顧客の個人情報を扱い始めた（スプシ＝Google管理者なら全員見える状態）
• 外部からのフォーム送信を直接受けるようになった

ひとつでも当てはまったら、データの保管先をLovable Cloudに引っ越すタイミングです。アプリ画面はそのまま、裏側だけ差し替えられます。

まとめ：『業務効率化アプリ』は“データを動かす”より“見せ方を変える”が9割#

ゼロから業務システムを作るより、すでに動いているスプシ運用に“キレイな顔”を被せるほうが、社内導入はずっとスムーズです。Lovable + Google Sheetsの組み合わせは、その最短ルート。まずは自分のチームで一番面倒な“転記作業”を1つ選んで、今日30分だけ試してみてください。