ノーコードでアプリを開発する場合、Adalo(アダロ)がとても便利です。ノーコードのAdalo(アダロ)は簡単にアプリを作れる便利なツールですが、機能的な制約も多いというデメリットもありました。しかし、最近FlutterFlow(フラッターフロー)というノーコードツールが出てきました。FlutterFlow(フラッターフロー)であれば、かなりスクラッチに近いレベルの機能を持ったネイティブアプリをノーコードで(プログラミングなしで)開発できます。ちなみに「Flutter」と「FlutterFlow」は違います。「Flow」がついてる「Flutter Flow」の方がノーコードツールで、Flutterは元々あるネイティブアプリをプログラミングして作れるモバイルアプリフレームワークです。Flutter Flowとはどういうノーコードツールなのでしょうか?今日はFlutterFlowについて解説していきたいと思います。FlutterFlow(フラッターフロー)とは?FlutterFlowはノーコードでアプリを簡単に作れるツールFlutterFlow(フラッターフロー)とは、ネイティブのクロスプラットフォームアプリケーションを作成できる、オンラインのブラウザベースのアプリビルダーです。と、紹介されていたりしますが、難しいので平たく言うと、「アプリをプログラミングなしで開発できるツール」です。いわゆるノーコード(No Code。プログラミングしないでできるという意味)ツールですね。ノーコードなので、開発スピードを圧倒的に高速化することができます。その上、iOSアプリもAndroidアプリも同時に作れる優れものです。開発スピードは、なんと従来の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はノーコードというよりローコードという方が正しいかもしれません。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プランの4段階ですね。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」を使って機能拡張していく、、、ということも可能になります。バックエンドはFirebaseFirebaseとはGoogleが提供しているアプリのバックエンドを簡易的に作成できるサービスです。FlutterFlowはこのFirebaseを基盤にして動いています。認証(ログイン・会員登録)周りはFirebase Authentification、データベースはFirebaseのFirestore。また、ストレージやプッシュ通知機能などもFirebase経由で利用が可能になっています。データベースはSupabase(スパベース)も利用可能基本はfirebaseのfirestoreを利用できますが、最近supabaseへの対応もできるようになりました。supabaseはオープンソースのFirebase代替として最近注目を集めているBaaSで、PostgreSQLデータベースをベースにしています。RDBの方が使いやすい場合などにはSupabaseとの連携が有効かもしれないですし、Firebase以外にデータベースの選択肢があるのは嬉しいですね。FlutterFlowは機能の進化・アップデートのスピードが凄まじいノーコードの世界はどんどん成長中なので、ブログや本に書いた内容があっという間に古くなる、、、ということはよくあります。そんなノーコードの世界の中でも、FlutterFlowは特に進化のスピードが速いです。一時は毎週新しい機能がいつの間にか追加されている、、、というようなスピード感でキャッチアップが追いつかない、なんてこともよくあります。この進化・アップデートスピードがFlutterFlowの期待できる点であり信頼できる点ですね。このペースで進化を続けてくれていれば他のツールでは追いつけない最強のノーコード/ローコードツールになるのではないでしょうか。ノーコード比較:FlutterFlowとAdaloとの違いは?ネイティブアプリが得意なノーコードツールに、Adalo(アダロ)があります。ここではノーコードAdaloとの比較をしてみましょう。ノーコードAdalo(アダロ)の特徴Adaloは圧倒的に高速でアプリを開発できるノーコードツールです。他のノーコードツールと比較しても圧倒的にスピードが速いです。1週間〜2週間で作成してしまうことも可能です。もちろんFlutterFlowと同様に、iOS、Andoridのネイティブアプリを作れますし、Webアプリも作れてレスポンシブ対応も可能です。ネイティブアプリとして当然欲しい、Push通知(プッシュ通知)、MAP(地図)機能、外部APIとの連携もできます。ですが、低コスト・ハイスピードで開発できる分、やはり機能できに実現できることに制限は多いです。また。スクラッチ開発と比較するとサクサク感はなく、やや重く感じるかもしれません。目的として、プロトタイプ・ベータ版としてMVPを素早く実行したい、という目的ならば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としてだけではなく継続して使えるくらいの品質を保てるのも強みです。bubbleと比較した場合のflutterflowbubbleと比較した場合、やはりflutterflowの強みはWebだけではなくアプリもつくれるところです。基本的にはbubbleはWeb用のノーコードツールなので、アプリを作るとなったらやはりFlutterFlowとなります。また、bubbleはFlutterFlowのようにローコードとして一部プログラミングしたり、ソースコードをダウンロードしてスクラッチ開発に移行したりできないため、長期的な拡張性を考えたり、複雑なアプリを作る必要がある場合はFlutterFlowに軍配があがります。しかし、FlutterFlowの方がBubbleよりも複雑な印象であるため、単純にWebだけで良いのであればbubbleの方がスピーディに開発できると思います。なんと、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まずはWebでbubbleで作ってMVPを試し、アプリ化するために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でアプリ内課金・サブスクリプションを実装しよう地図機能(GoogleMap連携)地図機能もアプリには欠かせませんよね。FlutterFlowではGoogleMapと連携することで簡単にマップアプリの作成が可能です。地図機能について詳しくはこちらFlutterFlowでGoogleMapを使って地図アプリを作ってみようChat機能(チャット機能)やはり、チャット機能を作れるかは重要ですよね。FlutterFlowでもチャット機能は作れます。あらかじめテンプレートが用意されているので、簡単なチャットであれば数分で構築することもできますし、サクサク動きます。これはありがたい機能ですね。FlutterFlowのチャット機能について詳しくはこちら【初心者向け】FlutterFlowでチャットアプリを作ってみよう。カレンダー機能・予約機能カレンダーから日付を選択して予約する、、、なんて機能はよくあります。ホットペッパービューティのような感じですね。これも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と連携することができます。さまざまなサービスと連携することで可能性が広がります。ChatGPT連携もちろん、API連携ができるのでChatGPTなどのAIサービスと連携が可能です。また、ChatGPTに関してはFlutterFlowのテンプレートを用意されているので、簡単に連携できます。アプリをサクッと作れるFlutterFlowとAPIを提供しているAIは非常に相性がよく、あっという間にAIアプリを作れます。【FlutterFlow】ChatGPTテンプレートを使って5分でAIチャットアプリを作ってみよう。絵文字のリアクション機能また、以下のような「いいね」や「ハート」や怒りや悲しみのマークをつけるようなリアクション機能も簡単に実装可能です。FlutterFlowで絵文字リアクション機能を実装してみたFlutterFlow(フラッターフロー)まとめ今日は10倍速でネイティブアプリを作れるという強力なノーコードツール・FlutterFlow(フラッターフロー)について書いてきました。まだまだ歴史が短く実績は少ないですが、ものすごいスピードでアップデートされていってるため、今後さらに進化していくことが期待されています。私も引き続きFlutterFlowの今後に注目していきたいと思っています。アプリ・Webサービスの開発の無料相談はこちらAdalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。