【FlutterFlow】ネイティブアプリを10倍速で作れるノーコード（ローコード）ツールFlutterFlowとは？Adaloやbubbleとの違いも合わせて解説

こんにちは。近年、ノーコード／ローコードでのアプリ開発・Web開発が増えてきましたが、そんな中で最近最も注目されているツールの一つが、FlutterFlow（フラッターフロー）です。

FlutterFlow（フラッターフロー）であれば、かなりスクラッチに近いレベルの機能を持ったネイティブアプリ（iOS/Android）およびWebサイトを、ノーコード／ローコードで（プログラミングなしで）開発することができます。

（ちなみに「Flutter」と「FlutterFlow」は違います。「Flow」がついてる「Flutter Flow」の方がノーコードツールで、Flutterは元々あるネイティブアプリをプログラミングして作れるモバイルアプリフレームワークです。）

では、Flutter Flowとはどういうノーコード（ローコード）ツールなのでしょうか？

今日はFlutterFlowについて解説していきたいと思います。

FlutterFlow（フラッターフロー）とは？

FlutterFlowはノーコード／ローコードでアプリを簡単に作れるツール

FlutterFlow（フラッターフロー）とは、ネイティブのクロスプラットフォームアプリケーションを作成できる、オンラインのブラウザベースのアプリビルダーです。

と、紹介されていたりしますが、難しいので平たく言うと、

「アプリをプログラミングなしで開発できるツール」

です。

いわゆるノーコード（No Code。プログラミングしないでできるという意味）ツールですね。

ノーコードなので、開発スピードを圧倒的に高速化することができます。
その上、iOSアプリもAndroidアプリも同時に作れる優れものです。

さらに、FlutterFlowは「ローコード」でもあるため、部分的にプログラミングすることでノーコードでは難しいような複雑な機能も実現可能です。

FlutterFlowはノーコード・ローコードではなくビジュアル開発環境？

FlutterFlowはノーコード」コード無しでアプリを作れる部分もありますし、コードも書けるので、筆者としては「FlutterFlowはローコードツール」と思ってましたが、FlutterFlow自体は「FlutterFlowはノーコード・ローコードツールではなくビジュアル開発環境です」と謳っているようです。

Leigha Reidさんも以下でお話ししてくれています。
https://blog.flutterflow.io/flutterflow-2024-our-product-vision-and-roadmap/

↑わざわざlow code toolに取り消し線をして「visual development environment（ビジュアル開発環境）」と強調してますね笑

以下の動画でもFlutterFlowはノーコード・ローコードではなく、ビジュアル開発環境だと説明してくれてるので興味がある方はぜひ。

FlutterFlowの開発スピードは、なんと従来の10倍速

FlutterFlowの作成サイドによると、

「これにより、開発者、起業家、組織は「10 倍速く」アプリを構築できます。」

と言われています。

「10倍速」とは夢のようなスピードですよね！

iOSアプリ、Androidアプリ、Webサイトを同時に開発

しかも、ネイティブアプリ（iOSアプリとAndoridアプリ）とWebサイトを同時に対応できます。Webサイトはもちろんレスポンシブ対応（PCでもスマホでもみれる）可能です。

恐ろしくハイスペックですね。

信頼性：FlutterFlowは日本の大企業でも使われている

FlutterFlowの公式サイトでは以下のように楽天や東芝などの日本の大企業の名前も書かれていますね。

Trusted by users at leading companies around the world
「世界中の大手企業のユーザーから信頼されています」

と書かれているように、この辺からもFlutterFlowの信頼性、安心感が伺えますね。

その上でノーコード／ローコードとは思えない複雑なロジックにも対応可能

基本的にノーコード／ローコードは早く簡単に作れる分、できることに制限があります。

FlutterFlowももちろん制限があるのですが、それでも他のノーコードに比べてかなり柔軟に対応が可能です。詳しくは後述しますが、バックエンドの仕組みもしっかりしていて、ローコードでかけたり、ソースをダウンロードできたりと、拡張性が高いです。テンプレートも豊富ですし、デザイン性も優れていてレスポンシブ対応もできています。

FlutterFlowはノーコードというよりローコードという方が正しいかもしれません。

AI（ChatGPT、Google Geminiとの連携）

