kintoneの一覧を色分けする2つの方法

kintoneの一覧が文字だらけで見づらい方へ。色分けをJavaScriptで実装する方法と無料プラグインで設定する方法を比較し、自分に合った選び方を解説します。

kintoneでアプリを作って運用を始めると、レコード一覧が文字だけの表になっていることに気づきます。ステータスも優先度も、値としては入力されているのに、パッと見て状況を把握することができません。件数が増えるほど、状況を判断するために一件ずつ開いて確認する手間が積み重なります。

この記事では、一覧のレコードやフィールドに色をつけて視覚的に状況が分かるようにする方法を、実装の観点から整理します。読み終える頃には、自社のアプリと社内のスキルに合った方法をひとつ選べる状態になっているはずです。

なぜkintoneの一覧は「文字だらけ」に見えるのか

kintoneの初期状態のレコード一覧は、フィールドの値をそのままテキストで並べる表です。選択肢フィールドの「施工中」「完工検査」といった値も、数値フィールドの金額も、見た目の重み付けなしに同じ太さ・同じ色の文字で表示されます。

これは仕様として間違っているわけではありません。ただ、状況を一目で判断したい一覧という用途では、文字を読んで意味を解釈するという一手間が常に発生します。たとえば工事の進捗を管理するアプリで一覧に数十件が並んでいる場合、「状況」列を一件ずつ読まないと、どの工事が確認待ちで、どれが請求済みなのかが分かりません。件数が増えるほど、この一手間の積み重ねが「使いにくい」という印象につながりやすくなります。kintoneが使いこなせない・使いにくいを改善する方法も参考になります。

kintoneのレコード一覧画面（工事台帳アプリの例）

上のような一覧では、色による区別が一切ないため、状況を把握するのに視線と時間を使います。この状態を変える方法を、次の項から順番に見ていきます。

「条件書式」という言葉の正体 — 標準機能ではなく実現手段の呼び名

色分けの方法を調べていると「条件書式」という言葉によく出会います。ここで誤解しやすいのですが、kintoneには設定画面のチェックひとつで使える「条件書式」という標準機能はありません。サイボウズの開発者向けサイト（cybozu.dev）では、レコード一覧・詳細画面の条件書式（背景色や文字色の変更）はJavaScriptカスタマイズが必須の実装であると明記されています。

つまり「条件書式」は、kintoneのメニューのどこかにある機能名ではなく、「値に応じて見た目を変える」という実現したいことの呼び名です。それを実現する手段は、大きく分けて次の2つになります。

「条件書式」は標準機能になく、JavaScript自作かプラグイン利用の2択であることを示す整理図

JavaScriptで自分（または開発を依頼した相手）が実装する
あらかじめ作られたプラグインを設定して使う

なお、これから紹介するどちらの方法も、kintoneの拡張機能が使えるプランが前提になります。サイボウズの料金ページによると、ライトコース（1,000円/ユーザー/月、最低10ユーザー）では外部サービス連携やプラグインなどの拡張機能が利用できません。JavaScript/CSSカスタマイズもプラグインも、kintoneライト・スタンダード費用と機能で選ぶ判断ガイドの通り、スタンダードコース（1,800円/ユーザー/月、最低10ユーザー）以上への加入が前提条件になります。自社の契約プランを確認してから、以降の方法を検討してください。

方法1: JavaScriptカスタマイズで実装する

一覧画面の色分けは、app.record.index.showイベントの中でkintone.app.setRecordListStyle()という専用のAPIを呼び出して実装します。詳細画面側であれば、app.record.detail.showイベントの中でkintone.app.record.setFieldStyle()を使い、特定フィールドの背景色や文字色を条件によって変える形になります。

実装のイメージは次のようになります(実際の記述はkintoneのAPI仕様やバージョンに合わせて調整してください)。

// 一覧画面: ステータスの値によって背景色を出し分ける
kintone.events.on('app.record.index.show', function(event) {
  event.records.forEach(function(record) {
    const status = record.状況.value;

    let backgroundColor = '';
    switch (status) {
      case '完工検査':
        backgroundColor = '#FDECEA'; // 確認待ちを目立たせる
        break;
      case '請求済':
        backgroundColor = '#E8F5E9'; // 完了した行を淡く
        break;
    }

    if (backgroundColor) {
      kintone.app.setRecordListStyle(record, { backgroundColor });
    }
  });
  return event;
});

// 詳細画面: 特定フィールドの色を条件で変える
kintone.events.on('app.record.detail.show', function(event) {
  if (event.record.状況.value === '完工検査') {
    kintone.app.record.setFieldStyle('状況', { backgroundColor: '#FDECEA' });
  }
  return event;
});

