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

はじめに

アプリ開発に興味はあるけれど、プログラミングは難しそうだと感じていませんか。FlutterFlowは、画面をドラッグ＆ドロップで組み立てながら、iOS・Android・Webのアプリを作れるノーコード開発ツールです。Firebaseと組み合わせれば、ログイン、データ保存、一覧表示といった本格的な機能もコードを書かずに実装できます。

この記事は、flutterflow チュートリアルとして、最初のFirebase連携アプリを完成させるまでの流れを順番に解説します。FlutterFlowの特徴、アカウント作成とプロジェクト作成、エディター画面の見方、基本ウィジェットの使い方、Firebaseとの接続、Firestoreのデータ表示と登録までを、2026年9月時点の公式ドキュメントに沿って整理しました。

あわせて、つまずきやすい料金の話も扱います。FlutterFlowは2025年8月にプラン体系を刷新しており、Firebase側にも無料のSparkと従量課金のBlazeという区分があります。どのプランで何ができるかを知らないまま進めると、途中で機能が使えずに作業が止まることがあります。

後半では、認証設定やFirestore設計で失敗しやすい点と、業務アプリとして使う段階での判断軸も紹介します。これからFlutterFlowを触る方はもちろん、手を動かし始めたものの次に何をすればよいか迷っている方にも役立つ内容です。

FlutterFlowとは？ノーコードアプリ開発の魅力

アプリ開発の経験がなくても、アイデアを形にできるのがノーコード開発の魅力です。FlutterFlowは直感的な操作性とFirebase連携のしやすさから、個人の学習から企業の試作まで幅広く使われています。ここでは、ノーコード開発の概要とFlutterFlowが選ばれる理由、作れるアプリの種類を紹介します。

ノーコード開発とは？FlutterFlowが選ばれる理由

ノーコード開発とは、プログラミングの知識がなくても、画面上の操作でアプリやWebサイトを作る手法です。従来のコーディングに比べて開発期間を短縮しやすく、エンジニア以外のメンバーも画面づくりに参加できます。

FlutterFlowは、Googleが開発したUIフレームワーク「Flutter」を基盤にしたツールです。画面を視覚的に組み立てると、その裏でFlutterのコードが生成されます。FlutterFlowが選ばれる主な理由は次のとおりです。

理由	詳細
直感的な操作性	ウィジェットをドラッグ＆ドロップで配置し、見た目を画面上で調整できます
豊富なウィジェット	テキスト、ボタン、画像、リスト、フォームなど、よく使う部品が揃っています
Firebase連携	認証とFirestoreの設定を画面から行え、全プランで利用できます
クロスプラットフォーム	1つのプロジェクトからiOS、Android、Webアプリを作れます
コードの書き出し	Growthプラン以上ではコードをダウンロードでき、必要に応じてエンジニアが拡張できます

FlutterFlowでできること：Webアプリからモバイルアプリまで

FlutterFlowはモバイルアプリの開発を得意としつつ、Webアプリの開発にも対応しています。具体的には、次のようなアプリを作れます。

ECアプリ：商品一覧、カート、注文履歴を持つアプリ
タスク管理アプリ：ToDoリストやプロジェクトの進捗管理
SNS・コミュニティアプリ：投稿、フォロー、メッセージ機能
業務効率化アプリ：在庫管理、顧客管理、問い合わせ管理、勤怠管理

学習の題材としては、ToDoアプリや問い合わせ管理アプリのように「ログインして、データを登録し、一覧で見る」構成が向いています。この記事でも、その流れを最終ゴールに置いて進めます。

2026年版の料金プランとFirebaseの課金

手を動かす前に、FlutterFlow本体の料金とFirebaseの課金が別物である点を押さえておきます。FlutterFlowは2025年8月18日に料金体系を改め、旧Standard・Pro・TeamsプランをBasic・Growth・Businessへ移行しました（FlutterFlow Plans & Pricing）。2026年9月27日に公式のPlan Comparisonと料金ページで確認した価格は次のとおりです。