FlutterFlow（フラッターフロー）ではAPI連携ができるためChatGPTやGoogleGeminiなどのAIとの連携も可能です。
そのため、簡単にAIアプリを作ることができます。（詳細は後述）

AIでコードや画面を自動生成する機能も搭載

FlutterFlowの開発エディタにはAI機能が組み込まれていて、プロンプトを入れることでAIがコードや画面を自動生成する機能も搭載されています。これにより効率的な開発が可能です。（詳細は後述）

FlutterFlowとFlutterの違いは？

アプリについて調べていると「FlutterFlow（フラッターフロー）」ではなく「Flutter（フラッター）」というキーワードの方がよく見かけるかもしれません。これはどう違うのでしょうか？

Flutter（フラッター）とは？

Flutterは、「Dart」という言語を使って開発する、モバイルアプリを作るためのフレームワークです。

iOSアプリ・Androidアプリの両方に同時に対応しているすぐれものです。

しかし、こちらはFlutterFlowとは異なり、ノーコードではなく、プログラミングして開発するためのフレームワークです。熟練のプログラマーが時間をかけて開発する必要があります。

FlutterFlow（フラッターフロー）とは？

では「Flutter」ではなく後ろに「Flow」がくっついてる「Flutter Flow」の方は何なのでしょうか？
FlutterFlow（フラッターフロー）とは、Flutterをベースに作られたノーコードツールです。

Flutterとは異なりノーコードで（プログラミングしないで）アプリを作れるツールになります。

Flutterをベースにしているので、iOSとAndroidの両方に対応してますし、さらにコード（Dart）を書き出すこともできるため、ノーコードのFutter Flowで作ったものをベースに、Flutterでプログラミングして開発を続けることもできるのも魅力の一つです。

FlutterFlow（フラッターフロー）の料金は？

FlutterFlowはどのくらいの利用料がかかるのでしょうか？料金体系についてみていきましょう。

FlutterFlowの利用料（2025年8月18日改訂版）

FlutterFlowの料金は2025年8月18日に改訂があり、以下のようになっています。

プランは、無料プラン、Basicプラン、Growthプラン、Businessプランの４段階ですね。

（その上の、大規模プロジェクト用のEnterpriseプランもあります。その場合はFlutterFlowへ直接問い合わせしてみる必要があります。）

Basicプランでもまだ、GitHubやVSCodeと連携できない、チーム開発ができないです。

それらができるのは、月額39ドルのGrowthプランと、月額150ドルのBusinessプランです。

ただ、複数人開発をしたい場合は、1人追加するごとに料金が追加されます。（Growthだと2人目が55ドル。Businessだと2人目以降1人につき85ドル）

1人で開発してGitHubやVSCodeいらないと言う人は、まずBasicプランから始めても良さそうですね。

年間契約すると25%もお得！

また、上記を見て貰えばわかるように、年間契約にすることで25%も割引されます。

これ結構安いですよね！私は年間契約で即買いでした笑

もちろん、まずは無料版を試したい、という人の方が多いと思うので、以下に無料版について書いてみました。

FlutterFlow：無料版でどこまでできる？

まず試してみたい、勉強したい、という方は当面無料プランで全く問題なさそうです。こちらのサイトに詳しくありますが、FlutterFlowでは無料版でも一通りの機能が利用できます。

ただ、無料版の場合は、コードのダウンロードやAPKファイルのダウンロードができない、ストア申請できない、APIの制限、Githubと連携できない、AI機能の制限、などの制約があります。

とはいえ、まず勉強してみたい、アプリを作り始めたい、という段階であればまずは無料で試してみて、本格的な開発が見えてきてから有料化、という流れでも全く問題なさそうですね。

まずは無料版で試してみましょう！

他のノーコードツールとの比較

他のノーコードツールと比較すると以下のような感じです。

1. Adalo（Proプラン 月額52ドル）

2. bubble（Personalプラン 月額25ドル）

3. FlutteFlow（Proプラン 月額70ドル）

やや高い印象でしょうか？（それぞれアクセス数やデータ量などでプランが変わってくるので単純に比較できないのですが、個人的な感覚でプランを選んで比較してます。）

