kintoneのテーブルが見づらい？ヘッダー色付けで入力ミスを防ぐJS設定手順

kintoneで業務アプリを作り込んでいくと、要件によってはどうしてもテーブル（サブテーブル）の列数が多くなってしまう場面があるかと思います。列数が増えると横スクロールが発生し、見やすさが下がります。さらに、似たような項目が並ぶ場合は違いが分かりづらいため、「特定の列ヘッダーに色を付けて見やすくしたい」と感じたことがある方も多いのではないでしょうか。

しかし、kintoneの標準機能やJavaScript APIでは、テーブルヘッダーの各列に対するスタイルを個別に変更する手段は提供されていません（2025年12月時点）。

では、諦めるしかないのかというと、そうではありません。この課題はカスタマイズを行えば解決でき、テーブルヘッダーへの色付けが可能になります。ただし、これらの方法はkintone公式ではない「DOM操作」が伴うため、推奨されている方法ではありません。kintoneの今後のアップデートにより、画面の構造（HTML）が変更された場合、設定した色が反映されなくなるリスクを含んでいます。しかし、そのリスクを正しく理解し、管理できるのであれば、現場の入力ミスを減らし、業務効率を劇的に向上させる強力な手段となり得ます。

この記事では、kintoneのバージョンアップに伴い急に色付け表示されなくなる可能性があるということを前提とした上で、それでも現場の使いやすさを優先したいと考える管理者のために、具体的なカスタマイズの実装方法を解説します。

テーブルヘッダー色付けの2つの実装パターン

テーブルヘッダーの色付けには、大きく分けて2つのアプローチがあります。 それぞれの特徴を理解し、ご自身のアプリの運用状況に合わせて適切な方法を選択してください。

【CSS】列の位置（番号）を指定して色付けする方法

このカスタマイズには大きく分けて「CSSを使う方法」と「JavaScriptを使う方法」の2通りがあります。

CSSは手軽ですが、「左から何番目の列」という指定になるため、テーブル内の列の順序を変えた場合、CSSも併せて変更する必要があります（変えないと色付けしたい列がズレてしまうため）。一方、JavaScriptを使えば「ヘッダーに特定の文字が含まれる列」を判別して色付けするようなことができるため、列の位置が変わってもコードを修正する必要がなく、柔軟な運用が可能になります。

まず、CSS（スタイルシート）を使って見た目を調整する方法です。 これは「テーブルの左からX番目の列の色を変える」という指定を行います。

実装コード例

以下のコードを .css ファイルとして保存し、kintoneに読み込ませることで適用されます。

/* 3番目の列（ヘッダー）を赤くする例 */
table.subtable-gaia:not(.reference-subtable-gaia) th:nth-of-type(3) {
  background-color: #ffcccc !important;
}

/* 5番目の列（ヘッダー）を青くする例 */
table.subtable-gaia:not(.reference-subtable-gaia) th:nth-of-type(5) {
  background-color: #cce5ff !important;
}

この方法のメリット・デメリット

• メリット：
  記述が短く、シンプル。
• デメリット：
  1. 列の並び順に依存するため、アプリの設定画面でテーブルの列を並び替えたり、列を追加・削除したりすると、色の位置がズレます。そのため、列の並びを変えた場合は、CSSも変更する必要があります。
  2. このサンプルはアプリ内にテーブルが1つの場合を想定したものです。そのため、アプリ内に複数のテーブルが存在する場合、すべてのテーブルの「同じ列番号」に色が反映されます。（例：テーブルAの3列目を赤くしたいだけなのに、テーブルBの3列目も赤くなってしまう）

一度作ったアプリのレイアウトを今後変更する予定がなく、かつテーブルが1つしかない場合はこの方法でも十分ですが、運用の変化に強いアプリを作るならば、次に紹介するJavaScriptを用いた方法が適しています。

【JavaScript】ヘッダーの文字を判定して色付けする方法

こちらはJavaScriptを用いて、「ヘッダーに書かれている文字（項目名）」を読み取り、合致した場合に色を付ける方法です。 この方法であれば、列の場所は関係なくヘッダーの文字を元に色付けを行うため、メンテナンスの手間が大幅に減ります。

実装コード例

以下のコードをテキストエディタにコピーし、ファイル名を table_header_color.js、文字コードを UTF-8 で保存後、kintoneに読み込ませることで適用されます。

(function() {
  'use strict';

  // ---------------------------------------------------------------
  // 【設定箇所】色付けしたい項目名と色のリスト
  // label: 項目名, bgColor: 背景色, color: 文字色
  // ---------------------------------------------------------------
  const COLOR_SETTINGS = [
    { label: '商品名', bgColor: '#e6f2ff', color: '#000000' }, // 薄い青背景・黒文字
    { label: '単価',   bgColor: '#fff0f5', color: '#ff0000' }, // 薄いピンク背景・赤文字
    { label: '小計',   bgColor: '#f0f0f0', color: '#808080' }  // 薄いグレー背景・グレー文字
  ];

  const events = [
    'app.record.detail.show',
    'app.record.create.show',
    'app.record.edit.show'
  ];

  kintone.events.on(events, function(event) {
    // テーブルヘッダー要素取得（DOM操作）
    // ※kintoneの仕様変更によりクラス名が変わる可能性があります
    const els = document.querySelectorAll('table.subtable-gaia:not(.reference-subtable-gaia) th');
    
    // 色設定
    for (const el of els) {
      for (const info of COLOR_SETTINGS) {
        // ヘッダーの文字に設定したラベルが含まれていれば色を変更
        if (el.innerText.includes(info.label)) {
          // 背景色の設定（指定がある場合のみ適用）
          if (info.bgColor) {
            el.style.backgroundColor = info.bgColor;
          }
          // 文字色の設定（指定がある場合のみ適用）
          if (info.color) {
            el.style.color = info.color;
          }
        }
      }
    }

    return event;
  });
})();

