kintoneは、多彩な機能で業務効率化に役立つノーコード・ローコードプラットフォームです。しかし、デフォルトでは、カンバン表示機能が搭載されていません。
チームのタスク管理を可視化し・効率化したい場合には、プラグインを用いてレコードをカンバン方式で表示させる方法や、JavaScriptを用いて自由度の高いカスタマイズを行う方法などが考えられます。
この記事では、kintoneでカンバン表示を実現する方法を説明するとともに、おすすめの無料プラグインも紹介します。
カンバン表示を通じて業務効率化を図りたい方は、ぜひ参考にしてください。
kintoneにカンバン表示を導入すべき理由
kintoneは基本機能でカンバン表示機能を提供していませんが、プラグインやJavaScriptによる開発で簡単に導入できます。カンバン表示の導入メリットは以下のとおりです。
- 業務の進捗状況を可視化し、ボトルネックの特定
- WIP制限を設けることで、効率的な作業フローの構築
- チームメンバー間のコミュニケーション促進
- タスクの完了率の向上
レコードをカンバン表示することで、業務の進捗状況を一目で可視化でき、チームメンバーの抱えている業務量を明確に把握できます。これにより、タスクの適切な割り振りや集中管理が可能となり、効率的な業務遂行を実現可能です。
さらに、カンバン上でコメントを残すことができるため、情報共有がスムーズになり、チーム内での活発なコミュニケーションが促進されます。その結果、タスクの放置や見落としによるミスを大幅に減らすことができます。
カンバン表示は、以下のようにさまざまな分野で活用可能です。
| 活用シーン | 対象部門・対象業務 | 管理内容 | ステータス例 |
| 案件管理 | ・インサイドセールス ・フィールドセールス ・マーケティング ・経営企画 など |
各案件の進行ステータス | ・リード（潜在顧客） ・案件化 ・商談中 ・提案中 ・成約 ・アフターフォロー |
| 採用管理 | ・新卒採用 ・中途採用 |
採用プロセスの各ステージ | ・応募受付 ・書類選考 ・不採用 ・面接 ・内定 ・内定辞退 ・入社 |
kintoneのレコードをカンバン表示する方法は2つ
kintoneのレコードをカンバン表示する方法は大きく分けて2つあります。
- プラグインを利用する
- JavaScriptで独自開発する
それぞれについて詳しく説明します。
プラグインを利用する
kintoneのレコードをカンバン表示させる方法として、オーソドックスなのがプラグインを利用する方法です。kintoneのプラグインとは、kintoneの機能を拡張するためのソフトウェアを指します。
プラグインのメリット・デメリット
| メリット | デメリット |
| ・導入が簡単 ・プログラミング知識が不要 ・豊富な機能 ・デザインの自由度が高い |
・月額料金がかかる ・ユーザー数課金型のプラグインもある |
カンバン表示のプラグインには、株式会社アーセスが提供している「KANBAN」プラグインをはじめ、開発者のWebサイトやGithubなどから入手できるサードパーティ製プラグインがあります。
これらのプラグインを導入するだけで、簡単にカンバン表示を実現できます。プログラミング知識が不要なので、社内に専門知識がある人がいなくても安心です。
ただし、一部のプラグインは費用（月額もしくは年額払い）がかかります。利用するユーザーごとに料金が発生する方式のプラグインもあるため、事前に予算内に収まるかどうか確認しておきましょう。
JavaScriptで独自開発する
kintoneのカスタマイズ性を最大限に活かしたい場合は、JavaScriptを使用して自社のニーズに合わせてカンバン表示機能を開発する方法がおすすめです。
JavaScriptで開発するメリット・デメリット
| メリット | デメリット |
| ・高度なカスタマイズが可能 ・独自の機能、UIを実装できる |
・JavaScriptの知識が必要 ・外部に依頼する場合は開発費用やメンテナンス費用がかかる ・開発やテストに時間がかかる |
独自開発の際には、まず必要な機能を明確に決定します。その後、kintoneのAPIを使用してデータを取得し、取得したデータをカンバン形式で表示するためのロジックをJavaScriptで実装します。そして、デザインの調整、テストを経てから運用を開始するという流れです。
JavaScriptを用いる方法は、高度なカスタマイズが可能であるため、自社にぴったりのカンバン表示を導入できます。しかし、社内でこの方法を採用するには、JavaScriptに精通した人材が必要です。
自社にシステム開発の知識やノウハウがない場合は、開発を外部の業者に委託する必要があります。外部委託を選択する際は、初期の開発費用に加え、将来的に発生するメンテナンス費用も念頭に置くことが重要です。
【無料あり】カンバン表示できるkintoneプラグイン3選
ここでは、カンバン表示できるkintoneプラグインを3つ紹介します。
1. KANBAN
KANBANは株式会社アーセスが提供する、タスク管理プラグインです。プラグインの操作に不慣れな方でも直感的に利用できます。
また、カードを編集する際には、kintoneの詳細画面がポップアップで表示されるため、タスクを細かく管理可能なのが魅力です。
カードの移動だけでなく、メンバーのアサインも自由自在に行えることから、タスクの引継ぎがスムーズに実行できます。
| 機能 | ・カードの作成・編集 ・表示項目の絞り込み ・ステータス管理 ・メンバーのアサイン など |
| 料金 | 月額10,000円・年額98,000円/ドメイン |
参照：KANBAN
2. カンバンプラグイン
カンバンプラグインは、株式会社Crenaが提供するプラグインです。タスク管理をはじめ、従業員のスキルマップや受発注管理など、さまざまな業務に利用できます。
独自の機能である「スイムレーン機能（スクラムボード）」を搭載しており、「高」「中」「低」といった優先度に基づいてタスクを分類し、それぞれのグループをボード上で見やすく表示可能です。
どのタスクに優先的に取り組むべきかが一目で分かるため、効率的な業務遂行につながります
| 機能 | ・直感的なカード移動 ・スイムレーン機能 ・カードの一括移動・複製・削除 ・フリーワード検索機能 など |
| 料金 | 月額10,000円 |
参照：カンバンプラグイン
3. KanbanBoard
KanbanBoardは、合同会社ぱんだ商会が提供している無料のプラグインです。
複雑な機能を一切排除し、直感的な操作性で誰でもすぐに使い始められます。また、見やすく使いやすいインターフェースも魅力です。
シンプルで使いやすいプラグインを探している方、タスク管理のみに活用したい方などにおすすめです。
| 機能 | ・カードの作成・編集 ・表示項目の絞り込み ・案件一覧管理 など |
| 料金 | 無料 |
参照：KanbanBoard
カンバン表示のプラグインを追加する方法
カンバン表示のプラグインはプラグインストアから追加することができます。ここでは「KANBAN」を例にして、プラグインの導入手順を紹介します。
1. kintoneプラグイン提供元のサイトから申し込む
プラグイン提供元のサイトにアクセスして、試用版プラグインを申し込みます。この操作で、kintoneの管理画面からプラグインをインストールする準備ができます。
2. プラグインストアからプラグインを追加する
次に、kintoneにログインして、画面右上の歯車の形をした「設定メニューを表示する」アイコンをクリックし、「kintoneシステム管理」を開きます。
kintoneシステム管理画面を開き、「その他」の「プラグイン」をクリックしてください。
インストールするプラグインの「インストールボタン」＞「OK」をクリックしてください。プラグインのステータスが「インストール済み」となっていればプラグインの追加は完了です。
JavaScript（React）を使ってカンバンを表示する方法
プラグインを使用せずに、高度なカスタマイズを可能とするカンバン表示を構築したい場合は、Reactを使う方法が適しています。
Reactは、Webサイト上のUIパーツを構築するためのJavaScriptライブラリです。自社でカンバン表示の開発をすることで、追加コストなしで導入できます。
デモ環境で実際の動作は確認できますので、cybozu developer network デモ環境で情報を確認してください。
ここからは、kintoneに登録したタスクのデータを、ガントチャートとカンバンで表示する手順について説明します。
1. アプリの準備
まず、カンバンを表示するための「タスク管理」アプリを作成します。 kintoneアプリストアで「はじめから作成」でアプリを新規作成し、以下のフィールドをアプリに追加します。
| フィールドの種類 | フィールド名 | フィールドコード | 備考 |
| ドロップダウン | タイプ | タイプ | タスクのタイプ |
| ドロップダウン | 優先度 | 優先度 | タスクの優先度 |
| ドロップダウン | 状態 | 状態 | タスクのステータス（カンバンの列） |
| 日付 | 始める | 開始日 | タスクの開始時間 |
| 日付 | 終わり | 終了日 | タスクの完了時間 |
| ユーザー選択 | 譲受人 | 譲受人 | タスクの担当者 |
| 文字列（1行） | まとめ | まとめ | タスクのタイトル |
| 文字列（複数行） | 詳細 | 詳細 | 詳細情報 |
| 数値 | 親タスク | 親 | 親タスクID |
| 関連レコード一覧 | サブタスク | サブタスク | 同じ親タスクのレコードを表示します。参照するアプリ：このアプリ 表示するレコードの条件：Parent Task＝Parent Task 表示するフィールド：レコード番号、概要、譲受人 |
| スペース | 追加サブ | 子タスク追加ボタン |
引用：cybozu developer network「Reactを使って、kintoneにガントチャートとカンバンを表示しよう！」
2. コードを記述する
アプリの準備が完了したら、いよいよコードを書いていきます。プログラミング経験が少ない場合は、GitHubなどで配布されているテンプレートを活用することをおすすめします。
上記アプリのサンプルコードは、GitHub に公開されています。
リポジトリ名：SAMPLE-ganttchart-kanban
サンプルコードのリポジトリをクローンした後、「SAMPLE-ganttchart-kanban」フォルダで以下のコマンドを実行してください。
cd SAMPLE-ganttchart-kanban</code>
コマンドを実行すると、dist拡張子の中に以下のファイルが生成されます。
- jsフォルダ
- アプリ.js
- コモンズ.js
- cssフォルダ
- アプリのCSS
- コモンズ.css
3. カスタマイズの適用
「タスク管理」アプリの設定画面を開き、「設定」タブの「JavaScript / CSSでカスタマイズ」をクリックします。
続いて、生成されたJavaScriptファイルとCSSファイルをkintoneにアップロードします。
PC用のJavaScriptファイル
- jsフォルダ
- アプリ.js
- コモンズ.js
PC用のCSSファイル
- cssフォルダ
- アプリのCSS
- コモンズ.css
設定を保存したら、アプリを更新してください。
4. 動作確認
最後にカンバンに表示させたいデータをアプリに登録し、レコード登録後にレコードの一覧画面と詳細画面を表示します。
ガントチャートとカンバンが表示されれば完成です。
kintoneにカンバン表示を導入するときの注意点
kintoneにカンバン表示を導入する際は、以下の点に注意しましょう。
- kintoneのスタンダードコースの契約が必要
- kintoneの設定やプラグインの知識が必要
kintoneのスタンダードコースの契約が必要
kintoneでプラグインを用いたカンバン表示をするには、スタンダードコースに加入する必要があります。一番安いプランのライトコースでは、プラグインは使えませんのでご注意ください。
また、多くのプラグインは有料です。複数のプラグインを契約すると、月々にかかる費用が増えます。予算との兼ね合いを考慮して、必要なプラグインを選びましょう。
kintoneの設定やプラグインの知識が必要
kintoneは自由度の高いアプリ作成やプラグインによるカスタマイズを特長としています。しかし、プラグインやプログラミングの知識がなければ、その機能をフルに活用できないこともあります。
また、システムに詳しい人が社内にいない場合、カンバン表示の機能が正しく動作しないなどの問題が発生する可能性があります。
自社でノウハウが不足している、または運用改善を検討している場合は、専門家にカンバン表示の導入を依頼することを検討してみてはいかがでしょうか。
kintoneをカンバン表示してタスク管理を可視化・効率化しよう
kintone基本機能にはカンバン表示機能が備わっていませんが、プラグインやJavaScriptを利用することで、あとから追加できます。
カンバン表示を導入すると、タスクの進捗状況を可視化できるので、チーム全体で情報共有しやすくなります。また、ボトルネックを発見したり、タスクの優先順位を設定してスムーズに作業を進めたりできます。
ただし、方法によってはプログラミングが必要になることもあります。自社でノウハウがなければつまづいてしまうこともあるため、外部に依頼することも視野に入れるといいでしょう。
