AIでアプリを作れる「BASE44」実践！【第2回】スプレッドシートと連動するダッシュボードを作成

【PR】AI アプリ開発プラットフォーム「Base44」を確認する

あわせて読みたい

BASE44完全ガイド【第1回】従来のノーコードと何が違うか 引用：BASE44 公式ページ 【PR】AI アプリ開発プラットフォーム「Base44」を確認する AIとノーコードを組み合わせたサービスとして大きな注目を集めているのが、Wixによ...

前回の記事では、BASE44の「AIプロンプトベース」という特徴と、従来のドラッグ＆ドロップ型ノーコードツールとの違いを解説した。

第2回となる本記事では、BASE44の強みである「外部データソースとの連携」を実際に体験しながら、Googleスプレッドシートと連動する売上ダッシュボードを構築していく。「プロンプトを打つだけで本当に使えるツールができるのか？」という疑問に、実践を通じて答えを出そう。

作成するツールの仕様

今回作成するのは、スモールビジネスオーナー向けの売上ダッシュボードだ。3店舗分の売上データをGoogleスプレッドシートで管理している想定で、以下の機能を持つツールを目指す。

・売上総額、客数、平均客単価などのKPIカード表示

・日別売上推移、カテゴリ別売上構成、店舗別比較のグラフ表示

・店舗、期間、カテゴリで絞り込めるフィルター機能

・CSV形式でのレポートエクスポート機能

データソースとなるGoogleスプレッドシートには、店舗の異なる日付・カテゴリ・売上金額・客数の5項目を用意した。3店舗分、10日分のサンプルデータだ。

プロンプト入力からアプリ生成まで

BASE44のトップページにアクセスし、以下のプロンプトを入力した。

「スモールビジネスオーナー向けのダッシュボードを作成したいです。店舗別売上・カテゴリ・顧客の統計状況を一目で把握でき、グラフ表示、フィルター機能、レポートのエクスポート機能も搭載。以下のスプレッドシートを参照します。」

プロンプトとともにGoogleスプレッドシートのURLを貼り付けると、BASE44は即座にスプレッドシートのデータ構造を解析し始めた。

約1分後、BASE44から構成プランが提示された。主要機能として、KPIカード表示を含むダッシュボード、日別売上推移のグラフ、カテゴリ別・店舗別比較チャート、フィルター機能、CSVエクスポート機能が提案された。

データ構造としては、SalesDataエンティティに店舗名・日付・カテゴリ・売上金額・客数のフィールドを持つ設計だ。デザインは深いネイビーとエメラルドグリーンを基調としたモダンなカラーパレットが選ばれた。

「では作成を開始します」というメッセージとともに、BASE44はコンポーネントの生成を開始した。
Sales Data、Stats Card、Sales Chart、Category Chart、Store Comparison Chart、Filter Bar、Sales Table、Dashboard Page、Layoutと、必要な要素が次々と自動生成されていく様子が確認できる。

プロンプト入力から完成まで、実測で約5分。ログイン機能やデータベース接続、グラフライブラリの設定といった面倒な作業はすべてBASE44側で自動処理された。

完成したダッシュボードは、単なる静的な表示ではない。フィルターで店舗を選択すると即座にグラフやKPIカードの数値が更新され、グラフ要素にはホバー時のアニメーションも実装されている。
こうしたインタラクティブな挙動が、コードを一行も書くことなく自動生成されている点は特筆に値するだろう。

カスタマイズと調整

生成されたダッシュボードは、すでに店舗別比較チャートが機能していた。売上と客数を店舗ごとに棒グラフで比較できる。

ここで追加の要望を出してみた。チャット欄に「客数当たりの売り上げの各店舗の比較表を入れて。」と入力する。

BASE44は数十秒で新しいコンポーネント（Customer Efficiency Chart）を生成し、ダッシュボードに追加した。横棒グラフで各店舗の客単価を比較表示し、下部には各店舗の客単価サマリーも表示される仕様だ。

グラフにマウスオーバーすると、店舗Aの場合「客単価: ¥1,069、総売上: ¥532,208、総客数: 498人」といった詳細情報がツールチップで表示される。このようなインタラクティブな要素も自動で実装されていた。

ただし、無料プランでは1日あたりのAIクレジットに制限がある点には注意が必要だ。今回の検証では、ダッシュボードの基本構築と1回の追加カスタマイズでクレジットを使い切った。
複数回の調整が必要な複雑なプロジェクトでは、有料プランへのアップグレードを検討する必要があるだろう。

デプロイと共有

作成したアプリは、設定画面からワンクリックで公開できる。App Visibilityで「Public」を選択し、必要に応じて「Require login to access」にチェックを入れれば、認証付きの限定公開も可能だ。

チームメンバーへの共有は「Copy Link」か「Send Invites」から行える。BASE44のドメイン（*.base44.app）でホスティングされるため、サーバー設定やドメイン取得の手間は一切不要だ。

また、「Platform Badge」の設定で「Edit with Base44」バッジの表示/非表示を切り替えられる。
クライアント向けに納品する場合は非表示にすることで、よりプロフェッショナルな印象を与えられるだろう。

BASE44の使い方まとめ

今回の検証を通じて見えてきたBASE44の基本的なワークフローを整理する。

ステップ1：データソースの準備

Googleスプレッドシート、CSV、または各種APIからデータを用意する。スプレッドシートの場合は共有設定で「リンクを知っている全員」にアクセス権を付与しておく。

ステップ2：プロンプトでアプリの要件を伝える

作りたいアプリの目的、必要な機能、対象ユーザーを自然言語で記述する。データソースのURLも併せて伝えると、BASE44がデータ構造を自動解析してくれる。

ステップ3：生成されたアプリを確認・調整

プレビュー画面で動作を確認し、追加の要望があればチャットで伝える。「〇〇を追加して」「△△の色を変えて」といった指示で、AIが即座にコードを修正してくれる。

ステップ4：デプロイ・共有

設定画面でVisibilityを選択し、Publishボタンをクリックするだけで公開完了。URLをチームに共有すれば、すぐに利用開始できる。

実践から見えた可能性と課題

今回の検証で、「プロンプトを打つだけで本当に使えるツールができるのか？」という問いに対しては「Yes」と答えられる。
特にGoogleスプレッドシートとの連携は非常にスムーズで、既存のデータ資産を活用したダッシュボードを短時間で構築できた。

一方で、無料プランのクレジット制限は想像以上に厳しい。本格的に活用するなら月額16ドル以上の有料プランが現実的だ。
また、細かいデザイン調整やロジックのカスタマイズには限界があり、完全に思い通りのUIを実現するには試行錯誤が必要になるケースもあるだろう。

複数のデータソースからCSVを集約してデータベース化し、分析ダッシュボードを構築するといった用途には、BASE44は非常に適している。
将来的にはAIによる売上予測や異常検知といった機能との連携も期待したいところだ。

次回、料金プランとセキュリティを分析

最終回となる第3回では、BASE44を実務で導入する際に気になる「料金プラン」「セキュリティ」「運用上の注意点」を詳しく解説する。

無料プランから最上位のEliteプランまで、どのプランが自社のユースケースに適しているのか。コードエクスポートの制限やベンダーロックのリスクにどう対処すべきか。
読者が導入を判断するために必要な情報を網羅的にお伝えする予定だ。

あわせて読みたい

BASE44完全ガイド【第1回】従来のノーコードと何が違うか 引用：BASE44 公式ページ 【PR】AI アプリ開発プラットフォーム「Base44」を確認する AIとノーコードを組み合わせたサービスとして大きな注目を集めているのが、Wixによ...