とはいえ、ネイティブアプリ（iOS/Android）をプログラミング無しで同時に開発できつつ、かつAdaloより圧倒的に複雑な機能も実装できる、、、となるとめちゃくちゃ安い、と個人的には感じました。

FlutterFlowのメリットは？

コードを書かずにアプリを作れる

まずはノーコードツール全般に言えるメリットですが、これだけ素晴らしい機能をコーディング（プログラミング）しないで作れるのは素晴らしいの一言です。

複雑なロジックに対応

FlutterFlowはノーコードとは思えない複雑なロジックに対応しています。他のノーコードツールと比較しても、かなり高度なアプリ機能を実装できると思います。

データベース側はFirebaseに対応しており、FlutterFlowから自由にデータを利用することができます。

各アクションは以下のようにGUIで条件分岐を設定できます。

デザインの自由度も高く、スクラッチ開発のアプリに近いレベルの実装が可能になっています。

iOS /Androidのネイティブアプリを作れる

前述の通り、ネイティブアプリを作れるというのが大きなメリットです。

他のノーコードツールでは、「Webアプリは作れるけどネイティブアプリは作れない」ものも多い中で、AppStore／GooglePlayのストアに載せられるネイティブアプリを同時に作れると言うのは魅力的ですね。

PCサイト、Webアプリ、レスポンシブ対応も

ネイティブアプリを作れるだけではなく、PC向けおよびモバイル向けのWebサイト・Webアプリをレスポンシブで構築できるのも強みです。
 つまり、FutterFlowではiOSとAndroidのネイティブアプリ、PC/タブレット/スマホのWebアプリをすべて同時に作れます。

ローコードで一部コーディングしての開発も可能

FlutterFlowはノーコードでありローコードツールでもあります。

ノーコードは、プログラミングをしないで作るツールのこと。

対してローコードは、基本はノーコードですが一部をプログラミングすることも可能なツールのことです。

一部の機能をプログラミングして開発できること（ローコード）により、ノーコードの弱点である複雑なロジックに対応できない部分を補うことができます。

OpenAIと連携しているためAIによるコード自動生成も

上記でローコードとして一部プログラミングも可能と書きましたが、プログラミングは得意ではない方も多いはず。しかし、OpenAIと連携しているため、テキストで指示することでAIがコードを自動生成してくれる便利機能までついています。

ソースコードをダウンロードしFlutterで開発できる

こちらは他のノーコードツールにはない圧倒的に強力な強みです。

ノーコードツールは基本的にそのツールで開発するため、そのノーコードで出来ないことは出来ないので、あるところまでサービスが成長すると、ノーコードアプリを捨ててゼロからスクラッチで作り直す、、、という流れが定番でした。

ただ、FlutterFlowはソースコードをダウンロードできるため、ゼロから作り直す必要がないのです。最初はFlutterFlowを使いノーコードで開発し、スクラッチで開発が必要な機能が出てきたら、そこから「Flutter」を使って機能拡張していく、、、ということも可能になります。

GitHubとの連携も可能

FlutterFlowはGitHubとの連携も可能です。プロジェクトをGitHub アカウントに接続し、Flutterコードベース全体をGitHub リポジトリにプッシュできます。

他のノーコードツールではあまりない機能なのでありがたいですよね。

FlutterFlowのGitHub連携についての詳細はこちら

複数人での共同作業も可能：Collaboration機能

FlutterFlowでは、複数人での同時開発も可能です。他のノーコードツールの場合、規模的に小さくシンプルなため1人で作業した方が良いことも多いですが、FlutterFlowの場合はそれなりの規模になることもあるため、複数人同時に開発することはありえます。

そんな時は、Collaboration機能でInvite Userからユーザーを追加してあげると可能になります。ただ、無料ユーザーだと同時にアクセスすると他のメンバーが追い出されてしまうので、有料化して対応するのが良いと思います。

開発環境の切り替え

FlutterFlow 5.0のリリースで、これまでできなかった開発環境、ステージング環境、本番環境などの環境を自分で追加し、それぞれを切り替えることができるようになりました。それぞれのFirebase環境を別に持ち、それを切り替えてテスト・実装できるということですね。

他のノーコードツールでは本番環境しかないものもある中で、こういう機能が充実してくるとより保守運用しやすく、プロトタイプとしてだけではなく本格的な運用にも耐えれるようになりますね。