kintoneの「JavaScript / CSSでカスタマイズ」設定画面。ファイルまたはURLで適用する

この実装には、非同期処理（async/await）や条件分岐（switch）、配列操作（forEach/includes）といったJavaScriptのスキルに加えて、フィールドコードの指定などkintoneの構造への理解が必要です。また、公式ドキュメントでは、画面の内部構造（DOM）を直接書き換える方法はkintoneのアップデートで動作に影響を受けやすいため、上記の専用APIを使うことが推奨されています。裏を返せば、社内にJavaScriptを書ける人がいない場合や、外部の開発会社に都度依頼する体制がない場合は、条件を変えるたびに改修コストが発生し続けるという点は認識しておく必要があります。kintone開発会社の選び方も参考になります。

ここでつまずいたら、無料相談で画面を見ながら一緒に確認できます。

方法2: プラグイン「pullieカラーチップ」で設定する

もう一つの方法が、あらかじめ用意されたプラグインを導入して設定する方法です。当社pullieが開発・提供している「pullieカラーチップ」を例に、実際の設定画面で見てみます。

pullieカラーチップには2つのプランがあります。Free(¥0)は1フィールドまでの自動配色に対応し、一覧・詳細画面の両方で使えます。Pro(¥4,980・買い切り)はフィールド数が無制限になり、10色パレットからの選択や、数値・日付を使った条件書式(期限切れの行を赤くするなど)、チェックボックス項目やモバイルの詳細画面への対応まで含まれます。

pullie カラーチップ Freeの設定画面（kintoneアプリの設定 > プラグインから開く）

設定はプラグインの管理画面で、色分けしたいフィールドにチェックを入れ、配色を選ぶだけです。JavaScriptを書く必要はありません。ドロップダウンやラジオボタン、チェックボックスの値を色つきのステータスチップに変換したり、数値・日付フィールドの条件によって行全体の色を変えたりできます。

プラグイン適用後のレコード一覧画面（プラグイン検証v2 カラーチップFree）

設定後の一覧では、状況の値がひと目で区別できる状態になります。先ほどの「文字だけの一覧」と見比べると、視覚的な違いがはっきり分かります。プラグインの仕組み上、条件を追加・変更したいときも管理画面の設定を変えるだけで済み、JavaScriptの保守が発生しない点が、方法1との大きな違いです。

2つの方法、どちらを選ぶべきか

自社の状況によって、向いている方法は変わります。判断材料として、4つの観点で整理します。

観点	JavaScriptカスタマイズ	プラグイン(pullieカラーチップ)
導入の手間	JavaScriptの知識を持つ人(自社または外注)が必要。要件定義〜実装〜テストの工程が発生する	プラグインを読み込んでチェックを入れるだけ。コードを書く必要はない
柔軟性	条件分岐や配色ロジックを自由に設計できる。複数フィールドを組み合わせた条件も書ける	用意された仕組みの範囲内(Proはフィールド数無制限・10色パレット・条件書式対応)
保守	kintoneのアップデートでDOM構造に依存したコードは影響を受けやすい(公式は専用APIの利用を推奨)。条件を変えるたびにJavaScriptの修正が必要	設定画面での変更のみで完結し、JavaScriptの保守は基本的に発生しない
費用	実装工数分のコスト(内製なら人件費、外注なら開発費)	Free:¥0(1フィールドまで)／Pro:¥4,980買い切り(フィールド数無制限)

社内にJavaScriptを書ける担当者がいて、独自の複雑な条件分岐を作り込みたい場合は方法1が向いています。一方で、まずは主要なステータスや期限を色分けして一覧を見やすくしたい、かつ改修のたびにコードを直す余裕がない場合は、方法2のようなプラグインの方が運用しやすい選択になります。

まとめ:自分に合った色分け手段を選ぶ

色分け導入前後の一覧の見やすさを比較するビフォーアフター

kintoneの一覧が見づらいと感じたら、まず「条件書式」という言葉が標準機能ではなく、JavaScriptかプラグインのどちらかで実現するものだと理解することが出発点になります。そのうえで、社内のJavaScriptスキルと、条件を変更する頻度・柔軟性の必要性を照らし合わせれば、方法1と方法2のどちらが自社に合うかは自然と絞り込めます。

コードを書ける体制があり独自の条件分岐を作り込みたいならJavaScript、まずは画面の設定だけで主要な項目を色分けしたいならプラグインという住み分けを押さえておけば、次に一覧の見づらさに直面したときも迷わず手を動かせるはずです。