経費精算のたびにExcelを開き、手入力で申請書を作り、メールで上司に送る。承認が返ってくるまで数日かかり、経理との差し戻しでさらに時間をロスする――こんな経験をしている方は少なくないはずです。
「自社に合った経費管理システムがほしいけれど、SaaS製品は機能が合わない。かといって外注開発は費用が高すぎる」。この板挟みを解消してくれるのが、ノーコードツールのBubbleです。
この記事では、Bubbleの使い方を経費管理アプリの構築という実践テーマを通じて解説していきます。データベース設計からUI作成、承認ワークフロー、会計ソフト連携まで、実務で使えるレベルのアプリを一から組み上げる手順を具体的にお伝えするので、ぜひ手を動かしながら読み進めてみてください。
Bubbleとは？経費管理アプリ開発に向いている理由
ノーコードで本格的な業務アプリが作れる仕組み
Bubbleは、コードを一切書かずにWebアプリケーションを構築できるノーコードプラットフォームです。ニューヨーク発のサービスで、世界中に400万人以上のユーザーがいるとされています。
「ノーコードツール」と聞くと、簡単なランディングページや予約フォーム程度しか作れないイメージを持つ方もいるかもしれません。しかしBubbleはそうした簡易ツールとは設計思想が大きく異なります。データベース、API連携、ユーザー認証、条件分岐ワークフローなど、従来のWeb開発に必要な要素をすべてビジュアルエディタで操作できる仕組み。つまり、プログラミング経験がなくても、業務ロジックを含む本格的なアプリが構築可能です。
経費管理アプリに必要な機能との相性
経費管理アプリには、一般的に以下の機能が求められます。
- 経費申請フォーム（領収書画像のアップロード含む）
- 承認・差し戻しのワークフロー
- 経費カテゴリ別の集計・レポート
- ユーザー権限の管理（申請者・承認者・経理）
- 会計ソフトとのデータ連携
Bubbleなら、これらすべてを標準機能とプラグインの組み合わせで実現できます。特に承認ワークフローのような条件分岐ロジックは、Bubbleのワークフローエディタと相性が良く、「承認者がOKを出したら次のステップへ進む」「差し戻し時は申請者に通知を送る」といった処理をドラッグ&ドロップで設定可能。
Bubbleの無料プランでも開発とテストは十分に行えるため、まずはコストゼロで試作できる点も大きなメリットでした。本番運用には有料プラン（Starterプランで月額29ドル〜）への移行が必要ですが、外注開発の初期費用と比べれば桁違いに安く済みます。
Step 1：Bubbleの初期設定とプロジェクト作成
アカウント作成からエディタの画面構成まで
まずはBubbleの公式サイトでアカウントを作成するところから始めてください。メールアドレスとパスワードだけで登録できるので、1分もかかりません。
アカウント作成後、ダッシュボードから「New app」をクリックし、アプリ名を入力します。ここでは「expense-manager」など、わかりやすい英語名をつけておくのがおすすめ。日本語名も設定できますが、URLに使われるため英語名が無難です。
アプリを作成するとBubbleのエディタ画面が開きます。初めて触る方は情報量の多さに圧倒されるかもしれませんが、主に使う領域は4つだけです。
| エディタの領域 | 役割 |
|---|---|
| Design タブ | UI要素の配置・デザイン |
| Workflow タブ | ボタンクリック時などのアクション定義 |
| Data タブ | データベースの設計・管理 |
| Styles タブ | 色・フォントなど共通スタイル設定 |
最初にSettingsタブで言語設定やアプリ全体の基本情報を確認しておくとスムーズです。Generalタブでアプリ名とファビコン、Languagesタブで日本語表示の設定を済ませておきましょう。
レスポンシブ設定の基本方針
Bubbleでは、レスポンシブデザインをFlexboxベースのレイアウトエンジンで制御します。2023年以降のアップデートでレスポンシブ対応が大幅に改善されたため、以前よりも直感的にモバイル対応が可能になりました。
経費管理アプリの場合、スマートフォンからの申請利用が多くなるケースが大半。最初から「Column」レイアウトをベースにし、モバイルファーストで設計すると後の調整が楽になります。ページ幅は1200pxを最大幅とし、コンテナにMin width 320pxを設定しておくのが定石です。
Step 2：データベース設計 — 経費管理の土台を作る
テーブル構成の全体像
Bubbleの使い方で最も重要なステップが、データベース設計です。ここを雑に作ると後から修正が大変なので、手を抜かずに設計してください。
Dataタブを開き、「Data types」セクションで以下のテーブル（Bubbleでは「Type」と呼ぶ）を作成していきます。
Userテーブル（Bubbleのデフォルト）に追加するフィールド:
| フィールド名 | タイプ | 用途 |
|---|---|---|
| role | text | 権限（applicant / approver / admin） |
| department | text | 所属部署 |
| approver | User | 直属の承認者 |
Expenseテーブル（新規作成）:
| フィールド名 | タイプ | 用途 |
|---|---|---|
| title | text | 経費名称 |
| amount | number | 金額 |
| category | Option sets | 経費カテゴリ |
| date | date | 発生日 |
| receipt_image | image | 領収書画像 |
| description | text | 備考・詳細 |
| status | Option sets | 申請状態 |
| submitted_by | User | 申請者 |
| approved_by | User | 承認者 |
| submitted_at | date | 申請日時 |
| approved_at | date | 承認日時 |
Option sets（選択肢マスタ）の設定:
Option setsは、固定の選択肢を管理するBubble独自の仕組み。Dataタブの「Option sets」から作成できます。
- ExpenseCategory: 交通費 / 宿泊費 / 会議費 / 消耗品費 / 交際費 / その他
- ExpenseStatus: 下書き / 申請中 / 承認済み / 差し戻し / 精算済み
リレーション設計のポイント
BubbleのデータベースはリレーショナルDBに近い構造を持っていますが、従来のSQLデータベースとは異なる点がいくつかあります。
まず、Bubbleでは外部キーの代わりに「フィールドタイプにほかのData typeを指定する」ことでリレーションを表現する仕組み。上の例でExpenseテーブルの「submitted_by」フィールドにUser型を指定しているのがその例です。
注意したいのが、1対多のリレーション。例えば「1人のユーザーが複数の経費を申請する」関係は、Expense側にUserフィールドを持たせるだけで表現できます。逆にUser側に「expenses（List of Expenses）」を持たせる方法もありますが、リストが大きくなるとパフォーマンスに影響するため、検索（Do a search for）で取得する方が安全です。
ノーコードツールのデータベース設計についてさらに詳しく知りたい方は、別記事も参考にしてみてください。
Step 3：UI設計と画面構築 — 申請・承認・管理の3画面
経費申請画面の作り方
Designタブに移動し、まず経費申請画面を作成します。Bubbleでは「ページ」単位でUIを設計するため、ページ一覧から「Add a new page」をクリックし、「expense_submit」という名前で新規ページを作成してください。
申請画面に必要なUI要素は以下の通り。
- Input要素: 経費名称（テキスト入力）、金額（数値入力）、発生日（Date Picker）
- Dropdown要素: 経費カテゴリ（Option setsのExpenseCategoryを選択肢に設定）
- Multiline Input: 備考欄
- Picture Uploader: 領収書画像のアップロード
- Button: 「下書き保存」「申請する」の2つ
これらの要素をGroupコンテナの中に配置していきます。Bubbleの使い方に慣れていない段階では、見た目の調整よりも「正しいデータが保存される状態」を先に作ることが重要。デザインは後からStylesタブで一括調整できるので、まずは機能面を優先しましょう。
入力フォームのバリデーションも忘れずに設定してください。各Input要素のプロパティで「This input should not be empty」にチェックを入れるだけで、未入力チェックが有効になります。金額フィールドには「Content format」をCurrencyに設定しておくと、数字以外の入力を自動で弾いてくれるのも便利な機能です。
承認画面と管理ダッシュボード
承認者用の画面（「expense_approve」ページ）では、自分に割り当てられた申請の一覧を表示し、個別に承認・差し戻しができるようにします。
一覧表示にはRepeating Groupを使います。これはBubbleで最も頻繁に使う要素の一つで、データベースの検索結果をリスト表示するためのコンポーネント。設定手順は以下の通りです。
- Repeating Groupをページに配置し、Type of contentに「Expense」を設定
- Data sourceに Do a search for → Expense を指定
- 検索条件として status = 申請中 かつ submitted_by’s approver = Current User を追加
- Repeating Group内のセルに、経費名・金額・申請者名・申請日を表示するText要素を配置
- 「承認」「差し戻し」ボタンをセル内に配置
管理ダッシュボード（「dashboard」ページ）は、経理担当者が全体の経費状況を把握するための画面。月別の経費集計、カテゴリ別の内訳、未処理件数などをグラフやテーブルで表示します。Bubbleには標準のチャート要素がないため、Chart.js系のプラグインをプラグインマーケットからインストールして使うのが一般的な方法です。
Step 4：ワークフロー構築 — 承認フローと通知の自動化
申請〜承認〜精算の一連フローを組む
ここからが経費管理アプリの核心部分。Workflowタブで、ユーザーの操作に応じた処理を定義していきます。
申請ボタンのワークフロー:
経費申請画面の「申請する」ボタンをクリックした際のワークフローを以下のように設定します。
- Step 1: Create a new thing → Expense を選択し、各フィールドにフォームの入力値をマッピング
- statusフィールドには「申請中」を設定、submitted_byには「Current User」を指定
- submitted_atには「Current date/time」を入れる
- Step 2: Reset relevant inputs でフォームをクリア
- Step 3: Navigate to page で申請一覧ページに遷移
ここで一つ重要なテクニックがあります。「下書き保存」ボタンの場合はstatusを「下書き」に設定し、Navigate to pageは実行しない構成にすること。同じCreate a new thingアクションでも、ボタンごとに異なるstatus値を渡すことで、下書きと申請を分離できます。
承認ボタンのワークフロー:
承認画面で「承認」ボタンをクリックした際の処理はこちら。
- Step 1: Make changes to thing → Current cell’s Expense を選択
- statusを「承認済み」に変更、approved_byに「Current User」、approved_atに「Current date/time」を設定
- Step 2: Send email（後述の通知設定）で申請者に承認通知を送信
差し戻しの場合はstatusを「差し戻し」に変え、差し戻し理由を入力するポップアップを挟む構成にするのがおすすめです。BubbleではPopup要素を使ってモーダルウィンドウを簡単に作れるので、差し戻し理由の入力UIにはPopupを活用してください。
メール通知とSlack連携
経費の申請や承認が行われたタイミングで関係者に通知を送る機能は、業務アプリとして欠かせません。
Bubbleの標準機能として、Send emailアクションが用意されています。ワークフロー内でこのアクションを追加し、宛先に「Current cell’s Expense’s submitted_by’s email」のように動的な値を設定すれば、申請者のメールアドレスに自動で通知が届く仕組みが完成します。
ただし、Bubbleのデフォルトメール機能はカスタマイズ性が低いのが難点。本番運用ではSendGridやMailgunなどの外部メールサービスとAPI連携するのが実用的です。BubbleのAPI Connectorプラグインを使えば、外部APIとの接続もノーコードで設定可能。
Slack通知を追加したい場合は、Slack APIのIncoming Webhooksを使います。API Connectorで新しいAPIを定義し、Webhook URLに対してPOSTリクエストを送る設定を作るだけ。ワークフロー内でAPI Connector → Slack通知のアクションを追加すれば、経費申請のたびにSlackの指定チャンネルにメッセージが届くようになります。
BubbleのAPI Connector設定方法について詳しくは別記事でも解説しているので、外部連携に興味がある方はそちらも確認してみてください。
Step 5：権限管理・テスト・公開までの仕上げ
ユーザー権限の制御方法
経費管理アプリでは、「申請者は自分の経費だけ閲覧可能」「承認者は部下の申請のみ表示」「経理は全データにアクセスできる」といった権限制御が不可欠です。
Bubbleには2つのレベルで権限を制御する仕組みがあります。
1. ページレベルのアクセス制御
各ページのプロパティで「Page is not accessible」の条件を設定できます。例えば承認画面には「Current User’s role is not approver and Current User’s role is not admin」という条件を追加すれば、申請者の権限では承認画面にアクセスできなくなります。
2. Privacy Rules（データレベルのアクセス制御）
Dataタブの「Privacy」セクションで、各Data typeに対してアクセスルールを定義可能。Expenseテーブルに対して「申請者は自分が作成したデータのみ閲覧可能」「承認者はsubmitted_by’s approver = Current Userのデータのみ閲覧可能」といったルールを設定してください。
Privacy Rulesはセキュリティの要なので、必ず設定すること。これを怠ると、URLの直接入力で他人の経費データが見えてしまうリスクがあります。
テストと本番公開の手順
Bubbleには開発環境（Development）と本番環境（Live）の2つが用意されています。エディタ上での作業はすべてDevelopment環境に反映されるため、本番に影響を与えずにテストが可能という安心設計。
テスト時に確認すべきポイントは以下の通りです。
- 経費申請フォームの入力バリデーションが正しく動作するか
- 申請後にstatusが「申請中」に変わるか
- 承認者のRepeating Groupに申請が正しく表示されるか
- 承認・差し戻し後のstatus変更と通知が動くか
- Privacy Rulesが正しく機能し、他ユーザーのデータが見えないか
- スマートフォン表示でレイアウトが崩れないか
問題がなければ、エディタ右上の「Deploy to Live」をクリックするだけで本番公開が完了します。独自ドメインの設定はSettingsタブのDomainセクションから行えるので、社内ツールとして運用する場合はサブドメイン（例: expense.yourcompany.com）を割り当てておくと使い勝手が良くなるでしょう。
なお、本番公開にはBubbleの有料プラン契約が必要です。Starterプラン（月額29ドル）でも基本的な運用には十分ですが、チームでの共同編集やバージョン管理が必要な場合はGrowthプラン（月額119ドル）以上を検討してください。
他のノーコードツールとの料金比較が気になる方は、比較記事もあわせてご覧ください。
まとめ
Bubbleを使えば、経費申請・承認・集計まで一気通貫でカバーする業務アプリを、コードを書かずに構築できます。今回紹介した手順を改めて整理すると、以下の5ステップです。
- プロジェクト作成と初期設定 — アカウント登録からレスポンシブ設定まで
- データベース設計 — Expense・Userテーブルの設計とOption setsの定義
- UI構築 — 申請画面・承認画面・管理ダッシュボードの3画面を作成
- ワークフロー設定 — 申請→承認→通知の一連フローを自動化
- 権限管理・テスト・公開 — Privacy Rulesの設定とDeploy to Liveでの本番公開
Bubbleの使い方に慣れている方なら1〜2日、初めて触る方でも1〜2週間あれば実用レベルのアプリが完成するはず。まずは無料プランでアカウントを作り、今回のデータベース設計から手を動かしてみてください。「Excelと手作業の経費精算」から卒業する第一歩になるはずです。
よくある質問（FAQ）
Q: Bubbleは日本語に対応していますか？
A: Bubbleのエディタ画面は英語のみですが、作成するアプリのUI（ボタンやラベルなど）はすべて日本語で表示できます。日本語入力にも問題ありません。エディタの英語に慣れるまで1〜2日かかりますが、使われる用語は限定的なので、すぐに感覚がつかめるはずです。
Q: プログラミング未経験でも経費管理アプリを作れますか？
A: 作れます。ただし、データベース設計やワークフローの条件分岐など、「プログラミング的な考え方」は必要です。コードを書く技術は不要でも、「この条件のときにこの処理を実行する」というロジカルシンキングは求められる点に注意してください。Bubble公式の無料チュートリアルを先に一周しておくと、スムーズに取り組めます。
Q: Bubbleで作ったアプリのセキュリティは大丈夫ですか？
A: Bubbleはデータの暗号化（SSL/TLS）、SOC 2 Type II準拠のインフラ運用など、セキュリティ面で一定の基準を満たしています。ただし、Privacy Rulesの設定漏れがあるとデータ漏洩のリスクが生じるため、開発者側の設定責任は大きいのが実情。本記事のStep 5で解説した権限設定は、必ず実施してください。
Q: 既存の会計ソフト（freeeやマネーフォワード）と連携できますか？
A: BubbleのAPI Connectorプラグインを使えば、APIを公開している会計ソフトとの連携が可能です。freee APIやマネーフォワードクラウドAPIとHTTP通信で接続し、承認済みの経費データを自動で仕訳データとして送信する仕組みが構築できます。API Connectorの設定にはAPIキーやOAuth認証の知識が多少必要になるため、各サービスのAPI仕様書を事前に確認しておくのがおすすめです。
Q: 無料プランでどこまで開発できますか？
A: 無料プランでは、アプリの開発・テストをフル機能で行えます。データベースの設計、UI構築、ワークフロー設定のすべてが制限なく使えるため、今回の経費管理アプリも無料プランで完成形まで作り込むことが可能。ただし、独自ドメインの設定やアプリの本番公開（Deploy to Live後の常時稼働）には有料プランへのアップグレードが必要です。
コメント