こんにちは。近年、ノーコード／ローコードでのアプリ開発・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はノーコード・ローコードではなく、ビジュアル開発環境だと説明してくれてるので興味がある方はぜひ。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FRcot3MYZh_g%3Fsi%3D9yQ6GZPuysR_lCU1%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3EFlutterFlowの開発スピードは、なんと従来の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の利用料プランは、無料プラン、Standardプラン、Proプラン、Teamsプランの４段階ですね。Standardプランだと月額30ドルで、Proプランだと70ドルです。TeamsプランはProプランをベースに複数人で開発する場合の金額のようですね。1人増えるごとに70ドル追加、、、という感じのようです。となると、1人で開発してサービスとしてリリースする、という前提でいけば、Proプラン（月額70ドル）で良いと言うことになります。年間契約すると25%もお得！また、上記を見て貰えばわかるように、年間契約にすることで25%も割引されます。月額70ドルのProプランが月額50ドルになります...！これ結構安いですよね！これだけの高機能を備えてて50ドル/月って、すごく安いな...って思っちゃったので、筆者は即買いでした笑もちろん、まずは無料版を試したい、という人の方が多いと思うので、以下に無料版について書いてみました。FlutterFlow：無料版でどこまでできる？まず試してみたい、勉強したい、という方は当面無料プランで全く問題なさそうです。こちらのサイトに詳しくありますが、FlutterFlowでは無料版でも一通りの機能が利用できます。ただ、無料版の場合は、コードのダウンロードやAPKファイルのダウンロードができない、ストア申請できない、APIの制限、Githubと連携できないなどの制約があります。とはいえ、まず勉強してみたい、アプリを作り始めたい、という段階であればまずは無料で試してみて、本格的な開発が見えてきてから有料化、という流れでも全く問題なさそうですね。まずは無料版で試してみましょう！他のノーコードツールとの比較他のノーコードツールと比較すると以下のような感じです。Adalo（Proプラン 月額52ドル）bubble（Personalプラン 月額25ドル）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の新機能）バックエンドはFirebaseFirebaseとは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が使えるようになったので試してみた。%3Cdiv%20class%3D%22height-adjuster%22%20style%3D%22border%3A%200px%3B%20font-family%3A%20sans-serif%3B%20line-height%3A%201%3B%20list-style%3A%20none%3B%20margin%3A%200px%3B%20padding%3A%200px%3B%20text-decoration%3A%20none%3B%20-webkit-font-smoothing%3A%20antialiased%3B%20backface-visibility%3A%20hidden%3B%20box-sizing%3A%20border-box%3B%20color%3A%20rgb(51%2C%2051%2C%2051)%3B%20transition%3A%200.3s%20cubic-bezier(0.4%2C%200.4%2C%200%2C%201)%2C%20--g-angle%2C%20--g-color-0%2C%20--g-position-0%2C%20--g-color-1%2C%20--g-position-1%2C%20--g-color-2%2C%20--g-position-2%2C%20--g-color-3%2C%20--g-position-3%2C%20--g-color-4%2C%20--g-position-4%2C%20--g-color-5%2C%20--g-position-5%2C%20--g-color-6%2C%20--g-position-6%2C%20--g-color-7%2C%20--g-position-7%2C%20--g-color-8%2C%20--g-position-8%2C%20--g-color-9%2C%20--g-position-9%2C%20--g-color-10%2C%20--g-position-10%2C%20--g-color-11%2C%20--g-position-11%3B%20word-spacing%3A%201px%3B%20display%3A%20block%3B%20max-width%3A%20560px%3B%22%3E%3Cdiv%20class%3D%22wrapper%22%20style%3D%22border%3A%200px%3B%20font-family%3A%20sans-serif%3B%20line-height%3A%201%3B%20list-style%3A%20none%3B%20margin%3A%200px%3B%20padding%3A%20315px%200px%200px%3B%20text-decoration%3A%20none%3B%20-webkit-font-smoothing%3A%20antialiased%3B%20backface-visibility%3A%20hidden%3B%20box-sizing%3A%20border-box%3B%20color%3A%20rgb(51%2C%2051%2C%2051)%3B%20transition%3A%200.3s%20cubic-bezier(0.4%2C%200.4%2C%200%2C%201)%2C%20--g-angle%2C%20--g-color-0%2C%20--g-position-0%2C%20--g-color-1%2C%20--g-position-1%2C%20--g-color-2%2C%20--g-position-2%2C%20--g-color-3%2C%20--g-position-3%2C%20--g-color-4%2C%20--g-position-4%2C%20--g-color-5%2C%20--g-position-5%2C%20--g-color-6%2C%20--g-position-6%2C%20--g-color-7%2C%20--g-position-7%2C%20--g-color-8%2C%20--g-position-8%2C%20--g-color-9%2C%20--g-position-9%2C%20--g-color-10%2C%20--g-position-10%2C%20--g-color-11%2C%20--g-position-11%3B%20word-spacing%3A%201px%3B%20position%3A%20relative%3B%22%3E%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FdJw-iRgHh8o%3Fsi%3DebX6mwJq9KJH1VIG%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3D%22%22%20loading%3D%22lazy%22%20style%3D%22border%3A%200px%3B%20font-family%3A%20sans-serif%3B%20line-height%3A%201%3B%20list-style%3A%20none%3B%20margin%3A%200px%3B%20padding%3A%200px%3B%20text-decoration%3A%20none%3B%20-webkit-font-smoothing%3A%20antialiased%3B%20backface-visibility%3A%20hidden%3B%20box-sizing%3A%20border-box%3B%20color%3A%20rgb(51%2C%2051%2C%2051)%3B%20transition%3A%200.3s%20cubic-bezier(0.4%2C%200.4%2C%200%2C%201)%2C%20--g-angle%2C%20--g-color-0%2C%20--g-position-0%2C%20--g-color-1%2C%20--g-position-1%2C%20--g-color-2%2C%20--g-position-2%2C%20--g-color-3%2C%20--g-position-3%2C%20--g-color-4%2C%20--g-position-4%2C%20--g-color-5%2C%20--g-position-5%2C%20--g-color-6%2C%20--g-position-6%2C%20--g-color-7%2C%20--g-position-7%2C%20--g-color-8%2C%20--g-position-8%2C%20--g-color-9%2C%20--g-position-9%2C%20--g-color-10%2C%20--g-position-10%2C%20--g-color-11%2C%20--g-position-11%3B%20word-spacing%3A%201px%3B%20height%3A%20315px%3B%20left%3A%200px%3B%20position%3A%20absolute%3B%20top%3A%200px%3B%20width%3A%20560px%3B%22%3E%3C%2Fiframe%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cdiv%20class%3D%22height-adjuster%22%20style%3D%22border%3A%200px%3B%20font-family%3A%20sans-serif%3B%20line-height%3A%201%3B%20list-style%3A%20none%3B%20margin%3A%200px%3B%20padding%3A%200px%3B%20text-decoration%3A%20none%3B%20-webkit-font-smoothing%3A%20antialiased%3B%20backface-visibility%3A%20hidden%3B%20box-sizing%3A%20border-box%3B%20color%3A%20rgb(51%2C%2051%2C%2051)%3B%20transition%3A%200.3s%20cubic-bezier(0.4%2C%200.4%2C%200%2C%201)%2C%20--g-angle%2C%20--g-color-0%2C%20--g-position-0%2C%20--g-color-1%2C%20--g-position-1%2C%20--g-color-2%2C%20--g-position-2%2C%20--g-color-3%2C%20--g-position-3%2C%20--g-color-4%2C%20--g-position-4%2C%20--g-color-5%2C%20--g-position-5%2C%20--g-color-6%2C%20--g-position-6%2C%20--g-color-7%2C%20--g-position-7%2C%20--g-color-8%2C%20--g-position-8%2C%20--g-color-9%2C%20--g-position-9%2C%20--g-color-10%2C%20--g-position-10%2C%20--g-color-11%2C%20--g-position-11%3B%20word-spacing%3A%201px%3B%20display%3A%20block%3B%20max-width%3A%20560px%3B%22%3E%3Cdiv%20class%3D%22wrapper%22%20style%3D%22border%3A%200px%3B%20font-family%3A%20sans-serif%3B%20line-height%3A%201%3B%20list-style%3A%20none%3B%20margin%3A%200px%3B%20padding%3A%20315px%200px%200px%3B%20text-decoration%3A%20none%3B%20-webkit-font-smoothing%3A%20antialiased%3B%20backface-visibility%3A%20hidden%3B%20box-sizing%3A%20border-box%3B%20color%3A%20rgb(51%2C%2051%2C%2051)%3B%20transition%3A%200.3s%20cubic-bezier(0.4%2C%200.4%2C%200%2C%201)%2C%20--g-angle%2C%20--g-color-0%2C%20--g-position-0%2C%20--g-color-1%2C%20--g-position-1%2C%20--g-color-2%2C%20--g-position-2%2C%20--g-color-3%2C%20--g-position-3%2C%20--g-color-4%2C%20--g-position-4%2C%20--g-color-5%2C%20--g-position-5%2C%20--g-color-6%2C%20--g-position-6%2C%20--g-color-7%2C%20--g-position-7%2C%20--g-color-8%2C%20--g-position-8%2C%20--g-color-9%2C%20--g-position-9%2C%20--g-color-10%2C%20--g-position-10%2C%20--g-color-11%2C%20--g-position-11%3B%20word-spacing%3A%201px%3B%20position%3A%20relative%3B%22%3E%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FYsWSdNah7TU%3Fsi%3DXsxMZz7r3MnElsiS%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3D%22%22%20loading%3D%22lazy%22%20style%3D%22border%3A%200px%3B%20font-family%3A%20sans-serif%3B%20line-height%3A%201%3B%20list-style%3A%20none%3B%20margin%3A%200px%3B%20padding%3A%200px%3B%20text-decoration%3A%20none%3B%20-webkit-font-smoothing%3A%20antialiased%3B%20backface-visibility%3A%20hidden%3B%20box-sizing%3A%20border-box%3B%20color%3A%20rgb(51%2C%2051%2C%2051)%3B%20transition%3A%200.3s%20cubic-bezier(0.4%2C%200.4%2C%200%2C%201)%2C%20--g-angle%2C%20--g-color-0%2C%20--g-position-0%2C%20--g-color-1%2C%20--g-position-1%2C%20--g-color-2%2C%20--g-position-2%2C%20--g-color-3%2C%20--g-position-3%2C%20--g-color-4%2C%20--g-position-4%2C%20--g-color-5%2C%20--g-position-5%2C%20--g-color-6%2C%20--g-position-6%2C%20--g-color-7%2C%20--g-position-7%2C%20--g-color-8%2C%20--g-position-8%2C%20--g-color-9%2C%20--g-position-9%2C%20--g-color-10%2C%20--g-position-10%2C%20--g-color-11%2C%20--g-position-11%3B%20word-spacing%3A%201px%3B%20height%3A%20315px%3B%20left%3A%200px%3B%20position%3A%20absolute%3B%20top%3A%200px%3B%20width%3A%20560px%3B%22%3E%3C%2Fiframe%3E%3C%2Fdiv%3E%3C%2Fdiv%3EFlutterFlowは機能の進化・アップデートのスピードが凄まじいノーコードの世界はどんどん成長中なので、ブログや本に書いた内容があっという間に古くなる、、、ということはよくあります。そんなノーコードの世界の中でも、FlutterFlowは特に進化のスピードが速いです。一時は毎週新しい機能がいつの間にか追加されている、、、というようなスピード感でキャッチアップが追いつかない、なんてこともよくあります。この進化・アップデートスピードがFlutterFlowの期待できる点であり信頼できる点ですね。このペースで進化を続けてくれていれば他のツールでは追いつけない最強のノーコード/ローコードツールになるのではないでしょうか。ノーコード比較：FlutterFlowとAdaloとの違いは？ネイティブアプリが得意なノーコードツールに、Adalo（アダロ）があります。ここではノーコードAdaloとの比較をしてみましょう。ノーコードAdalo（アダロ）の特徴Adaloは圧倒的に高速でアプリを開発できるノーコードツールです。他のノーコードツールと比較しても圧倒的にスピードが速いです。1週間〜2週間で作成してしまうことも可能です。もちろんFlutterFlowと同様に、iOS、Andoridのネイティブアプリを作れますし、Webアプリも作れてレスポンシブ対応も可能です。ネイティブアプリとして当然欲しい、Push通知（プッシュ通知）、MAP（地図）機能、外部APIとの連携もできます。ですが、低コスト・ハイスピードで開発できる分、やはり機能的に実現できることに制限は多いです。また。スクラッチ開発と比較するとサクサク感はなく、やや重く感じるかもしれません。目的として、プロトタイプ・ベータ版としてMVPを素早く実行したい、という目的ならばAdaloはベストフィットすると思います。【ノーコードAdalo】ネイティブアプリを簡単に作れる「Adalo（アダロ）」を徹底解説！Adaloと比較した場合のFlutterFlowFlutterFlowは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と比較した場合のflutterflowbubbleと比較した場合、やはりflutterflowの強みはWebだけではなくアプリもつくれるところです。基本的にはbubbleはWeb用のノーコードツールなので、アプリを作るとなったらやはりFlutterFlowとなります。また、bubbleはFlutterFlowのようにローコードとして一部プログラミングしたり、ソースコードをダウンロードしてスクラッチ開発に移行したりできないため、長期的な拡張性を考えたり、複雑なアプリを作る必要がある場合はFlutterFlowに軍配があがります。しかし、FlutterFlowの方がBubbleよりも複雑な印象であるため、単純にWebだけで良いのであればbubbleの方がスピーディに開発できると思います。今はbubbleもかなり強力なノーコードツールとなっており、実績も豊富ですので、「Webアプリ」の前提であるならbubbleもかなり良いと思います。bubbleの開発実績についてはこちらネイティブアプリ化が必要だったり、機能の複雑さやローコード、およびスクラッチへの移行を考えたらFlutterFlowがいいと思います。bubbleからFlutterFlowへデータ移行もできる！？bubbleからflutterflowへデータの移行ができるそうです。以下はFlutterFlow公式が出しているbubbleからFlutterFlowへマイグレート（移行）する手順についての動画です。これは興味深いですね。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FYrshuxPEjZI%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3Eただ見たところちょっと多少無理矢理スプレッドシートなどでデータを加工して入れてる感じだったので、スマートにサクッと移行できるわけじゃないっぽいですね。私は実際に移行を試すところまではできていないので、興味のある方は動画を見てみてください。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のアニメーションを入れ込むことも可能です。こういったアニメーションエフェクトを入れることでアプリのデザイン面が華やかになりますよね。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2F9DZs-jiODHQ%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3EAPI連携外部の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のマッチング系アプリを安く早く作る方法はこちら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と連携したアプリで、材料を入れると料理のレシピを提案してくれるアプリです。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FKPgfDiNihe8%3Fsi%3DxiN1Kw7sjrpsr8x4%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3EChatGPTアプリとのテンプレートも用意されているすでに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でのアプリ開発方法を解説しています。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2F2ow1pEjSZzE%3Fsi%3D2FcuISpYOGA_M9GW%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3Eまた、以下の動画は超初心者向けにTODOアプリの作り方を、FlutterFlow公式のTODOアプリ解説動画に沿って日本語で解説してくれています。https://citrusapp.jp/posts/nocode-flutterflow-todoapp-for-beginner%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FRHhIpkzpnIM%3Fsi%3DsrpB-01MbrFraNFh%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3Eまた、以下ブログ記事に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などの構築に興味のある方は、こちらからご気軽にご相談ください。