ノーコード×AIで簡単なWebアプリを作ってみた(データベース連携まで)

PR本記事はアフィリエイト広告(プロモーション)を含みます。紹介する商品・サービスの選定基準や体験談は編集部の見解に基づきます。

この記事を読むと何ができるようになるか

プログラミングをせずに、手元のデータをもとにした簡単なWebアプリを作る流れがイメージできます
ノーコードツールと表計算データを連携させる、基本的な仕組みがわかります
自分の題材でアプリ作りを相談するための、そのまま使えるプロンプト例が3つ手に入ります

前回の記事「自分の趣味コレクションをデータベースで管理してみた」では、Notionのデータベース機能を使って、レコードコレクションを表として整理しました。今回はその発展として、「このデータを、もっと見やすく・使いやすいアプリのような形にできないか」という疑問をAIにぶつけながら、実際にノーコードツールで簡単なWebアプリを作ってみた体験談を紹介します。

そもそもの疑問: ノーコードアプリって何ができるの?

自分: プログラミングをしなくても、自分のデータを使ったアプリのようなものを作れると聞きました。本当ですか?

AI: はい、できます。「ノーコードツール」と呼ばれるサービスを使うと、あらかじめ用意した表(スプレッドシート等)のデータをもとに、検索・絞り込み・詳細表示などができる画面を、コードを書かずに作れます。仕組みとしては、あなたが用意した表を「データの置き場所」として、ノーコードツールがその上に「見た目と操作画面」を自動で組み立てる、というイメージです。

「表をアプリの見た目に変換してくれる」というイメージが最初の理解でした。

今回使うツールと、データの準備

前回はNotionのデータベースを使いましたが、今回使うノーコードツール「Glide」には「Glide Tables」という、Glideの中に直接データ表を作れる機能があります。以前はGoogleスプレッドシートと連携する形が一般的でしたが、2024年12月以降、無料プランではGoogleスプレッドシート等の外部データとの連携が使えなくなり、無料の範囲で使えるのはこのGlide Tables(内蔵データ)のみになっているとのことなので、今回はGlide Tablesにデータを直接入力することにしました。

自分: 前回Notionで作ったレコード一覧のデータを、Glideのアプリにするために用意し直したいです。何に気をつければいいですか?

AI: 基本的には、前回決めた列(タイトル・アーティスト名・購入日・入手経路・貸出状況)をそのままGlide Tablesの列名にすれば大丈夫です。Glide Tablesは表計算ソフトのような画面で直接データを入力できるので、Notionの表を見ながら1行ずつ入力していく形で問題ありません。

言われた通り、Glide Tables上に同じ列構成(タイトル・アーティスト名・購入日・入手経路・貸出状況)を作り、直接データを入力しました。

💡 ポイント: ノーコードツールの無料プランは、「外部サービスとの連携」が有料プラン限定になっていることがよくあります。使いたいツールが決まったら、まず「無料プランでどこまでのデータ連携ができるか」を公式サイトの料金ページで確認してから進めると、手戻りが少なくなります。

AIにアプリの設計を整理してもらう

データを用意したら、次に「どんな画面・機能が必要か」をAIと一緒に整理しました。

自分: レコードコレクションのデータをもとにアプリを作るとして、最低限どんな画面・機能があればよいですか?プログラミング未経験者が最初に作る前提で教えてください。

AI: 最初はシンプルに、次の2つの画面から始めるのがおすすめです。

一覧画面: レコードのタイトルとアーティスト名がずらっと並ぶ画面

詳細画面: 一覧から1件タップすると、購入日・入手経路・貸出状況まで詳しく見られる画面

検索機能や絞り込み機能は、多くのノーコードツールで一覧画面に標準で用意されていることが多いので、最初から作り込む必要はありません。

「一覧」と「詳細」の2画面だけで十分、というアドバイスのおかげで、身構えていたよりもずっとシンプルに始められそうだと感じました。

実際にGlideでアプリを作ってみる(手順)

Glideの公式サイトにアクセスし、無料プランで登録する
新しいアプリを作成する(データソースは既定でGlide Tablesになっている)
Glide Tables上に、前回決めた列(タイトル・アーティスト名・購入日・入手経路・貸出状況)を作り、データを直接入力する
データを入力すると、自動的に「一覧画面」と「詳細画面」のたたき台が生成される
生成された画面を確認し、表示させたい列・隠したい列を調整する
一覧画面の検索・絞り込み機能を実際に試してみる
問題なければ「Publish(公開)」のボタンを押し、実際にアクセスできるURLを発行する

実際にやってみると、データを読み込んだ時点でかなりの部分が自動生成されており、手を動かす作業のほとんどは「表示項目の調整」だけでした。

⚠️ 注意: 「公開(Publish)」するとインターネット上からアクセスできる状態になる場合があります。個人情報や見られたくない情報が含まれるデータを扱う際は、公開範囲の設定(限定公開にできるか等)を必ず確認してから進めてください。

うまくいかなかった点

最初、一覧画面に表のすべての列(5列)を表示させたところ、画面が情報過多でかえって見づらくなってしまいました。そこで再びAIに相談しました。

自分: 一覧画面に全部の項目を表示したら見づらくなってしまいました。どう整理すればいいですか?

AI: 一覧画面では、「タイトル」と「アーティスト名」のように、ぱっと見て判断したい情報だけに絞るのがおすすめです。「購入日」「入手経路」「貸出状況」のような詳細情報は、詳細画面(1件をタップしたあとの画面)に回すことで、一覧はすっきりし、必要な情報は詳細画面で確認できる、というバランスの良い構成になります。

