Toyokumo kintoneApp Blog

FormBridgeで簡単!階層選択・スライダーの設定方法とテーブルとの組み合わせ方を解説

トヨクモ編集部のサムネイルアイコン トヨクモ編集部

階層選択は、ユーザーの属性情報の正確な収集や商品の絞り込み検索の効率化など、さまざまな場面で活用できる便利な機能です。

この記事では、FormBridgeで階層選択フィールドを設定する方法をステップごとに紹介します。さらに、特定の範囲内の数値を視覚的に選択できる「スライダー」や、最大10段階評価でフィードバックを集める「評価」の設定手順についても詳しく解説します。

あわせて、階層選択フィールドやスライダー、評価と組み合わせて使うことで汎用性がさらに高まる「テーブル」機能についても解説していますので、入力フォームをさらに使いやすくカスタマイズしたい方は、ぜひ参考にしてください。

FormBridge(フォームブリッジ)階層選択とは?

階層選択とは、選択肢が親子関係のように階層構造になっている選択方式のことです。階層の最上位には大まかなカテゴリがあり、下層に進むにつれて選択肢がより具体的になります。FormBridgeでは、この階層選択を簡単に実装できます。

主な活用例は以下のとおりです。

  • 回答者の属性(年齢、性別、居住地など)を収集
  • 所属組織(会社名、部署名など)を収集
  • 興味のある分野(業種、職種、課題など)を収集

入力フォームに階層選択を導入することで、ユーザーは目的の選択肢をスムーズに見つけられるようになり、離脱率の低下に繋がります。また、入力ミスも軽減されるため正確なデータ収集が可能となり、データ分析の効率化にも貢献します。

FormBridge(フォームブリッジ)で階層選択フィールドを設定する方法

ここからは、FormBridgeで階層選択フィールドを設定する手順を具体的に説明します。

FormBridgeの階層選択フィールドでは、回答データの保存方法によって設定が異なり、ここでは以下の2つを見ていきましょう。

  1. 階層ごとに回答データを登録:各カテゴリを別のフィールドに保存
  2. 階層選択したすべてのデータを1つのフィールドに登録:階層構造全体を1つのデータとしてフィールドに保存

1.階層ごとに回答データを登録する手順

各階層で選択された内容を、それぞれ別のフィールドに保存する方法です。

①kintoneで階層選択用(文字列1行)のフィールドを準備する

FormBridge階層選択フィールド登録手順 フィールド準備

任意のkintoneアプリに、階層の数だけ「文字列(1行)」フィールドを用意します。

【例】
「形態(デスクトップorノート)」>「OS」>「メーカー」の3階層のフィールドをつくる場合は、「文字列(1行)」のフィールドを3つ配置。

②FormBridge(フォームブリッジ)でkintoneアプリと連携したフォームを作成する

FormBridgeを開き、任意のkintoneアプリと連携した入力フォームを作成します。
(※すでにフォームを作成済みの場合は、ステップ3に進んでください)

FormBridge階層選択フィールド登録手順 アプリ連携

ホーム画面の「+新しいフォームをつくる」をクリックし、「はじめから作成」を選択します。

連携したいkintoneアプリのURLとAPIトークンを入力し、「フォームを作成して次へ」ボタンをクリックしてください。

 

FormBridge階層選択フィールド登録手順 フォーム作成

アプリと連携したフォームが自動生成されます。

③文字列(1行)を削除してから階層選択フィールドを追加する

FormBridge階層選択フィールド登録手順 不要フィールド削除

階層選択フィールドを配置するために、自動生成された「文字列(1行)」フィールド3つを削除します。

この時点で、入力フォームに不要なフィールドは削除しておきましょう。

 

FormBridge階層選択フィールド登録手順 階層選択フィールド

フォームに階層選択フィールドを1つ追加します。

 

FormBridge階層選択フィールド登録手順 選択肢入力

階層選択のフィールド名を変更し、各階層に選択肢を入力します。選択肢を追加/削除する際は、ボタンの位置に注意してください。

【項目の追加】
フィールド横の「+追加ボタン」をクリックすると、選択中の項目の下に新しい下位階層の項目が追加されます。
フィールド下の「+追加ボタン」をクリックすると、選択中の項目と同じ階層に新しい項目が追加されます。

【項目の削除】
「×削除ボタン」をクリックすると、その項目が削除されます。

【3階層の設定例】

