散らばった社内データを1枚のダッシュボードに集約する｜Next.js × Firebaseの設計

売上はスプレッドシート、在庫はExcel、問い合わせはSaaSのフォームツール。それぞれのツールは優秀でも、経営者が「今月、うちの会社は全体としてどうなのか？」を把握しようとすると、途端に手が止まる——そんな状況に心当たりはないでしょうか。数字の所在がバラバラだと、判断に必要な情報を集めるだけで半日かかることもあります。本記事では、散らばったデータを1枚のダッシュボードに集約するという考え方と、Next.js 16とFirebaseを使った設計の進め方についてお伝えします。

なぜデータが散らばるのか？

データが散らばる原因は、多くの場合「ツール導入の歴史」にあります。

最初は紙の台帳だったものがExcelになり、売上管理にはスプレッドシートを導入し、顧客対応が増えたタイミングでSaaSの問い合わせ管理ツールを契約する。在庫管理は倉庫担当者が独自のExcelファイルで運用していて、月末に手動で数字を集計している。こうした積み重ねは、どの企業にも多かれ少なかれ起きていることかと思います。

ポイントは、個々のツール選定が間違っていたわけではないという点です。そのときどきの課題に対して合理的な判断をした結果、気づけばデータの置き場所が5か所、6か所に分散している。問題は「ツールが多いこと」ではなく、ツール間のデータが横断的に見えないことにあります。

1枚のダッシュボードで何を見るべきか？

「データを集約する」と聞くと、あらゆる数字を1つの画面に詰め込むイメージを持つかもしれません。ただ、経験上、情報量が多すぎるダッシュボードはかえって使われなくなります。ダッシュボードの設計で大切なのは、「何を見ないか」を先に決めることです。

KPIは3つから5つに絞る

経営者が毎朝確認するダッシュボードであれば、KPIは3つから5つが適切な数です。たとえばBtoBのサービス業であれば、以下のような組み合わせが考えられます。

• 今月の売上（累計と着地見込み）
• 新規問い合わせ件数（今月と前月比）
• 対応中の案件数

重要なのは、「この数字が動いたら、何かアクションを取る」と言えるものだけを選ぶことです。

Next.js + Firestore での設計

なぜこの組み合わせなのか

Next.js 16のApp Routerには「Server Components」という仕組みがあります。サーバー側でデータを取得して画面を組み立て、ブラウザには組み立て済みの結果だけを送る方式です。ダッシュボードのような「データを取得して表示する」画面とは相性が良い設計になっています。

Firebaseを組み合わせる理由は、認証とデータベースが1つのプラットフォームに統合されているからです。中小企業の利用規模であれば、Firebaseの無料枠に収まるか、月額数千円程度で運用できることが多い傾向にあります。

データ取得の流れ

1. 各データソースからFirestoreにデータを集める: スプレッドシートのデータはGoogle Sheets APIで、SaaSのデータは各サービスのAPIで、Firestoreに定期的に同期します
2. Server Componentsでデータを取得する: ページコンポーネントの中で直接Firestoreからデータを読み取れます
3. グラフライブラリで描画する: Rechartsなどのグラフライブラリに渡して折れ線グラフや棒グラフとして表示します

設計上の注意点

リアルタイム性をどこまで求めるか。 経営ダッシュボードに秒単位のリアルタイム性が必要なケースは稀です。多くの場合、1日に数回の同期で十分です。

データの「正しさ」を誰が担保するか。 ダッシュボードは表示するだけのツールなので、元データが間違っていればダッシュボードの数字も間違います。データソース側の入力ルールや更新タイミングを整備することのほうが重要な場合があります。

最初のダッシュボードは「1画面・3数字」で十分

おすすめしているのは、1画面に3つの数字を表示するだけの、ごく小さなダッシュボードから始めるアプローチです。小さく作って実際に使ってみると、「この数字よりもあちらの数字のほうが重要だった」「週次ではなく日次で見たい」といった具体的なフィードバックが出てきます。

育てる流れ

• 第1段階: 売上・問い合わせ数・対応中案件数の3つを表示
• 第2段階: 実際の利用を経て、数字の入れ替えや表示期間の調整
• 第3段階: 部門別や担当者別の切り口を追加、権限管理を整備

まとめ

データが散らばっている状態は、事業が成長してきた結果であり、ツール選びの失敗ではありません。ただ、経営判断のスピードを上げるためには、数字を1か所に集めて見える化する仕組みが必要です。最初から大きなものを作る必要はありません。1画面・3数字から始めて、使いながら育てていくのがもっとも確実な進め方です。

また、社内に散らばっているのは数字だけでなく「マニュアルや手順書」も同様です。ダッシュボードで数字を集約したら、次は社内マニュアルをAIで検索可能にする｜Next.js × ベクトル検索の始め方を参考に、探す時間そのものを減らす仕組みづくりも検討してみてください。