FlutterFlowの始め方｜登録から最初のアプリを動かすまで

FlutterFlow は、登録から最初の画面を動かすところまでなら、無料で、30 分ほどで試せます。この記事では、アカウントの登録、プロジェクトの作成、画面の見方、部品の置き方、動作確認、データベースの接続までを、実際の画面で順に説明します。

画面は 2026 年 11 月時点の FlutterFlow Studio（無料の Free プラン）で撮影しています。FlutterFlow そのものの特徴や料金は「FlutterFlowとは？できること・料金・Studioとの違い」で解説しています。

「自分で作る時間がない」「作りたいアプリが FlutterFlow に向いているか知りたい」という方は、無料のアプリ開発相談をご利用ください。

始める前に知っておきたいこと

• 必要なもの：パソコンとブラウザ（Chrome など）だけです。インストールは不要です。
• 費用：Free プランは無料で、プロジェクトを 2 つまで作れます。ストアへの公開やコードのダウンロードには有料プラン（Basic 月 39 ドル〜）が必要です。
• 言語：操作画面は英語です。この記事では、画面の英語の表記をそのまま示しながら説明します。
• 2 つの作り方：現在の FlutterFlow には、AI に説明して作る「FlutterFlow」と、自分で画面を組み立てる「FlutterFlow Studio」があります。この記事で扱うのは Studio です。細かく作り込みたい場合や、学習目的なら Studio から始めるのがおすすめです。

手順1：アカウントを登録する

1. FlutterFlow Studio のログイン画面を開きます。
2. Google・Apple・GitHub・Microsoft のいずれかのアカウントで登録するか、メールアドレスとパスワードで登録します（「Create an account」）。
3. ログインすると、プロジェクトの一覧（Projects）が表示されます。

仕事で使う場合は、あとで他の人と共有しやすいよう、個人用ではなく業務用のアカウントで登録しておくと安心です。

手順2：プロジェクトを作る

1. 画面右上の「New Project」を押します。
2. 「Project name」にプロジェクト名を半角英数字で入れます（例：MyFirstApp）。
3. 白紙から作る場合は、そのまま「Start Building」を押します。

同じ画面でテンプレートも選べます。「Free Starter Apps」は無料で使える公式テンプレートで、食事管理アプリや SNS アプリなどがあります。有料のテンプレートには価格が表示されています。まずは白紙のプロジェクトで画面の構造に慣れるのがおすすめです。

文章で説明して画面を作りたい場合は「Generate with Designer」も使えますが、AI の利用枠を消費します。

手順3：編集画面の見方を知る

プロジェクトを作ると編集画面が開きます。大きく 3 つの領域に分かれています。

• 左：ウィジェットの一覧…Text（文字）、Button（ボタン）、Image（画像）、Column（縦に並べる）、Row（横に並べる）など、画面を作る部品が並びます。
• 中央：キャンバス…アプリの画面そのものです。上部で表示する機種（iPhone など）を切り替えられます。
• 右：プロパティ…選んだ部品の文字・色・余白・動きなどを設定します。

左端の縦に並んだアイコンでは、画面の一覧、データベース、API、アプリ全体の設定などに切り替えられます。

手順4：部品を置いて画面を作る

1. 左の一覧から「Text」を、中央の画面にドラッグします。
2. 画面に「Hello World」という文字が置かれます。
3. 右のプロパティの「Text」欄で、表示する文字を書き換えます。日本語も入力できます。
4. 同じ要領で、Button や Image を置いていきます。

部品が増えてくると、どの部品がどの中に入っているかが分かりにくくなります。そのときは左側の「Widget Tree」を開くと、部品の重なりを階層で確認できます。

FlutterFlow の画面は、Column（縦並び）と Row（横並び）の中に部品を入れていく考え方で作ります。最初にここでつまずく方が多いので、まずは Column の中に Text と Button を縦に並べる練習から始めるとよいでしょう。

手順5：Test Mode で動かしてみる

1. 画面右上の稲妻のアイコン（Test Mode）を押します。
2. 新しいタブが開き、しばらくするとスマートフォンの枠の中でアプリが動きます。
3. 編集画面で変更したあとは、Test Mode 側で再読み込みすると反映されます。
4. 確認が終わったら、右上の「End Session」で終了します。

Test Mode は無料プランでも使えます。発行されるリンクは一時的なもので、他の人に共有する用途には使えません。

手順6：データベースをつなぐ

ログイン機能や、投稿・予約といったデータを保存する機能を作るには、データベースが必要です。FlutterFlow Studio では、主に Firebase か Supabase を使います。

1. 左端のいちばん下の歯車のアイコン（Settings and Integrations）を押します。
2. 「Project Setup」の中の「Firebase」を選びます。
3. 「Create Project」を押すと、Google アカウントと連携して Firebase のプロジェクトを自動で作れます。すでに Firebase のプロジェクトがある場合は、その ID を指定して接続します。

ここから先の具体的な作り方は、機能ごとの記事で解説しています。ログイン機能の作り方、メッセージ機能の作り方、Supabase との連携をご覧ください。これらの記事は以前の画面で撮影しているため、見た目が現在と少し違う箇所があります。

手順7：アプリを公開する

作ったアプリを App Store や Google Play に公開するには、次のものが必要です。

• FlutterFlow の有料プラン：Basic 以上で、ストアへのワンクリック公開とコードのダウンロードが使えます。
• ストアの開発者登録：Apple Developer Program（年額 99 ドル）と、Google Play の開発者アカウント（初回 25 ドル）です。
• 審査への対応：ストアの審査では、プライバシーポリシーやアプリの説明文、スクリーンショットなどが求められます。

公開の前に、実機での動作確認と、データの読み書きの権限（誰がどのデータを見られるか）の確認を必ず行ってください。

AI を使って作ることもできる

編集画面には「FlutterFlow Agent」という AI エージェントが組み込まれており、チャットで指示して画面を作ったり直したりできます。ただし、Free プランでは利用できません（2026 年 11 月時点）。

有料プランでは、Claude Code などのコーディングエージェントと連携して開発を進める方法も用意されています。AI に任せる場合でも、できあがった画面とデータの設計は人が確認する必要があります。

初心者がつまずきやすいポイント

• 部品の入れ子が分からなくなる：Widget Tree を見ながら、Column と Row のどこに入れるかを意識します。
• データの設計を後回しにする：画面を先に作り込むと、データの持ち方が決まったときに作り直しになります。保存したい項目を先に書き出しておきます。
• 複雑な機能を画面操作だけで作ろうとする：ライブ配信や複雑な決済のような機能は、結局コードを書くことになります。早い段階で「どこからコードで書くか」を決めておくと手戻りが減ります。
• 無料プランのまま公開しようとする：ストアへの公開には有料プランが必要です。公開の予定に合わせてプランを切り替えます。

まとめ

• FlutterFlow Studio は、ブラウザだけで無料で始められます。
• プロジェクトを作り、部品を置き、Test Mode で動かすところまでは 30 分ほどで試せます。
• データを扱う機能には Firebase か Supabase の接続が必要で、ストアへの公開には有料プランが必要です。

自社での開発が難しい場合や、公開までを短期間で進めたい場合は、開発を依頼する方法もあります。ランデストでは、FlutterFlow でのアプリ開発を 20 万円〜、期間は 2 週間〜でお受けしています。無料のアプリ開発相談からお問い合わせください。