FREENANCE Ad

ノーコードとは?プログラミング不要&短期間&低コストのアプリ開発をしよう。ノーコードの特徴、市場動向、代表的ツール6選【作例あり】

NoCode ノーコード
FREENANCE Ad

昨今、コーディングせずにアプリ開発を行う「ノーコード」が注目されています。

「ノーコードという言葉を耳にしたことはあるけれど、実際にどんな開発ツールがあるのか知らない…….」という人も多いのではないでしょうか?

この記事では以下の3点を紹介した上で、ノーコードツールを実際に使ってアプリ制作をしてみました。

  • ノーコードの特徴やできること
  • ノーコードの市場動向
  • ノーコード開発ツール6選

「プログラミング未経験だけどアプリ制作をしてみたい」「ノーコード開発ツールで何ができるか気になる!」という方は、ぜひご覧ください。

ノーコード(NoCode)とは

Adalo

▲ 出典:Adalo

コーディングをせずにアプリをつくる

ノーコードとは「コーディングをせずにアプリ開発すること」を意味します。またノーコードでアプリ開発できるツールのことを「ノーコード開発ツール」、ノーコードで開発したアプリのことを「ノーコードアプリ」と呼びます。

通常、アプリを動作させるプログラムは、プログラミング言語を用いた「コーディング(ソースコードを書くこと)」によって作られます。一方、『Bubble』や『Adalo』など各種ノーコード開発ツールでは、GUI(Graphical User Interface:グラフィックベースで操作できるUI)でプログラムを自動生成できるのです。

ノーコードの特徴/できること

ノーコードはコーディングを必要としないことから、プログラミング言語についての知識や経験を持たない他業種の人でも、アプリを開発できます。またコーディングに時間を費やす必要がないので、アプリを短期間のうちに迅速に開発しリリースできるという特徴も。

ノーコードで開発できるアプリは、利用するノーコード開発ツールによって異なります。Bubbleをはじめ、多くのノーコード開発ツールはWebアプリの開発に特化していますが、Adaloなどスマホアプリを開発できるツールもあります。

また多くのノーコード開発ツールでは、標準的な機能やデザインが既に実装されているテンプレートをもとに、開発を始められます。「目的のアプリをどうすれば実現できるのだろうか……」と悩まずとも、テンプレートの実装をアレンジするだけで素早く開発できるのです。

ノーコードの登場で、従来の「コーディングでアプリを作るエンジニア」は不要になる?

従来「ソフトウェア開発者」といえば、「コーディングができるエンジニア」を指していました。しかしノーコード開発ツールの登場により、ソフトウェア開発者には「ノーコードツールを使いこなせる人」も含まれるようになるかもしれません。

では、ノーコード開発ツールさえあれば従来のITエンジニア職は不要となるのでしょうか?

結論から述べると、不要にはなりません。現状のノーコード開発ツールができることには限界があり、柔軟さに欠けるため、今すぐ従来のITエンジニア職が失われるということはないでしょう。

ただしノーコードの登場で、市場に変化が生じる可能性はあります。「柔軟さと引き換えに、短期間、かつ低コストでアプリを開発したい」という顧客の要望にノーコード開発で応えるケースが今後出てくると想定されます。

ノーコードの市場動向

世界で拡大するノーコード市場

世界では、ノーコードやローコード(ノーコードとコーディング有り開発の中間)など、「RAD」と呼ばれる高速開発の市場が拡大しています。

RAD(Rappid Application Development ):
高速開発を行う各種ツールや手法を示す用語。ノーコードやローコードのほか、プログラマが開発で利用する「統合開発環境(IDE)」もRADに含まれます。

たとえばアイルランドのResearch and Markets社は、ノーコードが、時間的/金銭的コストを節約するなどのさまざまなメリットをもたらしたとして、今後のさらなる需要増を予測しています。さらにRAD市場全体の規模としても拡大しており、2018年には78億ドルだったRAD市場が、2023年には462億ドルの規模となるだろうと分析しています。

これらのことを裏付けるように、欧米ではすでに「ノーコード専門のエンジニア組織」も登場してきています。

たとえばオランダのIT企業であるWebbit21では、ノーコード開発ツールを用いた超短期間のアプリ開発を行っています。『WEM』やBubbleなどのノーコード開発ツールを利用しており、従来の5分の1から10分の1の期間でのシステム開発を可能にし、注目を集めています。

またアメリカ・サンフランシスコ州のIT企業であるAirDevも、ノーコードに特化した開発会社のひとつです。Bubbleでのノーコード開発を中心に、企業向けのWebアプリやスマホアプリの開発で注目されています。

ノーコードでビジネス上の成功を収めた事例

