AI でアプリのプロトタイプを作成し、アイデアを検証する

動くプロトタイプがモックアップより多くを教えてくれる理由

静止画面でわかるのは、見た目が好まれるかどうかです。使えるかどうかはほとんどわかりません。テスト参加者は各タップのあとに何が起きるかを想像するしかなく、進行役が製品の説明をする羽目になるからです。実際に反応するクリックできるプロトタイプなら、その説明はいりません。参加者は本物の入力欄に打ち込み、本物の合計が変わるのを見て、最後の項目を消せば本物の空の状態が表示されます。参加者が戸惑うのはあなたのデザインに対してであって、プロトタイプの欠けた部分に対してではありません。

聞ける質問も変わります。モックアップでは「これを使いますか？」と聞くことになり、人は礼儀正しく答えます。動くものがあれば、「来週火曜のシフトを追加して、週の勤務時間がどう変わるか見てください」のような課題を出し、どこで手が止まるかを観察できます。

プロトタイプで何を確かめるかを決める

何かを説明する前に、テストで答えを出したい問いを一つか二つ書き出しましょう。そうすれば作るものは小さく、セッションは的を絞ったものになります。よくある問いは次のとおりです。

理解： メイン画面が何のためのものか、数秒でわかるか？
中心となる作業： 製品が存在する理由である一つの仕事を、助けなしで完了できるか？
微妙な場面： 自信のない端のケースで何が起きるか。空のリスト、取り消したい操作、折り返される長い名前など。
乗り換えの意欲： 使ったあと、今使っているスプレッドシートやノート、アプリから乗り換えたいと思うか？

これらの問いに役立たないものは、省くか見せかけで済ませてかまいません。20分のセッションで誰も開かない設定画面は、どれほど簡単に作れても無駄な手間です。

Anticode への説明の仕方

使う人、作業、画面を数文で説明し、サンプルデータの内容も伝えます。たとえば「カフェのスタッフ向けシフト交換アプリのプロトタイプ。画面は今週のシフト表、シフト交換の申請、交換申請の一覧。サンプルのスタッフを8人と、現実的な1週間分を使う。すべてデモデータと明示する」。Architect は短い計画（名前、画面、見た目、機能）を返し、答えによって作り方が変わる点について最大3つまで質問することがあります。それぞれに提案された答えがあり、タップで選べます。

「Build it」を選ぶと、モデルがアプリ全体を一つの HTML ドキュメントとして書き、コードが流れ込んでくる様子を見られます。新しいアプリは、このレビュー機能が使えるときには、ヘッドレスブラウザでスマートフォンとノートパソコンの幅で開かれ、スクリーンショットを撮って操作が確かめられ、エラーは修正のためにフィードバックされます。

見せかけの部分は正直に

Anticode のアプリはネットワークのないサンドボックスで動くため、通常ならサーバーが必要なものはページ内で再現されます。ほかのユーザーはサンプルの人物で、「送信した」メッセージはローカルの一覧に入り、ログイン画面は何を入力しても通ります。アプリは必要な箇所でこれらをデモデータと明示します。テスト中もその表示を見えるようにしておきましょう。本物のシステムを使っていると思っている参加者は、模型だとわかっている参加者とは違う、より大胆な選択をします。この段階で欲しいのは後者のフィードバックです。

保存が続くのは、アプリが参加者自身のブラウザに保存したものです。3つの項目を追加してタブを閉じ、翌日戻ってきても、その端末には項目が残っています。参加者がそれぞれ1台のスマートフォンかノートパソコンを使い続ければ、1週間の日記調査には十分です。

セッションを実施し、作り直す

プロトタイプを anticode.dev のアドレスで公開し、参加者にリンクを送ります。インストールは不要です。
関係者にはクライアントレビュー用のリンクを送ります。アカウントなしで現在のプレビューを開き、セクションごとにコメントを残せます。リンクの有効期限は初期設定で14日間で、取り消すこともできます。
各ラウンドのあとに、「交換ボタンを各シフトのカードに移して」のように普段の言葉で変更を頼みます。最近の保存はバージョン履歴に残る（件数はプランによる）ので、1回目と3回目を並べて見せたり、元に戻したりできます。

単一ブラウザのプロトタイプで試せないこと

境界ははっきり意識しておきましょう。サンドボックスのプロトタイプは一度に1台の端末で動くため、次のことは試せません。

人と人とのあいだで起きること。本物の通知、共有リスト、2人の参加者が互いの変更を見ることなど。
本物のログイン、権限、アカウントの復旧。
外部のライブデータ、決済、アプリ内の AI 機能（決まったサンプルの応答で真似ることしかできません）。
実際のデータ量や遅い回線でのパフォーマンス。

アイデアがテストを通過したら、Next.js への書き出しが本物の製品への一歩です。アプリが対象で、TypeScript の標準的な App Router プロジェクトが手に入ります。Prisma 経由の Postgres、メールでのログイン、顧客とスタッフの役割、管理画面を含みます。開発者が拡張していく出発点であり、完成したマルチユーザーアプリではありません。選んだ GitHub リポジトリに送ることもできます。中身はNext.js への書き出しガイドで解説しています。コードを書かずに本番運用できるマルチユーザー機能が必要なら、バックエンドを備えたノーコードツールのほうがどちらよりも合うかもしれません。

よくある質問

これは AI のプロトタイプ作成ツールですか、それともデザインツールですか？

キャンバス上のフレームではなく、動くコードを作ります。ブラウザで動く本物のアプリが手に入るので、ユーザビリティテストに向いています。デザインチーム向けにピクセル単位のデザインファイルが必要なら、デザインツールと併用してください。

参加者はスマートフォンで使えますか？

はい。公開したアプリはスマートフォンのブラウザで動くウェブページで、保存した内容はそのスマートフォンに残ります。

参加者が入力した内容を見られますか？

アプリ内に保存されたものは参加者の端末に残るため見られません。フィードバックや問い合わせのフォームを加えれば、その送信内容はメールとダッシュボードに届きます。

プロトタイプはそのまま本物のアプリになりますか？

出発点にはなります。Next.js への書き出しで、開発者が開発を続けられるデータベースとログイン付きのプロジェクトになります。