プラン	月額（月払い・1席あたり、米ドル）	編集できる人数
Free	0ドル（月払い・年払いの区別なし）	1名
Basic	39ドル（月払い）	1名
Growth	1席目80ドル、2席目55ドル（月払い）	最大2名
Business	1席目150ドル、2〜5席目85ドル（月払い）	最大5名
Enterprise	個別見積もり	個別

公式料金ページでは、年払いにすると約25%安くなると案内されています。税込・税抜の区分は公式ページに明記がないため、契約前に決済画面で確認してください。

プランによって使える機能も変わります。チュートリアルで困りやすい差は次のとおりです。

機能	Free	Basic	Growth	Business
プロジェクト数	2件	無制限	無制限	無制限
API Endpoints	2件	無制限	無制限	無制限
カスタムドメイン	不可	1件	1件	1件
コード・APKのダウンロード	不可	不可	可	可
GitHub連携・リアルタイム共同編集	不可	不可	可	可
Firebase連携	可	可	可	可

Firebase側は、Firebase公式の料金ページでSparkとBlazeの2区分が示されています。Sparkは支払い方法の登録が不要で、Firestoreは保存1GiB、読み取り1日5万回、書き込み1日2万回、削除1日2万回までを無料で使えます。Authenticationは月間アクティブユーザー5万人まで無料です。一方で、画像を保存するCloud Storageと、サーバー処理を担うCloud FunctionsはSparkでは使えず、Blazeへの切り替えが必要です。

利用目的	FlutterFlowの目安	Firebaseの目安	注意点
学習・画面作成	Free	Spark	プロジェクト2件とAPI Endpoints 2件の制限があります
MVP検証	Basic以上	Spark、画像保存ならBlaze	認証、Firestore、Storageの利用量を確認します
業務アプリ	Growth/Business	Blaze	権限、運用体制、予算アラートを設計します

FlutterFlowの月額だけで総コストを判断せず、Firebaseの利用量とセットで見積もることが重要です。学習の段階ならFreeとSparkの組み合わせで十分に始められます。

FlutterFlowを始めよう！アカウント作成から初期設定

ここからは実際の操作です。アカウント登録、最初のプロジェクト作成、エディター画面の見方までを順に進めます。

アカウント登録：無料プランで始めるFlutterFlow

FlutterFlowを使い始めるには、まずアカウントを作ります。手順は次のとおりです。

FlutterFlowの公式サイト（https://flutterflow.io/）にアクセスします
画面上部のサインアップボタンから登録画面を開きます
Googleアカウントなどで登録します
確認メールが届いた場合は、メール内のリンクからアカウントを有効化します

登録直後はFreeプランで利用できます。Freeでもエディターの操作やFirebase連携は試せるため、まずは無料の範囲で操作感と開発の流れを体験するのがおすすめです。ただしプロジェクトは2件までなので、試作を増やしすぎないよう、使わないプロジェクトは整理しておきましょう。

プロジェクト作成：最初のアプリをデザインしよう

アカウント登録が済んだら、最初のプロジェクトを作ります。

FlutterFlowのダッシュボードにログインします
新規作成ボタンからプロジェクトの作成画面を開きます
プロジェクト名を入力します（例：MyFirstApp）
テンプレートを選ぶか、空の状態から始めるかを選びます
作成を確定すると、エディター画面が開きます

初めての場合は、空のプロジェクトから始めるほうが各機能の役割を理解しやすくなります。テンプレートは完成形の構造を学ぶ教材として、2件目のプロジェクトで開いてみるとよいでしょう。

FlutterFlowの画面構成：基本操作をマスター

エディター画面は、公式ドキュメントのApp Builder解説では次の領域に分けて説明されています。

