Tips

タスクの状態を「見える化」できるカンバンビューを実装するプラグイン

 kintoneは柔軟で便利なデータベースツールですが、標準の「一覧画面」だけでは、視覚的な進捗管理や直感的な操作性において、あと一歩物足りなさを感じることも少なくありません。

 今回ご紹介するのが、kintoneでタスクの進捗状況を「見える化」して直感的なUI操作を提供できる「カンバンビュープラグイン(Kanban View Plugin)」です。

このプラグインで解決できる課題

多くの企業やチームがkintoneでタスク管理や案件管理を行う際、以下のような課題に直面しがちです。

  • 「一覧」を見ても、現在の進捗がパッと頭に入ってこない
    標準の一覧画面(表形式)では、レコードが縦にずらりと並ぶため、どの案件が「未着手」で、どれが「進行中」なのか、タスク全体のボリューム感やバランスを直感的に把握することが困難です。
  • ステータスの更新作業が手間で、更新頻度が低下する
    タスクの進捗が変わるたびに、「レコードの詳細画面を開く」→「編集ボタンを押す」→「ドロップダウンを切り替える」→「保存する」という一連の操作を行う必要があります。このわずかな手間の積み重ねがメンバーの負担となり、次第に「後でまとめて更新しよう」となって、リアルタイムな進捗状況が反映されなくなる原因になります。
  • 今月対応すべきタスクの「量」や「金額」の合計がすぐに分からない
    「今月中に完了すべき案件の総額はいくらか?」「特定のステータスにどれだけの案件が滞留しているか?」を知りたい場合、標準機能ではわざわざグラフを設定したり、エクセルに書き出して集計したりする必要があり、リアルタイムな経営判断やチーム内での状況把握に遅れが生じます。

「カンバンビュープラグイン」は、これらの現場の「困った」をボタン一つ、あるいはマウスのドラッグ&ドロップだけでスマートに解決するために開発されました。

カンバンビューとは

 そもそも「カンバンビュー」とは、タスクや案件を「カード」に見立て、その進捗状況(ステータス)ごとに分けた「列(レーン)」に配置して管理する視覚的な表示方法のことです。ホワイトボードに付箋を貼り付け、進捗に合わせて付箋を右へ右へと動かしていく様子をイメージすると分かりやすいでしょう。

IT業界のプロジェクト管理や、製造業の工程管理などで広く親しまれている手法ですが、これがkintone上でも実現できるようになります。

 カンバンビューの最大の特長は、「情報の認知にかかる時間がほぼゼロになる」という点です。文字を一行ずつ読み込まなくても、画面を開いた瞬間に「あ、今『確認中』の列にカードが溜まっているから、ここがボトルネックだな」「『完了』の列がどんどん増えていて順調だな」ということが、色や位置といった視覚情報としてダイレクトに脳に伝わります。

プラグインの目的

 本プラグインをkintoneに導入する目的は、「タスク進捗状況の徹底的な見える化」「ユーザーインターフェース(UI・操作性)の劇的な向上」の2点に集約されます。

1. タスク進捗状況の「見える化」

 レコードがカンバンで並ぶだけではありません。本プラグインでは、各ステータスの列の最上部に、その列に存在する「レコードの件数」や「数値フィールドの合計値(金額など)」が常時表示されます。

 これにより、「未着手の案件が5件、交渉中が3件、成約残高が〇〇万円」といった重要データを、画面をスクロールしても常に視界に保ちながら業務を進めることができます。

2. UI(ユーザーインターフェース)の向上による業務効率化

進捗の変更は、カードを目的の列へ「ドラッグ&ドロップ」で移動させるだけで完了します。

カードを移動させると、kintoneのデータ(ドロップダウンフィールドの値)が自動的に書き換わり、それと同時に列の上部に表示されている件数や合計金額もリアルタイムに再計算されます。この直感的な操作性により、ユーザーの体験(UX)を向上させて、ストレスの少ない業務フローを実現します。

プラグインの画面の表示サンプル

プラグインを適用したkintoneの一覧画面は、まるで専用のタスク管理ツールのシステムのように洗練されたデザインに変化します。

