SaaS ダッシュボードのテンプレート。
SaaS 分析ダッシュボードの完全な Web アプリ UI です。Tallywise というサブスクリプション売上分析ツールを例にした 8 画面で、MRR の概要や顧客一覧から、売上レポート、請求書、コホート別の継続率、チーム設定、初回のオンボーディングまでそろっています。数字はどの画面でも合っていて、すべての画面がシンプルな HTML と Tailwind なので、Codex や Claude Code がクローンしてあなたのアプリに作り替えられます。
2026年11月7日 更新
Web サイト · 8 ページ · 無料・オープンソース
01概要 
02顧客 
03顧客の詳細 
04売上 
05請求書 
06コホート 
07設定 
08オンボーディング
クローンする
npx degit ummydev/ui-templates/webapps/saas-dashboard my-app
リポジトリのほかの部分は含めず、このテンプレートだけを新しいフォルダにコピーします。
自分のものにする
これは codexdesign.io の SaaS ダッシュボード テンプレートです。名前を [あなたのプロダクト] に変え、サンプルデータを [あなたの機能] に置き換えて、すべての画面を DESIGN.md のデザインシステムに沿わせてください。
新しいフォルダで、これを Codex や Claude Code に貼り付けてください。
- 使用技術
- HTML · Tailwind CSS v4 · Lucide icons · SVG charts
テンプレートの内容
| 画面 | 内容 |
|---|---|
| 概要 | MRR・ARR・顧客数・解約率と前月比、今月の MRR の動き、プラン別 MRR、最近の出来事 |
| 顧客 | 検索、プランと状態での絞り込み、並べ替え、会社・プラン・MRR の表 |
| 顧客の詳細 | 会社情報、契約内容、MRR の履歴、累計売上、メモと活動 |
| 売上 | 12 か月分の新規・拡大・縮小・解約 MRR。CSV で書き出せる |
| 請求書 | 状態別（未払い・期限切れ・下書き・支払い済み）の請求書と、1 枚のプレビュー |
| コホート | 登録月ごとの継続率の表と、加重平均、その読み方 |
| 設定 | チームメンバーと役割、招待、伏せ字の API キー、権限の表 |
| オンボーディング | 新しいアカウントの空の状態と、Stripe の接続・履歴の取り込み・招待の手順 |
サンプルデータは、架空の会社の 10 月です。MRR 62,500 ドル、ARR 750,000 ドル、顧客 712 社、解約率 3.9%。4 つのプランの合計はこれらの数字とぴったり一致し、今月の動きも合っています（59,840 + 4,210 + 1,890 − 420 − 3,020 = 62,500）。売上レポートの 12 か月は、概要と同じ MRR で終わります。顧客名は架空のものです。
各画面は HTML ファイル 1 つで、1440×900 でデザインし、幅 390 ピクセルのスマホでも使えます。スマホではサイドバーがメニューに折りたたまれ、表は横にスクロールします。スタイルは Tailwind CSS v4 と共通の tokens.css です。数字は IBM Plex Mono の等幅数字、グラフは SVG、表の行はキーボードで選択でき、アイコンは Lucide です。どのファイルもブラウザで開くだけで、インストールやビルドは要りません。
Codex や Claude Code で使う
ui-templates リポジトリから、このテンプレートだけをコピーします。
npx degit ummydev/ui-templates/webapps/saas-dashboard my-dashboard
あとはエージェントに、あなたのアプリにするよう頼みます。
このフォルダは SaaS ダッシュボードの UI テンプレートです。[あなたのプロダクト] に作り替えてください。対象は [誰のためのものか] です。DESIGN.md と tokens.css はデザインシステムとして残し、指標、プラン、顧客、グラフを [あなたのデータ] に置き換えて、合計がすべての画面で一致するようにしてください。そのうえで [Next.js / React / あなたの技術スタック] で実装し、[あなたのデータソース] につないでください。
デザインシステムが DESIGN.md に書かれているので、エージェントが後から追加する画面（アラート、セグメント、予測など）も、既存の 8 画面とそろいます。
Ledger デザインシステムが土台
このテンプレートは、データの多いツール向けの高密度でダークなデザインシステム Ledger を使っています。IBM Plex Sans と数字用の IBM Plex Mono、6px の角丸、そして現在の状態と重要な数値にだけ使うターミナル風のアンバー 1 色が特徴です。ページではライブプレビュー、DESIGN.md の全文、shadcn テーマを見られます。
よくある質問
この SaaS ダッシュボードのテンプレートは無料ですか？
はい。MIT ライセンスのオープンソースで、個人でも商用でも使えます。
Next.js、React、shadcn/ui でも使えますか？
使えます。画面は Tailwind のクラスを付けたシンプルな HTML なので、エージェントがどのフレームワークのコンポーネントにも移せます。Ledger のページには同じ配色の shadcn テーマもあります。tokens.css と DESIGN.md はそのまま残すよう頼めば、移したあともデザインが崩れません。
ライトテーマはありますか？
あります。標準はダークで、どの画面でも <html> タグから class="dark" を外すと Ledger のライトテーマに切り替わります。