デスクトップ
∟Windows
∟Dell
∟HP
∟Lenovo
∟ASUS
∟macOS
∟iMac
∟Mac mini
∟Mac Studio
∟Mac Pro
ノート
∟Windows
∟Dell
∟HP
∟Lenovo
∟ASUS
∟Acer
∟macOS
∟MacBook Air
∟MacBook Pro

選択肢の入力が終わったら、フォームのデザインに戻り「保存」ボタンをクリックします。

④回答保存プロセスを設定する

FormBridge階層選択フィールド登録手順 回答保存プロセス

FormBridgeのメニュー左にある「回答保存プロセス」をクリックして、「kintoneアプリへの保存」の「歯車アイコン(設定)」をクリックします。

FormBridge階層選択フィールド登録手順 保存先フィールド追加

ポップアップ画面が表示されるので、下にスクロールして保存先フィールドの下にある「+フィールドを追加」をクリックしてください。

 

FormBridge階層選択フィールド登録手順 回答保存プロセス設定

先ほど追加した階層選択フィールド「フィールド名(第●階層)(cascader)」を選択し、それぞれ対応するkintoneアプリの「文字列(1行)」フィールドに連携させます。

最後に「保存」ボタンをクリックして設定完了です。

⑤テストする

作成したフォームに回答を入力してみましょう。

FormBridge階層選択フィールド登録手順 テスト入力

FormBridgeの階層選択フィールドは見やすく、マウス操作だけで簡単に入力できます。

 

FormBridge階層選択フィールド登録手順 動作確認

kintoneアプリを開くと、それぞれの階層ごとの回答が別々のフィールドに保存されていることが確認できました。

2.階層選択したすべてのデータを1つのフィールドに登録する方法

選択したすべての階層の情報を1つのフィールドにまとめて保存する方法を説明します。

①kintoneで階層選択用(複数選択orチェックボックス)のフィールドを準備するFormBridge階層選択フィールド登録手順 単一フィールド フィールド準備

kintoneアプリを開き、階層選択フィールドを設定したいフィールドに、「複数選択」または「チェックボックス」のフィールドを追加します。

なお、複数選択/チェックボックスともに重複する項目名は保存できません。今回の例では、以下の項目をチェックボックスに登録します。

デスクトップ
Windows
Dell
HP
Lenovo
ASUS
macOS
iMac
Mac mini
Mac Studio
Mac Pro
ノート
Acer
MacBook Air
MacBook Pro

②FormBridge(フォームブリッジ)で階層選択フォームを作成する

1と同じ流れで、kintoneアプリに連動するフォームを生成します。

ホーム画面の「+新しいフォームをつくる」をクリックし、「はじめから作成」を選択。連携したいkintoneアプリのURLとAPIトークンを入力し、「フォームを作成して次へ」ボタンをクリックしてください。

③複数選択、またはチェックボックスフィールドを削除してから階層選択フィールドを追加する

フィールド設定で該当のフィールドを削除し、階層選択フィールドを追加して選択肢を入力します。

④階層選択の設定画面からkintoneアプリの保存先フィールドを選択する

FormBridge階層選択フィールド登録手順 単一フィールド 保存先フィールド選択

階層選択の設定画面を下にスクロールして、kintoneアプリの保存先フィールドで該当する「複数選択フィールド」または「チェックボックスフィールド」を設定します。

フォームのデザインに戻り、「保存」ボタンをクリックしてください。

【注意点】
2の方法では、1で説明した回答保存プロセスからフィールド連携を行うことはできません。「フィールド名(第●階層)(cascader)」を選択し、該当するkintoneアプリのフィールドを設定しても、正常に連携されずエラーが発生しますのでご注意ください。

⑤テストするFormBridge階層選択フィールド登録手順 単一フィールド 動作テスト

作成したフォームに回答しkintoneアプリを開くと、回答内容が1つのフィールドにまとめて保存されていることが確認できました。

FormBridge(フォームブリッジ)のスライダーと評価とは?

FormBridgeでは、ユーザーが数値や意見を直感的に入力できる「スライダー」と「評価」の2つのフィールドを利用できます。どちらも、アンケートやフォームで数量的なデータを集めたいときに活躍します。基本的な機能と使い分けをチェックしておきましょう。

スライダーとは?

スライダーは、フォーム上でバーを左右に動かすことで数値や範囲を選択できる入力フィールドです。ユーザーはマウスやタッチ操作でバーをスライドさせるだけで、直感的に任意の値を指定できます。

