Flow for kintone のダッシュボード ― KPIカード・棒グラフ・円グラフで案件を可視化する
この記事で解説すること
「案件の商談フェーズがどう分布しているか」「確度別に何件の案件があるか」「今月の売上合計はいくらか」——こうした情報を kintone の一覧画面で即座に確認できたら、日々の管理が楽になります。
Flow for kintone の「ダッシュボード」機能を使えば、カスタマイズビューとしてKPIカードやグラフを含むダッシュボードを表示できます。kintone 標準のグラフ機能より柔軟なレイアウトが可能で、複数のタブにグラフを分けて整理することもできます。
この記事では、案件管理アプリを例に、以下の要素を含むダッシュボードを作成します。
- KPIカード: 案件総数・売上合計・平均売上を数値カードで表示
- 棒グラフ: 商談フェーズ別の案件数
- 円グラフ: 確度別の案件件数分布
前の記事で設定したデータテーブルビューと同じアプリに、ダッシュボードビューを追加します。
ダッシュボード機能とは
kintone 標準グラフとの違い
kintone には標準でグラフ機能がありますが、「一覧ビューの中に複数のグラフを並べる」ことはできません。
Flow for kintone のダッシュボードは、カスタマイズビューとしてグラフを表示するため、以下のことが可能です。
| 機能 | kintone 標準グラフ | Flow for kintone ダッシュボード |
|---|---|---|
| 複数グラフを1画面に表示 | 不可（1ビュー=1グラフ） | 可（1タブに最大6グラフ） |
| グラフ種類 | 棒・折れ線・円・積み上げ等 | 棒・折れ線・円・面・レーダー等11種 |
| 期間フィルタ | 固定条件のみ | 画面上で動的に切替可能 |
| 横並びレイアウト | 不可 | 表示幅（33%/50%/67%/100%）で自由に配置 |
| タブ構成 | なし | 最大5タブでカテゴリ別に整理 |
| KPIカード | なし | 数値の合計・平均・件数等をカードで表示 |
| 画像エクスポート | なし | PNGワンクリック出力 |
設定の流れ
データテーブルビュー（記事12）と同様に、Flow for kintone の設定画面だけで完結します。kintone のアプリ設定を開く必要はありません。
- カスタマイズビューの作成: プラグイン設定画面から「ダッシュボード」を選択して直接作成
- ダッシュボード設定: タブ・KPIカード・グラフ・期間フィルタ・表示オプションを構成
Step 1: ダッシュボード設定を作成する
Flow for kintone の設定画面を開き、カスタマイズビュー設定を追加します。
- 左サイドバーの「カスタマイズビュー設定」にある 「＋ 新しいカスタマイズビュー設定」 をクリックします
- 「カスタマイズビュー機能の選択」ダイアログで 「ダッシュボード」 を選択します
- 設定画面が開きます。設定名を 「案件ダッシュボード」 に変更します
- 「対象カスタマイズビュー」の横にある 「＋ 作成」 ボタンでビューを作成します（ビュー名:
ダッシュボード）
データテーブルビュー（記事12）と同じ手順です。HTMLは不要で、Flow for kintone がダッシュボードを自動レンダリングします。
Step 2: タブとKPIカードを設定する
ダッシュボード設定画面の左ナビゲーションで「タブ管理」を選択します。
初期状態ではタブが存在しないため、「＋ タブを追加」 ボタンをクリックして最初のタブを作成します。タブラベルを 「案件概況」 に変更します。
KPIカード
KPIカードは、レコードの集計値をカード形式で表示する機能です。タブ上部に横並びで配置され、案件数や売上などの数値を一目で確認できます。
「KPIカード」セクションの 「＋ KPIカードを追加」 をクリックし、以下の3枚を設定します。
| カード | ラベル | 集計方法 | 集計対象フィールド | 接尾辞 | 背景色 |
|---|---|---|---|---|---|
| ① | 案件総数 | 件数（COUNT） | 売上 | 件 | 青（#1976d2） |
| ② | 売上合計 | 合計（SUM） | 売上 | 円 | 緑（#2e7d32） |
| ③ | 平均売上 | 平均（AVG） | 売上 | 円 | オレンジ（#ed6c02） |
集計方法が「件数」の場合でも集計対象フィールド（数値フィールド）の選択が必要ですが、集計結果はレコード数になります。
Step 3: 棒グラフを設定する（商談フェーズ別案件数）
同じタブの「グラフ」セクションから 「＋ グラフを追加」 をクリックし、以下を設定します。
設定値
| 設定項目 | 値 |
|---|---|
| グラフ名 | 商談フェーズ別 案件数 |
| グラフの種類 | 棒グラフ |
| 大項目（X軸） | 商談フェーズ |
| 集計方法 | レコード数（COUNT） |
| 表示幅 | 50% |
表示幅について
各グラフには「表示幅」を設定でき、33%・50%・67%・100% の4段階から選択します。50%のグラフを2つ並べると、ちょうど横並びに配置されます。合計が100%を超える場合は自動的に折り返されます。
Step 4: 円グラフを設定する（確度別案件分布）
同じタブ内で再度 「＋ グラフを追加」 をクリックし、2つ目のグラフを追加します。
設定値
| 設定項目 | 値 |
|---|---|
| グラフ名 | 確度別 案件分布 |
| グラフの種類 | 円グラフ |
| 大項目 | 確度 |
| 集計方法 | レコード数（COUNT） |
| 表示幅 | 50% |
| 凡例 | 表示（デフォルトでオン） |
円グラフの使い所
棒グラフはフェーズ間の「件数の差」を視覚的に比較しやすいのに対し、円グラフは全体に対する「割合」を把握するのに向いています。「全体の何%が確度80%以上か」といった視点で案件状況を確認できます。
タブ管理画面では、KPIカード3枚と追加した2つのグラフがアコーディオンで並びます。ドラッグ&ドロップで表示順を変更することも可能です。
Step 5: 期間フィルタを設定する
ダッシュボードの上部に期間フィルタを表示することで、ユーザーが画面上で表示期間を動的に切り替えられます。
左ナビゲーションの「期間フィルタ設定」で設定します。
期間フィルタの設定
| 設定項目 | 値 |
|---|---|
| 期間フィルタ | 有効 |
| 対象日付フィールド | 受注予定日 |
| デフォルト表示期間 | 今月 |
| 会計年度期首月 | 4月 |
| 有効なプリセット | 今月 / 先月 / 今四半期 / 先四半期 / 今年 / カスタム |
期間フィルタはダッシュボード上のKPIカード・全グラフに連動して適用されます。「今四半期」を選択すると、受注予定日が今四半期内のレコードのみがすべての表示に反映されます。
「カスタム」を選択した場合は、カレンダーから任意の日付範囲を指定できます。
Step 6: 表示オプションを設定する
左ナビゲーションの「表示オプション」で、エクスポート機能を有効にします。
| オプション | 設定値 | 説明 |
|---|---|---|
| PNGエクスポート | 有効 | ダッシュボードを画像としてダウンロード |
| CSVエクスポート | 有効 | グラフの元データをCSVでダウンロード |
設定が完了したら 「保存」 をクリックし、アプリを更新します。
完成イメージと操作方法
設定完了後、案件管理アプリの一覧で「ダッシュボード」ビューを選択すると、KPIカード3枚と2つのグラフが横並びで表示されます。
主な操作
- KPIカード: 期間フィルタに連動して、案件総数・売上合計・平均売上がリアルタイムに更新
- 期間フィルタ: ドロップダウンで表示期間を変更（KPIカード・全グラフに即反映）
- ホバー: 棒グラフのバーや円グラフのスライスにマウスを乗せるとツールチップで件数を表示
- 凡例: 凡例のラベルをクリックすると特定の系列を非表示/表示
- エクスポート: ツールバーのボタンでPNG画像またはCSVをダウンロード
タブを追加してダッシュボードを拡張する
ダッシュボードは最大5タブまで構成でき、用途別にグラフを分けて整理できます。この記事では「案件概況」に加え、3つのタブを追加して4タブ構成にしています。
| タブ | ヘッダー色 | 内容 |
|---|---|---|
| 案件概況 | 青 | KPIカード3枚 + 棒グラフ・円グラフ（件数ベース） |
| クロス分析 | 緑 | フェーズ×確度を集合・積み上げ・100%・円で多角分析 |
| 時系列 | 紫 | KPIカード2枚 + 月別推移の棒グラフ・積み上げ棒グラフ |
| 金額・多階層 | 赤 | 売上金額ベース（千円スケール）+ 3階層グラフ |
Tab 2: クロス分析
同じデータを「集合棒」「積み上げ棒」「100%積み上げ棒」「円グラフ」の4パターンで表示し、フェーズ×確度のクロス分析を行います。グラフの種類を変えるだけで、異なる観点から同じデータを分析できます。
Tab 3: 時系列
月単位の案件数推移と、月×フェーズの積み上げ推移を表示します。KPIカードには最大売上と最小売上を配置し、金額レンジの把握にも対応しています。
Tab 4: 金額・多階層
集計方法を「合計（SUM）」にし、スケール（除数）を1000に設定することで、Y軸を千円単位で表示しています。3階層グラフでは大項目×中項目×小項目の複合分析も可能です。
タブの追加は、タブ管理画面の 「＋ タブを追加」 ボタンから行えます。各タブにKPIカードとグラフを独立して配置でき、タブ切替で視点を素早く切り替えられます。
グラフの種類と表現力
Flow for kintone のダッシュボードでは、同じデータでもグラフの種類や設定を変えることで異なる観点から分析できます。この記事で作成した12のグラフから、代表的なパターンを紹介します。
棒グラフのバリエーション
商談フェーズ別 案件数: 6フェーズの単純な棒グラフ。集計値の大小比較に最適です。
フェーズ×確度 積み上げ: フェーズごとに確度が積み上がり、各フェーズの合計件数と内訳が同時にわかります。
フェーズ×確度 100%: 全バーが同じ高さになり、確度の構成比をフェーズ間で比較できます。
月別×フェーズ 推移: 時系列の積み上げ棒グラフで、月ごとの案件数の推移とフェーズ構成の変化を把握できます。
フェーズ別 売上合計: 件数ではなく金額ベースの集計。Y軸が千円スケールで表示されます。
円グラフのバリエーション
確度別 案件分布: 確度5値のスライス。全体に対する割合の把握に適しています。
確度別 売上分布: 同じ確度分類ですが金額ベースの集計です。件数と金額ではスライス比率が変わるため、異なる示唆を得られます。
その他の対応グラフ
この記事では棒グラフと円グラフを中心に紹介しましたが、Flow for kintone のダッシュボードでは以下のグラフにも対応しています。
| グラフ種別 | 用途例 |
|---|---|
| 横棒グラフ | 項目名が長い場合やランキング表示に最適 |
| 折れ線グラフ | 時系列データの推移をシンプルに表現 |
| 面グラフ | 折れ線＋塗りつぶしで累積量の変化を強調 |
| 曲線グラフ | なめらかな曲線で推移を美しく表現 |
| ドーナツグラフ | 円グラフの中央を空けたバリエーション |
| レーダーチャート | 複数の評価軸を多角形で比較 |
| 散布図 | 2つの変数間の相関関係を分析 |
| バブルチャート | 3変数（X・Y・サイズ）の関係を可視化 |
グラフの種類はチャートごとに選択でき、同じデータでも表現方法を変えることで新たな気づきが得られます。
データテーブルビューとダッシュボードの使い分け
同じアプリに2つのカスタマイズビューを設定することで、用途によって切り替えて使えます。
| ビュー | 用途 |
|---|---|
| データテーブル（記事12） | 個別案件の検索・確認・CSV出力 |
| ダッシュボード（この記事） | 全体状況の把握・KPIカード・グラフによる可視化 |
kintone の一覧切り替えは画面左上のビュー選択から瞬時に行えるため、業務の流れに応じて使い分けられます。
まとめ
| 設定項目 | 内容 |
|---|---|
| kintone 側の設定 | 不要（プラグイン設定から「＋ 作成」で直接追加） |
| カスタマイズビュー機能 | ダッシュボード |
| タブ構成 | 4タブ（案件概況・クロス分析・時系列・金額・多階層） |
| KPIカード | 計5枚（案件総数/売上合計/平均売上/最大売上/最小売上） |
| グラフ | 計12グラフ（棒グラフ8種 + 円グラフ4種） |
| レイアウト | 各グラフ表示幅50%で横並び |
| 期間フィルタ | 受注予定日を基準に今月/先月/今四半期/先四半期/今年/カスタムで切替 |
| エクスポート | PNG画像・CSV |
次の記事
ダッシュボードで基本的なグラフ表示ができるようになったら、次は期比較機能を使って「今期と前期の案件数を並べて比較する」設定を解説します。
KPIカードの増減バッジやグラフの比較表示で、季節変動や前年比の確認が1画面で完結します。
