Published on

AI時代のプロセス革命を実現するユーザーファーストなWebフォーム、AI Formをリリースしました！

Authors

ある時、フォームの回答をしている最中にこんなことを思いました。

「質問の選択肢が多すぎる。質問も多い。読むのに疲れる。回答諦めそう。」

こうして思いついたのが、AI時代のプロセス革命を実現するユーザーファーストなWebフォーム、AI Formです。

スクリーンショット 2026-02-28 12.33.51.png

https://aiform.nisyuu.com/

AI Formの紹介

AI Formはフォーム回答だけでなく、フォーム作成もAIが強力サポートするWebフォームサービスです。 フォーム回答の体験改善を目的に開発を始めましたが、自然言語から画像や動画を生成できるAIサービスのように、自然言語からフォーム生成することができればフォーム作成の圧倒的体験向上にも繋がると考え付き実装しました。

AIを使った機能以外も充実させており、回答回数制限や回答数の上限、回答状況に応じた条件分岐、クイズ機能、テーマ切り替えなど様々あります。 フォームの設問にはテキスト入力、ラジオボタン、チェックボックス、プルダウンだけでなく、ファイルアップロードまであり、Google Formsと同じような設問設定ができます。

主要機能

AI Formには多くの機能がありますが、その中でも主要な機能を紹介します。

AI Smart Fill

AI Smart Fillは、AIが回答の補助をしてくれる機能です。 具体的には、設問に対する回答をテキスト記入して送信することで、AIがテキスト入力、ラジオボタン、チェックボックス、プルダウンなどそれぞれの設問形式に応じて入力を行います。

例えば、所属企業の従業員数を選択させるようなプルダウンでは

  • 従業員数(1〜9)
  • 従業員数(10〜99)
  • 従業員数(100〜999)
  • 従業員数(1000〜9999)
  • 従業員数(10000〜)

から1つ選択させるようなフォームをよく見かけます。 従業員数が500人であれば、「500」と入力するとAIが「従業員数(100〜999)」を選択します。

従事している職種を回答するフォームの場合、大量の職種選択肢の中から該当の職種を選ぶような設問もよく見かけます。 このようなフォームでAI Smart Fillは特に大きな効果を発揮します。 回答者は大量の選択肢に目を通さなくても、自身の職種をAI Smart Fillに入力して送信することで設問に適切な回答が入力され、回答コストを下げることができます。

さらに、AI Smart Fillの入力欄には、あらかじめ設問名が記載されているので、設問名の下などに回答をテキスト入力することでAIがどの設問に対する回答なのかを理解してくれます。

AI Smart Fillが使えるサンプルのフォームをご用意しているので、こちらからUIを確認いただけます。もちろん、無料登録してお試しいただいても構いません。 ぜひご体感ください。

https://aiform.nisyuu.com/view/Jv3VfjKLNW1USm7xIcn7

AIフォーム作成

AIフォーム作成は、AI Smart Fillに並ぶ圧倒的フォーム作成体験を実現する機能であり、AIがフォームの設計と作成までを自動で行います。 フォーム作成を手動で行おうとすると、回収したい回答情報を洗い出し、それぞれの設問に適切な回答形式を設計する必要があります。 設問数や回答形式によってはフォーム作成に時間がかかってしまいますが、インターフェースとしてのAIをフォーム作成者とシステムの間に介在させることでフォーム設計と作成を自動で行いコスト削減が可能になります。

回答制御

AI Formで作成したフォームは柔軟に回答を制御することができます。 機能としては以下があります。

  • AI Smart Fillの利用可否
    • AI Smart Fillを使いたくないフォームでは非表示にできます
  • 回答を1回に制限
    • Google認証が必要
  • 回答期限
    • 日付と時刻の設定が可能
  • 回答の上限数
    • プランの上限値まで設定可能

フォームの設問

設問はGoogle Formsとほぼ同等の形式が利用可能です。 具体的には、以下の形式が利用できます。

  • 記述式（短文）
  • 段落（長文）
  • 選択式（ラジオボタン）
  • チェックボックス
  • プルダウン
  • 均等目盛
  • 選択式（グリッド）
  • チェックボックス（グリッド）
  • 日付
  • 時刻
  • ファイルアップロード

条件分岐

Google Formsと同じように、フォームはセクションで区切ることが可能で選択肢に応じてセクションを分岐させることも可能です。

