#kintone100日チャレンジ Day096：重要項目だけを「見る順番」に再配置！ハイライトバナーを組んでみた

面倒解決エンジニアの森田ユウゴです。

台湾からお届けする「#kintone100日チャレンジ」の96日目。

結局、Claude MAX 20xプランを契約してしまいました…。

Fableが限定で使えるということはもちろん、残りの期間も20xで豊富に作業が可能。

今までClaude Code, CODEX, Cursor, Antigravityを使い分けても、ピーク時は全然足りなかったのが現状。この1カ月は超今更、なんでもAIエージェントを前提に仕組みを作ってみようと思います。

さて、本日のテーマは、案件管理や問い合わせ管理など、情報量の多いアプリを使う担当者向けの「重要項目ハイライトバナープラグイン」。フィールドの配置そのものを変えるのではなく、レコードを開いた瞬間に見るべき情報だけを上部へ集める、という情報設計を試しました。

「重要項目ハイライトバナープラグイン」について

🎯 どんな課題に向き合ったか（現場の不とベネフィット）

現場の「不」: 項目数の多いレコードでは、担当者が顧客名、ステータス、金額、期限などを確認するたびに画面を探し回ることになる。重要項目がフォーム内に散らばっていると、対応の優先度や異常にも気づきにくい。

導入後の世界（ベネフィット）: 指定した重要項目をレコード詳細画面の上部へ最大5件まとめて表示できる。固定表示と条件付きの色分けを組み合わせれば、スクロール後も判断材料を見失わず、期限超過や高額案件などにも気づきやすくなる。

💡 着想・こだわり

kintoneには、条件に応じてフィールドの色を変えたり、表示を制御したりする優れた既製プラグインが既にあります。今回は同じ方向で機能を増やすのではなく、「元のフォームは変えず、判断に必要な値だけを別の要約エリアへ複製する」という切り口にしました。

こだわったのは、単なる装飾ではなく「見る順番」を設定できることです。設定画面で1〜5件のフィールドを選び、順序、表示ラベル、横幅、強調の有無を指定します。さらに、条件に合うときだけ項目背景、値の文字色、バナー全体の背景を変えられるため、通常時は静かな要約欄として、例外時は注意を促すサインとして使えます。

✨ これで出来ること（機能概要）

まずはこちらをご覧ください。

重要項目を最大5件に集約: レコード詳細画面の上部へ、選択したフィールドを指定順で表示。ラベル、横幅、強調表示も項目ごとに調整できます。

見た目と固定表示を調整: バナー、枠線、ラベル、値の配色と文字サイズを設定可能。Sticky表示を有効にすると、スクロール時も上部に残せます。

条件付きで異常を可視化: 等しい・以上・以下・空欄・期限日が今日より前などの条件を使い、項目背景、値の文字色、バナー背景を切り替えられます。

課題

現時点では下記のような課題が残っています。

PC版のレコード詳細画面に限定

現在は app.record.detail.show とPC版のヘッダーメニュースペースAPIだけを対象にしています。モバイル、一覧、追加、編集画面には表示されません。また、バナーは確認用の要約であり、値を直接編集する機能はありません。

条件ごとに適切な比較方法を選ぶ必要がある

大小比較は数値として解釈できる値が前提です。日付の「今日より前」は利用者のブラウザー時刻を基準に判定します。複数のルールが同じ表示先へ一致した場合は、後に設定したルールの色が優先されるため、ルールの並びと条件の重なりを確認する必要があります。

Sticky表示は画面レイアウトの影響を受ける

バナーの配置には公式APIを使っていますが、固定表示自体はCSSの position: sticky によるものです。kintone側のレイアウト変更や、同じ領域を使う他のカスタマイズとの組み合わせでは、表示位置や重なりを再確認する必要があります。

さいごに

#kintone100日チャレンジ として、2026年4月から毎日プラグインをバイブコーディングしています。明日もお楽しみに！

私森田ユウゴはココナラでkintoneに関する各種サービスを出品しております。

SIerの中でもインフラSEとして約10年、特に「運用保守」にはベンダーとして深く携わってきました。

作りっぱなしにしない導入やカスタマイズのご提案が可能です。

お気軽にご相談をくださいませ

→森田ユウゴのプロフィールはこちら👇

https://coconala.com/users/5353693