画面の上部には、スケジュール管理を快適にする「先月」「今月」「来月」という月切替ボタンと、現在表示している月を示す「2026年07月分」といった対象月ラベルが配置されます(※日付による絞り込みを設定している場合)。これにより、過去の振り返りや未来の予定への切り替えがワンクリックで行えます。

また、月切替ボタンのすぐ右隣には、現在表示している年月のレコード「合計金額」が大きく太字で表示され、一目で現在の月間総合指標をキャッチアップできます。

その下には、設定したステータス(「未着手」「進行中」「保留」「完了」など)が横並びの列(レーン)として表示されます。各列のヘッダーには、例えば「3件 / 450,000円」といった形で、その列に属するカードのサマリーが美しくレイアウトされ、画面を下にスクロールしてもこのヘッダー部分は上部に固定されます。

列の中に並ぶ個々の「カード」には、レコード番号や顧客名などの「タイトル」、対応する「予定日」、その案件の「金額(集計値)」、現在の「状態」、そして詳細な状況を補足する「メモ」がすっきりと収まります。タイトル部分はリンクになっており、クリックすればいつでも詳細なレコード画面にジャンプできるため、カンバンビューと標準機能の行き来も非常にスムーズです。

プラグインの導入方法(アプリ側の事前準備)

プラグインを設定する前に、kintoneアプリ側にいくつかのフィールドと、プラグインを表示するための「器」となる設定を用意しておく必要があります。必要な構成は以下の通りで、特別なカスタマイズは不要です。標準機能の範囲内でアプリを作成・修正してください。

1. 「カスタマイズビュー」の作成(必須)

kintoneの一覧設定画面を開き、一覧の追加で「レコード一覧の表示形式」を「カスタマイズ」に選択してビューを作成します。名前は「カンバン一覧」など、分かりやすい名前を付けておきましょう。HTMLを記述する欄が表示されますが、中身は空欄のままで構いません。プラグインがこのビューを認識して、自動的にカンバン画面を描画します。

2. 状態フィールドの配置(必須)

カンバンの列を構成するための「ドロップダウン」フィールドを配置します。例えば、選択肢に「未着手」「対応中」「確認中」「完了」などを設定しておきます。

3. タイトルフィールドの配置(必須)

カードの顔となる一番目立つ部分に表示するフィールドです。「文字列(1行)」や「リンク」、あるいは「レコード番号」「数値」など、様々なフィールド型を利用できます。業務に合わせて「タスク名」や「顧客名」「案件名」となるフィールドを用意してください。

4. 予定日フィールドの配置(任意・未指定も可)

「日付」または「日時」フィールドを用意します。これを設定すると、画面上に月切替ボタンが表示され、「今月のタスクだけを表示する」といった月単位の自動絞り込みが有効になります。「全期間のタスクを常に一覧したい」という場合は、このフィールドの準備は省略しても問題ありません。

5. 集計フィールドの配置(任意・未指定も可)

「数値」または「計算」フィールドを用意します。これがあると、各列のヘッダーや画面上部に自動で合計値が集計されます。「金額」や「稼働時間」「ポイント」などを集計したい場合に配置してください。単にタスクの「件数」だけが分かれば良いという場合は、集計フィールドの設定で「レコード数」を選択すれば、件数のみをカウントする機能が備わっています。

6. メモフィールドの配置(任意・未指定も可)

カードの下部に補足テキストを表示したい場合、「文字列(複数行)」または「文字列(1行)」フィールドを配置します。直近の進捗コメントや注意書きをカード上に表示させておきたいときに役立ちます。

プラグインの設定方法(各項目の個別解説)

アプリ側の準備ができたら、kintoneのアプリ設定の「プラグイン」から本プラグインを追加し、歯車マークの設定アイコンをクリックして設定画面に入ります。

設定画面は、ノンプログラマーの方でも迷わず直感的に入力できるように整理されています。各項目の設定ポイントを解説します。

1. カンバン表示するカスタマイズビュー

事前に準備した「カスタマイズビュー」をドロップダウンから選択します。ここで指定したビューを開いたときにだけ、kintoneが自動でカンバン形式に切り替わります。他の標準の一覧(表形式など)には影響を与えないため、従来の表形式とカンバン形式をユーザーが自由に切り替えて使うことができます。

