- FlutterFlowでアプリを作りたい
- WEBアプリをノーコード開発したい
- FlutterFlowを依頼できる企業は？
はじめまして。FlutterFlowでWEBアプリやネイティブアプリをノーコード開発しているMYOHO Group合同会社です。
弊社ではInstagramとpixiv FANBOXを足したようなアプリ「AiCorner」をFlutterFlowでノーコード開発しました。
今も動いているアプリなので、URLをクリックすればAiCornerを確認できます
本記事ではFlutterFlowで画像共有アプリ「AiCorner」をノーコード開発した時の難易度や気をつけるべきことなどを詳しく解説していきます。
ノーコードで開発した「AiCorner」とは
今回、ノーコード開発したAiCornerは下記のような機能があるパトロン型AI画像投稿＆共有アプリです。
- AI画像の投稿や共有、検索機能
- アカウント作成プロフィール編集機能
- いいねやフォローなどの基本的なSNS機能
- ユーザーがAI画像クリエイターを金銭的に支援できる機能
- 広告表示機能
- 投稿AI画像の編集や削除機能
- 表示言語切り替え機能
- スマホ＆PCへレスポンシブ対応
「AI画像向けパトロンアプリ＆サイト」をテーマに掲げており、他社のパトロン系サイトよりもSNS色が強めな点が特徴的です。
パトロンサイトとは、クリエイターやアーティストがファンやサポーター（パトロン）から直接支援を受けるためのプラットフォームです。ファンは定期的にお金を支払うことで、特典や限定コンテンツにアクセスでき、クリエイターはその資金を活動の継続や制作に活用できます。
AiCornerのトップページは下画像のようになっており、画像投稿＆共有アプリであるInstagramに近い構成になっています。
ただし、Instagramには無いパトロン機能（AiCornerでは「サポートプラン」と表記）を搭載しており、AI画像でクリエイターが収益化できるようになっています。
AI画像クリエイターは一部のAI画像をサポートプラン限定にすることで、サポートプランに加入したユーザーから金銭的な支援を受けられるようになります。
もちろん、サポートプランへ加入しなくても閲覧できる高クオリティのAI画像は多いので、一般的なユーザーも楽しめるアプリになっています。
【FlutterFlow】ノーコード開発の難易度やかかった時間
FlutterFlowのノーコード開発でかかった時間
FlutterFlowを使ったAiCornerのノーコード開発には2人で約15日ほどかかっており、具体的な内容は下記の通りです。
| 日数 | 開発内容 |
|---|---|
| 1〜2日目 | アプリケーションのデザインや機能の企画並びにプランニング |
| 3〜6日目 | アプリケーションのフロント部分をFlutterFlowで開発 |
| 7〜10日目 | アプリケーションのバックエンド処理やカスタムアクションの開発 |
| 11~15日目 | ノーコードツール「Bubble」からデータを移行、微調整 |
元々、AiCornerはノーコード開発ツールであるBubbleで作成されていたので、11日目以降はBubbleからのデータ移行やそれに合わせた微調整がメインになっています。
もし0からアプリケーションを作成する場合は上記の工程が無いため、実際には10日目の段階で完成していたことになります。
プログラマーに依頼する場合は1日あたりの単価は3万円以上になるため、約60万円あれば画像共有アプリを依頼できます。
もしFlutterFlowを使わなかった場合は「WEBアプリ」「iOS向けアプリ」「Android向けアプリ」でそれぞれ開発が必要になり、3倍以上の日数がかかることになります。
当然、日数がかかればかかるだけ必要な費用は増えていくので、WEBアプリとネイティブアプリを一気に開発できるFlutterFlowのメリットは非常に大きいです。
FlutterFlowのノーコード開発は初心者に難しい？
結論から書くと、プログラミング初心者でもFlutterFlowを使えば画像共有アプリは開発できますが、ハードルは高いでしょう。
おそらく、プログラミング初心者が1人でFlutterFlowで画像共有アプリを作ろうとすると、90日以上はかかると考えた方がいいです。
完全にコードで書く場合は1年以上かかるので、それに比べれば難易度は低いですが、完全な初心者には十分高いハードルだと思います。
FlutterFlowで画像共有アプリを作成する際にハードルが高くなる要素としては下記があり、特にFlutterFlowそのものを理解するのにはプログラマーでも時間がかかります。
- FlutterFlowの理解に時間がかかる
- 一部でコードを書く必要がある
- ドメインの設定が必要
- Firebaseの知識が必要になる
- 利用したいAPIを知る必要がある
上記の詳しい内容については次の章で解説していきます。
FlutterFlowのノーコード開発に存在する難点5選
- FlutterFlowの理解に時間がかかる
- 一部でコードを書く必要がある
- ドメインの設定が必要
- Firebaseの知識が必要になる
- 利用したいAPIを知る必要がある
FlutterFlowの理解に時間がかかる
FlutterFlowは他のノーコードアプリ開発ツールよりも習得難易度が高く、仕様や仕組みを理解するのに時間がかかりやすいです。
一度、だいたいの仕様や仕組みを理解してしまえば開発スピードは一気に上がりますが、現職のプログラマーでも1〜2週間ほど使わないと理解できない仕様が目立ちます。
例えば決済機能や為替情報の取得、メール配信システムとの連携などをするときにAPI Callという機能を利用できるのですが、本来はAPIを利用するのも全てコードで書けば問題ありません。
しかし、FlutterFlowでは上画像のように変数を入れるVariablesを作成し、それを直接ドラッグ＆ドロップする仕様になっています。
私たちが初めてFlutterFlowを利用した時は上記の仕様に全く気づかなかったため、普通に変数をコードで書いていました…
FlutterFlowには上記のような独特な仕様が存在しており、公式のドキュメントをしっかり確認しなければ分からない箇所が目立ちます。
とは言え、FlutterFlowのドキュメントは1000ページ以上存在するため、初めて利用する際はFlutterFlowそのものの理解へ時間がかかりやすいです。
FlutterFlowの仕様や使い方を解説している記事は少ないので、公式ドキュメントが1番頼りになります
一部でコードを書く必要がある
FlutterFlowはノーコードツールですが、バックエンド側の処理は既存のウィジェットではほとんど対応できないので、一部でコードを書く必要があります。
バックエンドする処理の一部をフロントエンドに任せることも可能ですが、その場合でもコードを書く必要があります
例えば下記はある特定の時刻が現在の時刻よりも○分以上経っているかどうかをチェックするコードであり、これを使うことで投稿された画像をフィルタリングしやすくしています。
もちろん、上記のコードがなくても画像共有アプリは制作できますが、自身が望むアプリのイメージからは離れていくでしょう。
ただし、FlutterFlowでは生成AIにコードの生成を任せられるため、簡単な処理であればプログラミング知識0でもAIがなんとかしてくれます。
複雑なコードは生成が難しいみたいで、コードが生成されませんでした
実はノーコードツールのBubbleであればバックエンド側の処理もある程度はノーコードで作れるので、FlutterFlowの方が開発の難易度は高いでしょう。
ドメインの設定が必要になる
FlutterFlowはプログラミング知識0でもアプリを作成できますが、作成したアプリに独自のドメインを設定したい場合は少しだけ知識が必要です。
ドメインは下記のようにサイトのURLに使われている文字列です。
「myoho-g.co.jp」
小規模なネイティブアプリを作成するだけであれば独自ドメインを設定しなくてもいいかもしれませんが、AiCornerのようにWEBアプリも公開する場合は独自ドメインがほぼ必須です。
FlutterFlowの公式ドキュメントを見れば設定方法は分かるものの、そもそも独自ドメインを購入してDNSレコードの設定をする必要があります。
上記の作業は慣れてしまえば簡単ですが、アプリ開発未経験者にとってはハードルが高いかもしれません。
Firebaseの知識が必要になる
FlutterFlowはほぼフロントエンドの開発にしか使えないため、データベースやバックエンドの処理はFirebaseで行う必要があります。
Firebaseには「投稿された画像や登録ユーザーなどのデータ管理」「サーバー側で処理しなければプログラムの実行」などの役割があり、FlutterFlowには必須のツールです
Firebaseもローコードで使えるサービスなのでプログラミング初心者に優しいですが、やはり最初の学習や理解に時間がかかります。
しかも、Firebaseの操作は基本的にコマンドプロンプトやターミナルで行うため、プログラミング初心者にとっては難易度が高いでしょう。
Firebaseを使うためのプログラミングは比較的簡単ですが、サーバー側で処理したいプログラムなどは0から書く必要があるので知識や経験が必要になりやすいです。
AiCornerだとモザイク画像を生成するためのプログラムをFirebaseのクラウドファンクションで動かしているので、がっつりコードを書いています。
メモ帳アプリやリマインダーアプリくらいであればFirebaseの機能をほとんど使わずに済みますが、InstagramやYouTubeのような高機能アプリを目標にしている場合はFirebaseの知識をつけておくと良いでしょう。
利用したいAPIを知る必要がある
もしFlutterFlowで決済機能などを搭載したアプリを作る場合、決済代行サービスであるStripeやPayPalなどのAPiを組み込む必要があります。
APIの設定自体はほぼノーコードで可能なものの、決済系のAPIは認証トークンをプログラムで生成しなければいけないモノが多いです。
プログラミング初心者にとってはAPIそのもものハードルが高いかもしれません
つまり、APIを導入すること自体にハードルがある上で、認証トークンを生成するためのプログラムコードを書く必要があります。
上記のコードは導入したいAPIによって異なるため、プログラミング初心者にとっては難易度が高いでしょう。
【FlutterFlow】ノーコード開発を依頼したい方はこちら
MYOHO Group合同会社ではFlutterFlowを活用したノーコードアプリ開発を行っており、企業や個人からの委託開発にも対応しております。下記の3つのサービスがありますので、FlutterFlowを活用したアプリ開発に興味がある場合はお問い合わせください。
iOS/Android/Webアプリ開発サービス
アプリのデザインや機能などを打ち合わせした後、制作～納品を弊社に依頼いただくサービスです。FlutterFlowを活用することで高速かつ安価で高クオリティのアプリケーションを作成いたします。
FlutterFlow共同アプリ開発サービス
デザインからコード書き出しまで弊社エンジニアと共同で作業できるサービスです。データベースの構築方法やノーコードツールの利用方法など、制作過程を丁寧にお伝えし、一緒に開発を行います。
FlutterFlowお悩み相談サポートサービス
FlutterFlowに関するお悩みへ弊社のエンジニアがお答えするサービスです。メールまたはオンラインミ゙ーティングへ対応しているため、お客様のご都合に合わせた方法でお悩みをご相談できます。