詳しくは以下記事をご覧ください。
【FlutterFlow】開発環境と本番環境を切り替える方法（FlutterFlow 5.0の新機能）

バックエンドはFirebase

FirebaseとはGoogleが提供しているアプリのバックエンドを簡易的に作成できるサービスです。FlutterFlowはこのFirebaseを基盤にして動いています。

認証（ログイン・会員登録）周りはFirebase Authentification、データベースはFirebaseのFirestore。また、ストレージやプッシュ通知機能などもFirebase経由で利用が可能になっています。

データベースはSupabase（スパベース）も利用可能

基本はfirebaseのfirestoreを利用できますが、最近supabaseへの対応もできるようになりました。supabaseはオープンソースのFirebase代替として最近注目を集めているBaaSで、PostgreSQLデータベースをベースにしています。

RDBの方が使いやすい場合などにはSupabaseとの連携が有効かもしれないですし、Firebase以外にデータベースの選択肢があるのは嬉しいですね。

こちらにSupabaseの接続方法も書いています
【FlutterFlow】Supabaseの使い方：環境設定からAuthentication、一覧まで。

SQLiteも利用可能

2024年3月頃にSQLiteも使えるようになりました。
SQLiteはコンパクトで効率的なデータベース管理システムです。従来のデータベースがサーバーを必要とするのに対し、SQLiteはサーバーレスであり、アプリケーションに直接組み込むことができます。

例えばデータをローカルに保存する必要があるモバイルアプリの際に利用され、特にオフライン機能が求められる場合などに需要があります。

SQLiteについての詳細はこちら↓

FlutterFlowでSQLiteが使えるようになったので試してみた。

FlutterFlowは機能の進化・アップデートのスピードが凄まじい

ノーコードの世界はどんどん成長中なので、ブログや本に書いた内容があっという間に古くなる、、、ということはよくあります。
そんなノーコードの世界の中でも、FlutterFlowは特に進化のスピードが速いです。一時は毎週新しい機能がいつの間にか追加されている、、、というようなスピード感でキャッチアップが追いつかない、なんてこともよくあります。

この進化・アップデートスピードがFlutterFlowの期待できる点であり信頼できる点ですね。このペースで進化を続けてくれていれば他のツールでは追いつけない最強のノーコード/ローコードツールになるのではないでしょうか。

ノーコード比較：FlutterFlowとAdaloとの違いは？

ネイティブアプリが得意なノーコードツールに、Adalo（アダロ）があります。ここではノーコードAdaloとの比較をしてみましょう。

ノーコードAdalo（アダロ）の特徴

Adaloは圧倒的に高速でアプリを開発できるノーコードツールです。他のノーコードツールと比較しても圧倒的にスピードが速いです。1週間〜2週間で作成してしまうことも可能です。

もちろんFlutterFlowと同様に、iOS、Andoridのネイティブアプリを作れますし、Webアプリも作れてレスポンシブ対応も可能です。

ネイティブアプリとして当然欲しい、Push通知（プッシュ通知）、MAP（地図）機能、外部APIとの連携もできます。

ですが、低コスト・ハイスピードで開発できる分、やはり機能的に実現できることに制限は多いです。また。スクラッチ開発と比較するとサクサク感はなく、やや重く感じるかもしれません。

目的として、プロトタイプ・ベータ版としてMVPを素早く実行したい、という目的ならばAdaloはベストフィットすると思います。

【ノーコードAdalo】ネイティブアプリを簡単に作れる「Adalo（アダロ）」を徹底解説！

Adaloと比較した場合のFlutterFlow

FlutterFlowはAdaloより圧倒的に多くのことが実現できます。FlutterFlowはアプリもサクサク動きますし、デザイン面も柔軟に対応できます。かなり複雑な機能が必要な時もローコードで実装することで問題を回避できるケースが多いです。

しかし、その分FlutterFlowの方がAdaloより数倍時間がかかります。実装期間だけではなく、学習コストも相当かかってしまいます。

とはいえ、「時間がかかる」といっても、「ノーコード・ローコードにしては」です。感覚的に、Adaloの数倍の時間がかかるイメージですが、それでもスクラッチ開発1/10以下の開発時間しかかからないと思います。

