はじめに
kintoneでアプリを構築・運用する際、ユーザーへの「入力ルール」の周知は重要な課題です。
「この項目は全角で入力してほしい」「入力例を示したい」といった場合、標準機能だけではUIデザインに限界があり、結果としてデータの表記揺れや入力ミスが発生しやすくなります。
本記事では、JavaScriptによるカスタマイズ（コーディング）を行わずに、kintoneの入力画面をスッキリさせつつ、適切な入力補助（ツールチップ）を実装する方法をご紹介します。
kintone標準機能における課題
kintone標準で入力ルールをユーザーに伝える方法として、以下のようなアプローチがあります。
-
フィールドの「説明」に記載する
フィールド下部に常時テキストが表示されるため、項目が多いと縦に長い画面になってしまい、視認性・操作性が低下します。 -
「ラベル」フィールドを配置する
フォーム内に注意事項をテキストで配置できますが、こちらも画面を占有してしまう原因になります。 -
外部マニュアルを用意する
入力時にわざわざ別タブや別資料でマニュアルを確認するユーザーは少なく、形骸化しやすいという問題があります。
解決策：KINPURAの「フィールドTipsプラグイン」
これらの課題をノーコードで解決できるのが、無料で提供されている「KINPURA フィールドTipsプラグイン」です。
このプラグインを導入することで、フィールドにマウスオーバーした時にだけ詳細な説明文（Tips）をポップアップ表示させることが可能になります。
導入のメリット
-
画面のUIをシンプルに保つ
常時表示される説明文を隠せるため、入力フォーム全体がスッキリし、ユーザーが直感的に操作しやすい美しいインターフェースを維持できます。
-
入力ミス・手戻りの削減
「ハイフンなしで入力」「〇〇の場合はこちらを選択」といった入力直前のタイミングでピンポイントにルールを提示できるため、入力ミスやデータの差し戻しが激減します。 -
ノーコードで簡単設定
JavaScriptやCSSのコーディング知識は一切不要です。プラグインの設定画面から、対象フィールドと表示させたいテキストを指定するだけで完結します。
活用アイデア（ユースケース）
実際にどのようなシーンで活用できるか、いくつか例を挙げます。
1. 顧客管理アプリ（フォーマットの指定）
- 対象フィールド: 電話番号
-
Tipsテキスト例:
ハイフンなしの半角数字で入力してください。（例：09012345678）
2. 交通費精算アプリ（詳細入力の促進）
- 対象フィールド: 訪問先
-
Tipsテキスト例:
訪問先の企業名だけでなく、支店名や担当部署まで詳細に入力してください。
3. 日報アプリ（記載内容のガイド）
- 対象フィールド: 所感
-
Tipsテキスト例:
今日の業務で気付いた課題と、明日の改善案をセットで記入しましょう。
4. 社内稟議アプリ（添付ファイルの漏れ防止）
- 対象フィールド: 添付ファイル
-
Tipsテキスト例:
見積書だけでなく、比較検討した他社の相見積もりも必ず添付してください。
まとめ
kintoneアプリを社内に定着させるには、「どれだけ迷わずに直感的に入力できるか（UI/UX）」が非常に重要です。
JavaScriptのカスタマイズなしで、手軽に入力補助を実装できる「フィールドTipsプラグイン」は、データクレンジングの手間を省き、管理者・ユーザー双方の負担を軽減する有効な手段と言えます。
kintoneの入力画面のUI改善を検討されている方は、ぜひ試してみてください。
参考リンク
(※本記事は、note記事を元に、kintone管理者およびエンジニア向けの技術・ノウハウ共有として構成したものです。)