領域	役割
Navigation Menu	画面左端のメニューです。UI設計、Firestore、設定などの機能を切り替えます
Toolbar	画面上部にあり、プロジェクト内の検索、画面サイズの切り替え、履歴の確認、アプリの実行を行います
Canvas Area	端末の画面を模したプレビューで、ここにウィジェットを配置してページを作ります
Widget Palette	配置できるウィジェットの一覧です。ここからCanvasへドラッグします
Widget Tree	選択中のページにあるウィジェットの親子関係を一覧で確認できます
Properties Panel	選択したウィジェットの見た目と動作（Actions）を設定します
Storyboard	ページ同士のつながりを図で確認できます

最初は、Widget PaletteからCanvasへウィジェットを置き、Properties Panelで色やサイズを変える、という基本操作を繰り返すのが近道です。配置がうまくいかないときはWidget Treeを見ると、どのウィジェットの中に何が入っているかを確認できます。

【初心者向け】FlutterFlow 基本ウィジェット徹底解説

FlutterFlowでは、ウィジェットと呼ばれる部品を組み合わせて画面を作ります。ここでは、どのアプリでも使う基本的なウィジェットを3つのグループに分けて解説します。

テキスト、ボタン、イメージ：基本ウィジェットの使い方

画面を構成するうえで最も基本となるのが、テキスト、ボタン、画像の3つです。

ウィジェット	役割	よく設定する項目	使用例
Text	文字を表示します	表示する文字、フォント、サイズ、太さ、色	アプリのタイトル、説明文、ラベル
Button	タップできるボタンを作ります	ボタンの文字、色、角の丸み、タップ時のActions	ログイン、登録、送信
Image	画像を表示します	画像の指定、幅と高さ、表示の仕方	ロゴ、アイコン、商品画像

たとえば、Textでアプリ名を表示し、Imageでロゴを置き、Buttonで次の画面へ進む、という組み合わせだけでもトップ画面の形になります。ボタンを押したときの動作は、Properties PanelのActionsから「ページ遷移」などを選んで設定します。

レイアウトを整える：コンテナとカラム、ロー

ウィジェットを置くだけでは、整った画面にはなりません。FlutterFlowでは、Container、Column、Rowといったレイアウト用のウィジェットの中に部品を入れて配置を決めます。

ウィジェット	役割	よく設定する項目	使用例
Container	他のウィジェットを囲む箱です	幅、高さ、背景色、内側と外側の余白、角の丸み	カード型の表示、背景色のある領域
Column	中のウィジェットを縦に並べます	縦方向と横方向の揃え方	入力欄を縦に並べたフォーム
Row	中のウィジェットを横に並べます	横方向と縦方向の揃え方	アイコンと文字の横並び、ボタンの横並び

Containerは余白や背景色をつけたいときに、ColumnとRowは並べ方を決めたいときに使います。ColumnのなかにRowを入れるといった入れ子にすることで、複雑な画面も組み立てられます。思ったとおりに並ばないときは、Widget Treeで親子関係を確認するのが解決の近道です。

入力フォームの作成：テキストフィールドとフォームウィジェット

ユーザーから名前やメールアドレスを受け取るには、入力フォームを作ります。

ウィジェット	役割	よく設定する項目	使用例
TextField	文字を入力する欄です	ヒント文、ラベル、キーボードの種類、パスワード表示の切り替え	名前、メールアドレス、パスワード
Form	複数の入力欄をまとめ、入力チェックを行います	各入力欄の必須チェック、文字数、エラーメッセージ	ログイン、会員登録、問い合わせ

公式ドキュメントのフォーム検証の解説では、Formウィジェットを選んでProperties PanelのValidateで入力欄ごとの条件を設定し、送信ボタンのActionsに「Validate Form」を置く流れが紹介されています。入力チェックを先に通してから保存処理を実行すると、空欄のまま登録されるといった事故を防げます。

Firebase連携：データベース構築からデータ表示まで

