【kintone活用】選択肢が多すぎて使いにくい！カスタマインの入力ダイアログで絞り込み検索UIを作る方法
こんにちは。 とこさんとともさんのkintone伴走記では、非エンジニアのアラフィフコンビがこれまで担当してきた事例をもとに、これからkintoneを導入したい・うまく活用できていない中小企業の担当者様に役立つ情報を発信しています。
本日のテーマは「ポップアップの選択肢が多すぎて選びにくい問題を、カスタマインの入力ダイアログで解決する方法」についてとこさんとともさんの見解をお届けします。
とこ： ねえともさん、クライアントのkintone担当者さんから「商品を選ぶポップアップの選択肢が多すぎて、毎回スクロールするのが大変」って声が上がってるって話、聞いたことある？
とも： あー、あるある！選択肢が増えてきたときに「どこにあるか探せない」って問題、地味に現場のストレスになるのよね。
とこ： そうなんだよ〜。でもこれってカスタマイン（Gusuku Customine）で解決できるって聞いたんだけど、どういう仕組みなの？
とも： できるよ！「入力ダイアログ」っていう機能を使うと、ポップアップが出る前にキーワード入力画面を挟んで、選択肢を絞り込んでから表示させることができるの。今日はそれを解説するね。
そもそも何が問題なのか：選択肢が多いポップアップの使いにくさ
とこ： まず、どういう状況で困るの？もう少し具体的に教えて。
とも： 例えばこういう場面を想像してみて。
案件を新しく登録するとき、「商品カテゴリー」を選ぶ項目がある。最初は4〜5種類しかなかったから問題なかったんだけど、取扱商品が増えるにつれて、ある特定のカテゴリーだけ商品数が膨大になってしまった。
とこ： あー、最初は少なかったのに、気づいたらスクロールしないと選べないくらい増えてたってやつね。
とも： そうそう。しかも厄介なのが、「全体の99回は普通に選べる」のに、「残り1回だけ特定のカテゴリーが多い」というケースなの。100回に1回のために全体のUIを大きく変えるのはやりすぎだけど、そのたびにスクロールしてる現場担当者にとっては地味にストレスなのよ。
とこ： 「たまにしか起きないけど、起きると面倒くさい」って、現場あるあるだね〜。
とも： そう。こういう「ほとんどは大丈夫だけど特定のケースだけしんどい」問題こそ、カスタマインが得意とするところなのよ。
解決策：カスタマインの「入力ダイアログ」で絞り込みを挟む
とこ： カスタマインの入力ダイアログって、具体的にどういう機能なの？
とも： 簡単に言うと、「ユーザーがアクションを起こしたときに、テキストを入力できる小窓をポップアップとして出せる」機能ね。
流れとしてはこう。
ユーザーが商品カテゴリーを選ぶ
カスタマインが「選んだカテゴリーが選択肢の多いものかどうか」を判定
多い場合だけ→キーワード入力ダイアログを表示
ユーザーがキーワードを入力して決定
そのキーワードに該当する選択肢だけが絞り込まれた状態でポップアップ表示
とこ： すごい！ポップアップが出る前に「キーワードで絞る」ステップが入るってことか。
とも： そうそう。選択肢が多いカテゴリーを選んだときだけこの絞り込みが動いて、少ないカテゴリーを選んだときはそのままポップアップが出る。ユーザーにとっては自然な流れで操作できるのよ。
設定のポイント：条件分岐で「多いカテゴリーだけ」に絞る
とこ： カスタマインの設定って難しそうだけど、ポイントを教えてほしい！
とも： 大事なポイントは3つあるよ。
① 「どのカテゴリーが多いか」をあらかじめ決めておく
まず、どのカテゴリーが「選択肢が多い = キーワード絞り込みが必要」なのかを整理する。あいまいなままだと設定がぶれてしまうから、ここは現場担当者に確認してリスト化しておくのがおすすめ。
とこ： なるほど、設定の前に「棚卸し」が必要なんだね。
とも： そう。特に今後も商品が増えていく可能性がある場合は、「何件以上だったら絞り込みを出す」という数値基準で設計しておくと、後からメンテナンスしやすいよ。
② 条件分岐で「多いカテゴリーを選んだ場合だけ」ダイアログを出す
カスタマインでは、「前のステップで選ばれた値が〇〇だったら」という条件を使って、次のアクションを切り替えられる。
選択肢の多いカテゴリーが選ばれた → 入力ダイアログを表示してキーワードを取得
それ以外のカテゴリーが選ばれた → そのままポップアップを表示
この分岐を設定することで、「全員に影響が出る変更」ではなく「必要な人だけに絞り込みが出る」UIが実現できるの。
とこ： 「等しい」条件で1つずつ設定するの？それとも複数まとめて指定できるの？
とも： ここが少しポイントでね。カスタマインの条件設定は「等しい」ではOR条件がそのままは使えないから、複数のカテゴリーに絞り込みを出したい場合はカテゴリーごとにアクションをそれぞれ作る必要があるの。最初の1つを作ってコピーして変更、という流れで効率よく設定できるよ。
とこ： なるほど〜。少し手間だけど、コピーで増やせるなら許容範囲だね。
③ 設定は「本番環境をそのまま触らない」で進める
とも： これ、地味に大事なことなんだけど、カスタマインの設定を途中で登録すると、すでに運用中のアプリの動きに影響が出る場合があるの。
とこ： えっ、途中保存したら現場に影響が出ちゃうの？
とも： そうなのよ。だから設定の途中段階では、既存の設定をコピーして別に作業して、完成してから既存の設定と入れ替えるという進め方が安全。特に現場の人が日常的に使っているアプリの場合は、この「作業中に本番を壊さない」意識がすごく重要ね。
とこ： それは気をつけないといけないね〜。知らずにやってたら怖い話だ。
ケーススタディ：機器販売会社での選択肢過多問題
とこ： 実際にあった話、教えてくれる？
とも： うん。機器の販売・保守を手がける、従業員数十名規模の企業さんのお話ね。
この会社ではkintoneで案件管理アプリを運用していて、新規案件を登録する際に「商品カテゴリー」→「商品分類」の順で選んでいく仕組みになっていたの。最初は問題なかったんだけど、ある特定の商品カテゴリーだけ、取り扱い商品が増えて選択肢が膨大になってしまったのよ。
とこ： 担当者さんは何に困ってたの？
とも： 「ほとんどのカテゴリーは普通に選べるのに、特定の機器だけ商品が多すぎて、毎回スクロールしないと選べない」という状況。1回の作業として見ると数十秒の話なんだけど、毎日繰り返す操作だと積み重なってストレスになるよね。
とこ： 「たった数十秒」でも、毎日のことなら結構なストレスだよね。
とも： そう。で、解決策として、カスタマインの入力ダイアログを使って
特定の機器（と同様に選択肢の多いカテゴリー）を選んだ時だけ、キーワード入力画面が出るように設定
それ以外のカテゴリーはこれまで通りの操作感を維持
という設定を実装したの。
とこ： 結果はどうだったの？
とも： 「操作が自然でストレスがなくなった」という反応をもらえた事例ね。しかも、今後も商品が増えた時に「選択肢の多いカテゴリー」が増えれば、同じ設定をコピーして追加するだけで対応できるから、メンテナンスもしやすい。
とこ： 後から増やしやすいのがいい設計ってことだね。
とも： そうそう。現場の運用が変わるたびにシステムを大改修しないといけない設計じゃなくて、小さい変更で対応できる設計にしておくのが、kintone活用の上手なやり方なのよ。
まとめ：選択肢過多問題を解決する3つのポイント
とこ： 今日の話、要点をまとめると？
とも： カスタマインの入力ダイアログで選択肢絞り込みを実現するには、この3つを押さえておいて。
「どのカテゴリーが多いか」を先に棚卸しする：設定の前に現場に確認してリスト化しておく
条件分岐で「必要な時だけ」ダイアログを出す：全体のUIを変えず、対象ケースだけに絞るのがコツ
設定作業は既存設定のコピーで進める：本番を触りながら作業しない。完成してから入れ替える
締めのひとこと
とこ： 「100回に1回の不便」でも放置しないで改善できるのが、kintone＋カスタマインの強みなんだね。
とも： そう。大掛かりな開発をしなくても、現場のちょっとしたストレスをGUIで解消できるのがカスタマインの良さ。「なんか使いにくいな」と思ってる操作があったら、まずカスタマインで何かできないか考えてみて。意外とシンプルな設定で解決できることが多いから！
まず自分のアプリで「選択肢が多くてスクロールが必要な項目」がないか確認するところから始めてみてね。それが改善の第一歩になるはずだよ。
※（GUI（Graphical User Interface）とは、アイコンやボタンなどの画像や図形を画面に表示し、マウスやタッチ操作で直感的にコンピュータを操作できる仕組み）
とこ： kintoneを使いやすくしたいと思っている現場担当者さんや管理者さんに、ぜひ読んでほしい内容だったね。 次回も、現場で役立つリアルなノウハウをお届けするから、楽しみにしててね。
▼ お問い合わせはこちら
https://app.jibun-apps.jp/form/cbce3656-16be-486f-8bed-a4781234b47c/new
▼ サービス内容の詳細はこちら（公式サイト）
[とことも流・kintone伴走支援 公式サイト]
「日報マチ子さん」はkintone×Chatwork×GASを活用した日報管理ツールです。ただいまモニター価格で有償版を提供中です。
