flutterflow チュートリアル【2026年版】Firebase連携アプリの作り方

はじめに

flutterflow チュートリアルを探している方の多くは、画面を作るだけでなく、ログイン、データ保存、画像アップロードまで含めた小さなアプリを作りたいはずです。FlutterFlowはUIを視覚的に組み立てやすい一方で、業務で使うアプリにするにはFirebaseの設定、料金プラン、データベース設計、公開前の権限確認まで見ておく必要があります。

既存の記事では、FlutterFlowの基本ウィジェットやFirebase連携の入口を広く説明していました。しかし2026年時点では、FlutterFlowの料金体系がFree、Basic、Growth、Businessを中心とした形に変わっており、Firebase側もSparkとBlazeの違いを理解しないままStorageやCloud Functionsを使うと、途中で設定が止まる可能性があります。年号だけを差し替える更新では、実際の開発判断には足りません。

この記事では、初心者がFirebase連携アプリを作る流れを、公式情報を確認しながら整理します。学習用のToDoや問い合わせ管理なら無料枠で始めやすいですが、顧客データを扱う業務アプリでは、Firestore Rules、インデックス、ログイン後ページ、課金境界を最初から決めることが重要です。最後に、内製で進めるか、ノーコード開発会社へ相談するかを判断する観点もまとめます。

2026年版の前提と料金プラン

まず確認すべきなのは、FlutterFlow本体のプランとFirebaseの課金が別物である点です。FlutterFlow公式のPlan Comparisonでは、2026年8月時点でFreeは0ドル、Basicは月39ドル、Growthは1人目が月80ドル、2人目が月55ドル、Businessは1人目が月150ドル、2〜5人目が月85ドルです。

Firebase Integration自体は全プランで使えますが、Freeではプロジェクト数、API Endpoints、共同編集、コードダウンロードなどに制限があります。本番公開やチーム開発まで見込むならBasic以上を前提にします。Firebase側は公式PricingでSparkが無料プラン、Blazeが従量課金です。Cloud FunctionsやStorageでは課金有効化が必要になる場合があります。

利用目的	FlutterFlowの目安	Firebaseの目安	注意点
学習・画面作成	Free	Spark	公開や共同編集の制限を把握します
MVP検証	Basic以上	SparkまたはBlaze	認証、Firestore、Storageの利用量を見ます
業務アプリ	Growth/Business	Blaze想定	権限、監査、運用、費用上限を設計します

FlutterFlowの月額料金だけで総コストを判断しないことが重要です。Firebaseはproject単位で課金が紐づくため、利用量もセットで見積もります。

Firebase連携アプリを作る基本手順

初心者向けの最短ルートは、ログイン後に自分のメモや問い合わせを保存できる小さなアプリを作ることです。FlutterFlow公式のConnect to Firebaseでは、新規Firebase projectをFlutterFlowから作る方法と、既存projectを手動で接続する方法の両方が説明されています。

新規で進める場合は、Settings & IntegrationsからFirebaseを開き、Create Projectでリージョンを選び、Googleアカウントを接続します。既存projectを使う場合は、Firebase Consoleで`firebase@flutterflow.io`へ権限を付与し、Project IDを入力します。

次にFirestoreを有効化し、Collectionを作り、ListViewやFormからBackend Query、Create Document、Update Documentを設定します。ログイン、作成、一覧表示、編集、削除の流れを一度通すほうが学習効率は高いです。

認証とFirestore設計で失敗しやすいポイント

Firebase連携でつまずきやすいのは、接続そのものよりも認証後の画面遷移とデータ権限です。FlutterFlow公式のFirebase Auth初期設定では、Authenticationを有効化し、Authentication TypeをFirebaseにして、Entry PageとLogged In Pageを設定する流れが説明されています。

ユーザー情報を保存する場合は、`users` collectionを用意します。パスワードはFirebase Authentication側が扱うため、Firestoreにpassword fieldを作りません。Firestoreでは、検索条件と並び替えを組み合わせるとIndexesが必要になることがあります。本番データでエラーになる場合は、クエリ条件とIndexesを先に確認します。

💡 ポイント: ノーコードでも権限設計、データ構造、課金境界の判断は省略できません。公開前にはFirestore Rules、Indexes、課金状態、削除操作、エラー表示を確認します。

実務アプリ化するときの事例と外注判断

たとえば、社内の問い合わせ管理アプリを作る場合は、FlutterFlowでログイン画面、問い合わせ登録フォーム、担当者向け一覧、ステータス更新画面を作り、Firestoreに`inquiries` collectionを置きます。MVPでは細かな権限を後回しにし、登録から対応完了までの流れが使えるかを確認します。

この段階なら、FlutterFlowとFirebaseの組み合わせは有効です。詳しいデータ設計は、FlutterFlow データベース構築【2026年版】Firebase連携と比較も参考になります。一方で、既存CRM連携、請求データ、監査ログが必要になるとチュートリアルの範囲を超えます。Nocoderiでは、FlutterFlowで試作すべきか、Bubbleで業務画面を作るべきか、APIや既存SaaSを組み合わせるべきかを整理します。誰がどのデータをどの権限で扱うかを先に決めることが、Firebase連携アプリの成否を分けます。

まとめ

FlutterFlowは、初心者でも画面を作りながらFirebase連携を学べる便利なノーコード開発環境です。ただし2026年時点で実務に使うなら、FlutterFlow本体の料金とFirebaseの課金を分けて確認する必要があります。FreeとSparkで学習を始め、Basic以上やBlazeが必要になるタイミングを把握しておくと、途中で設定が止まるリスクを減らせます。

Firebase連携の基本は、新規または既存のFirebase projectを接続し、Authentication、Firestore、Config filesを整え、簡単なデータ作成と表示を通すことです。そのうえで、Entry PageとLogged In Page、`users` collection、Firestore Rules、Indexes、StorageやCloud Functionsの課金条件を確認します。チュートリアルの完成はゴールではなく、本番公開前チェックの入口です。

学習目的なら、まず小さなToDoや問い合わせ管理から始めるのが現実的です。業務アプリや顧客向けサービスとして公開する場合は、データ構造、権限、既存システム連携、運用担当者、費用上限まで整理してから進めます。Nocoderiでは、FlutterFlow、Bubble、既存SaaS連携を含めて、短期間で検証しやすい構成を提案できます。Firebase連携アプリの作り方で迷ったら、要件メモを用意して相談すると、開発範囲と見積もりを具体化しやすくなります。