ノーコードでアプリ開発をするには、まず作りたいアプリの画面、保存するデータ、動きのルールを書き出し、それに合ったツールを選んで、部品の配置と設定で組み立てていきます。プログラミングは不要ですが、何をどう動かしたいかを自分で決める必要があります。ノーコードという言葉自体の意味はノーコードとはで説明しているので、ここでは実際に作る側の視点で進め方をまとめます。
作る前に書き出す3つのこと
ツールを開く前に、次の3つをメモにします。ここが曖昧なまま始めると、途中で作り直すことになりがちです。
- 画面：一覧、入力フォーム、詳細、設定など、必要な画面を名前で並べます。
- データ：何を保存するかを項目ごとに書きます。たとえば備品の貸し出しアプリなら、備品名、借りた人、貸出日、返却予定日、返却日です。
- ルール：「返却予定日を過ぎたら赤く表示する」「同じ備品は同時に1人しか借りられない」のような決まりを文章にします。
ノーコード開発ツールの比べ方
ノーコード開発ツールには、Webアプリ向けのBubble、スマホ向けの画面を作りやすいAdalo、スプレッドシートからアプリを作るGlideなど、得意分野の違うものがあります。比べるときは次の点を見ると選びやすくなります。
- 作れるものの種類：Webアプリか、スマホアプリか、社内向けの簡単な道具か
- データの扱い：ツール内に保存するのか、スプレッドシートや外部のデータベースとつなぐのか
- 公開の方法：独自のURLで公開できるか、アプリストアに出せるか
- 持ち出せるか：作ったものをコードとして書き出せるか。多くのノーコードツールでは、そのツールの上でしか動きません
- 料金の仕組み：利用者数、アプリ数、データ量のどれで料金が変わるか
ノーコードに向いているアプリ、向いていないアプリ
- 向いている：社内の申請や貸し出し管理、予約受付、問い合わせの一覧、簡単な顧客管理など、画面とデータの形が決まっているもの
- 向いている：まず形にして使ってもらい、反応を見たい試作品
- 向いていない：ツールに用意されていない特殊な計算や、細かい動きのある画面
- 向いていない：将来、別のサービスへ移したり、自社のサーバーで動かしたりする予定があるもの
向いていない側に当てはまる場合は、最初からコードとして手元に残る作り方を選んだほうが、あとで困りにくくなります。
AIにコードを書かせるという選択肢
最近は、部品を並べる代わりに、作りたいアプリを文章でAIに説明し、AIに本物のコードを書かせる方法も増えています。VibeDreamはこのタイプで、アプリはReactとFastAPIで作られます。Codeタブですべてのファイルを確認でき、ZIPでダウンロードしたりGitHubに同期したりできるので、ツールの外に持ち出せます。画面は現在英語ですが、チャットには日本語で書けます。New ProjectからDirect Promptを選び、次のように頼みます。
会社の備品を貸し出すWebアプリを作ってください。
画面は、備品一覧、貸出の登録、返却の登録、貸出履歴の4つです。
保存する項目は、備品名、借りた人、貸出日、返却予定日、返却日です。
同じ備品は同時に1人しか借りられないようにしてください。
返却予定日を過ぎた備品は一覧で赤く表示してください。
画面の文言はすべて日本語にしてください。
プレビューで動きを確かめ、直したい点を1つずつ伝えます。仕上がったらPut it onlineで公開し、1回の公開と更新はそれぞれ5クレジットです。ノーコードと違ってコードが手元に残る分、AIの書いた内容が正しく動くかは自分で確かめる必要があります。AIを開発の道具として使うコツはAIアプリ開発の始め方にまとめています。
どちらを選ぶかの目安
- 画面とデータの形が決まっていて、ツールの範囲で収まる：ノーコードツール
- ツールにない動きが必要、または作ったものを手元に残したい：AIにコードを書かせる方法
- スマホのアプリストアに出したい：ネイティブアプリを作れるツールか開発会社。VibeDreamで作れるのはWebアプリとブラウザゲームです
どの方法でも、最初は画面が3つほどの小さなアプリから始めるのが確実です。全体の作り方の選択肢はアプリの作り方で比べています。料金は料金ページで確認できます。