英語圏では比較的話題になっているものの日本ではあまり知られていないだろうノーコードツールをご紹介します。もちろん日本でも利用可能。日本国内では Adalo, Glide, Bubble, FlutterFlow, Webflow, , Airtable, Integromat(make)あたりが有名ですが、それ以外にも新進気鋭で優秀なノーコードツールが海外では多く出てきています。 本記事では、日本では知られていないけれど海外では有名、脚光を浴びつつあるノーコードツールを厳選して複数ご紹介します。
日本国内でも有名なノーコードツールは No-Code のお役立ち記事一覧 | 魔法使いのWebマーケティング でご紹介しています。
またLPやWebページ制作について、AIとノーコードの組み合わせなどについて AI活用による最新LP・ランディングページ制作ツール3選 の記事でご紹介しています。
目次:
- ソースコード含め全てエクスポート可。React NativeベースでモバイルアプリをNoCode開発。”draftbit”
- モバイルアプリ開発ローコードツール”draftbit”の特徴
- DraftbitとFlutterFlowの大きな違い3点
- Draftbit vs. FlutterFlowの比較表
- 1: draftbitはReact Native製
- 2: データベース接続の簡単さと多様さ
- 参考: supabaseとの連携を考えるなら、フロントエンドはTetaを検討
- 3: draftbitの開発画面はシンプル。「モバイルアプリ版Webflow」
- draftbit, FlutterFlowともにソースコードのエクスポートが可能
- draftbitの料金は値上げされてしまい、$79/月に。FlutterFlowのProプラン$70/月より高額に
- 参考: シンプルなUI・機能でネイティブモバイルアプリを開発するならAdaloがおすすめ
- Draftbit, FlutterFlowともにコミュニティ・フォーラムが活発
- Figma, Adobe XDによるデザインをそのままアプリのフロントに！”Bravo Studio”
- Bravo Studio: FigmaまたはAdobe XDでフロント画面をデザイン。そのまま公開まで！
- Bravo Studioのバックエンドとして、AirtableをはじめとしたREST API形式での外部データベースとの接続が可能
- プレビュー確認できるOS・Android (Google Play) 用アプリがある
- Figmaでの反映を自動的にBravo Studio側へ同期させる”Bravorizer”プラグインを発表！
- 参考: 同じくFigmaを利用してフロントを構築する”AWS Amplify STUDIO”について
- FigmaなどのデザインからAIがReactコードを自動生成してくれるノーコードツールをまとめました
- 可視化されたデータベースでアプリを構築 “AppMaster.io”
- AppMaster.ioの状況
- AppMaster.ioの特徴
- 価格がやや高額なのが唯一のネックか
- AppMaster.ioは何でもできるため、複雑になる傾向
- 生涯無料ですべての機能が利用できるノーコードツール”AppGyver”
- 利益または資金調達が不十分な企業、団体は生涯無料で利用可能
- Webアプリとネイティブアプリの双方をサポートしている
- AppGyverのその他の特徴
- SaaSやChrome拡張機能をノーコードで開発 ”Bildr”
- UIが分かりやすいバックエンド特化のノーコードツール ”XANO”
- Stacker
- Airtable用に特化したフロント構築ツール “Softr”
- データドリブンにWebサイト・アプリを開発 "Sktch.io"
ソースコード含め全てエクスポート可。React NativeベースでモバイルアプリをNoCode開発。”draftbit”
個人的にはまずdraftbitを推します。本格的なモバイルアプリをノーコードで開発、ネイティブアプリとして公開するなら、draftbitかFlutterFlowというのが昨今のノーコードの潮流。
モバイルアプリ開発ローコードツール”draftbit”の特徴
ソースコードを含めてエクスポート可能な、モバイルアプリ開発のノーコードツール。吐き出されるコードはReact Nativeとなります。
ワンクリックでネイティブアプリとしてApp Store, Google Playに公開まで可能。
🚀 Ready, Set, Publish: One-Click Publish is here! | draftbit
日本国内だと比較的有名なノーコードツール、Flutter製ネイティブアプリが作れるFlutterFlowに似たサービス。
draftbitはY Combinatorに承認され支援をうけているプロジェクトでもあります。(FlutterFlowと同様)
DraftbitとFlutterFlowの大きな違い3点
draftbitとFlutterFlowの「どちらが新しいサービスか？」という点では、FlutterFlowがProductHuntのProduct of the Dayで2位を獲得したのが 2021年の2月22日。
Flutter Flowはその後、FlutterFlow 2.0として、さらに刷新されたプロダクトとして2021年10月9日にProduct of the Weekで2位を獲得しています。
対するdraftbitはProduct of the Dayの1位を2019年の12月28日に獲得しています。
つまり、プロダクト自体の新しさでいうとFlutterFlowのほうが新しいサービスといえます。 しかしdraftbitもコミュニティフォーラム内で、持続的・活発にアップデートが実施されています。
Draftbit vs. FlutterFlowの比較表
DraftbitとFlutterFlowの比較を、主観が入りますがまとめてみました。
Draftbit | FlutterFlow | |
ベース技術・
エクスポートされる言語 | React Native | Flutter |
データベース接続の容易さ・多様さ | 主要なデータベースは半自動で接続 | Firebase以外は手動で接続 |
開発画面UI | Webサイト制作・Webフロントエンド開発に思想が近い。
CSSに基づく発想 | 複雑。
Flutter独自の概念 |
ネイティブアプリ公開のための
月額料金 | $79/月
Individual plan | $70月
Pro plan |
以下からはDraftbitとFlutterLowの大きな違い3点について。上記の表から料金を除いた3点の詳細をそれぞれ説明していきます。
1: draftbitはReact Native製
FlutterFlowがその名のとおりFlutterベースなのに対して、draftbitはReact Native製です。
Webフロントエンド開発でReactを触っていた方であれば、React Nativeの思想に馴染みやすいでしょう。
2: データベース接続の簡単さと多様さ
Draftbitであれば外部データベースを利用する際に、自動的につないでくれます。多くの既存のDBサービスから選択することが可能。
DraftbitではAirtableやWebflow, BubbleやXano, WordPressとRest APIで接続可能。
また、Sheetyを介してGoogle Spread SheetをAPI化すればDraftbitとGoogle Spread Sheetを接続できます。
他方、FlutterFlowはFirebaseがデフォルトで固定。Firebaseの接続に限定していえば、FlutterFlowのほうが簡単に実施できるでしょう。
他バックエンドデータベースとAPI接続したい場合には手動で接続させる必要がある。またAPI接続機能を利用するには有料プランに加入する必要あり。
また、頑張ればFirebase代替として最近新しく登場したBaaSであるSupabaseとの接続も可能です。
参考: supabaseとの連携を考えるなら、フロントエンドはTetaを検討
Supabaseとの接続を考えるなら、フロントエンドをNoCodeで実装する場合には”Teta”を利用するほうがシンプルで良いかもしれません。
ただし、TetaはTeta内でのネイティブアプリ公開にはまだ対応しておらず、draftbitのようなワンクリックでのアプリストア公開を実施することはできません。
Tetaは最新すぎて、まだ情報も少なく本番運用に耐えうるのか、ベンダーが開発終了しないか不安な面も大きく感じます。が、これからに期待できるノーコードツールの1つ。
実際にTetaをすこし触ってみたのですが、ある程度進めていたところでブラウザが頻繁に落ちる現象に襲われてしまい、断念しました…！
Windowsではデスクトップ版アプリもあるようなので、デスクトップアプリから開発するほうが開発体験は良いのかもしれません。
3: draftbitの開発画面はシンプル。「モバイルアプリ版Webflow」
draftbitは、開発画面がFlutterFlowに比べるとシンプルかつ非エンジニアにも比較的分かりやすい開発画面となっています。（あくまで個人的感想）
draftbitのカラム構成などはWebflowの開発画面に非常に近いイメージ。
ただし、モバイルアプリ開発を想定しているため、スマートフォン画面のビューとなっていることがWebflowとは異なる。
関連タグ: Webflow
レイアウト方式でflexboxを利用していたり、CSSに基づくレイアウト指定が可能。Webサイト制作やWebフロントエンド開発に馴染みのある方にはとっつきやすいでしょう。
まさしく、「モバイルアプリ版Webflow」のような感触。
他方、FlutterFlowの開発画面においてはプロユースを意識していることもあり、設定可能項目が多い分、パネルの箇所も増えて複雑に思えます。（下画像。右側にタブがありコンポーネントごとの設定項目が多い）
FlutterFlowの複雑さ・難しさゆえ、普段Flutterを触らない人はエンジニア素養のある人でさえ挫折してしまうほどの難易度とのこと。
ただし、Web上の声は”FlutterFlowのほうがUIとして分かりやすい"という声も多く感じました。Flutterに慣れている方や、モバイルアプリ開発の経験がある方にはFlutterFlowのほうが馴染みやすいのかもしれません。私個人がWebflowやSTUDIOなど、Webサイト制作用のノーコードエディタに慣れていることも一因でしょう。開発画面UIは好みが分かれるところだと思います。
draftbit, FlutterFlowともにソースコードのエクスポートが可能
draftbitでは開発したアプリの全コードがダウンロード可能。
これはFlutterFlowにおいても同様にソースコードのダウンロードが可能です。
またdraftbit自体も完全なオープンソースソフトウェアとして開発されており、ベースとなるライブラリや言語もオープンソースのものが選択されているようです。
draftbitの料金は値上げされてしまい、$79/月に。FlutterFlowのProプラン$70/月より高額に
以前には、最小の有料プラン（$39/月）が存在し、iOSアプリ・Google Playの「ワンクリック公開」が可能でした。
しかし最近プラン改定が行われ、最小プランが$79/月のIndividualプランへと変更となりました。このことにより、料金についてFlutterFlowへの優位性はなくなりました。
Pricing - Updated | Flutter Flow
参考: シンプルなUI・機能でネイティブモバイルアプリを開発するならAdaloがおすすめ
初心者にも良くおすすめされるノーコードのアプリ開発ツール”Adalo”では、ネイティブアプリとして公開させるための月額$45 Starterプランがあります。
AdaloはdraftbitやFlutterFlowと比べると、まさしく「ノーコード」と呼べる習得のしやすさが特徴。シンプルな機能とUIで良いからネイティブアプリとしてモバイルアプリを公開したい、という場合には第一選択肢となるでしょう。
Adaloの習得難易度を1とした時、冗談ではなくFlutterFlowは30くらいあるのではないかと思います。
【FlutterFlow】FlutterFlowは流行るのか？について考えてみた | yutaro blog
Draftbit, FlutterFlowともにコミュニティ・フォーラムが活発
The Draftbit Community | The Draftbit Community
Figma, Adobe XDによるデザインをそのままアプリのフロントに！”Bravo Studio”
Bravo Studio: FigmaまたはAdobe XDでフロント画面をデザイン。そのまま公開まで！
Bravo Studioは、FigmaまたはAdobe XDでフロント画面をデザインし、実在するデータとあわせて表示させることが出来るプロトタイピングツール。
FigmaやAdobe XDの操作に慣れている方であれば、他のノーコードツールと比べて大幅に学習コストが小さくなることになります。
FigmaやAdobe XDで自由度高くデザインを行ったものを、そのままプロトタイプアプリとしてローンチできるフロント側デザイン性の自由度が強み。
Bravo Studioのバックエンドとして、AirtableをはじめとしたREST API形式での外部データベースとの接続が可能
AirtableやZapier、Webflowなど、RESR API形式でAPIが公開されている外部ツールとの連携が可能。
Bravo Studioそれ自体はユーザーログイン機能をもちませんが、FireBaseと連携させることでログイン機能を実装させることが出来るようです。
(1) App Login and Registration using Firebase and Bravo Studio - YouTube
また、Airtableとの連携ではベースの共有読み取りURLとAPIキーを入力するだけで、ベースがもつテーブルをListとDetailの形式ですべてFetchしてくれるのも大きなポイント。
Adaloなどでは通常、テーブルごとにAPIキー等の情報を1つずつ入力していく必要があるため、非常に煩雑。
上の画像ではGET形式のみですが、有料プランを契約することでPOSTなど他の形式でもアクセスすることが可能です。
プレビュー確認できるOS・Android (Google Play) 用アプリがある
Bravo Vision と呼ばれるiOS・Android用アプリをスマートフォンにインストールすることで、手元の実機でプレビュー画面を確認することが出来ます。
Figmaでの反映を自動的にBravo Studio側へ同期させる”Bravorizer”プラグインを発表！
Bravo Studioは2023年6月、Figmaでのデザイン反映を自動的にBravo Studio側へ反映同期させるFigma Plugin “Bravorizer”を発表しました。
Figmaでのデザイン変更を自動的にモバイルアプリへ反映！Bravorizerで高速プロトタイピング
今まではFigmaでの変更を毎回インポートする必要があったようですが、本プラグインによりその問題も解消されました。
参考: 同じくFigmaを利用してフロントを構築する”AWS Amplify STUDIO”について
他にFigmaでフロントをデザインするツールとして、先日(2021/12/3)、re:Invent2021でAWSからAWS Amplify STUDIOがローンチされ話題になりました。しかし、AWS Amplify STUDIOはあくまでAWS Amplifyの中で効率的にフロントを生成するための一機能。
細かな修正にはもちろんコーディング・プログラミングが必要。またデプロイ作業も別途必要になります。ノーコードではなく、「ローコード」ツールとなります。
AWS Amplify STUDIOの利用においてはコンポーネント思想を理解したうえでFigmaでデザインを行う必要があり、Figmaの操作およびコンポーネント設計について習熟している必要があります。
AWS Amplify STUDIOについて参考: AWS Amplify Studioが変えるフロントエンド開発の未来とは
ほかにFigmaによるデザインを活用するノーコードツールとしては、 コーディング・実装不要！Figma・XDを瞬時にWebサイト化するノーコードツール"Quest.AI" というものもあります。
FigmaなどのデザインからAIがReactコードを自動生成してくれるノーコードツールをまとめました
FigmaからReactを自動変換出力。2つのAIノーコードツール+α の記事に、Figma, XD, Sketchなどによる各種デザインから自動でReactコードを変換・生成してくれるツールをまとめました。
記事のなかで触れている最も新しいAIサービス Bifrost は高精度で生成してくれるとのことで、期待の大きなツールです。
可視化されたデータベースでアプリを構築 “AppMaster.io”
AppMaster.ioの状況
安藤さんのツイートで知りました。
ただし、調べたところ海外でもそこまで人気があるかどうかは微妙なところで、WebおよびYouTubeではそこまで情報が見つかりませんでした。サービスの継続性が少し不安なところではあります。
ただおっしゃられている通り、海外ノーコード「コミュニティ」では状況が違っているのかもしれません。
AppMaster.ioの特徴
ER図のような形でデータベースの構築が可能。カラムの型指定もできる。
「モジュール」と呼ばれる機能のパッケージにおいて、マーケットプレイスでの販売が充実している。
WordPressのプラグインのようなイメージ？
データベースのテーブルごとにREST API形式でエンドポイントが設置されている。
価格がやや高額なのが唯一のネックか
ネイティブアプリ化・バックエンドをAWSやGCPに変更することができるStartUpプランが月額$165。その1つ上のProfessionalプラン（月額$249）においてはソースコードのエクスポートも可能です。
ただし、無料プランにおいてもPWAとして通常のブラウザを介するWebアプリとしては公開可能なので、作成したアプリが収益を上げることが見込まれる段階になってからStartUpプラン以上を検討しても良いでしょう。
AppMaster.ioは何でもできるため、複雑になる傾向
AppMaster.ioでは、いわゆるIF文などを「ビジネスロジック」として定義・制御できます。また1つのビジネスロジック内で異なるビジネスロジックを呼び出すこともでき、様々なことが行える一方で、ビジネスロジックが複雑になる傾向があります。
ノーコードで複雑な処理を含めて定義できることは素晴らしいことと思いますが、複雑になったロジックの管理に少しコツが要りそうだなと感じました。
生涯無料ですべての機能が利用できるノーコードツール”AppGyver”
利益または資金調達が不十分な企業、団体は生涯無料で利用可能
利益または資金調達が$10 Million (USD) 未満の企業・団体は生涯無料（！）で利用可能。
条件金額について、年間か累積かは不明
Webアプリとネイティブアプリの双方をサポートしている
詳細は未確認ですが、AppGyverはデータベースを共通でWebアプリとネイティブアプリの双方に対応させることが可能なようです。
AppGyverのその他の特徴
ドラッグ&ドロップでコンポーネントを配置できる
やや無味乾燥なエディタ？
Firebaseと連携できる
Firebase Storageを利用可能
Authの手段としてFirebaseを利用可能
Google Cloud Messagingを利用してプッシュ通知可能
SaaSやChrome拡張機能をノーコードで開発 ”Bildr”
UIが分かりやすいバックエンド特化のノーコードツール ”XANO”
バックエンド機能に特化したノーコードツール。
バックエンドに主眼を置いたノーコードツールについては下記でも解説しています。
Stacker
Airtable用に特化したフロント構築ツール “Softr”
Airtableに特化したフロント構築ツール。
レスポンシブデザインに対応して作成することが可能ですが、どちらかというと「Airtableのデータを利用して表示させる『Webサイト』」の側面が強いです。（モバイルアプリではない） そのため、ネイティブアプリ化させる等の機能はありません。
ユーザーテーブルのみSoftrが保持するようになっていて、ログインを必要とする会員制サイトを作成することができます。（有料プラン）
データドリブンにWebサイト・アプリを開発 "Sktch.io"
私がマークしている海外ノーコードツールはひとまず以上です。
ノーコードは急拡大している市場で、ここで紹介したツール以外にも日々多くのノーコードツールが誕生してきています。さらに知りたい方は No-Code | ノーコード のページ（カテゴリページ）をぜひ覗いてみてください。
この記事の気になった箇所を読み返す:
- ソースコード含め全てエクスポート可。React NativeベースでモバイルアプリをNoCode開発。”draftbit”
- モバイルアプリ開発ローコードツール”draftbit”の特徴
- DraftbitとFlutterFlowの大きな違い3点
- Draftbit vs. FlutterFlowの比較表
- 1: draftbitはReact Native製
- 2: データベース接続の簡単さと多様さ
- 参考: supabaseとの連携を考えるなら、フロントエンドはTetaを検討
- 3: draftbitの開発画面はシンプル。「モバイルアプリ版Webflow」
- draftbit, FlutterFlowともにソースコードのエクスポートが可能
- draftbitの料金は値上げされてしまい、$79/月に。FlutterFlowのProプラン$70/月より高額に
- 参考: シンプルなUI・機能でネイティブモバイルアプリを開発するならAdaloがおすすめ
- Draftbit, FlutterFlowともにコミュニティ・フォーラムが活発
- Figma, Adobe XDによるデザインをそのままアプリのフロントに！”Bravo Studio”
- Bravo Studio: FigmaまたはAdobe XDでフロント画面をデザイン。そのまま公開まで！
- Bravo Studioのバックエンドとして、AirtableをはじめとしたREST API形式での外部データベースとの接続が可能
- プレビュー確認できるOS・Android (Google Play) 用アプリがある
- Figmaでの反映を自動的にBravo Studio側へ同期させる”Bravorizer”プラグインを発表！
- 参考: 同じくFigmaを利用してフロントを構築する”AWS Amplify STUDIO”について
- FigmaなどのデザインからAIがReactコードを自動生成してくれるノーコードツールをまとめました
- 可視化されたデータベースでアプリを構築 “AppMaster.io”
- AppMaster.ioの状況
- AppMaster.ioの特徴
- 価格がやや高額なのが唯一のネックか
- AppMaster.ioは何でもできるため、複雑になる傾向
- 生涯無料ですべての機能が利用できるノーコードツール”AppGyver”
- 利益または資金調達が不十分な企業、団体は生涯無料で利用可能
- Webアプリとネイティブアプリの双方をサポートしている
- AppGyverのその他の特徴
- SaaSやChrome拡張機能をノーコードで開発 ”Bildr”
- UIが分かりやすいバックエンド特化のノーコードツール ”XANO”
- Stacker
- Airtable用に特化したフロント構築ツール “Softr”
- データドリブンにWebサイト・アプリを開発 "Sktch.io"
Category: No-Code | ノーコード