実際にFlutterFlow公式が「従来の10倍速で開発できる」と謳ってるくらいですからね。

AdaloとFlutterFlowの比較：まとめ

ということで、まとめると、以下のような感じでしょうか？

• Adaloは簡単に素早くアプリが作れる。その分出来ることの制約は多い。

• FlutterFlowはかなり多くの機能が作れる。その分開発期間や学習期間が多く必要。

ということで、

とにかくスピードの速さとコストダウンを優先させてまずMVPアプリを作りたい、ならAdalo！

MVPよりもう少し先を見据えてじっくりと完成度の高いアプリを作りたい、ならFlutterFlow！

かなと思います。

ノーコード比較：FlutterFlowとBubble.ioとの違いは？

では今度はFlutterFlowとBubble.ioを比較してみましょう。

bubble.ioの特徴

bubble.io（バブル）はWebサービス・Webアプリを作るのに特化した強力なノーコードツールです。短時間でかなり複雑なWebサービスを作ることができます。日本での実績も多く、さまざまなスタートアップ・新規事業で使われていますし、MVPとしてだけではなく継続して使えるくらいの品質を保てるのも強みです。

最速でWebアプリを作れるノーコードbubbleとは？開発実績・事例を紹介

bubbleと比較した場合のflutterflow

bubbleと比較した場合、やはりflutterflowの強みはWebだけではなくアプリもつくれるところです。基本的にはbubbleはWeb用のノーコードツールなので、アプリを作るとなったらやはりFlutterFlowとなります。

また、bubbleはFlutterFlowのようにローコードとして一部プログラミングしたり、ソースコードをダウンロードしてスクラッチ開発に移行したりできないため、長期的な拡張性を考えたり、複雑なアプリを作る必要がある場合はFlutterFlowに軍配があがります。

しかし、FlutterFlowの方がBubbleよりも複雑な印象であるため、単純にWebだけで良いのであればbubbleの方がスピーディに開発できると思います。今はbubbleもかなり強力なノーコードツールとなっており、実績も豊富ですので、「Webアプリ」の前提であるならbubbleもかなり良いと思います。bubbleの開発実績についてはこちら

ネイティブアプリ化が必要だったり、機能の複雑さやローコード、およびスクラッチへの移行を考えたらFlutterFlowがいいと思います。

bubbleからFlutterFlowへデータ移行もできる！？

bubbleからflutterflowへデータの移行ができるそうです。以下はFlutterFlow公式が出しているbubbleからFlutterFlowへマイグレート（移行）する手順についての動画です。

これは興味深いですね。

ただ見たところちょっと多少無理矢理スプレッドシートなどでデータを加工して入れてる感じだったので、スマートにサクッと移行できるわけじゃないっぽいですね。私は実際に移行を試すところまではできていないので、興味のある方は動画を見てみてください。

FlutterFlow（フラッターフロー）で実現できる機能

では、実際はFlutterFlowでどんな機能が作れるのでしょうか？ もう少し具体的に、FlutterFlowで実現できる機能の一部を紹介したいと思います。

Push通知（プッシュ通知）

ネイティブアプリといえばやはりPush通知（プッシュ通知）でしょう。プッシュ通知がしたいのでWebじゃなくてアプリ化したい、という要望も多いです。
FlutterFlowでは簡単にプッシュ通知機能を作成することができます。

決済機能（マネタイズ：Stripe, Apple, google, paypal）

アプリに決済機能は必要ですよね。FlutterFlowでは以下に対応しています。

• stripe決済（クレカ決済）

• Apple決済

• Google決済

• PayPal決済

クレカ決済について詳しくはこちら
FlutterFlowでstripeでクレカ決済機能を実装してみよう。

RevenueCatでサブスクリプション購入も

RevenueCatとは、モバイルアプリ向けのサブスクリプションプラットフォームで、アプリの課金機能の実装を簡単に提供してくれるものです。

FlutterFlowではRevenueCatと連携しているため、AppleやGoogleのアプリ内課金のサブスクリプション機能も実装可能です。
これでマネタイズの幅が広がりますね。

FlutterFlowのRevenuCat・アプリ内課金/サブスクリプションについて詳しくはこちら
【ノーコード】FlutterFlowでアプリ内課金・サブスクリプションを実装しよう

