Toyokumo kintoneApp Blog

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

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

2026年5月、新たにFormBridgeのAI機能が追加され、フォーム回答完了画面の自動生成が可能となりました。本記事では使い方を解説するため、実際に3パターンの画面を作成しています。

「HTMLの知識がなくて書けない」「HTMLを書くのが手間」といった理由で、FormBridgeのフォーム回答後の画面をそのまま利用している人は、ぜひAI機能を活用してみてください。

また、FormBridgeの導入を検討されている方は、まずは「30日間無料お試し」をご利用ください。実際の画面で、手軽なフォーム作成を今すぐご体験いただけます。

FormBridgeの回答完了画面をAIで簡単に自動生成できる

FormBridgeの新機能「AIで回答完了画面を作成」を使うことで、HTMLを書かなくても、フォーム回答完了画面を自動生成できます。追加料金不要で利用でき、自然な言語で簡単に画面デザインを作成可能です。

【FormBridgeの「AIで回答完了画面を作成」機能でできる活用例】

できること 活用例
任意のサイトへの動線 公式サイトやキャンペーンサイトへのリンクを設置
カレンダーへの追加 イベントなどの申し込み後のカレンダーへの追加ボタン設置
SNSへのリンク SNSに遷移するボタン設置
図の作成と追加 申し込み〜受付までのフロー図を表示
画像や動画の追加 セミナー動画や自社のロゴなどを追加
入力内容の表示 フォームに入力した内容を確認のため表示

FormBridgeの新機能「AIで回答完了画面を作成」の使い方

新機能は、FormBridgeの該当のフォームの管理画面から「回答完了画面」を開き、「HTMLで自由に生成」にチェックを入れ「AIで回答完了画面を作成」の文字をクリックして使用します。

フォームの基本設定 フォームの回答完了画面
フォームの基本設定 フォームの回答完了画面

▲FormBridgeのフォームの編集画面から設定画面を開く

たとえば「フォームの回答内容を一覧で確認できる画面」と入力した場合、回答完了画面にフォームの入力内容を表示させることができます。

AIに自然言語でプロンプト入力 AIで自動生成された画面
AIに自然言語でプロンプト入力 AIで自動生成された画面

▲FormBridgeのAIで「回答内容を一覧で確認できる回答完了画面」と入力した場合

プレビューに要望通りの回答完了画面を表示できたら、プレビュー画面の右下にある「HTMLを確定」をクリックし、最後に画面左下に出てくる「保存して完了画面を更新」をクリックして保存します。

ただし、一度保存してしまうと元の回答完了画面に戻せなくなるため注意してください。

「該当のサイトに遷移するか」「リンクは新しいタブで開くか」などの動作確認をする際は、一度画面を保存する必要があるため、現行のフォームを編集する際は元のHTMLをメモして保管しておきましょう。

HTMLを確定 保存して完了画面を更新
HTMLを確定 保存して完了画面を更新

▲「フォームの回答内容を一覧で確認できる画面」を保存する

本記事では、実際に3つのパターンで作成したフォーム回答の完了画面を紹介します。FormBridgeをご利用中の人は、チャットの指示だけで簡単に作成できますので、ぜひ実際の画面で回答完了画面を作成してみてください。

製品サイトへの案内画面|ボタンの配置とデザインを変更する

フォーム回答画面に製品サイトやキャンペーンサイトへの案内を入れることで、自社製品やサービスの訴求ができ、フォーム回答者が次のアクションにつなげやすくなります。

【「AIで回答完了画面を作成」機能で製品サイトへの案内画面を作成する①】

入力したプロンプト 製品サイトへの案内([サイトURL])と、30日間無料お試し([無料お試しURL])のボタンを配置して
AIに自然言語でプロンプト入力 AIで自動生成された画面
製品サイトへの案内画面1 製品サイトへの案内画面2

▲FormBridgeの「AIで回答完了画面を作成」機能で作成した製品サイトの案内画面

