【初心者必見】Flutter Flow入門解説!

FlutterFlow

こんにちは、はやぶさです!

今回はプログラミング初心者でも簡単にアプリ開発が可能である

ノーコード開発ツールのFlutter Flowについて学んでいこうと思います!

まず初めに、flutter flowの大枠となる「ノーコード/ローコード開発」について解説します。

この記事はこんな人におすすめ!

  • プログラミング初学者
  • ノーコード/ローコード開発を始めてみたい!
  • 開発アプリを素早く視覚的に確認したい!


ノーコード開発とローコード開発の違いってなに?

はやぶさ
はやぶさ

最近よく聞くけど、そもそも
ノーコード開発、ローコード開発ってなに?

それぞれ何が違うの??
って方も多い思います。

ノーコード開発とローコード開発については、

他の記事で詳しく説明しているので、今回はざっくりとだけ説明します。

ノーコード開発について詳しく知りたい方は下記の記事をご覧ください。

<ノーコード開発をまとめてる記事はこちら>

ノーコード開発

<a href="https://jp.freepik.com/free-vector/afuri-kai-fakonsefutotesain_10115990.htm#fromView=search&page=1&position=0&uuid=7b720d2f-5ead-4fa7-acdb-0e8b0732ceb7">著作者:freepik</a>

ノーコード開発(No-Code)とは、

プログラミングを一切することなくアプリケーションやウェブサイトを作成できる技術のことを指します。ユドラッグ&ドロップのインターフェースを使って、要素を視覚的に配置し、設定や操作を簡単に行えることが特徴であり、技術的なスキルが少ない人でも迅速にプロトタイプや製品を開発することができます。

平たく言うと、

「プログラミングを全くせずにアプリ開発ができるツール」

ってことです!!

ローコード開発

ローコード開発(Low-Code)とは、

プログラミングをほとんどする事なくアプリケーションやウェブサイトを作成できる技術のことを指します。ビジュアルツールによる直感的な作業が可能なだけでなく、プログラミングも使用できるため柔軟なカスタマイズが可能です。

つまり先ほどと比べてこちらは、

「プログラミング開発とノーコード開発のいいとこ取りをしている開発ツール」

ってことです!!

結局ノーコード開発とローコード開発ってなにが違うの??

結局なにが違うのか、それはズバリ

プログラミング言語の使用比率です!!

プログラミングに自信がない人は、

完全ノーコード開発もしくはGUI動作で済む範囲内でローコード開発をすると良いと思います。

プログラミングに自信がある人、

不安だけど勉強してカスタマイズできるようになりたい人は、

ローコード開発をするのが良いと思います。


flutter flowについて

ノーコード/ローコード開発について理解したところで、

本題であるflutter flowの「特徴」、「料金プラン」、「アカウント作成」などについて

詳しく解説していきます!

flutter flowとは

Flutter Flowとは、

Googleが開発したオープンソースのUIフレームワークであるFlutterをベースにしたビジュアル開発ツール(ノーコード/ローコード)です。ノーコード(ローコード)開発ツールであるため、ドラッグ&ドロップ操作で簡単にモバイルアプリやウェブアプリを作成でき、プログラミングの知識が少ない初心者でも直感的に使える設計が特徴です。

大きな特徴

ここで私個人として、flutter flowの特に大きな特徴だと感じるポイントを3つご紹介します。

①GUIでの直感的なアプリ作成

1つめのポイントは「GUIでの直感的なアプリ作成」です。

FlutterFlowはローコードツールであり、GUI上でアプリを作成できるため、コードを書かずに直感的にアプリのUIをデザインできます。FlutterのWidgetを使用する従来の方法と比べて、グラフィックの調整が簡単で、開発の手間を大幅に削減できます。

②クロスプラットフォーム開発

2つめのポイントは「クロスプラットフォーム開発」です。

FlutterFlowはFlutterベースのプロジェクトを生成するので、1つのコードベースでiOS、Android、Web、そしてデスクトップ向けのアプリを開発できちゃいます。これで、以前はiOSとAndroidのために別々に開発する必要がなくなり、開発の手間やコストが大幅に減ります。

③ソースコードのダウンロードと拡張性

最後3つめのポイントは「ソースコードのダウンロードと拡張性」です。

FlutterFlowでは生成されたFlutterベースのソースコードをダウンロードして、ローカルでビルドしながらさらに開発を進められます。チーム開発に移行したり、ツールで実現できない機能を追加したりするのが簡単なんです。これにより、MVP(実用最小限のプロダクト)から本格的な製品に発展させるときに非常に便利です。

FlutterFlowの料金プラン

ここまで紹介してきたflutter flowですが、料金プランによって出来ることに差があります。

以下の表は無料版から有料版(企業向け)の価格と特徴をまとめたものになります。

プラン価格特徴
無料無料基本的なアプリ作成、プロジェクト2つまで、基本的なFirebase統合、制限されたサポート。
スタンダード月額 $30「無料」までの全機能。プロジェクト最大5つ、Firebase統合、API呼び出し、カスタム関数、チャットサポート。
プロ月額 $70「スタンダード」までの全機能。プロジェクト無制限、高度なFirebase機能、API呼び出し、カスタム関数、優先サポート。
チーム月額 $70「プロ」までの全機能。請求情報の管理、共同編集が可能
※同一画面を開くと競合するためどちらか一方のみ利用可。
エンタープライズカスタム価格「プロ」までの全機能。専用サポート、オンボーディング支援、カスタムソリューション。
てっくちゃん
てっくちゃん

どのプランから始めればいいかな?

やっぱり機能たくさんあった方が使いやすいのかな?

はやぶさくん
はやぶさくん

初心者は無料プランで問題ないよ!

いくつかプロジェクトを作成してみて、flutter flowに慣れて来たら有料プランに乗り換えるのがオススメだよ!

月払い/年払い

料金プランには、月払い/年払いがあります!

月払い

年払い

はやぶさくん
はやぶさくん

長期利用が決まっている場合には

年払いがおすすめだね!

まとめ

今回はflutter flowの入門編ということで、

「ノーコード/ローコード開発とは?」

「flutter flowとはなにか?」

をまとめてみました。

はやぶさくん
はやぶさくん

次は「新規アカウント作成」を解説していきます!