AppSheetの記事によると、アメリカ・ワシントン州に本拠地を置く貿易会社「Zen-Noh Hay」の運用アシスタントであるZane Schwendiman氏は、2020年1月にGoogleに買収されたノーコード開発ツール『AppSheet』を用いて、自社施設で生産した商品の管理を行うシステムを構築。紙ベースで行っていた業務の自動化を果たしました。その結果、これまで紙とコンピュータを中継することで生じていたミスを削減し、リアルタイムでの商品の在庫/新規購入数の確認を行えるようになりました。

またBetty Blocksの事例紹介によると、オランダのザーンスタット自治体では、およそ25年間使われ続けた古いシステムを、企業向けのノーコード開発ツール『Betty Blocks』を用いて刷新し、年間62万ユーロ(日本円で約7,600万円)を節約しました。

Betty Blocksを用いた新規ノーコードシステムの開発では、初期バージョンをわずか10日で完成。既存システムでは保守/運用に10人のバックエンド開発者が必要でしたが、新規ノーコードシステムではたった4人で行われました。

ノーコードアプリ vs コーディングアプリ 比較

非エンジニアでもGUI操作でアプリを開発できるノーコード開発と、ソースコードを記述していくことでプログラムを組み立てていくコーディングあり開発。これらの違いを表でまとめてみました。

ノーコードアプリ コーディングアプリ
素早い開発 得意 技量による
柔軟なカスタマイズ コーディングアプリには劣るが徐々に改善されている 柔軟性が高く、何でもできる
開発コスト
デバッグのしやすさ 難しい 易しい

このようにノーコードとコーディングあり開発とでは、得意とすることに違いがあります。低コストの素早い開発が得意なノーコードに対して、コーディングありの開発は、柔軟なカスタマイズとデバッグによる高品質なアプリ制作が可能です。

代表的なノーコード開発ツール 6選

ノーコード開発ツールにはさまざまな種類があります。種類ごとにできることや特徴が違うので、ノーコードアプリを制作するときには、自分が作りたいものに適したツールを選ぶ必要があります。

以下で、代表的なノーコード開発ツール6つを紹介していきます。

1. Bubble

Bubble

▲ 出典:Bubble

Bubble』は、2012年にアメリカ・ニューヨーク州に設立されたスタートアップ企業により開発されました。Bubbleは、Webアプリのフロントエンドからバックエンドまでを柔軟に開発できます。

ノーコード開発ツールの中ではトップの知名度を誇り、豊かなカスタマイズ性と分かりやすい開発手順から、多くの人に愛用されています。

2. Adalo

Adalo

▲ 出典:Adalo

2018年にアメリカ・セントルイス州のスタートアップ企業で開発された『Adalo』は、Webアプリだけではなくスマホアプリ開発にも強いのが特徴です。

開発手順の分かりやすさに定評があり、直感的な操作でUIとワークフローを結びつけられます。

作成したアプリは有料プランに入れば、ストアに申請可能なスマホアプリとしてビルドし、公開できます。無料プランでもWebアプリとして公開できるので、「とりあえずノーコードツールを触ってみたい!」という方におすすめです。

3. Glide

Glide

▲ 出典:Glide

Glide』は「2030年までに10億人のソフトウェアエンジニアを誕生させること」をミッションに掲げるノーコード開発ツールです。スプレッドシートと連携したPWA(Progressive web apps. スマホネイティブアプリとWebアプリの中間に位置するアプリ)の開発を得意とします。

Adaloと同様に開発手順がとても分かりやすい一方で、アプリのデータベースとしてGoogleスプレッドシートを利用できるのがGlideならではの特徴です。

もともと社内でGoogleスプレッドシートに書き込むことで管理していたデータ等を、Glideを通してアプリ化する場合に大活躍します。

4. AppSheet

AppSheet

▲ 出典:AppSheet

Bubbleと同じく2012年にスタートアップした『AppSheet』は、スプレッドシートなどと連携したアプリを作れるノーコード開発ツールです。2020年1月にGoogleに買収されており、今後のGoogle製ソフトとのさらなる連携拡大が期待されます。

AppSheetは、以下のさまざまなサービスを自身のアプリのデータソースとして利用できます。

  • Googleスプレッドシート
  • Excel Office365
  • Dropbox
  • Smartsheet
  • Salesforce
  • Box

5. Amazon HoneyCode

Amazon HoneyCode

▲ 出典:Amazon HoneyCode

2020年6月にベータ版がリリースされた『Amazon HoneyCode』は、スプレッドシート風のインターフェースで作成したデータベースからスマホアプリやWebアプリを制作できるAmazon製のノーコード開発ツールです。

開発したアプリは最大20ユーザーまで無料で運用できるので、小規模の社内向けアプリならすぐに試せます。現在はベータ版なので今後の新機能追加も期待されます。

 6. Microsoft Power Platform