2. 状態 フィールド(ドロップダウン型)

カンバンの列として使いたい「ドロップダウンフィールド」を選択します。

フィールドを選択すると、その下に自動的に薄黄色のテーブルが開きます。ここには、そのドロップダウンに設定されている選択肢が一覧で表示されます。

  • 表示する列の絞り込み(2〜5個)
    選択肢の横にあるチェックボックスを使って、カンバンに「表示する・しない」を個別にコントロールできます。「ドロップダウンの選択肢はたくさんあるけれど、カンバンの列として表示してドラッグ&ドロップで管理したいのは主要な3ステップだけ」といった柔軟な運用が可能です。ただし、表示できる列の数は「2〜5個の範囲内」とする必要があります。多すぎると画面が横に広がりすぎて見づらくなるのを防ぐための親切設計です。

3. カードに表示するフィールド

次に、カードに表示するフィールドを指定します。必須なのは「タイトル」だけですが、予定日や集計のフィールドを指定する/しないで、カンバンビューの動作が変化します

① タイトル フィールド

カードのタイトルにしたいフィールドを一つ選択します。文字列だけでなく、自動で採番されるレコード番号などを指定して、カチッとした管理を行うことも可能です。

② 予定日 フィールド(日付型・日時型)

月別の絞り込みを行いたい場合は、対象となる日付・日時フィールドを選択します。

もし、すべてのレコードを常にカンバンに並べておきたい場合は、初期値のまま「—指定しない—」を選択してください。この場合、画面上の「先月」「今月」「来月」といったボタン類は非表示になり、すっきりとした全件表示のカンバンになります。

③ 集計フィールド(数値型)+表示単位

列ヘッダーや画面上部で集計を行いたい数値型・計算フィールドを選びます。このプラグインの特徴は、以下の3つの表示パターンを自由に選べることです。

選択内容カードへの表示列先頭の集計表示画面全体の合計表示
—指定しない—表示なし表示なし表示なし
—レコード数—表示なし件数のみ(例:12件)表示なし
実フィールドを選択集計値を表示件数と合計(例:12件 / 999,999円)全体合計(例:合計:999,999円)

さらに、集計値の右隣にある「表示単位」欄(初期値は「円」)を書き換えることで、「個」「時間」「Kg」など、自社の業務に合わせた任意の単位へと自由に変更できます。

実フィールドを選択した場合、画面上部の分かりやすい位置に大きな太字で全体合計が表示されるため、チーム全体の今月の目標達成度がリアルタイムで視界に入ってきます。

④ メモ フィールド

カード内にちょっとした詳細や引き継ぎメモを表示させたい場合は、該当する文字列フィールドを選択します。不要な場合は「—指定しない—」にしておくことで、カードの縦幅をコンパクトに抑えることができます。

4. デバッグ設定

「コンソールにデバッグログを出力する」というチェックボックスです。こちらは、万が一「動作がおかしいな?」というときにシステム管理者が原因を調査するための機能です。普段の業務運用ではオフ(チェックなし)にしておくことが推奨されています。

以上の入力が終わったら、画面最下部の「保存する」ボタンを押し、アプリの設定画面に戻って「アプリを更新」すれば、設定はすべて完了です!

スポンサーリンク

プラグインの活用事例

この「状態別カンバンビュープラグイン」は、設定次第で社内のあらゆる部門の業務を劇的に効率化できます。ここでは、具体的な7つの活用アイデアをご紹介します。

1. 営業の案件進捗・確度管理(営業部門)

  • 状態(列):商談中 ➔ 見積中 ➔ 受注確定
  • タイトル:顧客名 + 案件名
  • 集計フィールド:見込み受注金額(単位:円)
  • メリット:営業会議の際、このカンバン画面をプロジェクターや画面共有で映し出すだけで、今どの案件がどこで止まっているかが一目瞭然になります。「提案・見積提示」の列にある高額案件のカードをドラッグして、みんなで「これを今週中に最終交渉へ持っていこう!」と作戦を練るような、活発で視覚的なミーティングが実現します。

