英語圏では比較的話題になっているものの日本ではあまり知られていないだろうノーコードツールをご紹介します。もちろん日本でも利用可能。日本国内では 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 - Visually build native mobile apps
Create, customize, and launch mobile apps all from your browser. Source code included.
draftbit.com
個人的にはまずdraftbitを推します。本格的なモバイルアプリをノーコードで開発、ネイティブアプリとして公開するなら、draftbitかFlutterFlowというのが昨今のノーコードの潮流。
より簡易的にパパッと作るならAdaloやGlideが良いでしょうが、本番運用としては怖いところ・速度面での不満があります。draftbitやFlutterFlowはそれぞれReact Native, Flutter製アプリとしてApp Storeへの純正アプリ登録・公開まで可能となります。
関連タグ: Adalo
モバイルアプリ開発ローコードツール”draftbit”の特徴
ソースコードを含めてエクスポート可能な、モバイルアプリ開発のノーコードツール。吐き出されるコードはReact Nativeとなります。
ワンクリックでネイティブアプリとしてApp Store, Google Playに公開まで可能。
🚀 Ready, Set, Publish: One-Click Publish is here! | draftbit
日本国内だと比較的有名なノーコードツール、Flutter製ネイティブアプリが作れるFlutterFlowに似たサービス。
FlutterFlowとdraftbitの違いについては後述。
draftbitはY Combinatorに承認され支援をうけているプロジェクトでもあります。(FlutterFlowと同様)
Draftbit: Build mobile apps visually. Source-code included. | Y Combinator
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もコミュニティフォーラム内で、持続的・活発にアップデートが実施されています。
What's New? | The Draftbit Community
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製です。
Draftbit - Why Build with Draftbit?
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との接続も可能です。
How To Create a Native Mobile App For Your Supabase Back-End
This tutorial will show you how to create a native mobile app from scratch using Supabase as the back-end database and Draftbit as the mobile app. Draftbit is an interactive visual development platform based on open-source frameworks and libraries. So you will be using open-source React Native to build your mobile app.
draftbit.com
参考: supabaseとの連携を考えるなら、フロントエンドはTetaを検討
Supabaseとの接続を考えるなら、フロントエンドをNoCodeで実装する場合には”Teta”を利用するほうがシンプルで良いかもしれません。
Teta - Build an app in a weekend, collaborating with your whole team.
Teta is a cooperative app builder that allows teams and users to build an app in a weekend, collaborating online. Integrate Shopify, WordPress and MixPanel, or make your custom app using REST API. You have a full control of each element in your apps, and the innovative tree view allows you to see all the widgets instantly.
teta.so
ただし、TetaはTeta内でのネイティブアプリ公開にはまだ対応しておらず、draftbitのようなワンクリックでのアプリストア公開を実施することはできません。
ブロックを繋げるだけ！Supabase連携も可能なノーコードアプリ開発「Teta」を使ってみた！ - paiza開発日誌
どうも、まさとらん（@0310lan ）です！ 今回は、誰でも簡単に高度なスマホアプリを開発できる無料のWebサービスをご紹介します！ ...
paiza.hatenablog.com
Tetaは最新すぎて、まだ情報も少なく本番運用に耐えうるのか、ベンダーが開発終了しないか不安な面も大きく感じます。が、これからに期待できるノーコードツールの1つ。
実際にTetaをすこし触ってみたのですが、ある程度進めていたところでブラウザが頻繁に落ちる現象に襲われてしまい、断念しました…！
Windowsではデスクトップ版アプリもあるようなので、デスクトップアプリから開発するほうが開発体験は良いのかもしれません。
3: draftbitの開発画面はシンプル。「モバイルアプリ版Webflow」
draftbitは、開発画面がFlutterFlowに比べるとシンプルかつ非エンジニアにも比較的分かりやすい開発画面となっています。（あくまで個人的感想）
draftbitのカラム構成などはWebflowの開発画面に非常に近いイメージ。
ただし、モバイルアプリ開発を想定しているため、スマートフォン画面のビューとなっていることがWebflowとは異なる。
関連タグ: Webflow
レイアウト方式でflexboxを利用していたり、CSSに基づくレイアウト指定が可能。Webサイト制作やWebフロントエンド開発に馴染みのある方にはとっつきやすいでしょう。
まさしく、「モバイルアプリ版Webflow」のような感触。
他方、FlutterFlowの開発画面においてはプロユースを意識していることもあり、設定可能項目が多い分、パネルの箇所も増えて複雑に思えます。（下画像。右側にタブがありコンポーネントごとの設定項目が多い）
FlutterFlowの複雑さ・難しさゆえ、普段Flutterを触らない人はエンジニア素養のある人でさえ挫折してしまうほどの難易度とのこと。
【ご報告】FlutterFlow（ローコード）で開発したスマホアプリを公開するのを辞めました | yutaro blog
ただし、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への優位性はなくなりました。
Draftbit Pricing
Pricing - Updated | Flutter Flow
参考: シンプルなUI・機能でネイティブモバイルアプリを開発するならAdaloがおすすめ
初心者にも良くおすすめされるノーコードのアプリ開発ツール”Adalo”では、ネイティブアプリとして公開させるための月額$45 Starterプランがあります。
Adalo Pricing
Adaloをネイティブアプリとしてストア申請するための3つの下準備
Adaloをネイティブアプリとしてストア申請: Apple App Store編
Adaloをネイティブアプリとしてストア申請: Google Play Store編
参考タグ: Adalo
AdaloはdraftbitやFlutterFlowと比べると、まさしく「ノーコード」と呼べる習得のしやすさが特徴。シンプルな機能とUIで良いからネイティブアプリとしてモバイルアプリを公開したい、という場合には第一選択肢となるでしょう。
Adaloの習得難易度を1とした時、冗談ではなくFlutterFlowは30くらいあるのではないかと思います。
【FlutterFlow】FlutterFlowは流行るのか？について考えてみた | yutaro blog
Draftbit, FlutterFlowともにコミュニティ・フォーラムが活発
The Draftbit Community | The Draftbit Community
FlutterFlow Community
What's New In FlutterFlow | FlutterFlow
community.flutterflow.io
Figma, Adobe XDによるデザインをそのままアプリのフロントに！”Bravo Studio”
Bravo Studio
Are you a Designer? Familiar with apps like Figma? Or just more comfortable designing a beautiful app in a proper design tool rather than a No-Code tool? Bravo's got just what you need, allowing you to convert Figma designs straight into native, working apps - complete with full support for AirTable and REST APIs!
www.bravostudio.app
Bravo Studio: FigmaまたはAdobe XDでフロント画面をデザイン。そのまま公開まで！
Bravo Studioは、FigmaまたはAdobe XDでフロント画面をデザインし、実在するデータとあわせて表示させることが出来るプロトタイピングツール。
FigmaやAdobe XDの操作に慣れている方であれば、他のノーコードツールと比べて大幅に学習コストが小さくなることになります。
FigmaやAdobe XDで自由度高くデザインを行ったものを、そのままプロトタイプアプリとしてローンチできるフロント側デザイン性の自由度が強み。
Bravo Studioのバックエンドとして、AirtableをはじめとしたREST API形式での外部データベースとの接続が可能
Features | Bravo Studio
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”
Create applications in minutes | AppMaster.io
AppMaster.io - no-code platform
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”
AppGyver
The world's first professional no-code platform to build React and React Native based apps for mobile, web and more. Sign up for the free-forever developer plan and get superpowers today.
www.appgyver.com
利益または資金調達が不十分な企業、団体は生涯無料で利用可能
利益または資金調達が$10 Million (USD) 未満の企業・団体は生涯無料（！）で利用可能。
条件金額について、年間か累積かは不明
Webアプリとネイティブアプリの双方をサポートしている
詳細は未確認ですが、AppGyverはデータベースを共通でWebアプリとネイティブアプリの双方に対応させることが可能なようです。
AppGyverのその他の特徴
ドラッグ&ドロップでコンポーネントを配置できる
やや無味乾燥なエディタ？
Firebaseと連携できる
Firebase Storageを利用可能
Authの手段としてFirebaseを利用可能
Google Cloud Messagingを利用してプッシュ通知可能
SaaSやChrome拡張機能をノーコードで開発 ”Bildr”
www.bildr.com
www.bildr.com
UIが分かりやすいバックエンド特化のノーコードツール ”XANO”
Xano - The Fastest No Code Backend Development Platform
Xano is the fastest way to build a backend for your web, mobile or IoT application without code. Join hundreds of successful organizations.
www.xano.com
バックエンド機能に特化したノーコードツール。
バックエンドに主眼を置いたノーコードツールについては下記でも解説しています。
Stacker
Stacker | No-code software powered by your data
Collaborate with colleagues, connect multiple data sources, and share your apps with teammates, customers, and partners. Director of Industry Partnerships "My team has become so self-sufficient and effective that we really can operate as our own little unit without needing extra support"
www.stackerhq.com
Airtable用に特化したフロント構築ツール “Softr”
Softr - Build a website, web app or portal on Airtable without code
from Airtable, in minutes. No code required. Check out real web apps built on Softr by 20,000+ users Start from a template or from 70+ pre-built blocks and customize any element on the page. No design or coding skills needed. Don't spend hours learning new tools.
www.softr.io
Airtableに特化したフロント構築ツール。
レスポンシブデザインに対応して作成することが可能ですが、どちらかというと「Airtableのデータを利用して表示させる『Webサイト』」の側面が強いです。（モバイルアプリではない） そのため、ネイティブアプリ化させる等の機能はありません。
ユーザーテーブルのみSoftrが保持するようになっていて、ログインを必要とする会員制サイトを作成することができます。（有料プラン）
データドリブンにWebサイト・アプリを開発 "Sktch.io"
Sktch.io: The no-code platform for functional and data-driven website and app development - MVP Prototyping no-code tool
Sktch.io: The no-code platform for functional and data-driven website and app development - MVP Prototyping no-code tool
Our web editor gives you total control of the look and feel of your web-app. You can customize everything from the layout, typography, colors, dimensions and more. With Sktch.io, you save precious time setting up the layout of your web-app.
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 | ノーコード
Tag: No-Code | Figma | Adalo