Microsoft Power Platform』は、Office製品やSharePoint、Microsoft AzureなどMicrosoft製サービスとの連携してアプリを制作できるノーコード開発ツールです。名前のとおりMicrosoftが提供しており、国際空港や銀行、製薬会社など規模の大きな企業でも利用されている信頼性の高さが特徴です。

Power Platformはデータの収集/解析/予測を行う業務アプリの開発を得意としており、企業データをリアルタイムに可視化することで、データ主導のビジネスを促進します。

ノーコード開発ツール『Bubble』『Adalo』『AppSheet』で、家計簿アプリをつくってみた

ここからは、ノーコードでの開発がどのような流れで進むのかを知ってもらうために、いくつかのノーコード開発ツールをピックアップして、実際に家計簿を記帳できるアプリを制作する流れを簡単に紹介していきます。

ピックアップするのは以下のツールです。

  • もっとも代表的なノーコード開発ツール『Bubble』
  • スマホアプリも作れる『Adalo』
  • 企業での利用にも便利な『AppSheet』

もっとも代表的なノーコード開発ツール『Bubble』

柔軟なカスタマイズ性が特徴のBubbleは、多くのユーザに愛用されている一方で、ノーコード開発ツールの中ではややソフトウェア開発の知識を要します。

家計簿アプリをBubbleで作成する手順は、大まかに分けて以下の3工程です。

  1. データの構造を作成する
  2. UIを作成する
  3. ワークフローを定義する

ステップ1. データの構造を作成する

まずユーザーごとに家計簿を記録していくためのデータ構造を定義します。Bubbleでは、開発画面のDataタブから「New Type」を入力することで新たなデータ構造を定義できます。

まず Dataタブを選択し「Create a new field」をクリックします。

Bubble家計簿アプリ制作手順1

以下のような画面に移るので、Field nameを書き、Field typeを選択します。

Bubble家計簿アプリ制作手順2

今回はデータが家計簿として成立するために、「DATE」「NAME」「PRICE」「USER」の4フィールドを有する「家計簿」という名前のデータを新規作成します。

Bubble家計簿アプリ制作手順3

ステップ2. UIを作成する

Bubble家計簿アプリ制作手順4

▲ Repeating Groupでデータの中から条件に合うものをソートして表示できる

BubbleではDesignタブで選んだ画面要素をマウス操作で描画していくことでUIを作成します。Repeating Groupという要素を利用すると複数の連続するデータを繰り返し画面に描画することができるので、今回「家計簿を表示する画面」にはこの要素を使いましょう。

他にも家計簿を入力するフォームなどを作成していきます。

ステップ3. ワークフローを定義する

Bubble家計簿アプリ制作手順5

最後にWorkflowタブから「ボタンを押したとき」などの操作に対するアプリのアクションを定義していきます。

アプリのフォーム画面に「記録する」というボタンを配置しているので、このボタンを押したときに「フォームに入力した家計簿をデータに反映する」「反映したら最初の画面に戻る」というアクションをワークフロータブで定義します。

Bubble家計簿アプリ完成

他にもページ遷移など必要な処理を定義したら、アプリは完成です。

スマホアプリも作れる『Adalo』

PWAやスマホアプリに強いAdaloは、ノーコード初心者でもなんとなくで操作の分かる開発画面が特徴です。

Adaloで開発を始めるとき、はじめにアプリの種類を「Mobile」か「Desktop」のいずれか選択するよう求められます。

制作アプリ選択

今回はMobileを選択して開発を始めましょう。

開発は以下の手順で行います。

  1. UIを作成する
  2. データの構造を作る
  3. データ構造に基づく部品を作る

ステップ1. UIを作成する

Adalo家計簿アプリ制作手順1

Adaloはドラッグ&ドロップでUIを作成していくことができます。以下のような手順でUIを作成しましょう

  1. 画面左の「ADD COMPONENT」から必要な画面要素を好きなページに配置する
  2. 配置した場所をクリックして、その要素の内容やボタン押下時の処理を定義する

ただし、データ構造を決めてからでないと作れない場所は後回しにするので、ひとまずは「家計簿を書くページ」を追加し、ホーム画面に「家計簿を書くページへ移動するためのボタン」などを配置するだけに留めます。

ステップ2. データの構造を作る

Adalo家計簿アプリ制作手順2

次にアプリの根幹となるデータベースに、家計簿のデータ構造を定義します。

  1. 家計簿に「購入日」「商品名」「金額」の4つの値が入るようデータを定義する
  2. ユーザひとりにつき複数の家計データを記録できるようにするために、Userテーブルに今作成した家計簿のデータを「ADD PROPERTY > Relationship」から追加する
  3. Userと家計簿の関係を聞かれるので、画像真ん中の「1ユーザにつき複数の家計簿(A User can have multipele 家計簿s)」となるよう選択する