2. 製造・カスタマイズの工程管理(製造・技術部門)

  • 状態(列):受注確定 ➔ 部材手配 ➔ 製造・組付 ➔ 出荷検査
  • タイトル:製造指示番号 + 製品名
  • 集計フィールド:製造工数(単位:時間)
  • メリット:現場の各工程の負荷状況を視覚的に把握できます。特定の列(例:出荷検査)の合計工数が跳ね上がっている場合は、そこに人員を一時的に応援に回すなど、現場の状況に応じた柔軟なリソース配分(ボトルネックの解消)が可能になります。

3. 社内情報システム・総務へのヘルプデスク(IT・総務部門)

  • 状態(列):未対応 ➔ 調査・対応中 ➔ ベンダー確認中 ➔ 完了(非表示または確認待ち)
  • タイトル:問い合わせ内容の要約
  • メモフィールド:最新の対応状況や、エラーコードなどの補足情報
  • メリット:メールやチャットでバラバラと届く「パソコンが動かない」「パスワードを忘れた」といった社内要望をkintoneに登録。カンバンで管理することで、「未対応」の列にカードが残っている限り対応漏れが発生しません。対応を開始したら「対応中」にカードを移すことで、チーム内での重複対応も防げます。

4. 採用活動の選考ステータス管理(人事・総務部門)

  • 状態(列):書類選考中 ➔ 一次面接待ち ➔ 役員面接待ち ➔ 内定提示
  • タイトル:候補者氏名(応募職種)
  • 集計フィールド:—レコード数—
  • メリット:求職者の選考状況を一元管理できます。面接が終了したら、その人のカードを次のステップへドラッグするだけでステータスが更新されます。列ごとの件数を見ることで、「今、一次面接待ちの候補者が何人滞留しているか」が即座にわかり、面接官のスケジュール調整などの先手を打つことができます。

5. 編集部や制作チームのコンテンツ制作管理(クリエイティブ部門)

  • 状態(列):企画選定 ➔ 執筆・制作中 ➔ 校正・デザイン確認 ➔ 公開待ち
  • タイトル:記事タイトル・動画テーマ
  • 予定日フィールド:公開予定日(納期)
  • メリット:月切替ボタンを使うことで、「今月公開する予定のコンテンツ」だけに絞り込んで進捗を追うことができます。クリエイターやライターが自分の担当タスクの進捗をドラッグ操作で更新してくれるため、ディレクターが「あの件、どこまで進んでる?」といちいち声をかけて確認する手間がなくなります。

6. 不動産物件の契約・手続き管理(不動産業・管理部門)

  • 状態(列):入居申込 ➔ 審査中 ➔ 契約書類作成 ➔ 契約完了・引渡
  • タイトル:物件名 + 契約者様名
  • 予定日フィールド:入居予定日
  • メリット:不動産の賃貸・売買における煩雑な手続きの進捗をミスなく管理。入居予定日が今月のものを対象に、手続きが滞りなく「審査中」から「書類作成」へと進んでいるかをチェックできます。カードのドラッグ&ドロップだけで、現在の進捗をチーム全員に共有できます。

7. 定期メンテナンス・点検タスク管理(保守・サービス部門)

  • 状態(列):今月対象 ➔ スケジュール調整中 ➔ 点検実施中 ➔ 報告書作成
  • タイトル:顧客名(機器・施設名)
  • 集計フィールド:—レコード数—
  • メリット:毎月発生する顧客の定期点検を、モレなくこなすための管理です。「今月対象」の列に並んだカードを、アポが取れたら「スケジュール調整中」へ、実施したら「点検実施中」へと動かしていきます。月末が近づいたときに、「報告書作成」の列にカードが残っていれば、速やかな提出を促すアラートとして機能します。

まとめ

kintoneの「カスタマイズビュー」の可能性を最大限に引き出す「カンバンビュープラグイン」をご紹介しました。

このプラグインを導入することで、これまで無機質な「表(リスト)」でしか見えていなかったkintoneのデータが、まるで生き物のように直感的に動かせる「チームの共有ホワイトボード」へと進化します。

  • 直感的なドラッグ&ドロップによるステータス変更
  • 画面スクロール時も常に固定表示される列ごとの件数・金額集計
  • 月切替ボタンによる、今やるべきタスクへの素早いフォーカス
  • 自社の業務に合わせて2〜5個の最適な列数を柔軟に選べる設定機能