この助言どおりに一覧画面をシンプルにしたところ、格段に見やすくなりました。

AIに相談するためのプロンプト例(3つ)

プロンプト例(必要な画面・機能を整理してもらう場合):

[管理したいデータの内容、例: レコードコレクション]を
ノーコードツールでアプリにしたいです。
プログラミング未経験者が最初に作る前提で、
最低限必要な画面と機能を教えてください。

プロンプト例(表示項目のバランスを相談する場合):

一覧画面に表示する項目が多すぎて見づらくなっています。
・現在表示している項目: [列名を書く]
・一覧画面で最優先したいこと: 一目で判断できること

どの項目を一覧に残し、どの項目を詳細画面に回すべきか
提案してください。

プロンプト例(公開前の注意点を確認してもらう場合):

ノーコードツールで作ったアプリを公開しようと考えています。
・扱っているデータの内容: [内容を書く]
・公開範囲: [不特定多数に公開したい/身内だけに共有したい等]

公開前に確認しておくべき注意点を整理してください。

💡 ポイント: 「見づらい」「うまくいかない」と感じたときほど、具体的に困っている状況をAIに伝えると、的確な改善案をもらいやすくなります。

まずはここから: 最初の一歩

Glideの公式サイトにアクセスし、「Get Started for Free」から無料登録する
新しいアプリを作成する(データソースは既定でGlide Tablesという内蔵のデータ表になっている)
自分が整理したいデータ(前回のコレクション表でも、家計簿でも、読書リストでも構いません)を、Glide Tables上に列名を決めて直接入力する
自動生成された画面を確認し、上記のプロンプト例を使ってAIに表示項目のアドバイスをもらいながら調整する
最初は身内・自分専用の限定公開から試し、慣れてきたら公開範囲を広げるかどうかを検討する

使用例: 手作りアクセサリーを販売する副業主婦・浜田さんのケース

副業でハンドメイドアクセサリーの制作・販売をしている浜田さんの例です。浜田さんは、在庫と価格をノートに手書きで管理していましたが、外出先でお客様から在庫の有無を聞かれてもすぐに答えられないことに悩んでいました。

まず「必要な画面・機能を整理してもらう」プロンプトを使い、「在庫一覧」と「商品詳細(価格・素材・残数)」の2画面構成を提案してもらいました
Glideの無料プランでアプリを作成し、Glide Tables(内蔵のデータ表)に商品名・価格・素材・残数の列でデータを入力しました
一覧画面が情報過多になったため、「表示項目のバランスを相談する」プロンプトを使い、一覧には「商品名」「残数」だけを表示し、価格・素材は詳細画面に回す構成に調整しました
身内だけに共有する限定公開の設定でアプリを公開し、スマートフォンからいつでも在庫を確認できるようにしました

浜田さんいわく、「ノートをめくって探していた在庫確認が、スマートフォンでその場ですぐ見られるようになったのは大きい」とのことでした(これは浜田さんの体感であり、当社が効果を計測した数値ではありません)。

Before/After: データ管理の変化

項目	ノーコードアプリ化する前	ノーコードアプリ化した後
データの確認場所	ノートやスプレッドシートを開いて探す必要があった	スマートフォンから一覧・検索ですぐ確認できる
表示のわかりやすさ	表形式で全項目がずらっと並んでいた	一覧はシンプルに、詳細は詳細画面でと役割が分かれた
更新のしやすさ	別々の場所に記録が分散しがちだった	Glide Tablesを更新すればアプリにもすぐ反映される

※上記は一般的に想定される変化の整理であり、当社が数値として計測したものではありません。

気をつけたいこと

無料プランには、作成できるアプリの数や、Googleスプレッドシート等の外部サービスとの連携可否など、機能面での制限がある場合があります。本記事執筆時点ではGlideの無料プランは外部データ連携ができず、内蔵のGlide Tablesのみが対象でした。契約前に必ず公式サイトで最新のプラン内容を確認してください
個人情報や取引先の情報を扱う場合は、公開範囲の設定(限定公開か、誰でも見られる状態か)を必ず確認し、意図しない公開を避けてください
ノーコードツールも将来的にサービス内容が変わる可能性があります。重要なデータは、時々別の形式(CSVエクスポート等)でバックアップを残しておくと安心です

⚠️ 注意: 「公開」の設定は、ツールによって挙動が異なります。個人情報や機密性の高い情報を扱う場合は、必ず事前に公開範囲の設定を確認し、不安な場合は身内だけの限定公開から始めることをおすすめします。

よくある質問

Q. プログラミングの知識が全くなくても作れますか? 本記事で紹介した範囲であれば、プログラミングの知識がなくても作れます。実際に手を動かす作業のほとんどは、データの準備と、表示項目の調整です。

Q. 無料の範囲でどこまでできますか? ツールやプランによって異なります。まずは無料プランの範囲で、自分のデータを使った簡単なアプリを1つ作ってみて、必要性を感じたら有料プランを検討するとよいでしょう。

Q. 次は何をすればいいですか? アプリが完成したら、次はそれを「世界に公開する」というデプロイの体験に進めます。「作ったものを世界に公開する「デプロイ」を、AIと一緒にやってみた」もあわせてご覧ください。

まとめ

ノーコードツールを使うと、プログラミングの知識がなくても、自分の手元のデータを使った簡単なWebアプリを作ることができます。ポイントは、最初から機能を詰め込みすぎず、「一覧」と「詳細」のようなシンプルな構成から始めることです。うまくいかない部分が出てきたら、その都度AIに具体的に相談しながら調整していけば、大きくつまずかずに「実際に動くもの」を完成させる体験ができます。