メール送信（Sendgrid）

もちろんメール送信も可能です。Sendgridなどの外部サービスとAPI連携することで簡単にメール通知が可能です。

FlutterFlowでsendgridを使ったメール送信機能を作ってみよう

地図機能（GoogleMap連携）

地図機能もアプリには欠かせませんよね。FlutterFlowではGoogleMapと連携することで簡単にマップアプリの作成が可能です。

地図機能について詳しくはこちら
FlutterFlowでGoogleMapを使って地図アプリを作ってみよう

Chat機能（チャット機能）

やはり、チャット機能を作れるかは重要ですよね。FlutterFlowでもチャット機能は作れます。あらかじめテンプレートが用意されているので、簡単なチャットであれば数分で構築することもできますし、サクサク動きます。これはありがたい機能ですね。

FlutterFlowのチャット機能について詳しくはこちら↓
【初心者向け】FlutterFlowでチャットアプリを作ってみよう。
【FlutterFlow】LINEみたいなチャットアプリの作り方

カレンダー機能・予約機能

カレンダーから日付を選択して予約する、、、なんて機能はよくあります。ホットペッパービューティのような感じですね。これもflutterflowでは作成可能です。

FlutterFlowのカレンダー機能・予約機能について詳しくはこちら
【FlutterFlow】ノーコードでホットペッパービューティーのような予約アプリを作る方法

QRコード／バーコード読み込み

最近ではQRコード読み込みは馴染み深い機能になっていますよね。FlutterFlowではQRコード読み込みはデフォルトで組み込まれているので簡単に実装が可能です。

FlutterFlowでQRコード/バーコード読み込み機能を実装してみよう。

グラフ機能

flutterflowでは、棒グラフ、折れ線グラフ、そして円グラフが用意されています。

多言語対応

多言語対応することで一つのアプリでマーケットを世界中に広げることができ、サービスの価値を無限に高めてくれる可能性があります。

FlutterFlowの多言語対応は驚くほど簡単でした。是非試してみてください。

FlutterFlowの多言語対応の実装方法について詳しくはこちら
【FlutterFlow】ノーコードで多言語対応を行うアプリをあっという間に作成する方法。

認証系

一通りの認証機能を持ち合わせています。

• メールアドレス認証

• 電話番号認証

• Googleサインイン

• Appleサインイン

• Facebookサインイン

ノーコードとは思えないバリエーションの多さ。十分すぎますね！

FlutterFlowでSNS認証はできるの？Google、Apple、Facebook認証について

アニメーション

ボタンや文字などのウィジェットをフェードイン・アウトさせたりするアニメーションのエフェクトを簡単につけられます。

また、Lottieのアニメーションを入れ込むことも可能です。

こういったアニメーションエフェクトを入れることでアプリのデザイン面が華やかになりますよね。

API連携

外部のAPIと連携することができます。

さまざまなサービスと連携することで可能性が広がります。

AI:ChatGPT連携、Google Gemini

もちろん、API連携ができるのでChatGPTやGoogleのGeminiなどのAIサービスと連携が可能です。また、ChatGPTに関してはFlutterFlowのテンプレートを用意されているので、簡単に連携できます。

アプリをサクッと作れるFlutterFlowとAPIを提供しているAIは非常に相性がよく、あっという間にAIアプリを作れます。

【FlutterFlow】ChatGPTテンプレートを使って5分でAIチャットアプリを作ってみよう。

絵文字のリアクション機能

また、以下のような「いいね」や「ハート」や怒りや悲しみのマークをつけるようなリアクション機能も簡単に実装可能です。

FlutterFlowで絵文字リアクション機能を実装してみた

CSVファイルのダウンロード（エクスポート）機能

FlutterFlowではデフォルトでは画面からCSVダウンロード（エクスポート）する機能はありません。しかし、カスタムWidgetを作り自分でコーディング（ローコード）することで対応ができます。

デフォルトでの機能がなくても自分でローコードで書けばなんとかなるというのは大きいですよね。今はAIもあるのでコーディング自体の手間も格段に下がっているのでFlutterFlowのローコード機能は非常に魅力的です。

FlutterFlowでCSVファイルのダウンロードボタンを作ってみた

PDF生成機能

