タブ表示プラグイン

kintone タブ表示

タブ表示プラグイン

カスタマイズビューライト

kintoneのフォームをタブで区切って見やすく表示

  • タブでフィールドを整理
  • タブの色設定
  • タブ名の表示切り替え

単品 月額¥3,000(税別)30日間無料

セットプラン:ライトプラン以上(¥3,000~/月)

このプラグインでできること

kintoneの標準機能だけだと、、、

  • フィールドが多すぎて、どこに何を入力すればよいかわかりづらい・・・
  • スクロールばかりで作業に時間がかかる・・・
  • 関連する情報がバラバラに表示されていて、一度に確認しづらい・・・

そんな課題を解決するのがタブ表示プラグインです。

タブ表示プラグインを使うことで、フィールドを用途ごとにタブで整理できるため、情報がすっきりとまとまり、直感的に操作できます。

Before

フィールドが多すぎてスクロールが大変

After

タブで整理されていてスクロール不要

kintone標準のフォームとの違い

項目の多いアプリでは、kintoneのレコード画面はフィールドが縦に長く並び、スクロールして目的の項目を探すことになります。顧客管理や案件管理のように、基本情報・商談・契約など情報のまとまりが多いアプリで差が出ます。

項目kintone標準タブ表示プラグイン
フィールドの整理
グループフィールドで項目をまとめて開閉できるが、画面は縦に続く
タブ名と表示する行を指定し、詳細・追加・編集画面をタブで切り替えて表示例)基本情報/商談履歴/契約情報
常に見せたい項目
下へスクロールすると、上のほうの項目は見えなくなる
ヘッダー部・フッター部に、どのタブを開いていても表示する行を指定
状況に応じた表示
レコードの値に応じて、項目のまとまりを表示・非表示にする機能はない
フィールドの値に応じて、タブを表示・非表示に切り替え(AND/OR条件)例)顧客種別が「法人」のときだけ「請求情報」タブを表示
注意を引く
条件に応じた色分けはできない
タブの色を設定でき、値に応じてタブの背景色・文字色を自動で変更例)遅延案件は「進捗」タブをオレンジに
最初に開く場所
レコードはいつもフォームの先頭から表示される
レコードの内容に応じて、最初に表示するタブを自動で切り替え

※ すべての行をまとめて確認できる全項目表示タブも追加できます。印刷画面だけタブを表示しない設定や、モバイルアプリ・ゲストスペースでの利用にも対応しています。

主な機能

タブでフィールドを整理

レコードの詳細・追加・編集画面にあるフィールドを、タブで分かりやすく整理できます。タブを作成し、表示させたいフィールドを割り当てるだけで、簡単に設定が可能です。

タブの色設定

タブの色は自由に設定でき、さらにレコードの値に応じて自動で色分けすることも可能です。状況に合わせて視覚的に整理できるため、情報の把握が一層スムーズになります。

タブ名の表示切り替え

フィールドの値に連動して、タブの表示名を自動で切り替えることができます。これにより、入力内容や状況に応じたわかりやすいタブ表示が可能になります。

タブの非表示

フィールドの値に連動して、表示するタブと非表示にするタブを切り替えることができます。状況に応じて必要な情報だけを表示でき、画面をすっきり整理できます。

活用事例:商談管理アプリの入力項目を、フェーズごとのタブで整理する

縦に長い入力画面をタブで切り替える

商談管理アプリに、提案・見積の項目、成約時の項目、失注時の項目とフェーズごとの入力欄が並び、画面が縦に長くなっている。よく見る基本情報は上に残したまま、フェーズ別の項目をタブにまとめる手順です。

  1. STEP01

    常に見せる行と、タブに入れる行を分ける

    商談番号・フェーズ・商談名などの基本情報は、ヘッダー部として画面上部に常に表示します。プラグイン設定でヘッダー部に表示する行数を入れ、その下の行をタブに割り当てていきます。

    フォームの1〜4行目を基本情報、5行目以降をタブに入れる行として示したkintoneのフォーム画面
    1〜4行目をヘッダー部に、5行目からをタブに割り当てる例
  2. STEP02

    タブ名と、そのタブに表示する行を指定する

    タブ部で「検討中情報」「交渉中/成約」「失注情報」のようにタブ名を入れ、それぞれに表示する行を選びます。タブ名は固定の文字のほか、フィールドの値を表示することもできます。

    タブ1〜3にタブ名と表示する行を設定したタブ表示プラグインの設定画面
    タブごとにタブ名と表示する行を設定
  3. STEP03

    レコード画面がタブで切り替わる

    保存すると、詳細・追加・編集画面のフィールドがタブ形式で表示されます。タブをクリックすると、そのタブに割り当てた行だけが表示されるので、スクロールせずに目的の項目にたどり着けます。

    基本情報の下で、フェーズ別の項目をタブで切り替え(動作イメージ)
  4. STEP04

    今のフェーズのタブに色を付ける

    タブのデザイン設定で条件付き色切り替えをONにし、フェーズの値ごとに色を変えるタブを指定します。今どの段階の項目を入力すべきかが、タブの色でわかります。

    フェーズの値に応じて対応するタブの背景色が黄色に変わる商談レコードの動作画面
    フェーズの値に応じてタブの色が変わる(動作イメージ)
  5. STEP05

    扱う製品に関係のないタブは隠す

    タブの非表示設定をONにして、製品名などフィールドの値に応じて非表示にするタブを指定します。商談で選んだ製品に関係のあるタブだけが残るので、入力する人が迷いません。

    製品名の選択に応じて表示されるタブが切り替わるレコード画面の動作
    製品名の値に応じてタブを表示・非表示(動作イメージ)
この使い方でできるようになること

基本情報は常に見えたまま、フェーズ別の項目はタブで切り替えられます。項目を減らさずに画面がすっきりするので、入力や確認のたびにスクロールして探す手間がなくなります。

フィールドをタブで分ける設定手順を見る(活用ガイド)

スペック

項目対応状況
モバイル対応対応
ゲストスペース対応対応

利用料金

セットプランでも単品(月額・買い切り)でもご利用いただけます。すべて税別表示です。

おすすめ

セットプラン

¥3,000〜/月

ライトプラン以上(税別)

向いている人ほかのプラグインもあわせて使いたい

プラン内のプラグインをまとめて利用・バージョンアップ・サポート

単品 月額

¥3,000/月

このプラグインのみ(税別)

向いている人まずはこのプラグインだけ使いたい

タブ表示プラグイン・バージョンアップ・サポート

単品 買い切り

¥150,000

一度のお支払い(税別)

向いている人長く使うことが決まっている

タブ表示プラグイン・バージョンアップ・サポート

  • 30日間無料
  • クレジットカード不要
  • どのプランもサポート込み

申し込み前に画面を触りたい方は デモ環境で試す

活用ガイド

設定方法や使い方の詳しい手順は、以下のガイドをご参照ください。

導入事例

最近の更新

バージョンリリース日変更点
v2.19.0
v2.18.0
  • 条件付き非表示設定をした際に、タブは表示されるが、タブの表示する行に設定した項目が表示されない
  • 設定画面 preview API 対応
v2.17.0
v2.16.0
v2.15.0
  • ゲストユーザーがレコードを開くとタブが表示されない
  • 必須エラーの表示位置が不正
  • 【UX改善】条件式のSelectBoxの幅が小さい

よくある質問

よくある質問をすべて見る

FREE TRIAL

このプラグインを試す

単品 月額 ¥3,000(税別)から

  • 30日間無料
  • クレジットカード不要
  • サポート込み

料金プランの詳細を見る