ステップ3. データ構造に基づく部品を作る

Adalo家計簿アプリ制作手順3

データ構造を決めたので、これで家計簿データを表示する画面や、家計簿データを記録する画面を作れるようになりました。家計簿データの表示画面には、Simple Listという画面要素を使います。

下記の手順を踏むと、表示画面が完成します。

  1. Simple Listに「現在ログイン中のユーザの家計簿」を表示する
  2. ソート順を定義する

 

 

Adalo家計簿アプリ制作手順4

記録画面、つまり入力フォームはデータを元に簡単に作成できます。フォームを配置すると「入力フォームに対応するデータが何か」を聞かれるので、先ほど作成した家計簿データを選択。データ構造に合わせて自動で入力フォームが作成されるため、フォームを配置するだけで記録画面は完成です。

ログイン画面などはすでに用意されているので、家計簿アプリ自体もこれで完成しました。

Publishタブから「Progressive Web App > Published On」に移動します。アプリは自動公開されているので、URLにアクセスすれば家計簿アプリを使えます。

Adalo家計簿アプリ完成

企業での利用にも便利な『AppSheet』

業務でもよく用いられるGoogleスプレッドシートのデータをそのままアプリ化できるAppSheetは、既存の業務データを短期間で社内アプリ化したいときにも便利です。

家計簿のように、機能がシンプルなアプリを作る場合、簡単にアプリを作れます。必要な開発手順は以下の3つです。

  1. スプレッドシートで家計簿を作る
  2. AppSheetでアプリのもとになるスプレッドシートを選ぶ
  3. アプリの見た目を整える

ステップ1. スプレッドシートで家計簿を作る AppSheat家計簿アプリ制作前スプレッドシート作成

まず、アプリの元となるスプレッドシートを作成しましょう。AppSheetではスプレッドシートやExelなど、表計算ソフトのデータがそのままアプリのデータベースになります。

家計簿なので、表には「日付」「買ったもの」「金額」の3つの列を用意します。アプリ作成時にすぐ動作確認できるよう、あらかじめいくつかデータも入力しておきましょう。

ステップ2. AppSheetでアプリのもとになるスプレッドシートを選ぶ

AppSheat家計簿アプリ制作手順1

もととなるスプレッドシートを作成したら、AppSheetでの開発を始めましょう。

  1. AppSheetのトップ画面から「Start for free > Google Sheets and Forms」を選択する
  2. 自分のGoogleアカウントでログインする
  3. 「Make a new App > Start with your own data」で先ほど作成した家計簿のスプレッドシートを選択する

なんとこれだけで家計簿アプリに必要な機能は全て完成です。家計簿を見るページと、家計簿を書くページは自動で生成されているので、あとは見た目を整えていきましょう。

AppSheat家計簿アプリ制作手順2

▲ このように基本的な機能はあらかじめAppSheet側が自動生成してくれる(画面右がアプリのプレビュー。画面中央は元となったスプレッドシート名が表示されている)

ステップ3. アプリの見た目を整える

AppSheat家計簿アプリ制作手順3

アプリのデザインや、画面に表示されている家計簿データのソート順などを開発画面から調整していきましょう。

  1. 「UX > Views」タブで、アプリの見た目や位置、ソート順の調整を行う
  2. Brandタブでアプリ全体の配色やアイコン、ヘッダーやフッターの表示形式などを選択する
  3. 好みのデザインに調整する
  4. Deplpoyタブからデプロイ(アプリをアクセス可能な環境に配備すること)する

以上でアプリのリリースは完了です。「Share App > Links > Install Link」のURLに自分のスマホでアクセスすれば、家計簿アプリがインストールされ、利用できるようになります。

AppSheat家計簿アプリ完成

おわりに

アプリ開発の需要が高まる昨今、不足するIT人材を補う選択のひとつとしてノーコード市場が拡大しています。海外ではすでにノーコード専門集団も。海外にて低コスト/短期間の開発に成功するケースが増えていく中で、日本国内でも少しずつノーコードによる業務改善の事例が登場するでしょう。

また多くの企業が参入することで、ノーコード開発ツール自体も多種多様に。2018年にリリースされたAdaloや、2020年6月にベータ版がリリースされたAmazon HoneyCodeなど、よりモダンな開発ができるツールの登場に刺激され、既存のノーコード開発ツールのアップデートも期待されます。

今後さらなる発展が注目されるノーコード開発ツール。気軽にアプリを制作できる面白さ自体も魅力なので、これまで非プログラマーでアプリ制作に踏み出せなかった人も、ぜひノーコード開発ツールでその面白さに触れてみてください。

(執筆:sig_Left 編集:Sato Mizuki)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
エンジニア副業案件
Workship