実装のポイント

コード上部の COLOR_SETTINGS の部分は、テーブルの項目名に合わせて書き換えてください。 el.innerText.includes(info.label) という処理により、例えば設定を「単価」とした場合、「単価（税抜）」のように文字が含まれていれば色が適用されます。
また、テーブル内のフィールド名を変えた場合は、JS内の COLOR_SETTINGS の部分の修正も併せて必要です。

【注意点】DOM操作のリスクと安全な運用

このカスタマイズを運用する上で必ず理解しておくべきリスクと、採用の判断基準について解説します。

理解すべきリスク：アップデートで色が消える可能性

冒頭でも触れましたが、今回ご紹介したDOM操作は、kintoneが公式に推奨している方法ではありません。 kintoneは定期的にアップデートが行われており、画面の裏側の構造（HTMLのクラス名など）が予告なく変更されることがあります。

もし、今回ターゲットにしている .subtable-gaia などのクラス名が変更された場合、ある日突然、設定した色が反映されなくなる（元の色に戻る）可能性があります。

ただし、重要なのは「色が戻るだけ」であるという点です。 このカスタマイズは色を変えるだけの処理であるため、万が一動かなくなっても、業務データが壊れたり、kintoneが使えなくなったりすることはありません。「見やすさが元に戻るだけ」です。

採用の判断基準：それでもやる価値はあるか？

リスクがある以上、採用をためらうのは管理者として当然の心理です。 迷ったときは、以下の基準で天秤にかけてみてください。

• 「メンテナンスの手間」（年に数回あるかないかの修正対応）
• 「現場の入力ミスやストレス」（毎日発生する業務効率の低下）

もし、現場のスタッフが毎日何十件も入力を行い、そのたびに「見づらい」とストレスを感じていたり、入力ミスが発生して「使いづらい」と感じているようであれば、リスクを許容してでも「現場の使いやすさ」を優先する価値は十分にあります。

「色が消えたら、またコードを修正すればいい（最悪、色がなくても業務は止まらない）」と割り切れるのであれば、このカスタマイズは現場にとって強力な武器になるはずです。

ヘッダー色付けが入力業務にもたらす効果と事例

最後に、ヘッダーの色付けが特に有効な3つのパターンと、実際に当社（コアノーツ）が導入して効果を上げた事例をご紹介します。

ヘッダー色付けが有効な3つのケース

現場から「使いにくい」と言われるテーブルには、以下の特徴があります。これらに該当する場合、色付けによる改善効果は大きくなるでしょう。

• 似たような項目が連続している場合（グルーピング）
  例えば、「予算（単価・数量・金額）」と「実績（単価・数量・金額）」が横に並ぶ場合です。 これらがすべて同じ色のヘッダーで並んでいると、横スクロールした際に「今入力しているのが予算なのか実績なのか」を見失いがちです。 「予算エリアは青」「実績エリアは赤」のようにヘッダーでグルーピングを行うことで、誤入力を防ぐガイドラインとなります。
  　
• 絶対に入力してほしい「必須項目」がある場合
  kintoneの標準機能で「必須項目」に設定すると赤い「*」マークが付きますが、テーブル内では目立ちにくい場合があります。 重要な項目のヘッダー自体を赤や黄色などの注意を引く色にすることで、入力漏れを視覚的に防ぐことができます。
  　
• 「申請者」と「承認者」など、入力する担当者が異なる場合
  テーブル内のフィールドに対して、人によって入力項目が変わる場合は色付けをすることで分かりやすくなります。例えば、申請者が入力する列の隣に、上司や経理担当者が確認チェックを入れる列が並ぶような場合です。

【導入事例】出張申請アプリにおける入力ミス防止

実際に弊社が支援したお客様の事例をご紹介します。

「出張申請アプリ」において、交通費手配をするためのテーブルの列数が多いため、ヘッダーの色がすべて同じだと、列ごとの違いが分かりづらい懸念がありました。そこで、今回ご紹介したJavaScriptカスタマイズを用いて、以下の改善を行いました。

• 往路用の項目と復路用の項目の色を分ける

▼ 参考事例：
報告書の提出忘れを防止！ kintone出張申請アプリにおける「データ自動作成」構築事例 | コアノーツ株式会社
(※本事例記事では、データ自動作成と合わせてUI改善を行っています)

このように、たかが「色」ですが、業務の現場においては「迷わせない」ことはとても重要で、使いやすさにつながっていきます。

まとめ

今回の記事のポイントをまとめます。

• 標準機能では不可：テーブルヘッダーの色付けは、標準機能や通常のAPIでは実現できない。
• JSで解決：JavaScriptによるDOM操作を行えば、特定の文字を含む列を自動判定して色付けが可能。
• 業務改善効果：入力担当者の区別やグルーピングを視覚的に行うことで、入力ミスや心理的負担を減らせる。
• リスク管理：アップデートで色が戻るリスクはあるが、業務停止には繋がらないため、現場のメリットと比較して採用を判断する。

kintoneは「作って終わり」ではありません。現場の声に耳を傾け、少しずつ使いやすく改善していくことが、定着への近道です。まずは、テスト環境や影響の少ないアプリで、今回のコードを試してみてください。

また、関連レコードのヘッダー色付けについては、以前の記事で解説していますので、そちらをご参照ください。
関連記事： kintone関連レコードのヘッダー色付け｜列ごとに色分けして区別する方法