できること
- 7 日、30 日、90 日の表示を備えた、KPI ダッシュボード一式の HTML 1 ファイル
- CSV や JSON の書き出しをダッシュボードのデータに変えるスクリプト
- recharts を使った React のブロック、およびグラフの ECharts 版
- 変化のチップ、前期の線、内訳の表、目標のバー
- 任意:実行前に見積もる、PopNow のレポートのヘッダーの画像
向いている用途
- 製品、店舗、サポート、グロースの KPI
- 週次や月次の KPI レポートのページ
- 社内ツールの概要画面
向いていない用途
- 多くの画面がある本格的な管理アプリ
- リアルタイムのストリーミングデータ
- ひとつのグラフで多くの系列を比べること
使い方
Claude・ChatGPT で
PopNow のスキル「KPI ダッシュボードのテンプレート」(kpi-dashboard-template)を使って、次のことをしてください:exports/orders.csv から KPI ダッシュボードを作って。注文数、売上、訪問者数、初回返信時間を、チャネルごとの内訳つきで。
コーディングエージェントで
/popnow-kpi-dashboard-template exports/orders.csv から KPI ダッシュボードを作って。注文数、売上、訪問者数、初回返信時間を、チャネルごとの内訳つきで。
次はこれ
売上の目標を月 15 万に加えて、既定は直近 7 日にして。
当社の Next.js の管理アプリ用に、React 版をください。
用意しておくもの
- CSV または JSON の書き出し、またはそれを作るコマンド
- 4 つの指標と、値が小さいほうが良いかどうか
- 任意:目標値と、ひとつの指標の内訳に使う列
似ているスキル
すべて見る →3D アバター作成ツール
+3ぬいぐるみのようなかわいい 3D キャラクターをブラウザで作り、透過 PNG や 3D ページとして保存できます。
カレンダーヒートマップ
+31 年分の日々の活動を濃淡付きのカレンダーで表示。連続記録、合計、キーボード操作にも対応します。
AI SaaS ランディングページ
+3温かみのある砂色の紙に細い罫線とハッチングの溝を配し、AI アシスタントがタスクを計画するライブのかんばんボードを置きます。
アニメーション付きヒーローセクション
+3見出しの一語がゆるやかに切り替わり、ボタン 2 つと横長の画像枠を備えた LP のヒーローセクションです。
シェーダーのヒーロー付きの代理店サイト
+3下に固定された宣言文の後ろで、ライブのオレンジの熱をしたシェーダーのヒーローが動き、ピルのナビと、ずらして並ぶ事例のグリッドが続きます。
ダークモード SaaS ランディングページ
+3動きの多いダークトーンのソフトウェア製品向けマーケティングサイトを、自己完結した HTML ファイル 1 つで届けます。
デザイナーのポートフォリオサイト
+3落ち着いたグレーの上で、フェードする見出しの周りを 6 枚の傾いたカードが漂い、赤いポートレートのカードと、雑誌風の事例が続きます。
エンジニア向けポートフォリオサイト
+3事例紹介、執筆、登壇、履歴書、問い合わせフォームを備えた、エンジニア向けのダークな個人サイトです。
雑誌風の SaaS サイト
+3ネイビーの分割ヒーロー、ドキュメンタリー写真の横に並ぶ 5 行のセリフの見出し、斜めの帯、コバルトのアクセントひとつ。
グラスモーフィズムのサイトテンプレート
+3ほぼ黒のフィルムの上の、すりガラスのピル形ボタン。斜体の 1 語を含む大きなセリフの見出しと、メールの登録欄。
ハードウェア製品のサイト
+3銀色のスタジオ写真の上に、極細の巨大なモデル名。すりガラスのスペックカード、実寸比のラインアップ、ハードウェアのベントー。
インタラクティブなアーキテクチャ図
+3検証済みの JSON モデルから作る、オフラインでクリックできるシステム構成図。各ボックスの根拠も確認できます。
インタラクティブなグリッドのヒーロー
+3ほぼ黒の上の細い線のダークなグリッドが、カーソルの方へ曲がり、クリックのたびに光る輪が広がります。
ナレッジグラフ エクスプローラー
+3プロジェクトのメモを、すべての記述が出典の行にリンクする、オフラインで検索できるグラフに変えます。
AI モックアップからのランディングページ
+3まず 3 つのフルページのデザインを見て、ひとつを選ぶと、エージェントがきれいでレスポンシブなコードに組み上げます。
Web マガジンサイト テンプレート
+3記事、トピック、小さなショップ、定期購読を備えた、紙の雑誌のような質感のサイトを HTML ファイル 1 つで。
パーティクルアニメーションのヒーロー
+3温かい紙の上の文章の横で、インクとティールのドットの回転する球体が、アイデアごとに形を変え、スクロールで散ります。
個人ブランドのウェブサイト
+3細い枠の中で、温かい紙にやわらかくなじむ肖像。両側には、軽めと太字の言い切り。
シネマティックな製品ローンチページ
+3映画の光に照らされたほぼ黒のページ。ゆっくり流れる光の上のセリフの表題カード、レターボックスの夜のシーン、予約フォーム。
管理画面ダッシュボード テンプレート
+3グラフ、表、カンバン、カレンダーを備えた、実際に動くバックオフィス画面を、オフライン HTML ファイル 1 つで。
SaaS ランディングページ テンプレート
+3実際に動く製品コンソール、料金、登録フォームを備えた、落ち着いた明るいトーンのソフトウェア製品向けマーケティングサイトです。
スクラップブック風ポートフォリオサイト
+3紙の小物で作る複数ページのオンライン履歴書。事例紹介と印刷できる履歴書付きです。
スニーカーショップ サイトテンプレート
+3カタログ、商品ページ、カート、デモ決済を備えた、靴・アパレルのショップ一式を HTML ファイル 1 つで。
ワークフロー自動化のランディングページ
+3グラファイトのページ。小さく左寄せの見出しと、その下で実行、再試行、ログの流れるライブのノードグラフ。
よくある質問
数字はどこから来ますか?
あなた自身の書き出しからです。同梱のスクリプトが、CSV や JSON を、日次の合計でも生のイベントでも読み込み、指標ごとに 1 日 1 行と任意の内訳のデータを作って、ページに書き込みます。
変化率はどう計算されますか?
直近の 7、30、90 日を、その直前の同じ日数と比べます。合計は総和を、時間や率は平均を比べ、アクティブユーザーのような水準は最新の値を比べます。値が小さいほど良い指標では、下がることが良いとして表示されます。
グラフのライブラリが必要ですか?
HTML 版は何も必要とせず、オフラインで動きます。React 版は recharts を使い、すでに ECharts を使っているプロジェクトのために、グラフの ECharts 版も含まれます。
PopNow がグラフを描けますか?
できませんし、そうすべきでもありません。画像モデルは数字を間違えることがあります。PopNow は、任意の文字なしのヘッダーや共有カードの背景にだけ使い、本当の数字は HTML で上に載せます。

