FlutterFlowで作るWebアプリ！注意点や開発事例をプロが解説

FlutterFlowは、ローコード・ノーコードの開発ツールとして人気を集めています。

特にWebアプリの開発において、その多くの機能と柔軟性が注目されていますが、実際にWebアプリの開発を進めるときにそのプロジェクトがFlutterFlowを使うことが最適なのか、他のノーコードツールを使うべきか悩むこともありますよね。

本記事では、日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社である弊社が、FlutterFlowの特徴や開発の注意点を他のノーコードツールと比較しながら、実際の事例と合わせて解説します！

FlutterFlowの特徴３つ｜他のノーコードと比較

FlutterFlowは、ローコード要素があるノーコードツールで、様々な機能があり柔軟性が高い注目の開発ツールです！

ここでは、FlutterFlowの主な特徴を他のノーコードツールと比較しながら、3点解説します。

1. 複雑なロジックに対応できる

FlutterFlowは完全にコーディングゼロのノーコードではなく、コーディングも掛け合わせられるローコードツールです。そのため、他のノーコードツールに比べて非常に柔軟性が高く、他のノーコードツールでは実現が難しい複雑なロジックにも対応が可能です。

他のノーコードツール（例: BubbleやAdalo）では、シンプルなアプリや基本的な機能の実装はスムーズに行えますが、複雑なロジックやカスタム機能の実装には限界があり、複雑なロジックを必要とする場合は、FlutterFlowの使用が最適です。

2. Flutterのソースコードが確認できる

FlutterFlowでは、作成したアプリのFlutterのソースコードを確認・ダウンロードできます。これにより、ノーコードで開発を進めた後、スクラッチ開発への移行がしやすくなります。

また、ノーコードでは実装が難しい複雑な機能やカスタマイズが必要になった場合も、コーディングを行うことができるため、開発の柔軟性が非常に高くなります。これにより、長期的なアプリの拡張や機能追加が効率的に行うことができます。

他のノーコードツールではソースコードを確認することができないため、Flutterのソースコードが確認できるのはFlutterFlowの大きな特徴と言えます。

3. 他のノーコードツールより開発費用が高い傾向

FlutterFlowは、機能の多さやカスタマイズ性の高さから、他のノーコードツールに比べて開発費用が高くなる傾向があります。特にコーディングを用いた機能の実装やソースコードへのフルアクセス、複雑なUIのカスタマイズが必要なプロジェクトでは、開発リソースが増加するため、費用も高くなることが多いです。実例としては、Bubbleで300万円ほどのプロジェクトがFlutterFlowでは約800万円になる、といった差額が出ることがあります。

Webアプリ開発にFlutterFlowを選ぶべきケース

前提としてWebアプリ開発においてBubbleが圧倒的に強く、ノーコードでも多くのニーズをカバーしているためBubbleで高度なWebアプリを作成することが可能です。

しかし、状況によってFlutterFlowを選んだ方が良い場合があります。以下が、FlutterFlowを選ぶべきケースとなります。

複雑なアプリを作りたい時

複雑なアプリを開発する際には、FlutterFlowのようなローコードツールが適しています。FlutterFlowはコードを直接操作できるため、柔軟性が高く、複雑なロジックにも対応できます。ただし、多くの場合、Bubbleでも十分に対応可能であるため、プロジェクトの要件に応じて選ぶことが重要です。

同時にネイティブアプリを開発したい時

FlutterFlowは、ネイティブアプリとWebアプリのどちらも開発できるツールです。同じように、ネイティブアプリとWebアプリのどちらも開発できるツールであるAdaloはシンプルな機能の開発に特化しており、複雑なアプリには対応が難しい場合があります。そのため複雑なネイティブアプリも同時に開発したい場合は、FlutterFlowの利用がオススメです。

FlutterFlow以外を選ぶべきケース

とにかくコストを抑えたい時

FlutterFlowは複雑なロジックに対応することができるツールですが、その多機能さやエンジニアの教育費用の高さから、開発費用が高価になりやすい点があります。

そのため、開発が比較的シンプルなものでコストを抑えたい場合はAdaloやBubbleの方が適しています。開発スピードもこれらのツールの方が速く、開発スピードが上がれば、その分人件費を削減できるため、結果的にコストも抑えられます。

複雑すぎないアプリを作る時

複雑なコードが必要ない場合、AdaloやBubbleといった他のツールのほうがFlutterFlowよりも安価で早い開発が可能です。FlutterFlowはコードを操作できる強みを持ちますが、シンプルなアプリの開発には他のツールが適している場合があります。

一度開発会社に相談し、他のツールでも対応可能であれば、開発費用を抑えられる他のツールを選びましょう。

FlutterFlowでWebアプリを作るときの注意点

1. ロード速度が遅め

FlutterFlowで作成したWebアプリは、他のツールに比べてロード速度が遅くなることがあります。ページ遷移を行わずにページやコンテンツを切り替えるSPA（シングルページアプリケーション）のため、ページに表示する要素を初期ロード時に取得するのでビルドファイルが大きいほどロード速度が遅くなります。

2. SEO対策は難しい

FlutterFlowで開発したアプリはSEO対策が未対応です。そのためWebコンテンツでSEO対策を行いたい場合は、Webアプリとは別で、flutter.dev、dart.dev、pub.devと同様に、HTML を使用することが推奨されています。

”静的またはドキュメントのような Web コンテンツの場合は、flutter.dev、dart.dev、pub.devと同様に、HTML を使用することをお勧めします。

また、Flutter で作成された主要なアプリケーション エクスペリエンスを、検索エンジンに最適化された HTML を使用して作成されたランディング ページ、マーケティング コンテンツ、ヘルプ コンテンツから分離することを検討する必要があります。”

FlutterウェブFAQ

3. Webアプリで一般的なAWSが指定できない

Webアプリ開発においては、AWSを利用することが一般的ですが、FlutterFlowではAWSを指定できず、Firebaseが主なバックエンドサービスとして使用されます。

Firebaseは、リアルタイムデータベースや認証機能に特化している一方で、AWSのような幅広いサービスを活用できず制限が生じる場合があります。

4. 開発難易度が高い

FlutterFlowは機能が豊富である反面、UIが複雑なため使いこなすのに時間がかかります。

シンプルなアプリを開発したい場合は、AdaloやBubbleの方が扱いやすく、難易度が低いです。

FlutterFlowで作られたWebアプリの開発事例

1. OSHI UP!（推しアップ）

OshiUP! 推しアップ

「推しアップ」は推し活をサポートするアプリです。

オリジナルの推し専用マイページや推しの情報共有が可能な掲示板など推し活をサポートする多くの機能があります。

「推しアップ」には下記のような機能があります。

2.サウナカマ

サウナカマ

「サウナカマ」は、サウナ好きのためのコミュニティアプリです。

「サウナカマ」を使うことで、サウナが好きなパートナーを見つけたり一緒にサウナに行く人を探すことが可能です。

「サウナカマ」には下記のような機能があります。

3. Totoy AI

Totoy AI

「Totoy AI」は、多言語対応のドキュメント解説アプリです。

アップロードした画像やドキュメントについて、多言語で説明を受けたり質問をすることが可能です。

「Totoy AI」には下記のような機能があります。