【FormBridge】AIでWebフォームのデザインを瞬時に作成|フィールド設定の手間削減

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

FormBridgeの「フォームのデザイン」設定に、AI機能が搭載されました。2026年10月16日から利用可能となっています。

フォームの作成時、配置や必須項目など機能の設定に迷っていた方も、AIに作りたいフォームのイメージを伝えるだけで、用途に合ったフォームを簡単に作成できます。入力した情報がAIに学習されることはないため、安心して業務に利用できます。

本記事では、FormBridgeに追加された「AIがフォームのデザインを作成」機能の使い方を紹介します。使用する際のポイントも解説しているので、ぜひご一読ください。

なお、FormBridgeで何ができるのかを確認したい方は「FormBridge(フォームブリッジ)とは?できること・使い方」をご覧ください。FormBridgeをまだ利用したことがない方は、下記の30日間無料お試しを使ってAIを含むすべての機能を何度でも試用できます。

問い合わせも、アンケートも、

社内申請システムも。
Webフォームを5分で作れる

30日間無料で試す

AIを使ってフォームのデザインを設定しよう

AIでフォームのデザインを設定する

▲出典:kintone連携サービス操作ガイド「FormBridge|AIでフォームのデザインを設定する」

「AIがフォームのデザインを作成」機能を使うと、AIと対話しながら、背景色や文字の大きさ、必須項目の設定などを含むフォーム作成が可能です。ITツールの操作に不慣れな方も、AIに指示を入力するだけで、簡単にフォームデザインの変更ができます。

AIのデザインの提案を確認して問題なければ、画面下部の「反映」をクリックし、デザインを確定させましょう。その際、必ず「フォームのデザイン」設定画面の左下にある「保存」ボタンをクリックして保存する操作が必要です。

AIのアイコンをクリックして「AIの有効化が必要です」と表示されている場合は、Toyokumoアカウント管理画面からAIの有効化を行いましょう。AIを有効化する手順は、後述する「【FAQ】フォームデザインAIを使う際のポイントのQ3」をご確認ください。

なお、FormBridgeでフォームを作成する場合は、まずデータを登録するkintoneアプリを作成し、連携する必要があります。

【FormBridgeの利用手順:休暇申請フォームを作成する場合】

  1. 休暇申請アプリを作成する
  2. FormBridgeと連携する
  3. FormBridge側でフォームの設定をする

FormBridgeをこれから初めて利用される方は、「FormBridge|FormBridgeのはじめ方」を参考に手順を進めてみてください。

1. 現行の申請書類をフォームにする|例:シンプルで見やすい申請フォームを作成して

現在業務で使用している書類をFormBridgeのフォームにする際は、簡単な指示を入力するだけで見やすい申請フォームを作成できます。今回は「シンプルで見やすい申請フォームを作成して」と指示を入力しています。

1. kintoneアプリと連携後に表示される画面(自動でフィールドが配置されている) 2. AIに指示を入力したあとの画面
1-1. kintoneアプリと連携後に表示される画面 1-2. AIに指示を入力したあとの画面

AIに指示を入力したあとは「必須項目の強調」と「余白の調整」がされていることが分かります。フォームに問題がなければ、「反映」ボタンをクリック後、必ず画面左下にある「保存」ボタンをクリックしてフォームデザインを保存しましょう。

なお、フォームに入力された情報を「印刷・PDF化」したい場合は「PrintCreator(プリントクリエイター)」のようなkintone連携サービスと連携させることで、より便利に活用できます。電子契約機能もついているため、契約業務をオンライン完結させたい場合にも適したサービスです。

PrintCreatorの機能や使い方は「PrintCreator(プリントクリエイター)とは?できること・使い方」から確認できます。

