ダッシュボード キットDashboard

この見本は、架空のお店「しおかぜ珈琲店」の見本データをブラウザの中で動かしています。右上の English を押すと、英語の画面に切り替わります。

期間と区分で絞り込むと、下の数字・折れ線・棒・目標・表がいっしょに変わります。折れ線に触れると縦の線が付いてきて、その日の値をまとめて読めます。どのグラフも「表で見る」に切り替えられ、表は見出しを押して並べ替え、CSV でダウンロードできます。絞り込みは URL に残るので、同じ画面をそのまま人に渡せます。

部品は 5 つ（数字・折れ線・棒・目標・表）で、どこに何を出すかは設定に書くだけです。グラフのライブラリにも BI の月額にも頼らず、色は色覚の差があっても見分けられる 8 色の並びにしてあります。キーボードだけでも操作でき、スマートフォンの幅にも暗い配色にも対応しています。

置き方は 3 つから選べます。いまのサイトに 2 行で埋め込む形、Next.js のテンプレ（データの置き場所はブラウザに出しません）、Google スプレッドシートからそのまま公開する形（見られるのは、そのスプレッドシートを見られる方だけ）。どれも同じ画面が出ます。

この見本は「ダッシュボード キット」（定価 ¥9,800 の買い切り。9 月 29 日までは発売記念 ¥8,800）の実物です。サーバーも月額の費用もかかりません ── note / BOOTH