クイズ機能

クイズフォームとしても利用することができ、回答は自動採点されてダッシュボードから確認できます。 回答後に回答者が採点結果を確認できる機能もあります。

AIフォーム作成で、AIに魚編の付く漢字の読み方クイズを作ってもらったのでサンプルでリンクを置いておきます。 ぜひご体感ください。

https://aiform.nisyuu.com/view/jHiAcLJaO15BGlOctbXS

ちなみに、プロンプトは「魚編の付く漢字の読み方クイズを5問作成して」で生成しました。

回答集計ダッシュボード

回答集計ダッシュボードから回答を一覧で確認することができます。 一覧の各回答をクリックすると回答詳細を表示することができ、アップロードされた画像やPDFを回答詳細から閲覧することもできます。

技術

主な技術スタックは以下の通りです。

  • Next.js
  • Tailwind CSS
  • Firebase
    • Authentication
    • App Hosting
    • Firestore
    • Storage
  • Gemini

インフラ

インフラはFirebaseとSupabaseで迷いましたが、ホスティングやデータベース、Storageなどがオールインワンで提供されているFirebaseにしました。 ローカル環境のエミュレーターも構築しやすく、Supabaseよりも開発がしやすい印象でした。

AI

AI Smart FillとAIフォーム作成で使用する生成AIはGeminiを採用しました。 Geminiからのレスポンスは構造化出力にすることで、指定したデータ構造と型通りのデータだけを返すようにしました。

認証

ログイン方法は、メールアドレス/パスワード認証に加え、Google アカウントを利用したOAuth認証に対応しています。

ログイン情報のセッション管理は、Firebase Client SDK で取得した ID トークンをサーバーに送信し、Firebase Admin SDK で検証後、httpOnly 属性を持つセッションクッキー（Session Cookie）として保存します。これにより、クロスサイトスクリプティング（XSS）などのリスクを軽減し、安全に認証状態を保持しています。

認証フローの仕組み

  1. クライアント側のログイン: フロントエンドのログイン画面から Firebase Auth を用いてユーザー認証を行います
  2. IDトークンの送信: ログイン成功時に発行された idToken を取得し、Next.jsのServer Actionを経由してサーバーに送信します
  3. セッションクッキーの生成: サーバープロセス内で Firebase Admin SDK を使用してトークンを検証し、正当な場合は createSessionCookie にてセッションクッキーを作成、レスポンスの Cookie にセットします
  4. サーバーサイドの認証確認: 以降のアクセスでは、保護されたデータの取得や変更処理が行われる際に、サーバーがCookieからセッション情報を検証し、認証済みユーザーのみに操作を許可します

主なライブラリ

サインアップやサインインを含むフォーム実装には定番ライブラリであるReact Hook Formを採用しています。 フォームのバリデーションでは、React Hook FormとZodを組み合わせることでフォームを堅牢にし、実装を簡単かつ直感的にしました。

また、ZodはGeminiのレスポンス検証にも利用しています。 AI Smart FillとAIフォーム作成では、Geminiのレスポンスを構造化出力にしているので、Zodで定義したスキーマを使ってレスポンスをパースしバリデーションしています。

フォームの設問はdnd-kitというライブラリを利用してドラッグ&ドロップに対応させました。

開発ツール

エディタはGoogleが提供しているAntigravityを使い、ほぼバイブコーディングで開発しました。 AIを使って実装プランを立てながら確実に開発が進められるため、利便性の高さを感じ最近はAntigravityをよく使っています。

AI時代にAI Formが示していること

AI Formが示すものは、単にAIでフォームの作成、回答体験を良くすることだけではありません。 ユーザーとシステムの間にインターフェースとしてのAIを介在させることで、業務プロセスにかかるコストが圧縮できることを示しています。 AI Formで例えると、フォーム作成と回答は画面を何度も操作するようなプロセスが発生します。このプロセスをインターフェースとしてのAIが吸収することで、ユーザーがアウトプットを完了させるまでの時間を短縮させることが可能です。 さらに、副産物としてアウトプットの質も上がるかもしれません。

SaaSの死に負けず、ユーザーファーストに変革を起こせる既存サービスが増えてくるといいなと思います。

ということで、ぜひAI Formをお使いいただき、Webフォームとしてのご利用はもちろんAI時代におけるサービス開発のヒントになれば幸いです。

https://aiform.nisyuu.com