たとえば「0〜100の満足度」や「時間や数量の範囲」を取得したい場合に便利です。

このフィールドの特長は、わずかな数値の違いまで反映できる点です。従来の5段階評価や10段階評価では表現しきれない細かいユーザーの声を把握できるため、連続的な指標や詳細なデータ分析を行ないたい場合にとくに有効です。

スライダーの構成要素

  • トラック:スライダーが移動する範囲を示すバー
  • ステップ:スライダーの刻み幅
  • トラックバー(サム):スライダーをドラッグするためのハンドル

評価とは?

評価フィールドは、星や段階スコアなど、あらかじめ設定した段階でユーザーが回答できる入力方法です。クリックやタップだけで選択できるため、ユーザーの操作負担が少なく、簡単に意見や満足度を収集できます。

たとえば、商品レビューで「★1〜5」のように表現したい場合などに向いています。

直感的に評価できるため、ユーザーは迷わず選択でき、入力完了率の向上にもつながる方法です。

スライダーと評価の使い分け

スライダーと評価はいずれも、設問に対して数値的な評価を取得できるフィールドですが、取得できるデータの形式が異なります。

スライダーは連続値や細かい範囲を取得したい場合に最適で、微妙な数値の違いや中間値まで含めて評価したい場合に使われます。一方で評価は、段階的な評価(例:満足度1〜5)を簡潔に得たい場合に最適です。操作が簡単で直感的に回答できるため、アンケート全体の入力負担を減らせます。

設問の目的や収集したいデータの精度に応じて、どちらを使うか判断すると、より効率的に回答を集めることが可能です。

FormBridge(フォームブリッジ)でスライダーと評価を設定する方法

ここでは、スライダーと評価の設定方法について説明します。

人事部が会社説明会を実施したあとに、学生に対してアンケートを実施する状況を例に実践してみましょう。

スライダーを設定する手順

スライダーは、特定の範囲内の数値を視覚的に選択できるフォーム形式です。

ユーザーはスライダーをドラッグすることで、最小値から最大値までの任意の値を直感的に選択できます。「0〜20」「0〜100」など、幅広い数値範囲を扱う場合に適しています。

1.スライダーを設定するkintoneアプリのフィールドを「数値」に変更するFormBridgeスライダー設定手順 フィールド設定

kintoneアプリを開き、スライダーを設定するフィールドを「数値」に変更します。

スライダーは「数値」フィールドにのみ保存できるため、事前にkintoneアプリのフィールドを「数値」に設定しておくとスムーズです。

2.フォームのデザイン画面でスライダーを追加する

FormBridgeスライダー設定手順 フォーム設定

kintoneアプリに連携するフォームを作成し、ドラッグ&ドロップで「スライダー」を配置します。元あった数値フィールドは削除しましょう。

3.スライダーの詳細を設定する

FormBridgeスライダー設定手順 スライダー設定

任意のフィールド名(ここでは質問)に変更し、スライダーの最大値と最小値とステップ、初期値を設定します。

 

FormBridgeスライダー設定手順 保存先フィールド設定

設定画面を下にスクロールして、kintoneアプリの保存先フィールドを入力します。最後にメニューに戻り、「保存」ボタンをクリックすれば完了です。

 

FormBridgeスライダー設定手順 フォーム作成完了

スライダーで回答できるフォームが作成できました。

評価を設定する手順

評価とは、ユーザーがサービスや商品に対して最大10段階評価でフィードバックを提供できるフォーム形式のことです。FormBridgeでは、星形のアイコンを1から10まで設定できます。

星アイコンによる評価は直感的で分かりやすいため、ユーザーは率直な意見を伝えやすいというメリットがあります。企業にとっては評価が数値化されるため、ユーザーの満足度を定量的に把握しやすく、サービス改善につなげやすいです。

1.評価を設定するkintoneアプリのフィールドを「数値」に変更する

FormBridge評価設定手順 フィールド準備

評価は、スライダーと同様に「数値」フィールドにのみ保存できます。評価を保存するフィールドを「数値」に変更しておきましょう。

2.フィールド編集画面で評価フィールドを追加する

FormBridgeスライダー設定手順 フィールド追加

kintoneアプリに連携するフォームを作成し、ドラッグ&ドロップで「評価」を配置します。元からあった数値フィールドは削除します。

3.星の数と評価基準の内容、初期値を入力する

FormBridgeスライダー設定手順 評価基準設定