これらの強力な機能が、複雑なプログラミングやJavaScriptのコードを一行も書くことなく、プラグインの設定画面からマウス操作だけで簡単に手に入ります。

メンバーのデータ入力の手間を減らし、チーム全体の進捗状況をいつでもクリアに「見える化」するために、ぜひあなたのkintoneアプリにもこのプラグインを取り入れて、一歩進んだ快適なタスク管理・案件管理を体感してみてください!

🧩 プラグインのご紹介

記事内で紹介している、当社が開発した「カンバンビュー」プラグインをご紹介します。
60日間の試用版をダウンロードすることもできますので、ぜひお試しください。

タスクの進捗を見える化する!カンバンビュープラグイン
ドロップダウン選択リストの値でレコード一覧をカンバン形式で列表示するプラグインです。試用版のお申込み kintoneは、日々の業務データを蓄積・管理するのに非常に優れたツールです。しかし、標準機能の「レコード一覧」画面(リスト形式)だけでは、「どのタスクがどのステータスにあり、全体の進捗状況がどうなっているか」を直感的に把握するのが難しいと感じることはありませんか? そんな課題を解決するために開発したのが、「カンバンビュープラグイン」です。 本プラグインを導入すれば、kint…

🔨 自分でカスタマイズしてみたい方へ

以下のNote記事で営業日を自動計算するカスタマイズ事例を紹介しています。
記事内で紹介しているカスタマイズコードは、無料で利用できるので是非挑戦してみて下さい。

kintoneでドラッグ&ドロップ型カンバンビューの実装|アプリ活用研究会(キン活)
kintone(キントーン)は柔軟性の高い業務プラットフォームですが、標準の一覧画面(テーブル形式)だけでは、「タスクが、現在どのステータスにどれだけ滞留しているか」を直感的に把握するのが難しいケースがあります。特に営業管理、タスク管理、プロジェクト進捗管理といったシーンでは、行と列に並んだテキストを追うだけでは限界が生じます。 本記事では、kintoneの「カスタマイズビュー」を活用し、JavaScriptと外部CSSを用いて、一般的なプロジェクト管理ツールで見られるような…

🏫 kintone人材育成研修

この様なカスタマイズを自分で出来る様になりたい方は、当サイトの「Kintome人材育成」上級コースの受講をご検討して下さい。当サイトのTIPSで紹介しているカスタマイズ例のテンプレートを使えば、簡単に実装出来ます!
上級コースの受講者には、特典で当サイトのカスタマイズテンプレート(3種類まで)と3か月のサポート契約を無償でご提供しています。

研修目的を「カスタマイズテンプレートのアプリ導入」とする研修メニューもご提案可能です。

📣カスタマイズ・導入支援いたします!

本記事の様な「kintoneアプリのカスタマイズ」をご希望の企業様へ
kintoneを便利に活用できるカスタマイズと運用支援は、ぜひ当社にご相談ください!

#kintone #Javascript #プラグイン #カンバンビュー #カンバンボード #タスク管理

スポンサーリンク
シェアする

事例紹介

ACHIEVEMENTS
kintoneの作業日報で作業状態の「見える化」を実現
まちライブラリーのkintone活用
製造業の受注データ管理をエクセルから移行

Tips

TIPS
kintone業務活用
プロセス管理の停滞を解消!|ステータス一括更新プラグイン
kintone
複数フィールドの値を結合する「フィールド結合プラグイン」の紹介
kintone
日付や日時の計算結果をフィールドにセットするプラグインの紹介
補助金の活用についてもご相談ください

中小企業のデジタル化に利用できる補助金や助成金があります。
補助金や助成金は申請できる企業や用途に要件があったり、事業計画書を作成する必要があったりします。
必要な手続きをサポートさせていただきますので、お気軽にご相談ください。

お気軽にご相談ください。

オンライン可
無料相談
デジタル化
診断チャート
簡易診断

デジタル化による
コスト削減効果を算出