FlutterFlowの大きな魅力は、Firebaseとの連携のしやすさです。FirebaseはGoogleが提供するアプリ開発基盤で、データベース、認証、ファイル保存などの機能を備えています。FlutterFlowとFirebaseを連携すると、ログインからデータの保存と表示までをノーコードで実装できます。

Firebaseプロジェクトの作成とFlutterFlowとの接続

接続方法は、FlutterFlowから新しいFirebaseプロジェクトを作る方法と、既存のプロジェクトをつなぐ方法の2つがあります。公式のConnect to Firebaseに沿って手順を整理します。

FlutterFlowから新規に作成する場合

Settings & Integrations > Project Setup > Firebase を開きます
「+ Create Project」を押し、プロジェクト名と利用者に近いリージョンを選びます
Googleアカウントでサインインし、求められた権限を許可します

初めての場合はこちらが簡単です。残りの設定はFlutterFlowが自動で進めます。

既存のFirebaseプロジェクトを接続する場合

Firebaseコンソール（https://console.firebase.google.com/）でプロジェクトを開きます
プロジェクトの設定にある「ユーザーと権限」で、firebase@flutterflow.io を編集者として追加します
詳細な権限設定で「サービスアカウントユーザー」を付与します。プッシュ通知を使う場合は「Cloud Functions 管理者」も付与します（Blazeが必要です）
FlutterFlowに戻り、Project IDを入力して「Connect」を押します
「Generate Config Files」で設定ファイルを生成します

既存プロジェクトを使うのは、会社ですでにFirebaseを運用している場合です。本番データと混ざらないよう、学習用には別のプロジェクトを用意しておくと安心です。

Firestoreデータベース：コレクションとドキュメント

FirestoreはFirebaseのNoSQL型データベースで、データを「コレクション」と「ドキュメント」の単位で管理します。

コレクション：ドキュメントをまとめるグループです。たとえば「users」コレクションにはユーザー情報が入ります
ドキュメント：実際のデータを格納する単位で、フィールドと値の組み合わせで構成されます。ユーザーのドキュメントなら「name」に名前、「email」にメールアドレスが入ります

データベースは、Firebaseコンソールの「Firestore Database」から作成します。公式手順では、開発中はテストモードで開始し、保存場所を選んで有効化する流れです。そのうえでFlutterFlowのFirestore画面からコレクション名を入力し、フィールドの名前と型を定義します。たとえばToDoアプリなら「todos」コレクションに、タイトル、完了フラグ、作成日時、作成者のフィールドを用意します。

データ表示：ListViewウィジェットでFirestoreデータを表示

Firestoreに保存したデータを一覧で表示するには、ListViewウィジェットを使います。

ページにListViewウィジェットを追加します
ListViewを選び、Backend QueryでFirestoreのコレクションを指定します
ListViewの中に置いたTextなどのウィジェットに、表示したいフィールドを割り当てます

これでFirestoreのデータが一覧に表示されます。並び順や絞り込みを指定したクエリを使う場合は、FirestoreのIndexes（インデックス）が必要になることがあります。公式手順では、FlutterFlowのFirestore設定画面にある「Firestore Indexes」からDeployする方法が案内されています。一覧が表示されないときは、まずインデックスの反映漏れを疑いましょう。

データ追加・更新：FormウィジェットとFirebase連携

アプリからFirestoreへデータを登録・更新するには、フォームとActionsを組み合わせます。

ページにFormウィジェットを置き、その中に入力用のTextFieldを並べます
送信用のButtonを配置し、Actionsで最初に「Validate Form」を設定します
続けてFirestoreの「Create Document」（新規登録）または「Update Document」（更新）を追加します
保存先のコレクションを選び、各フィールドにTextFieldの入力値を割り当てます
保存後にページ遷移やメッセージ表示を加えると、利用者に処理の完了が伝わります

