ガイド

チャットの中でフォームのプレビューが見られるようになりました

English version available
チャットの中でフォームのプレビューが見られるようになりました

最終更新日: 2026-08-01

チャットでフォームを作ると、次にやりたいのは「どんな見た目になったか確認する」ことだと思います。

これまでは、プレビュー用のURLを受け取って、ブラウザの別タブで開いていました。作る場所と確認する場所が分かれていたんです。

今回のアップデートで、その確認がチャットの中で完結するようになりました。「プレビューを表示して」と伝えると、フォームのプレビューカードが会話の中に直接表示されます。

この記事では、何が表示されるのか、どう呼び出すのか、そしてカードでできないことを説明します。

FORMLOVAをAIクライアントから使う全体像は FORMLOVAのMCPフォームサービスまとめ にまとめています。この記事は、その中の「確認」の部分だけを扱います。

チャットの中に出てくるもの

表示されるのは、フォームの中身を再現したカードです。テキストの箇条書きではありません。

チャット内に表示されたフォームプレビュー

カードに出るのは、次のものです。

項目カードでの見え方
質問文フォームと同じ順番で並ぶ
必須・任意質問ごとにバッジが付く
説明文質問の下に補足として出る
1行入力・長文入力枠付きの入力欄として描かれる
選択肢ラジオボタン・チェックボックスの形で並ぶ
送信ボタンフォームと同じ位置に出る

そして、フォームに設定したデザインのうち、配色と角丸がカードに反映されます。既定の見た目のまま眺めるのではなく、自分が調整した色でどう見えるかを確認できます。

テキストの要約ではなくカードにしているのには理由があります。「質問が7つあります」と書かれても、回答する人がどう感じるかは分かりません。長すぎないか、必須が多すぎないか、選択肢が並びすぎていないか。こういう判断は、並んだ状態を見ないとできないと思っています。

表示される文言は、FORMLOVAに登録した言語設定に従います。日本語で使っていれば「必須」「送信する」と表示され、英語なら英語で表示されます。

ひとつだけ先に言っておくと、これは実物のフォームそのものではありません。実フォームの見た目に寄せたカードです。フォントやロゴ画像はカードには含まれませんし、スケール評価、マトリクス、ファイル添付、署名、同意チェックのような一部の質問は、種別の名前だけが表示されます。

「配ったときにどんな順番で、どんな色で、どんな粒度の質問が並ぶか」を会話の流れの中で確かめるための表示です。細部の最終確認は、これまでどおり実際のフォームで行ってください。

使い方

特別な設定は要りません。FORMLOVAのコネクタを接続済みのClaude(Web / デスクトップアプリ / iOSアプリ)で、下書き中のフォームについてこう伝えるだけです。

プレビューを表示して

選択肢と送信ボタンまで表示されたプレビューカードの下部

複数のフォームを扱っている場合は、どのフォームかを添えてください。

セミナー申込フォームのプレビューを見せて

初回はアプリ表示の許可を求められることがあります。これはAIチャット側の確認で、許可するとカードが表示されるようになります。

デザインを直したあとに、もう一度同じように伝えれば、更新後の見た目でカードが出ます。「色を落ち着かせて」「角を丸くして」と頼んで、その場で結果を見る、という往復がチャットの中だけで回せます。

カードの下には「実際のフォームを開く」ボタンも出ます。実物で確認したくなったら、そこから開けます。このプレビューリンクは1時間で切れます。下書きの中身が外へ出続けないようにするためなので、時間が経ったらもう一度プレビューを表示してください。新しいリンク付きのカードが出ます。

どんなときに効くか

毎回プレビューを見る必要はないと思います。効くのは、変更が見た目に出る場面です。

質問の順番を入れ替えたときは、並びが読みやすくなったかをその場で確かめられます。「よく分からない質問が最初に来ていないか」は、リストではなく実際の並びで見たほうが早いです。

選択肢を足したり減らしたりしたときも同じです。テキストで「選択肢を3つ追加しました」と言われるより、3つ並んだ状態を見るほうが、多すぎるかどうかを判断できます。

配色を変えたときは、いちばん差が出ます。色の名前や色コードを聞いても印象は分かりません。カードに実際の色が乗った状態で、「思ったより暗い」「ボタンが目立たない」と気づけます。そのまま「もう少し明るく」と続ければ、また新しいカードが返ってきます。

反対に、質問の文言だけを直したときや、通知やメールの設定を変えたときは、カードを出す意味は薄いです。見た目が変わらないからです。

カードの中では回答できません

これは意識しておいてほしい制約です。

カードに表示される入力欄や送信ボタンは、見た目だけのものです。文字を入れることも、押すこともできません。

実際に回答するときは、カードの中ではなく、リンク先の実フォームを開きます。回答を集めるのは、これまでどおり公開したフォームのURLです。

今回のアップデートが変えたのは、確認の手間であって、回答の集め方ではありません。

表示されない場合

AIチャット側がこの表示に対応していない場合、カードは出ません。

そのときはエラーになるのではなく、これまでどおりプレビューURLを含んだテキストの返答が返ります。対応しているクライアントではカードが出て、そうでないクライアントでは従来の応答になる、という切り替わり方です。

つまり、この機能が入ったことで既存の使い方が壊れることはありません。表示できる環境では表示され、できない環境ではこれまでと同じ、というだけです。

会話の中に画面が出るということ

技術的な背景も少しだけ書いておきます。

チャットの中にUIを表示する仕組みは、MCP Apps(io.modelcontextprotocol/ui)としてMCPの公式な拡張仕様になりました。2026-01-26にStableとして確定した仕様で、FORMLOVAはこれに正式対応しています。私が独自に作った表示方法ではなく、標準に沿ったものです。

先日、FORMLOVAはMCPの2026-07-28版仕様への対応を済ませました。仕様への追従とツール定義の扱いについては AIは、つながるほど賢くなるとは限らない に書いています。今回のプレビュー表示は、その延長線上にあります。

チャットを主役にすると決めた以上、確認のたびに別タブへ移動させるのは中途半端でした。会話の中で作り、会話の中で見て、会話の中で直す。そこまで揃って、はじめてチャットで完結したと言えます。

フォームは作って終わりではない、という考え方は ほとんどのフォームツールは作成で止まる にも書きました。今回のアップデートは、その手前にある「公開前の確認」を会話の中へ入れたものです。

これまでのアップデート履歴は 更新履歴 にまとめています。

まず試すなら

下書きのフォームをひとつ用意して、こう伝えてみてください。

1. AIチャットでフォームを作る
2. 「プレビューを表示して」と伝える
3. カードで質問の順番と配色を確認する
4. 直したいところをそのままチャットで頼む
5. もう一度プレビューを表示して結果を見る

この一周を試すと、確認のためにブラウザへ移る回数がどれくらい減るか分かると思います。

FORMLOVAをAIチャットへ接続する手順は 接続ガイド にまとめています。まだ接続していない場合は、ここから始めてみませんか。

執筆・確認情報

この記事は、2026-08-01時点のFORMLOVA実装(docs/SPEC.md のMCP Apps節と docs/plans/2026-08-01-mcp-apps-form-preview-poc-design.md)を確認して書いています。

参照した主な一次情報:

次にやること

フォームを作るだけで終わらせない

この記事の内容を、実際のフォーム作成、回答管理、MCP連携で試せます。

最終検証日:

この記事をシェア

執筆者

@Lovanaut
@Lovanaut

FORMLOVAの開発者。「ラバ = ラブ」の想いで、優しいサービスを作り続けています。

同じカテゴリの記事