星の数、評価基準、初期値、kintoneアプリの保存先フィールドを選択し、フィールドのデザイン画面にある「保存」ボタンをクリックして設定は完了です。

 

FormBridge評価設定手順 フォーム作成完了

星の数で評価できるフォームが作成できました。

テーブルと組み合わせて汎用性アップ!FormBridge(フォームブリッジ)のテーブルとは?

フォームを作るなかで項目が増えてくると、階層選択では情報を整理しきれないケースも多いです。そこで活躍するのが、複数の項目やデータを整理して効率よく入力できる「テーブル」フィールドです。基本的な機能と利用シーンを紹介します。

テーブルフィールドの基本機能

テーブルは、複数行または複数列のデータを、1つのフォーム内でまとめて入力できるフィールドです。単一のフィールドだけでは管理が難しい情報も、テーブルを使うことで見やすく整理できます。

また、必要に応じて行の追加や削除も可能で、取得したい情報に合わせてフォームを柔軟に調整可能です。

テーブルが活躍する利用シーン

テーブルはさまざまなシーンで活躍します。たとえば、注文フォームでは商品名・数量・金額を行ごとに入力することができ、複数商品をまとめて管理できます。

研修やイベントの参加者情報を、複数まとめて登録する際も便利です。氏名や部署、参加日などを行ごとに入力することで、登録作業の手間を大幅に削減できます。

さらに、業務報告のような場面で、日付・作業内容・担当者を1レコード内にまとめたい場合にも役立ちます。テーブルを活用することで、情報が整理されて見やすくなるだけでなく、データ分析や集計の効率も向上するでしょう。

テーブル内に階層選択を設定するには?

続いて、テーブルと階層選択を同時に使う い場合の設定方法と、設定の際の注意点を解説します。

設定手順

1.kintoneで階層選択用(テーブル)のフィールドを準備する

テーブル内階層選択フィールド フィールド準備

kintoneアプリに「文字列(1行)」フィールドを、階層の数だけ含むテーブルを作成します。

2.FormBridge(フォームブリッジ)でテーブル内に階層選択フィールドを作成する

kintoneアプリに連携するフォームを作成します。

テーブル内階層選択フィールド フィールド追加

フォームのデザイン画面で、テーブルの右側にある「+」ボタンをクリックし、テーブル内に階層選択フィールドを追加してください。 

 

テーブル内階層選択フィールド フィールド削除

テーブル内に元々あったフィールド3つは削除します。

 

テーブル内階層選択フィールド 選択肢入力

テーブル内にある階層選択フィールドに選択肢を入力しましょう。

3.kintoneで階層選択情報を登録するフィールドのフィールドコードを変更する

テーブル内階層選択フィールド フィールドコード変更

kintoneアプリを開き、テーブル内の「文字列(1行)」フィールドの「歯車アイコン(設定)」をクリックします。
表示されたポップアップ画面を下にスクロールし、フィールドコードを「cascader_split_cascader_1」に変更して「保存」ボタンをクリックします。


なお、ここで設定したフィールドコードの命名規則は下記のとおりです。

{{FormBridge側での「階層選択」フィールドコード}}_split_cascader_{{登録したい階層数}}

一定のルールに従ってフィールドコードを設定することで、各フィールドを管理しやすくなります。


今回のパターンだと、次のようになります。

  • 1階層目(例:形式): cascader_split_cascader_1
  • 2階層目(例:OS): cascader_split_cascader_2
  • 3階層目(例:メーカー): cascader_split_cascader_3

4.FormBridgeとkintoneアプリを同期する

テーブル内階層選択フィールド アプリ同期

FormBridgeに戻り、作成したフォームとkintoneアプリを同期します。同期を行なわないとAPIエラーが発生しますので、必ず同期してください。

5.テストする

テーブル内階層選択フィールド 動作テスト

テーブル内で階層選択を行なう仕様となっています。

 

テーブル内階層選択フィールド テスト確認完了

回答を送信すると、レコード内のテーブルに各階層の回答がそれぞれ登録されていることが確認できました。

設定時に注意しておきたいポイント

テーブル内に階層選択を設定する際は、階層ごとの登録内容に不備がないか確認することが大切です。登録内容が十分でないと、選択肢が途中で途切れてしまい、データの集計に支障をきたします。必要な階層や選択肢がすべてそろっているか事前にテストしておくといいでしょう。