ここまでで、ログイン後にデータを登録し、一覧で確認する最小構成のアプリが完成します。一度この流れを通すと、項目の追加や画面の増設も同じ要領で進められます。

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

Firebase連携でつまずきやすいのは、接続そのものよりも、認証後の画面遷移とデータの権限です。公式のFirebase Auth初期設定では、App Settings > Authentication でEnable Authenticationをオンにし、Authentication TypeにFirebaseを選んだうえで、未ログイン時に表示するEntry Pageと、ログイン後に表示するLogged In Pageを指定します。

ユーザー情報は「users」コレクションに保存し、Firestoreの設定でUsers Collectionとして割り当てます。パスワードはFirebase Authenticationが内部で扱うため、Firestoreにパスワード用のフィールドを作る必要はありません。ここを誤って保存してしまうと、情報漏えいのリスクを自ら作ることになります。

もう一つの落とし穴が、テストモードのまま公開してしまうことです。テストモードは開発を始めやすくするための設定で、そのままでは誰でもデータを読み書きできる状態になりえます。公開前には、Firestoreのセキュリティルールで「誰がどのデータを読めて、書けるか」を必ず決めてください。あわせて、インデックスの反映、課金状態、削除操作の確認、エラー表示も点検します。

💡 ポイント: ノーコードでも、権限設計とデータ構造の判断は省略できません。ノーコード総合研究所では、画面を作り始める前にデータ項目と権限を一覧にする要件整理から支援しています。

実務アプリ化するときの考え方と外注判断

社内の問い合わせ管理アプリを例に考えます。FlutterFlowでログイン画面、問い合わせの登録フォーム、担当者向けの一覧、ステータス更新画面を作り、Firestoreに「inquiries」コレクションを置く構成です。試作の段階では細かな権限を後回しにしても、登録から対応完了までの流れが現場で使えるかを確かめられます。

この段階までなら、FlutterFlowとFirebaseの組み合わせは有効です。データ設計の詳しい考え方はFlutterFlow データベース構築【2026年版】Firebase連携と比較、操作全般はFlutterFlow 使い方ガイドも参考になります。

一方で、既存の顧客管理システムとの連携、請求データの取り扱い、操作履歴の記録が必要になると、チュートリアルの範囲を超えます。ノーコード総合研究所では、FlutterFlowで試作すべきか、Bubbleで業務画面を作るべきか、APIや既存のSaaSを組み合わせるべきかを、要件に合わせて整理します。誰がどのデータをどの権限で扱うかを最初に決めることが、Firebase連携アプリの成否を分けます。

まとめ

FlutterFlowは、初心者でも画面を作りながらFirebase連携を学べるノーコード開発ツールです。まずはFreeプランでアカウントを作り、エディター画面の構成を把握しましょう。Text、Button、Imageで部品を置き、Container、Column、Rowで並べ方を整え、TextFieldとFormで入力欄を作るのが基本です。

Firebase連携では、新規または既存のFirebaseプロジェクトを接続し、Firestoreにコレクションを作って、ListViewで表示し、FormとCreate Documentで登録する流れを一度通すことが大切です。そのうえで、認証設定、インデックス、セキュリティルールを確認すれば公開の準備が整います。

料金は、2026年9月時点でFlutterFlowがFree、Basic、Growth、Business、Enterpriseの5区分です。Firebase側はSparkとBlazeに分かれ、画像保存やサーバー処理を使う段階でBlazeが必要になります。両方の費用をあわせて見積もることで、途中で作業が止まるリスクを減らせます。

学習目的なら、ToDoや問い合わせ管理のような小さなアプリから始めるのが現実的です。業務アプリとして公開する場合は、データ構造、権限、既存システムとの連携まで整理してから進めましょう。ノーコード総合研究所では、FlutterFlow、Bubble、既存SaaS連携を含めて検証しやすい構成をご提案しています。要件メモを用意してご相談いただければ、開発範囲と見積もりを具体的にお伝えできます。