FlutterFlowのススメ
■更新履歴
2024/10/4:Supabaseの記述を微修正しました。
2024/3/29:記載を最新化しました。
2023/9/11:記載を最新化しました。
2023/6/10：料金周り・連携サービス周り・他サービス比較の記述を更新しました。
2023/2/22：連携サービス周りの記述を更新しました。
こんにちは、菅原です。
私が運営している会社、GenAiではいくつかの会社に対して新規サービス構築の支援を行っています。中でも、エンジニアリソースの少ない会社に対しては、ローコードツールでの開発体制の構築をしています。
数あるローコードツールの中でも、素晴らしいなと思ったのが、FlutterFlowでした。めちゃくちゃ開発陣が気合い入ってて毎週のようにアップデートが入ります。 出たての時（2021年12月）から使ってきたのですが、当時と比べてかなり使えるアップデートも入り、最近はとてもおすすめできるツールだと思えるようになってきたので、入門記事として、特徴を書き連ねていきますね。
FlutterFlowとは？
FlutterFlowとは、Flutterベースのプロジェクトを作成できる、いわゆるノーコード（ローコード）ツールです。Google出身の二人のエンジニア、AbelとAlexが立ち上げました。
ツールにより作成されるアプリはFlutter製なので基本的にはiOSもAndroidも両対応ですし、それどころかWEBもMacアプリ、Windowsアプリ、Linuxアプリもいけます。Flutterを知らない人は以下を参考に読んでみてください。
最大の特徴
FlutterFlowは使い方も難しくなく、最高なのですが、特に素晴らしいな、と思う特徴を3点書きます。
①ローコードツールとして、GUI上で好きにアプリを作成できる
個人的に、Flutterをコードで開発するとき一番面倒なのが、ガワ（UI）を作ることだと思ってます。数々のWidgetという部品を組み合わせてレイアウトを組み立てていくのですが、正直グラフィックの調整をコードを書きながらやるのは直感的とは言いづらいですし、コーディング量も多いので面倒です。Widgetごとにとるプロパティも異なるので、それらを把握しつつレイアウトを組んでいくのは面倒です。
以下、図右のログイン画面を作るのに、ソースコードだと３８０行くらいで面倒です。
デザインシステムが優秀
また通常、アプリ開発においてゼロからレイアウトを組む際は、色のテーマやフォントを統一して管理したり、部品化・コンポーネント化するなどデザインシステムを考えなくてはなりません。（やらなくてもアプリはできるのですが、後で大変になるので必須と考えてます。）
それをFlutterFlowではGUIで直感的に組み立てることができます。きちんとテーマも扱うことができ、色に名前をつけフォントも定義できます。コンポーネント作成はもちろん、さらにはDarkMode、LightModeのテーマも扱うことができるので、思い立ったときにはもう、Dark/Lightモードの実装を終えている！みたいな感じで最強です。
また、ElementsレベルのUIはThemeとして用意できます。例えばボタンのレイアウトやテキストエリアのレイアウトなど、よく使う最小粒度の部品のデザインを簡単に統一できるようになってますFlutterFlowのデザインシステムは協力です。
②周辺サービスが簡単に組み込める
FlutterFlow公式で組み込める周辺サービスは非常によく使う物が揃っています。
現時点（2023/6/10）だと、以下のようなものがあります。
Firebase経由サービス
Firebaseというのは簡易的にアプリのバックエンドを作成できるGoogleのクラウドコンピューティングサービスです。
対応しているのは以下。
- Firebase Authentication（認証サービス）
- Firestore Database（NoSQLデータベース）
- Storage（ストレージサービス）
- Functions（サーバレスコンピューティング）
- Firebase Cloud Messaging（プッシュ通知）
- Algoria（全文検索エンジン）
- Admob（デジタル広告）
- Firebase Dynamic Links (クロスプラットフォームディープリンク)
- Firebase Remote Config（設定値をアプリ外のクラウド上で管理できる）
- Firebase Crashlytics （本番環境のユーザーが踏んだエラーの検知、分析）
- Google Analytics （アクセス解析、コンバージョン追跡など）
- Firebase App Check （バックエンドのセキュリティ強化）
- Firebase Performance Monitoring （性能監視・ログ）
マネタイズ系
アプリ作りに欠かせないのが、マネタイズ方法。買い切り型のアプリでもマネタイズはできますが、アプリ内課金を実装する場合、以下のようなサービスの組み込みが第１の候補にあがります。
- Stripe（決済サービス）
- Paypal（決済サービス）
- BrainTree（決済サービス）
- Revenue Cat（サブスクリプション購入）
- Admob(再掲・デジタル広告全般)
- RazorPay（インドの決済サービス）
UI系
細かい動きや、アニメーションによってわかりやすいUIを実現することができます。凝ってる感の演出や、シームレスに動いているように見せられるのが良いですよね。
- Rive Animation（アニメーション）
- LottieAnimation（アニメーション）
- Coolers（色テーマ作成ツール）
UX系
便宜的にUX系としてますが、外部サービスの機能を使うことができ、アプリ内の利便性を向上できます。
- Algoria（再掲・全文検索エンジン）
- Google Maps（地図）
- Firebase Dynamic Links (再掲・クロスプラットフォームディープリンク)
- Mux Live Stream（動画視聴状況の分析）
開発ツール系
- Github Integration（ソースコード管理）
- CodeMagic（アプリのデプロイ）
- OpenAI Codex（ソースコード自動生成AI）
その他バックエンド系
- Gemini（テキスト生成AI）
- Supabase （Backend as a Serviceの一つ。イケてるFirebaseの対抗馬）
- SQLite（ローカルデータベース）
以上、マネタイズ系も、検索エンジンもすごくよく使うのでめちゃくちゃ楽です。もちろん、これ以外にもAPI連携をしたりして他のサービスと連携することはできます。割と大方のアプリは使いたい物が揃ってるのではないでしょうか？最近はSQLiteにも対応し、スタンドアロンでクラウドストレージを必要としないアプリを作ることが可能になり、また一つ弱点が克服されました。
③ソースコードを落とせる
私的に最強だと思うのがこれです。アプリ開発用のローコードツールあるあるとして、チーム開発に移行したいときや、ツールでできないことを実現しようと思った時に大変苦労することがあると思います。
FlutterFlowはそもそもFlutterベースのプロジェクトを裏で生成してくれておりそのソースコードをダウンロードしてローカルでビルドして開発することも可能です。
この手のノーコードツールは主な使い道がMVP（実用最小限のプロダクト）を作ることだと思ってますが、そこから本格的に本番製品として回せるプロダクトにしていくときに、この特徴は非常に強力かつ有用なのです。
また、FlutterFlowは正直まだリリースから1年ということもあり、「あれ、この機能うまく動かないな・・・」となることもあるのですが、たまにプラットフォーム上では解決できないエラーに遭遇することがありますが、実際ソースコードを読んでみると解決できます。
最終手段として、ソースコードを落とせるってのは最強なのです。有料なのですが、30ドルですし最初からガッツリ集団で開発するって方も、UIだけFlutterFlowで作って移行するのもありなんじゃないでしょうか？
無料版と有料版の違い
FlutterFlowは上記のように良い特徴が揃ってます。しかも無料版でできることもとても多く、デプロイ手前までは無料版で十分です。ここで有料版との違いを書いていきますね。
無料版
まずは無料版の機能ですが、下記のようにかなりの機能を使うことができます。
- Firebase連携
- Screen Templates
- プリセットのサンプル画面を持ってきて、自分のプロジェクトに使えます。
- Sample Apps
- 公式の用意しているShowCase的なサンプルアプリを利用できます。
- RunMode
- 作ったアプリをWeb上で実行して動作確認できるし、そのURLを公開して共有することもできます。
- TestMode
- 作ったアプリをWeb上で実行して動作確認できます。Runmodeより迅速！
- Firestore Content Manager
- Firestoreの中身をいじれるエディタ。Firestore直接見れば良い気もする
- サードパーティ連携
- 上記の特徴のところで書いた周辺サービスが大体使えます！
- Custom Widget/Functions
- Flutterの外部ライブラリ（Pub）を使ったカスタム機能を作れます
- Custom APIs
- HTTP通信で任意の外部APIを叩く機能です。２APIまで無料です。
スタンダード版
- 無料版の機能全て
- ★ソースコードをダウンロードできる
- これはデプロイする前に細々としたカスタマイズするためには必須機能です。
- APKをダウンロードできる
プロ版
- 無料版・スタンダード版の機能すべて
- Github連携
- ソースをGithubにコミットする機能。これなくても無料版でFlutterFlow内での履歴管理はできますが、ローカルで編集する必要があるプロジェクトの場合はほぼ必須です。
- AppStore/Google Play Storeに簡単デプロイ
- CodeMagic経由。最初の申請のめんどくささは変わらないけど、継続運用するなら便利かも。でもその時にはローカル開発に移行していたりしますね。。ローカルでのリリースが難しい初心者の方に嬉しい機能ですね。
- チャットでのFlutterFlow公式サポート
- 出立ての時は全然チャット返ってこなかったのですが、最近は体制が強化されたのか、回答は早くなってきました。
- アプリを１クリックで翻訳する機能
- アプリ内のすべての文言を１クリックで翻訳可能です。多言語対応が圧倒的に楽になります。１週間くらいかかる工数が１時間もかからず終わります。
Team版
- プロまでの全ての機能
- 請求管理
- デザインライブラリの共有
- 複数アプリを同一のデザインシステムでやる時に役に立つ。コンポーネントを共有したり、色やフォントを共有したりできます。
また、Team版だと複数のメンバーが入って共同編集することが可能になります。ただし、同じ画面を開くと競合するので片方しか編集できません。
FlutterFlowの利用料金/費用
月払いと年払いで料金形態が異なります。
Standardプランは月30ドル（月払い）、または22ドル/月（年払い）です。
ProプランとTeamプランは月70ドル（月払い）、または50ドル/月（年払い）となります。
月払いプラン
年払いプラン
どんな人におすすめ？
エンジニア初心者
簡単にUIを構築できたり、バックエンドを構築できるため、完成品までの道のりが短いです。アプリ作りでどんなことを考えなきゃいけないのか、全体感を抑える上で役に立つと思います。慣れてきたら、Custom FunctionsでDartの関数を書いてみたり、落としてきたソースコードを使ってローカル環境でソースを書き換えたりして学んでいくこともできます。意欲があればスキルアップの足がかりになるのではないでしょうか。
新規サービス開発者
エンジニア経験者の中でも、自分のポートフォリオを作ってみたい方、普通に新規にアプリを作って起業しようと思っている方にはお勧めです。なんといってもゼロから自分で立ち上げるより、UI周りと拡張機能が爆速で組めてしまいます。面倒なことはFlutterFlowにやらせて、本質的に難しい機能だけ自分で書くような形の使い方が良いなと思います。
どんな人に向いてない？
既存サービスの開発者・運用者
すでにサービスが稼働中だったりする人です。既存プロジェクトへの組み込みはあまり向いてません。
部分的に生成して移植しようと思っても、FlutterFlow独自の色・Fontの変数があちこちに埋め込まれますし、拡張機能も独特のUtilityから呼んでます。依存関係が面倒なので移植手術はやらない方が良い気がします。デザインシステム抜きに、変数化もせず本当にガワだけを生成したら簡単に移植はできますが・・・。
Firebase/Supabase以外のバックエンドを使いたい人
基本Firebase/Supabaseに円滑に連携できるように設計されているので、素直にFirebase/Supabaseを使いたくない人はメリットを享受しきれないのかなと思います。部分的にサーバを他に立てて処理を移譲したりは良いと思いますが、データの管理は基本Firebase/Supabaseでやるのが吉だと思います。
英語が読めない人
FlutterFlowは米国のサービスなので、基本サポートは英語となります。公式ドキュメントも日本語は一切ないので、英語が読めないとつらいかと思います。
完全なエンジニア未経験者
ローコードツールなので、基本的にはエンジニア経験がない人でもアプリを作ることができます。ですが、どちらかというと予備知識は多少必要な部類だと思います。私がこれまでアドバイスさせていただいた方の傾向だと、全くエンジニア経験がない場合、かなり苦労されている方が多いです。
Bubbleの方が、あらかじめ対応している外部連携サービスも多いですし、ロジックもビジュアルプログラミング的に書けるので、本当に初めて、という方はBubbleの方がおすすめです。（料金は高いですが。）
他のノーコードツール(Adalo/Bubble)と比較した際の利点
アプリの性能が高い
FlutterFlowで作ったアプリは軽快に動作します。これはAdaloやBubbleを念頭に置いてますが、2点理由があります。
まず、AdaloやBubbleなどはプラットフォーム上のサーバやDBに依存しています。その点は知識がなくても開発できるという点で優れていますが、それゆえに弊害として、プラットフォームのサーバに負荷が重なるタイミングで処理速度が重くなったりと、サーバがボトルネックでアプリが重くなることがよくあります。
2点目として、FlutterFlowはネイティブアプリを作れます。AdaloのようなPWAと比べても動作は早いことが多いです。またソースコードを出力してくれるので、遅い処理があったとしてもボトルネックを特定して性能改善することができます。最終的にソースコードに手を入れてチューニングしやすい、という点はFlutterFlowが他ノーコードツールに勝っている大きな点ではないでしょうか。
インフラの自由度が高い
先ほど触れた点とも重複しますが、FlutterFlowはインフラがプラットフォームに依存しません。事実上Firebase、Supabaseにバックエンドは依存していますが、APIコール機能を使ってAPIサーバから情報取得・更新をするように組むことも可能です。
例えば、特定の環境にDBを置かないとならないセキュリティ要件があった場合、AdaloやBubbleでは対応不可能ですが、FlutterFlowでは構成次第で可能になります。
ソースコードをDLできる
何度も触れていますが、ソースコードを落とせることで、できないことを全て払拭できている気がします。対応していないFlutterのパッケージは多々ありますが、Custom Widgetでも対応できないことはソースコードを落として組み込めば大体なんとかなります。
弊社のお客様でもローコードツールを使って費用感を抑えて開発をしたい会社様がFlutterFlowを選ぶことが多くなってきています。最終的にアウトプットがソースコードという安心感がやはり大きいのかなと思います。
ノーコードツールには流行り、廃りもあり、どんなツールもサービス終了のリスクが付きまといますが、Flutterプロジェクトを落とせるため、そのようなリスクがないという点も大きいでしょう。
できないこと
とはいえFlutterFlowも万能ではありません。以下記事に困ったことを書いてみました。ご参考にどうぞ。
最後に
私のリファラルリンクおいとくので以下から１ヶ月プロ版無料で登録できます。よければ使ってください。
上記は私の個人的な意見なので、ディスカッションは大いにウェルカムです！コメント欄でも、ご意見ください！
＊（以下宣伝）
開発会社をお探しの方、日本語でのFlutterFlowの技術サポート/設計/開発請負について
上記、興味あればFlutterFlowを使ったアプリ開発の技術サポートや、設計・開発の請負も弊社では行っているので興味あればお声がけください！
開発会社をお探しであれば、通常の要件定義から設計・実装また保守まで対応可能です。ローコードならではの迅速な開発や、費用感を抑えた開発をご希望の方はぜひご連絡ください。
サービスページ： https://genai.co.jp/
弊社お問い合わせ先→ company@genai.co.jp
では！
インターン生募集
GenAiではインターン生も募集しています。FlutterFlowを使った開発をしたい方、未経験でも歓迎しています。現場のエンジニアに教えてもらえる環境で、一緒に働いてみませんか？
Discussion