関数の新機能の紹介:何ができるようになったのか?
kintoneで入力中の画面(新規レコード画面、編集画面)上のフィールドに色を付けたり、文字を太くしたりする「スタイルの変更」は、これまで多くのアプリ開発者を悩ませてきたトピックでした。
2026年02月08日のアップデートで新しく追加された JavaScript API kintone.app.record.setFieldStyle は、その悩みを一気に解決します。

これまで、kintoneの入力中画面のフィールドにスタイルを適用するには、大きく分けて2つの方法しかありませんでした。
- DOM操作(非推奨):
.getElementsByClassName()やjQueryで要素を直接指定し、CSSを書き換える方法。アップデートでクラス名が変わると動作しなくなるリスクがありました。 - プラグインの利用: スタイル変更機能を持つプラグインを導入する方法。
こちらも内部でDOM操作が前提であり、細かい条件分岐(ロジック)を組むにも限界がありました。
新関数の機能
今回登場したsetFieldStyle は、kintone公式が提供する「スタイル操作API」です。
- 安全な操作: DOMの構造を意識せず、フィールドコードを指定するだけでスタイルを変更できます。
- 動的な制御: JavaScriptのロジックに基づき、リアルタイム(入力中)にスタイルを切り替えられます。
- クリーンなコード: CSSファイルを用意しなくても、JSファイル単体でデザイン制御が完結します。
デモ画面
デモ画面では、レコード編集画面のラジオボタン操作で、入力フィールドのスタイル(文字色や背景色)を切り替えています。「規定値」を選べば、kintone標準のデザインに戻すこともできます。

ユーザー属性やフィールド条件で「注意を促すUI」を構築
新関数の真骨頂は、「ユーザーの属性やフィールド値に応じて、即座に視覚的フィードバックを与えられる」点にあります。
例えば、以下のようなシナリオが簡単に実現できます。
- 権限による強調: 特定の役職(ログインユーザー)が閲覧したときだけ、確認して欲しいフィールドを赤く光らせる。
- 数値による警告: 在庫数が発注点を下回った瞬間、背景色を警告色(オレンジ)に変える。
- ステータス連動: ラジオボタンの選択肢に応じて、入力すべき箇所の境界線を太くし、ユーザーの視線を誘導する。
これにより、単なるデータの器だったkintoneアプリが、ユーザーを正しく導く「ナビゲーションシステム」へと進化します。
具体的な活用シーン
この関数を現場でどう活かすか、5つのアイデアを紹介します。
① 【在庫管理】欠品リスクの可視化
商品の「現在庫数」が「安全在庫数」を下回った場合、在庫数フィールドの背景をピンク色にし、さらに文字を太字(bold)にします。
- メリット: 発注ミスを劇的に減らし、数値の読み飛ばしを防止します。
② 【経費精算】申請金額に応じたアラート
合計金額が10万円を超える場合、承認ルートに関わるフィールドの境界線を太く、目立つ色に変更します。
- メリット: 高額案件であることを申請者と承認者の双方に強く意識させます。
③ 【顧客管理】重要顧客のVIP待遇表示
顧客ランクが「Sランク」の場合、顧客名の文字色をゴールドにし、背景に色を付けます。
- メリット: 電話対応や訪問時に、担当者が一目で「重要顧客である」と認識でき、対応の質向上に寄与します。
④ 【タスク管理】期限切れタスクの強調
今日の日付と「完了予定日」を比較し、期限が過ぎている未完了タスクに対して、日付フィールドに「取り消し線(line-through)」と赤い背景色を適用します。
- メリット: 優先順位が低いタスクとの差別化を明確にします。
⑤ 【入力補助】非アクティブ項目のグレーアウト
ラジオボタンで「その他」以外が選択されている間、自由記述欄の背景色をグレーにし、入力を促さないデザインにします。
- メリット: どこを入力すべきかが直感的に伝わり、UX(ユーザー体験)が向上します。
💬 まとめ
kintoneの新関数 setFieldStyle は、単なるデザイン変更ツールではありません。ユーザーに「気づき」を与え、システムの操作性を高めるための「コミュニケーションツール」になります。
これまで「kintoneの画面はどれも同じで見づらい」と感じていたユーザーにとって、このアップデートは大きな福音となるでしょう。
🔨 自分でカスタマイズしてみたい方へ
以下のNote記事で本記事のカスタマイズ事例を紹介しています。
記事内で紹介しているカスタマイズコードは、無料で利用できるので是非挑戦してみて下さい。
「note:アプリ活用研究会(キン活)」は、当サイトのメンバーが執筆しています。

🌸 アプリテンプレートの販売
本記事でご紹介しているアプリテンプレートを、下記の料金プランで販売しています。
導入をご希望の方は、各プランの「お申込み/お問い合わせ」ボタンからお問い合わせください。

■ 料金プラン
◆単品販売(買取型)は、導入サポート付きの価格です。
単品動作タイプは60,000円、2アプリ連携タイプは100,000円、3つ以上連携タイプは150,000円です。
◆簡易サポート契約では、当サイトのアプリテンプレートとプラグインを合計6種類までご利用できます。
◆会員サポート契約では、ご利用範囲「無制限」で運用ヘルプデスク対応までフルサービスでご提供します。
| 項目 | 単品販売 | 簡易サポート | 会員サポート |
|---|---|---|---|
| 料金体系 | 60,000円 (税抜) | 120,000円 (税抜) | 360,000円 (税抜) |
| 契約期間 | なし | 毎年更新 | 6か月更新 |
| 導入サポート | ✔ | ✔ | ✔ |
| メールサポート | × | ✔ | ✔ |
| チャットサポート | × | ✔ | ✔ |
| バージョンアップ対応 | × | ✔ | ✔ |
| 運用ヘルプデスク対応 | × | × | ✔ |
| 商品のご利用範囲 | 本商品のみ | 6種類までご利用可能 ユーザー数10名まで |
無制限 ユーザー数30名まで |
| お問い合わせ/お申し込み | 購入する | お申込み |
🏫 kintone人材育成研修
この様なカスタマイズを自分で出来る様になりたい方は、当サイトの「Kintome人材育成」上級コースの受講をご検討して下さい。当サイトのTIPSで紹介しているカスタマイズ例のテンプレートを使えば、簡単に実装出来ます!
上級コースの受講者には、特典で当サイトのカスタマイズテンプレート(3種類まで)と3か月のサポート契約を無償でご提供しています。
研修目的を「カスタマイズテンプレートのアプリ導入」とする研修メニューもご提案可能です。

📣カスタマイズ・導入支援いたします!
本記事の様な「kintoneアプリのカスタマイズ」をご希望の企業様へ
kintoneを便利に活用できるカスタマイズと運用支援は、ぜひ当社にご相談ください!

#kintone #Javascript #カスタマイズ #フィールドのスタイル変更