また、テーブルの行数が増えるほどユーザーの操作負担も大きくなるため、操作しやすいUI設計を意識する必要があります。さらに、テーブル全体の構成は事前に利用シーンを想定して決めておくと、ユーザーの操作性確保はもちろん、あとからの修正や入力の混乱を防ぐことができます。

テーブル内にスライダー/評価を設定するには?

続いて、テーブル内にスライダー/評価を設定する際の手順と注意点を解説します。

設定方法の手順

1.kintoneでスライダー用または評価用のフィールドを準備する

まず、テーブル内にスライダーの値を保存する「数値」または「ラジオボタン」フィールドを追加します。評価を保存する場合も同様に「数値」または「ラジオボタン」フィールドを追加してください。

このフィールドがスライダーや評価で選択された値を保存する対象となります。

2.FormBridgeで対象のテーブルフィールドを開く

次に、FormBridgeで編集したいテーブルフィールドを開きます。編集対象のテーブルを選択し、各行のフィールドを編集できる状態にしてください。

3.テーブル内のフィールドを割り当てる

kintoneで追加した数値フィールドやラジオボタンフィールドを、テーブル内の各行に割り当てます。

スライダーの場合は、このフィールドがスライダーとして表示され、ユーザーが操作できるようになります。評価の場合は、割り当てたフィールドが評価用のインターフェースとして表示されます。

4.スライダー機能または評価機能を設定する

フォームデザイン画面で、スライダー機能または評価機能を提供するフィールドを選択します。

スライダーの場合は質問名やフィールド名、最小値・最大値・ステップ(刻み幅)・初期値などを設定します。

評価の場合は評価段階数(例:5段階)、アイコンの種類(星や丸など)、初期値を設定してください。

5.保存先フィールドを指定して保存する

kintoneアプリの回答保存先フィールドを正しく指定し、設定内容を保存します。これにより、フォームの変更が正しく反映されます。

6.kintoneアプリとFormBridgeを同期する

設定が完了したら、FormBridgeとkintoneアプリを必ず同期してください。同期を行わない場合、データ送信時にAPIエラーが発生する可能性があります。

7.テストする

最後に、フォーム回答画面でスライダーや評価が正しく表示され、操作できるかを確認します。回答を送信したあと、kintoneテーブルに値が正しく登録されているかチェックしましょう。

設定時に注意しておきたいポイント

テーブル内にスライダーや評価を設定する場合、行数が増えるとその分ユーザーの操作負担も増えるため、必要最小限の行数に抑えることが大切です。また、各フィールドが正しいkintoneの保存先に対応しているかを必ず確認しておきましょう。

スライダーを設定する場合は、値の範囲やステップを適切に設定しておかないと、ユーザーが操作しづらくなってしまいます。とくに細かすぎる刻みや極端に広い範囲は、直感的な操作を妨げる可能性があります。

一方、評価フィールドでは、段階数が多すぎるとユーザーが迷いやすく、少なすぎると情報が粗くなります。そのため、適度な尺度を設定し、直感的に選択できるようにすることが重要です。

まとめ:FormBridge(フォームブリッジ)の階層選択を使いこなしてフォーム運用をさらに便利に!

FormBridgeでは、階層選択、スライダー、評価といった高機能なフィールドを利用することで、より使いやすく回答しやすい入力フォームを簡単に作成できます。

階層選択やスライダーは、回答者の入力の手間を軽減し入力完了率の向上に貢献します。評価は、視覚的に分かりやすい形で回答を収集できるため、顧客満足度やサービスの評価を把握したい場合に活用するのがおすすめです。

また、テーブル機能を併用することで、多くある項目をより整理できるようになり、フォーム作成の柔軟性がアップします。

FormBridgeにご興味をお持ちいただいた方は、ぜひ30日間無料お試しでその便利さを体験してみてください。

30日間無料お試しに申し込む

トヨクモ編集部のサムネイルアイコン

監修者トヨクモ編集部


メンバー全員がkintone認定資格保有者。 累計14,000件以上のkintone連携サービス導入を支援した実績をもとに 、kintoneを活用した業務効率化や現場で役立つ最新情報を発信中。

その他のお役立ち情報 Other Useful Information

サービスカタログや過去のセミナー動画、FormBridgeを応用したもっと便利な活用方法などを紹介しています。


私たち、トヨクモのサービス Our Services

kintoneをより使いやすくするためのkintone連携サービスです。30日間の無料お試しへぜひお申し込みください。