製品サイトへの案内リンクを設置したい場合は、プロンプトに遷移先のサイトURLも入力します。ボタンの位置や表示させたい文章がある場合は、変えたい色味や文章を指定すると要望通りのデザインに変更できます。

【「AIで回答完了画面を作成」で製品サイトへの案内画面を作成する②】

修正したプロンプト 製品サイトへの案内([サイトURL])と、30日間無料お試し([無料お試しURL])のボタンを配置して

【条件】

  • ・製品サイトボタン(ボタン:#55A4CE、フォント:#FFFFFF)
  • ・30日間無料お試しボタン(ボタン:#E9B223、フォント:#000000)
  • ・次の文章をボタンの上に入れてください。
    “kintone連携Webフォーム作成ツール「FormBridge (フォームブリッジ)」”
AIに自然言語でプロンプト入力 AIで自動生成された画面
製品サイトへの案内画面3 製品サイトへの案内画面4

▲プロンプトに条件を追加し、ボタンや文章を変更した画像

文字やボタンの位置を入れ替えたい場合は、プレビュー後に「製品サイトと無料お試しのボタンの位置を入れ替えて」と入力すると、要望を踏まえた画面を表示できます。

【「AIで回答完了画面を作成」機能で製品サイトへの案内画面を作成する③】

AIに自然言語でプロンプト入力 AIで自動生成された画面
製品サイトへの案内画面5 製品サイトへの案内画面6

▲ボタンの位置を入れ替えた画像

プレビューで想定した回答完了画面を表示できたら、「HTMLを確定」をクリックし、最後に画面左下に出てくる「保存して完了画面を更新」をクリックして保存しましょう。

上記のように、FormBridgeのAI機能を使うと、製品サイトや訴求したいサービスへの動線を簡単に作成できます。

イベントサイトへの案内画面|自社のロゴと動画を設置する

イベントの参加申し込みやアンケートなどの回答後、イベントの詳細情報やカレンダーへの日程追加をしたいときには、イベントサイトのURLやカレンダーのURLを回答完了画面に追加しましょう。

【「AIで回答完了画面を作成」機能でイベントサイトへの案内と動画を設置する①】

入力したプロンプト イベントの予習動画([動画URL])を表示し、イベントの案内サイト([サイトURL])とカレンダーへの追加ボタン([カレンダーのURL])を追加して
AIに自然言語でプロンプト入力 AIで自動生成された画面
イベントサイトへの案内画面1 イベントサイトへの案内画面2

▲FormBridgeの「AIで回答完了画面を作成」機能で作成した動画とイベントサイトへの案内、カレンダーへのボタンを設置した画面

自社のロゴを追加したいときは、ロゴの画像をURLに変換して追加します。すでに公開されている画像がある人は、公開されているロゴのURLを活用できます。

WordPressを利用している場合は「メディアライブラリ」内の画像のファイルのURLをコピーしてプロンプトに入力します。画面が完成したら、忘れずに保存しましょう。

【「AIで回答完了画面を作成」機能でイベントサイトへの案内と動画を設置する②】

追加で入力したプロンプト 動画の上に自社の企業名のロゴと([企業名ロゴURL])イメージキャラクターのロゴ([キャラクターロゴURL])も追加して
AIに自然言語でプロンプト入力 AIで自動生成された画面
イベントサイトへの案内画面3 イベントサイトへの案内画面4

▲ロゴを追加したイベント案内の回答完了画面

イベントの詳細情報の表示やカレンダーへの日程追加ボタンを設置することで、参加申し込みをした人が、次にとるアクションに迷わない動線を作れます。

また、フォーム回答の完了直後にカレンダーに日程を追加することで、参加日程を間違えたり忘れたりするミスも防止できます。

申請〜受付完了までの詳細画面|フロー図を自動生成する

FormBridgeのAI機能を使うと、申請から受付完了までのフロー図の自動生成が可能です。「受付完了までにかかる日数」や「受付完了時の対応方法」などを明記して、フォーム回答者からの問い合わせ削減につなげられます。

【「AIで回答完了画面を作成」機能で申請〜受付完了までの詳細を表示する①】

入力したプロンプト
  • ・申請〜受付完了までの一連の流れを図にして
  • ・自社の企業名ロゴ([企業名ロゴURL])とキャラクター([キャラクターロゴURL])も追加して
  • ・受付完了後はメールで連絡、受付完了までは3営業日かかることも図に入れて
AIに自然言語でプロンプト入力 AIで自動生成された画面
申請〜受付完了までの詳細画面1 申請〜受付完了までの詳細画面2

▲FormBridgeの「AIで回答完了画面を作成」機能で作成した申請〜受付完了までの詳細を表示した回答完了画面

申請フォームを作成する際は、トラブル時の対応方法や問い合わせ先を記載しておくと、より問い合わせの負担を減らせます。マイページや申請の進捗が分かるサイトがある場合は、サイトへ飛べるリンクを設置しても良いでしょう。

【「AIで回答完了画面を作成」機能で申請〜受付完了までの詳細を表示する②】

追加で入力したプロンプト
  • ・お問い合わせボタン(https://www.kintoneapp.com/contact)一番下に配置して
  • ・「申請内容に誤りがあった場合」や「目安期間を過ぎても連絡(メール)が届かない場合」などのトラブル時は、お問い合わせ用の電話番号050-3816-6666(平日9時〜18時)にかけるように促す文章も追加して
AIに自然言語でプロンプト入力 AIで自動生成された画面
申請〜受付完了までの詳細画面3 申請〜受付完了までの詳細画面4

▲お問い合わせボタンとトラブル時の対応方法の文章を作成した画面

申請や受付時の一連の流れを表示させたいときは、FormBridgeの「AIで回答完了画面を作成」機能を活用しましょう。

FormBridgeでAIを活用するときのポイント

FormBridgeで「AIで回答完了画面を作成」機能を活用する際は、3つのポイントを確認しておきましょう。

【FormBridgeにおけるAI機能の活用ポイント】

  1. 利用する前にAI機能の有効化が必要
  2. 「保存して完了画面を更新」を押すとボタンでは元の画面に戻せない
  3. 同じプロンプトを入力しても同じ画面が生成されるとは限らない

1. 利用する前にAI機能の有効化が必要

FormBridgeでAIを活用する際は、AI機能を有効化しておく必要があります。Toyokumoアカウント画面から「AI機能設定」を開き、「AI機能を有効化」をオンにすることでAIが使用可能となります。

Toyokumoアカウント画面のメニュー AI機能設定画面
AI機能の有効化1 AI機能の有効化2

▲トヨクモkintone連携サービスのAI機能を有効にする操作

2. 「保存して完了画面を更新」を押すとボタンでは元の画面に戻せない

フォームの回答完了画面作成後に実際の画面で行う動作確認は「保存して完了画面を更新」を押したあとのプレビュー画面で行う必要があります。

しかし、AIの自動生成で回答完了画面を作成する際、フォームの回答完了画面を「HTMLを確定」して「保存して完了画面を更新」をクリックすると、HTMLコードが上書きされてしまいボタンでは元の画面に戻せなくなります。

元の画面に戻せない

▲HTMLコードを入力するエディタに元のHTMLを貼り付ける

そのため、実際に動いているフォームの回答完了画面を編集する際は、変更前のHTMLをメモしておきましょう。元の画面に戻す際に、HTMLコードが書かれているエディタに元のHTMLを貼り付けて保存することで元の画面を再現できます。

3. 同じプロンプトを入力しても同じ画面が生成されるとは限らない

AIで回答完了画面を自動生成する場合、一度目とまったく同じプロンプトを入力しても異なる画面が表示される可能性があります。

連続で同じプロンプトを入力した場合は同じ画面が生成されることもありますが、数回別のプロンプトを入力して他の画面を作成したあと、一度目の画面と同じプロンプトを入力しても同じ画面を再現するのは難しいでしょう。

一度目に作成した画面 数回ほかのプロンプトを入力した後
AIで自動生成された画面 同じ画面が生成されるとは限らない

▲FormBridgeのAIで「回答内容を一覧で確認できる回答完了画面」と入力した場合の比較

似たような画面でもボタンの形が変わったり文や画像の位置が変わることがあるため、一部使いまわせそうな画面が表示された場合は、HTMLをメモして保管しておくと良いでしょう。

「AI×トヨクモkintone連携サービス」で簡単に業務を効率化!

トヨクモのkintone連携サービスには、AI機能が搭載されているサービスがあります。AI機能を使うことで、より手軽に業務効率化を図れます。

【AIを搭載しているトヨクモkintone連携サービス】

サービス名 機能
FormBridge フォームの回答完了画面の作成

[入力例]

回答内容を一覧で確認できる回答完了画面

<今後リリース予定のAI機能>

フォーム画面のデザイン作成や修正サポート

→ 配置やデザインの提案

kViewer <今後リリース予定のAI機能>

  • ・AIでレコード詳細のデザイン操作
    → 配置やデザインの提案
  • ・ビュー設定のリスク評価
    → 改善のヒントを提示し、意図しない設定による事故を防ぐ
PrintCreator <今後リリース予定のAI機能>

書類のフィールド配置や設定の作成サポート

→ 配置や設定の提案

DataCollect AI関数

[入力例]

AI(“報告を要約して”, 報告) 

フィールド式の作成を提案

[活用例]

  • ・フィールド式を入力せずに1秒以上待つと提案が表示
  • ・設定したフィールド式の「式の解説を見る」をクリック
  • ・エラー解説
ピボットテーブルの集計設定提案

[活用例]

・ピボットテーブル作成時に「設定を提案」をクリック

<今後リリース予定のAI機能>

  • ・AI一括式提案
    → アプリ内のフィールド情報をもとにフィールド式をまとめて提案
  • ・AIに式を依頼
    → 「〜をしたい」の指示でフィールド式作成
kMailer シナリオメールの設定サポート

[入力例]

申し込み完了後、3日後にリマインドメールを送信したい

Toyokumoアカウント <今後リリース予定のAI機能>

テンプレートのAI検索

→ 膨大なリストから検索する手間を削減

参考:トヨクモkintone連携サービス公式サイト「もっと便利に|AI機能

たとえば、DataCollectの「AI関数」では日本語で関数を入力できるので、関数が苦手な人でも簡単に集計可能です。フィールドに集計結果を反映させたいとき、式の入力のサポートにもAIを利用できます。

トヨクモの提供しているサービスのAI機能は、入力した社内情報がAIの学習に使われることはないため、セキュリティ面でも安心して業務に取り入れられます。

今後もAIや新たな機能のリリースを予定しているので、導入を検討している人は「30日間無料お試し」からぜひ一度試してみてください。なお、トヨクモの最新のリリース情報は、公式サイトにある「ニュース|プレスリリース」から確認できます。

まとめ

FormBridgeの新たなAI機能により、HTMLを書かずにフォームの回答完了画面を作成できます。 AI機能を使うことで専門知識がなくても手軽に運用でき、かつ追加料金も必要ありません。

FormBridgeのAI機能は、ToyokumoアカウントからAIを有効化することで利用できます。現行の回答完了画面を編集する際は、既存のHTMLをメモして保管しておきましょう。

トヨクモは今後もAIや新たな機能のリリースを予定しています。すべてのkintone連携サービスで「30日間無料お試し」が体験できるので、導入を検討している人はぜひ一度試してみてください。

【トヨクモ株式会社のkintone連携サービス】

連携サービス名    できること
FormBridge kintoneへデータが自動で保存されていくWebフォームを作成できる
PrintCreator kintoneアプリのデータをPDFで出力できる/電子契約ができる
kViewer kintoneライセンスがない人に、kintoneアプリのデータを共有できる
kMailer kintoneアプリのデータを引用してメール送信できる
DataCollect 複数のkintoneアプリに登録されたデータを集計できる
kBackup kintoneアプリに登録されたデータを安全にバックアップする

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

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

監修者トヨクモ編集部


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

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

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


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

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