PDFを生成するような機能もFlutterFlowにはデフォルトではないのですが、まだまだ需要はよくありますよね。FlutterFlowではPDFを生成する外部APIなどを使うことで実現可能です。

以下ブログ記事ではeledoというPDF生成サービスのAPIを用いてFlutterFlowからPDF生成する例を紹介しています。

【FlutterFlow】PDFダウンロード機能を作成：「eledo」のAPIを使ってみよう

Tinder（ティンダー）の様なスワイプできるUIデザイン

Tinderを筆頭に、このスワイプしてLike（いいね）できるUIは小気味良く、魅力的ですよね。
例えば以下のgif画像のように、右に左にスワイプできるようなUIデザインも実現できます。SweapableStackというエレメントを使うことで簡単に実現できます。

Tinder（ティンダー）みたいなUIのマッチング系アプリを安く早く作る方法はこちら

RFID、NFCタグ連携

NFC（Near Field Communication）は、ICカードやスマホ決済に使われる「かざして通信する仕組み」のことです。
数センチ程度まで近づけないと反応しないため、安全性が高く、日常生活に広く浸透しています。

RFID、NFCについてはこちら

FlutterFlowのUI設計をベースにしつつ、Dartで書いたCustom Actionを組み込む形でアプリを構築する方法もあるようです。

NFCを活用したアプリ開発【後編】FlutterFlowでの実装手順とハマりどころ

FlutterFlow 5.0とは？（2024年9月26日追記）

の2024年9月17日にニューヨークで開催されたFFDC（FlutterFlow Developer Conference）。そこでFlutterFlow 5.0が発表され数々の新機能が追加されました。

開発環境の切り替え、トリガーアクション、Widget Builderタイプのパラメータ、ライブラリ機能、ブランチコミット機能、AIツールなど、魅力的な機能が多数追加されました。

詳しくは以下記事をご覧ください。
【FlutterFlow】FlutterFlow 5.0が発表！新機能について共有

AI（ChatGPT、Gemini）との連携は？

今のアプリはAIとの連携が非常に求められていますよね。

FlutterFlowでは外部APIとの連携が簡単にできるので、もちろんChatGPTやGeminiとも連携できます。

ChatGPTと連携した料理レシピAIアプリも簡単に

そのため、ちょっとしたAIアプリもすぐ作れます。以下はChatGPTと連携したアプリで、材料を入れると料理のレシピを提案してくれるアプリです。

ChatGPTアプリとのテンプレートも用意されている

すでにChatGPTとの連携ができるアプリテンプレートも用意されているため、連携部分をゼロから作らなくても良い点も魅力的で非常にありがたいですね。

Geminiとの連携はさらに簡単。APIキーを入れるだけ

Geminiとはもっと連携が簡単です。APIキーを入れて「Gemini AI」のトグルボタンをONにするだけ。これだけでAPI連携の設定しなくてもすぐ使えるようになっちゃいます。

FlutterFlow新機能：GoogleのGemini AIと簡単に連携可能に！APIも不要。

AIを利用した開発：コード、画面、デザインなどをAIが自動生成

前述したのはサービスにAIを組み込む方法ですが、こちらは開発する際にAIによって開発を効率化できる点です。

AIによるコードの自動生成

まずはコードの自動生成です。FlutterFlowはノーコードですがローコードでもあるので一部のコードを書くことでよりパワフルな機能を提供できます。しかし、コードを書くのが苦手な人もいます。

ですが、AIにプロンプトを投げることで簡単なコードは自動生成してくれます。もちろんAIの結果を鵜呑みにすることはよくないですが、叩き台としては十分ですし、ほぼそのまま使えるケースも多々あるため、コーディングフェーズの難易度を格段に下げてくれます。

AIによる画面の自動生成

コードだけではなくUIも自動生成してくれます。デザイナーではない開発者であれば見た目を決めることも一苦労ですよね。FlutterFlowではAIが画面も自動生成してくれます。

例えば、以下のように「Create an events details page for a salsa dancing class（ダンスクラスのイベント詳細ページ作って）」のようなプロンプトを打つと、

以下のような画面がAIによって自動で作られます。素晴らしいですね。

データベースの項目もAIによる自動生成が可能

