kintoneアプリの入力項目が多すぎる?画面をすっきり整理するタグプラグインとは

「kintone(キントーン)でアプリを作ってみたはいいけど、項目が多すぎて画面が見づらい。どうにかならないの?」こんな経験はありませんか?

実は、kintoneを積極的に活用しようとすればするほど画面に入力項目(フィールド)が増えて、使いにくくなるケースがよくあります。特に、「経費精算アプリ」や「建設業の現場チェックシート」のように、状況によって入力項目が変わるときはこの問題が起きがちです。

本記事は、そんなお悩みを一発で解決するCrena(クリナ)社の「タブプラグイン」を使ったkintoneアプリの改善事例をご紹介します!

なお、ペパコミでは建設業向けのkintoneの構築サポートを行なっています。建設業のお客様から寄せられたお悩みを解決してつちかったノウハウをもとに、最適なシステムをご提案しますので、以下のボタンからお気軽にご相談ください!

目次

「kintoneの入力画面が縦に長すぎる!」そのお悩み、タブで解決します

kintoneでアプリを作っていると、どうしても避けられない問題があります。それは、「入力項目(フィールド)が多すぎて、画面が縦に長くなる」という問題です。

「アプリが見にくい!」その悩みを解決するのはタブプラグイン
「フィールドが多くなる問題が起きがち」

例えば、「経費精算アプリ」で経費を管理する場合、経費の種類によって入力したい項目が以下のように違いませんか?

【例】経費管理でよくある入力項目の違い
  • 交通費:日付、行先、金額
  • 交際費:日付、支払先、相手先、参加人数

このような状況を無視して、全部の項目を1つの画面に並べてしまうと、入力する人は「自分はどこに入力すればいいんだ?」と迷ってしまいます。項目が多いと画面を長々とスクロールする必要も出てきて、正直使いにくいですよね。

この問題を解決するのが、「タブプラグイン」です。

このプラグインの仕組みは、「最初は何も表示させない。選んだ項目に関する情報だけを”タブ”として表示させる」というもの。そのため、画面が驚くほどスッキリして、直感的に使えるようになります!

【画像で解説】タブプラグインでスムーズに進む経費申請

実際に、このタブプラグインを使った経費申請アプリがどのように動くのかお見せしましょう。まず、以下がプラグインを適用する前の状態です。

【kintoneアプリ実践】タブプラグインで経費申請はこう変わる!
すべての入力項目がズラッと並んでいてわかりにくい…「交通費どこに入れる?」

交通費や宿泊費、立替経費、交際費など、考えられるすべての入力項目がズラッと並んでいて、どこから手をつけていいか分かりにくいですよね。

では、ここにタブプラグインを適用してみます。

画面を開くとどうでしょう?さっきまで並んでいたたくさんの入力項目が消えて、非常にシンプルな画面になりました!

【kintoneアプリ実践】タブプラグインで経費申請はこう変わる!
一旦全部消えて、シンプルな画面に

次に、「申請内容」というチェックボックスから、自分が申請したい項目を選びます。例えば「交通費」にチェックを入れると、「交通費」というタブが以下のように現れて、交通費の入力に必要なテーブルだけが表示されました!

【kintoneアプリ実践】タブプラグインで経費申請はこう変わる!
「交通費」にチェックを入れると、交通費の入力に必要なテーブルだけが表示

これなら、入力する場所を間違えることがありませんよね!

もちろん、複数のタブを同時に申請することもできます。以下のように「交通費」と「交際費」の両方にチェックを入れれば、それぞれのタブが表示されるといった具合です。

【kintoneアプリ実践】タブプラグインで経費申請はこう変わる!
「交通費」と「交際費」の両方にチェックを入れれば、それぞれ入力可能

このように、入力する人は自分が申請したい項目だけを見ながら作業できるので、迷うことがありません。画面が整理されているだけで、入力ミスが減り、申請作業のスピードも格段にアップします。

また、この仕組みは、入力する人だけでなく承認する責任者や経理担当者にとってもメリットが大きいです!

承認画面でも、申請された内容が表示されるので、一目で「今回は交通費と会議費・交際費の申請だな」と確認すべき内容が分かりスムーズに進められます。