2. 自社のコーポレートカラーを追加したい|例:自社のコーポレートカラー(#55A4CE)に合ったフォームにして

自社のコーポレートカラーをフォームに反映することも可能です。今回は「自社のコーポレートカラー(#55A4CE)に合ったフォームにして」と指示を入力しています。

1. AIに指示を入力する前の画面 2. AIに指示を入力したあとの画面
2-1. AIに指示を入力する前の画面 2-2. AIに指示を入力したあとの画面

AIに指示を入力したあとの画面では、ページヘッダーとフッターの色がコーポレートカラーに変更されていることが分かります。背景色は、コーポレートカラーに合わせた色が設定されました。

なお、ヘッダーのロゴやfaviconはAIで変更できないため、自社のロゴに変更したい場合は手動での対応が必要です。

3. フォームの回答率を上げる|例:項目の多いアンケートで回答者が途中で入力を止めないフォームにして

項目の多いアンケートにおいて、回答率を上げるために工夫するよう指示をすると、AIが提案を返してくれます。今回は「項目の多いアンケートで回答者が途中で入力を止めないフォームにして」と入力しています。

1. 項目の多いアンケートフォーム画面 2. AIに指示を入力したあとのフォーム画面
3-1. 項目の多いアンケートフォーム画面 3-2. AIに指示を入力後のフォーム画面

フォーム上の入力欄の間隔が狭くなり、フォーム全体が短く見えるようになりました。また、必須項目の表示が強調され、確実に回答してほしい項目が一目でわかるようになっています。

また、FormBridgeは自動で視認性のよいモバイル用フィールドも作成できます。モバイルの利用も検討している方は、FormBridgeの「基本の設定」の「モバイル用フィールド」からデザインの確認をしてみてください。

FormBridgeの設定画面「基本の設定>モバイル用フィールド」

▲FormBridgeの設定画面「基本の設定>モバイル用フィールド」

【FAQ】フォームデザインAIを使う際のポイント

フォームデザインAIを使う際の、ポイントを質問形式でまとめています。具体的な仕様に関して不明点がある方は、参考にしてください。

Q1. AIを利用する際に追加料金はかかりますか?

A. 追加料金は一切かかりません。
30日間の無料お試し中の方を含めて、全コースで利用可能です。

ただし、フォームのデザイン上で使える機能はコースごとに異なり、利用中のコースに含まれない機能はAIを使っても設定できません。コースごとに利用できる機能の範囲は、トヨクモkintone連携サービス公式サイト「FormBridge|料金」をご確認ください。

Q2. AIの作業中に手動でユーザーがデザインを変更した場合、どうなりますか?

A. AIで上書きされます。

AIのデザインを採用したくない場合は、AIのデザインが表示された直後に、画面下に表示される「却下する」をクリックしてください。AIが提案したデザインが削除されます。

Q3. フォームのデザイン設定の画面で、AIのアイコンが表示されません。どうすればいいですか?

A. 以下の手順で「AIを有効化」できているか確認してください。

手順1. 「Toyokumoアカウント管理画面」から「AI機能設定」を開く 手順2. 「AIを有効化」をオンにする
手順1. 「Toyokumoアカウント管理画面」から「AI機能設定」を開く 手順2. 「AIを有効化」をオンにする

Q4. JavaScriptやCSSのカスタマイズをAIで行えますか?

A. フォームのデザインを変更するAIでは、JavaScriptやCSSのカスタマイズは行えません。

「AIがフォームのデザインを作成」機能で変更できるのは、あくまで「フォームのデザイン」画面で設定できる範囲に限ります。なお、自社のロゴや画像を手動でアップロードすることは可能です。

faviconやヘッダーロゴを変更したい方は、kintone連携サービス操作ガイド「FormBridge|favicon/ヘッダーロゴ」をご確認ください。

Q5. FormBridgeでフォームのデザイン以外に利用できるAI機能はありますか?

A. FormBridgeでは、現在「フォーム入力時のAIチャット」と「フォームの回答完了画面のデザイン変更」でAIをご利用いただけます。
各AI機能の使い方は、下記表に記載の関連記事をご確認ください。

また、FormBridge以外のkintone連携サービスでもAI機能を利用できます。今後開発予定のAI機能もあるため、最新情報は、トヨクモkintone連携サービス公式サイト「開発ロードマップ」から確認してください。

【トヨクモ株式会社のkintone連携サービス】
連携サービス名 できること
FormBridge

kintoneへデータが自動で保存されていくWebフォームを作成できる

HTML知識不要!AIでFormBridge回答完了画面を簡単に自動生成

【FormBridge】AIチャット「ベータ版」をリリース!フォーム入力時の疑問をその場で解消

PrintCreator

kintoneアプリのデータをPDFで出力できる/電子契約ができる

PrintCreatorにAI登場!書類レイアウト設定が一瞬に

kViewer

kintoneライセンスがない人に、kintoneアプリのデータを共有できる

【kViewer】ビューの「リスク評価AI」で公開時の情報漏洩を防止!使い方を解説

【kViewer】AIでレコード詳細画面のデザインを瞬時に変更!

kMailer

kintoneアプリのデータを引用してメール送信できる

【kMailer】AIでシナリオメールを作成する

DataCollect

複数のkintoneアプリに登録されたデータを集計できる

【DataCollect】「AI関数」でデータ作成や更新作業を一気に自動化!

【DataCollect】AIがフィールド式の設定をサポート(一括設定も可能)

kBackup

kintoneアプリに登録されたデータを安全にバックアップする

※2026年10月時点でAI機能は搭載していません

(参考:トヨクモ株式会社「kintone連携サービス公式サイト」)

「トヨクモ × AI」でkintone業務をオンライン上で完結しよう

FormBridgeに新たに追加された「AIがフォームのデザインを作成」機能を使うと、AIに指示を入力するだけでフォームの色や配置を簡単に変更できます。ITツールの利用に慣れていない方でも簡単に操作できるので、問い合わせや申請フォームの作成にぜひご利用ください。

また「申請手続き」や「アンケート集計」などの業務でフォームを作成する場合は、FormBridgeとkViewerを連携させることで、オンラインで完結できるシステムを構築できます。

【トヨクモkintone連携サービスで実現できる業務効率化の例】
FormBridge連携で効率化できる業務 FormBridgeと連携するサービス
契約フォームから入力された内容をもとに自社フォーマットの書類を作成したい PrintCreator(プリントクリエイター)
「カレンダー予約で空きを確認 → フォームから予約 → 残席数の自動更新」の流れを実現したい

カレンダーで空きの確認:kViewer(ケイビューワー)

残席数の自動更新:DataCollect(データコレクト)

アンケート回答者にシナリオメールを送りたい kMailer(ケイメーラー)
申請者本人だけに個人データを表示・編集してもらいたい

kViewerとユーザー管理

※ユーザー管理はFormBridgeとkViewerのプレミアムコース以上で利用可能

業務の自動化によるコスト削減やセキュリティを考慮したシステムの構築を考えている方は、トヨクモのkintone連携サービスの利用を検討してみてください。

トヨクモのサービスはそれぞれkintone1環境につき、1契約でご利用いただけます。すべてのサービスで30日間無料お試しが何度でもできるため、まだ利用したことのない方は、ぜひ一度下記から自社の環境で試してみてください。

トヨクモkintone連携サービス全製品

30

日間無料で

何度でもお試しできます

詳しくはこちら

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

監修者トヨクモ編集部


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

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

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


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

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

すべての機能を30日間無料体験