データベースの項目もプロンプトを入れることでAIが自動生成してくれます。

例えばこんな感じで「generate collections for an airline app with tickets」と入力すると、

以下のようにかなりそれっぽいデータベーススキーマを提案してくれます。

いずれの機能もまだアルファ版ということですが、アルファ版でこの精度なのは末恐ろしいですね。
今後AIの精度が上がるにつれてこれらの精度や守備範囲がより進化していくと思われます。

豊富なテンプレートを紹介

FlutterFlowはテンプレートも豊富です。これらを組み合わせることで開発工数を削減することができます。ここではそれらの一部を紹介したいと思います。

ページのテンプレート

以下のように画面を作成する際にゼロから作るのではなく、多数の画面のテンプレートから選択することができます。

コンポーネントのテンプレートも

ページだけでなくコンポーネントのテンプレートも多数用意されています。

「Flow」から一連の流れのテンプレートをそのまま利用することも

「Flows」というところから以下スクショのように「認証・会員登録の流れ」や「チャットルーム作成〜メッセージ送信の流れ」や「プロフィール登録の流れ」、「サポートチケットの流れ」「Open AI Vision APIを利用する流れ」など、その「フロー」の全画面をそのままテンプレートとして取り込み活用できます。

これによりテンプレートのパターンに合うシステムであれば開発工数がかなり削減されると思います。

また、まだまだ今後もFlutterFlowのテンプレートは増えていくと思うので、より利便性もあがっていくでしょう。

FlutterFlowの学習方法は？

公式サイトやYoutubeで学ぶ

FlutterFlowの学習方法ですが、まずは公式ドキュメントと公式Youtubeがあります。

公式ドキュメント：https://docs.flutterflow.io/

公式Youtube動画：https://www.youtube.com/@FlutterFlow

日本語での解説動画を見る

ただ、公式サイトはすべて英語なので大変だと思う方も多いと思います。

以下は日本人向けに日本語でFlutterFlowでのアプリ開発方法を解説しています。

また、以下の動画は超初心者向けにTODOアプリの作り方を、FlutterFlow公式のTODOアプリ解説動画に沿って日本語で解説してくれています。

https://citrusapp.jp/posts/nocode-flutterflow-todoapp-for-beginner

また、以下ブログ記事にFlutterFlow学習用Youtube動画のリンクをまとめてあるので興味のある方はこちらもどうぞ↓

FlutterFlowの学習方法についてもっと詳しく知りたい方はこちら

FlutterFlowの開発実績紹介

これまで書いてきたとおり、FlutterFlow（フラッターフロー）非常に強力なノーコード・ローコードツールです。今後、より加速的に利用される機会が増えることが予想されます。

では具体的にはどんな実績があるでしょうか？以下に弊社実績を共有します。

【弊社FlutterFlow実績】スキマバイト・マッチングアプリ（求人系アプリ）

【弊社FlutterFlow実績】見守りアプリ（マップ系アプリ）

【弊社FlutterFlow実績】サウナコミュニティアプリ（SNS・コミュニティ系アプリ）

【弊社FlutterFlow実績】サロン検索アプリ（飲食店検索系アプリ）

開発実績について詳しくはこちらをご覧ください。

FlutterFlowの国内開発実績を紹介【ノーコードアプリ・Web開発】

FlutterFlowについては、こちらの記事も合わせてご覧ください。

ローコードFlutterFlowとは？4つの特徴と選ぶべきケース

その他アプリ開発事例はこちら

弊社のその他のノーコード／ローコードアプリ開発事例は以下にまとめてありますのでご覧ください。

【ノーコード】ノーコード開発のアプリ成功事例16選！ツールの選び方も説明します！

FlutterFlow（フラッターフロー）まとめ

今日は10倍速でネイティブアプリを作れるという強力なノーコードツール・FlutterFlow（フラッターフロー）について書いてきました。

まだまだ歴史が短く実績は少ないですが、ものすごいスピードでアップデートされていってるため、今後さらに進化していくことが期待されています。

私も引き続きFlutterFlowの今後に注目していきたいと思っています。

アプリ・Webサービスの開発の無料相談はこちら

FlutterFlow、Adalo、bubble、STUDIOなどのノーコード・ローコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。

弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。

また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。

アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。