【kintoneアプリ実践】タブプラグインで経費申請はこう変わる!
承認画面でも、申請された内容がタブが出ている状態で見える

今ならデモ画面を無料で閲覧いただけますので、以下のボタンからお気軽にお試しください!

ご紹介した経費申請アプリは、以下でデモ画面をご覧いただけます。今なら無料で閲覧いただけますので、「とりあえず画面を見てみたい!」とお考えの方は、以下のボタンからお気軽にお試しください!

タブプラグインで建設業の「現場チェックシート」も変わる

タブプラグインを使ったテクニックは、経費精算のほかにも、さまざまな場面で応用が効きます。建設業では、「現場のチェックシート」がそのひとつです!

建設現場では、工事の種類によってチェックすべき項目が異なりますよね。例えば、足場工事と内装工事では、安全確認のポイントも使う資材もまったく違います。

こうした多様なチェック項目を1つのアプリで管理しようとすると、どうしても画面が複雑になりがち。

建設業の現場チェックシートもkintoneで!タブプラグイン活用術
多種多様なチェック項目を1つのアプリで管理しようとすると、どうしてもフィールドが増えてしまう

しかし、タブプラグインを使えば、該当するタブを選択するだけで、チェックが必要なタブを表示することが可能です。例えば、「高所作業の安全管理チェックシートだけに、『墜落防止措置』に関するチェック項目を表示する」といった具合です。

これによって、作業者が不要な項目に惑わされず、確認漏れを防げます!

もちろん、テーブル機能を使って項目を一覧にする方法もありますが、横長になりやすくスマートフォンでは見づらいのが難点です。ですが、タブプラグインを使えば必要なテーブルだけをタブで切り替えて表示できるので、スマートフォンでの操作性が向上し、見落としを防止するだけでなく作業員の安全も守れます!

Crena(クリナ)社のタブプラグインが選ばれる理由

実は、「条件に応じてタブを表示/非表示する」という機能を実装している表示プラグインはかなり稀です。

表示プラグインはたくさんありますが、ほとんどの場合で最初からすべてのタブが表示されます。そのため、非表示にする設定ができるCrena社のタブプラグインは非常に珍しいといえます。

さらに、このプラグインはデザインの自由度が高く、「アクティブ/非アクティブ」「条件付き切り替え」の設定でタブの色を切り替えることも可能です。

タブプラグインが選ばれる理由
タブの色を切り替えるといった細かい設定も可能

このように細かい調整ができるので、「うちの会社はデザインにもこだわりたい」という場合も、きっと満足できるはずです!

kintone開発で悩んだらペパコミへ!発想の転換で解決案を探します

今回は、Crena社のタブプラグインを少し工夫して使うことで、複雑な入力画面をシンプルにする方法をご紹介しました。

お客様から「こんなことできませんか?」とご要望をいただいたとき、プラグインの標準機能では応えられないケースが思いのほかあります。そんなとき、私たちペパコミは、プラグインの王道的な使い方に固執せず、「発想を少し転換すれば実現できるのでは?」という視点で解決策を探しています!

kintone開発で悩んだらペパコミへ!発想の転換で解決案を探します

今回のタブの使い方も、まさにその一例です。こうした「発想の転換」の引き出しをどれだけ持っているかが、kintone活用のレベルを大きく左右します。

ペパコミには、これまで多くのお客様の課題を解決してきたなかで積み上げた、たくさんの知見とノウハウがあります。

やりたいことを実現するための、最適な方法をご提案させていただきますので、「kintoneでこんなことを実現したいけど、どうすればいいか分からない」と悩んでいるなら、ぜひ一度ペパコミにご相談ください!

小川喜句

ペパコミ株式会社代表取締役小川 喜句

YouTube「kintone活用ちゃんねる」を運営。kintoneの構築や内製化の伴走支援を行なっており、kintoneを運営するサイボウズ社において、顕著な実績を上げたパートナーを表彰する「CYBOZU AWARD 2022」を受賞。サイボウズ評価制度4年連続2つ星を受賞。セールス部門(2023~2025年) インテグレーション部門(2022~2025年)

小川喜句X 小川喜句Youtube
目次