kintoneの表とグループを見やすく｜着せ替えUIで画面デザインを統一
「明細が増えると、どの行を見ていたか分からなくなる」「関連レコードの見出しや区切りを、もう少し見やすくしたい」「グループごとの情報のまとまりを、画面でも伝えたい」。
そんなkintoneの画面の見づらさを、テーマと個別設定で整えるのが「着せ替えUI」です。サブテーブル・関連レコード一覧・グループのデザインを、ひとつのプラグインで調整できます。
これまでの「着せ替えサブテーブル」から対象を広げ、PC版kintoneの入力・確認画面を見やすくするプラグインへ進化しました。
標準テーマのサブテーブル表示例。交互の行背景と「必須／任意」列の強調（サンプルデータ）。
サブテーブルだけでなく、画面のまとまりも整える
見た目を整えたい場所は、表だけとは限りません。明細、過去の履歴、補足情報など、画面の中で役割が異なる情報に、色や余白で分かりやすい区切りを付けられます。
サブテーブル：見出し・交互の行背景・列の強調で、明細を追いやすく。
関連レコード一覧：見出しや罫線を整えて、履歴や関連情報を読みやすく。
グループ：カード表示やアクセント色で、情報のまとまりを分かりやすく。
共通テーマで統一しながら、必要なテーブルやグループだけ個別に調整できます。共通テーマの設定には、CSSを書く必要はありません。
まずは4つのテーマから選ぶ
色だけでなく、余白・罫線・角丸・影まで含めた4つのテーマを用意しています。
グループの表示例。左側のアクセント色とカード表示で、補足情報をまとめられます（サンプルデータ）。
実際の設定画面。4つのテーマから選び、基本色・文字サイズ・表示密度を調整できます。
標準｜毎日の業務画面に
控えめな罫線と淡い見出しの帯で、情報を自然に区切ります。初めて設定するときの出発点に向いています。
コンパクト｜明細が多い画面に
余白を詰めて、表をすっきり表示します。行数が多い明細や、できるだけ多くの情報を確認したい場面に。
くっきり｜項目の境界をはっきりさせたいときに
罫線と見出しを強調し、表の区切りを分かりやすくします。見出しと入力欄を明確に分けたい画面に向いています。
やわらか｜ゆとりのある見た目に
角丸や影を使い、罫線を抑えた見た目に整えます。情報のかたまりを穏やかに区切りたいときに。
どのテーマも、基本色・文字サイズ・表示密度を調整できます。部署やアプリに合わせた色へ変えることも可能です。
サブテーブル：行を追いやすく、見るべき列を分かりやすく
交互の行背景や、マウスを重ねた行の強調によって、横に長い明細でも行を追いやすくします。見出しの背景色・文字色・太字、行の余白、罫線も調整できます。
強調する列は、先頭列に限らず選択できます。たとえば作業明細の「必須／任意」や、確認時に目を通したい列を強調し、画面の中で見つけやすくできます。これは選んだ列全体の装飾で、値に応じた条件付き色分けではありません。
数値・計算列では、数字の桁幅をそろえる表示も選べます。テーブルごとに装飾を有効・無効にできるため、必要な明細だけに適用できます。
関連レコード一覧：履歴や関連情報も同じ雰囲気に
関連レコード一覧にも、見出しの色や強調、交互の行背景、ホバー、余白、罫線を設定できます。
たとえば顧客情報と一緒に確認する対応履歴や、案件にひも付く関連情報を、サブテーブルと同じテーマで整えられます。標準のリンクや並べ替え、ページ送りは、そのまま利用できます。
装飾したい一覧を選んで適用するため、すべての一覧を同じ見た目に変える必要はありません。
グループ：情報のまとまりをカードで表現
グループは、カード表示・左側のアクセント色・見出しの強調・余白・角丸・影を調整できます。
「基本情報」「連絡先」「補足情報」など、グループにまとめた項目を視覚的にも区切れます。標準の開閉操作はそのまま使えます。
色の読みやすさと、入力欄へのアクセスにも配慮
見出しの文字色は、背景色とのコントラストに応じて自動補正します。好きな色を選びながら、見出しの読みやすさを保ちやすくしています。
また、コメント欄を表示した編集画面で表が広がりすぎる場合は、自動フィットで余白などを段階的に調整します。表示幅に余裕が戻ると、テーマの余白へ戻ります。列数や入力欄の幅によっては、横スクロールが必要になる場合があります。
設定は「テーマを選ぶ → 対象を選ぶ → 保存」
対象アプリにプラグインを追加し、設定画面を開きます。
共通テーマと基本色を選びます。
サブテーブルを調整し、関連レコード一覧・グループは装飾したい対象を有効にします。
簡易プレビューで見た目を確認します。
設定を保存し、アプリを更新して実際の画面を確認します。
最初は「標準」テーマで始め、必要な部分だけ調整すると設定しやすくなります。プレビューはサンプル表示のため、実際の項目や入力欄の見え方はアプリ側でも確認してください。
旧「着せ替えサブテーブル」をお使いの方へ
v1で保存したプリセットやカスタムCSSは、従来モードとして引き継ぎます。新しい共通テーマへ切り替えるタイミングは、アプリごとに選べます。
関連レコード一覧とグループの装飾は、設定で有効にした対象へ適用されます。なお、プラグイン本体の更新は、同じkintone環境で利用しているすべてのアプリに反映されます。
導入前に確認しておきたいこと
PC版kintone向けです。モバイル版・レコード一覧画面・印刷画面は対象外です。
サブテーブルやグループを装飾する既存のCSSと併用すると、表示が競合する場合があります。導入時に適用状況を確認してください。
本プラグインは見た目を調整するもので、レコードの値を集計・転記・更新する機能ではありません。
操作列の右固定は既定オフです。通常はそのまま使い、必要な場合に実際の画面で確認してください。
いつもの画面を、読みやすい画面へ
明細の行を追う、関連情報を確認する、グループを開いて必要な項目を探す。毎日の小さな操作に合わせて、画面の見た目を整えてみませんか。
着せ替えUIなら、共通テーマから始めて、必要な場所だけ調整できます。
コメント