「Miyabi」ダッシュボードに学ぶ：シングルページアプリ（SPA）の爆速構築ログ

「自分のビジネス用のダッシュボードを作りたいけど、開発会社に頼むと高すぎる」
「SPAとかReactとか聞くけど、非エンジニアには関係ない世界だと思っていた」

結論から言います。2026年の今、SPAの開発は非エンジニアでもAIと一緒にできます。

こんにちは、OFFICIAL ONEのむってぃです。

今回は、私が実際に運用している事業管理ダッシュボード「Miyabi」の開発プロセスを公開します。デザインからロジックまで、AIに一気通貫で組ませた実体験をベースにした「爆速構築ログ」です。

1. そもそも「SPA」とは？

SPA（シングルページアプリケーション）とは、ページの移動なしに画面が切り替わるWebアプリのことです。Gmailやスプレッドシートのように、サクサク動く快適な操作感が特徴です。

従来、SPAの開発にはReactやVueなどの専門的な知識が必要でした。しかしAIの登場により、「こういう画面が欲しい」と伝えるだけで、AIがSPAを構築してくれる時代になりました。

2. Miyabiダッシュボード構築の5ステップ

ステップ1：「紙ナプキンスケッチ」で全体像を描く

最初にやったのは、ダッシュボードに必要な画面を紙に手書きでスケッチすることです。

• ホーム画面（KPI一覧）
• コンテンツ管理画面（記事・動画の進捗）
• 収益トラッカー（売上の推移）
• タスクボード（やるべきことの一覧）

完璧な設計図は不要です。「こんな感じ」が伝わるラフスケッチで十分。AIはあなたの意図を汲み取って、具体的なUIに落とし込んでくれます。

ステップ2：AIに「一画面ずつ」作らせる

全画面を一度に作ろうとせず、1画面ずつAIに指示して構築しました。

「まずホーム画面を作って。上部にKPIカード（売上、PV、コンバージョン率）を横並びに3つ。下部に折れ線グラフで月次推移を表示」

一画面が完成してから次に進む。この段階的なアプローチが、品質を保つ秘訣です。

ステップ3：デザインは「参考サイト」を見せる

デザインのイメージを言葉だけで伝えるのは困難です。私がやったのは、気に入ったダッシュボードのスクリーンショットをAIに見せて「このテイストで作って」と伝えることです。

色使い、レイアウト、フォントの雰囲気をAIが理解して、一貫性のあるデザインを実現してくれました。

ステップ4：ロジック（データ処理）をAIに組ませる

見た目ができたら、次はデータの処理ロジックです。

• 外部のスプレッドシートからデータを取得する
• 取得したデータを加工してグラフに反映する
• ステータスの変更をリアルタイムで画面に反映する

これらのロジックも、「何をしたいか」を日本語で伝えるだけでAIが実装してくれます。

ステップ5：テスト＆改善のサイクル

完成したダッシュボードを実際に使いながら、気になる点をAIにフィードバックしていきます。

• 「この表の読み込みが遅い、最適化して」
• 「モバイルで見たときにレイアウトが崩れる、レスポンシブにして」
• 「この操作にはConfirmダイアログを入れて」

使いながら育てる。これがAI時代の開発スタイルです。

3. 非エンジニアが学ぶべきは「設計の眼」

Miyabiの構築を通じて確信したのは、非エンジニアに必要なのは「コーディング力」ではなく「設計の眼」だということです。

• 何を画面に表示すべきか？（情報設計）
• どの操作を直感的にできるようにすべきか？（UX設計）
• データはどこから取得し、どう更新すべきか？（データフロー設計）

これらの「問い」を持てる人が、AIを最大限に活用できます。コードはAIが書きます。あなたが担うのは「何を作るか」を決めることです。

最後に：あなたの「Miyabi」を作ろう

ダッシュボードの開発は、もはやエンジニアだけの特権ではありません。あなたのビジネスに必要な情報を一画面に集約した「自分だけのMiyabi」を、AIと一緒に作ってみませんか？

まずは紙に、「自分のビジネスで毎日見たい数字は何か？」を書き出すところから始めてください。それが、あなたのダッシュボードの設計図の第一歩です。

🎁 OFFICIAL ONE 公式LINEで「AI活用×資産構築」の限定資料を配布中

➡ 公式LINEに登録してプレゼントを受け取る