プロンプトサーフェス:新しいUXプリミティブ

プロンプトサーフェスは新しいボタンだ。これを検索バーと同じ扱いにしているデザイナーは、2026年に2018年のプロダクトを出荷している。テキスト入力はフォームもウィザードも、設定パネルの大半も飲み込んだ。勝つプロダクトは、入力を紙飛行機アイコン付きのtextareaではなく、ファーストクラスのUXプリミティブとして扱っている。

それなのに、ほとんどのチームはいまだにtextareaを出荷している。素っ気ない四角形、「何でも聞いてください」というプレースホルダー、送信ボタン、以上。それは妄想を抱えた検索バーだ。本物のプロンプトサーフェスは、構造、アフォーダンス、状態、そしてリカバリー経路を備えたコンポーネントである。

この記事は実践版だ。プロンプトサーフェスとは実際に何か、優れたものが必ず備える8つのパーツ、それを殺す6つの失敗モード、いま最高のプロダクトが使っている6つの名前付きパターン、そしてあなたのサーフェスがプリミティブかプレースホルダーかを3分で見極める7つの質問の監査。

プロンプトサーフェスはtextareaではない

プロンプトサーフェスとは、ユーザーが入力し、その周辺で設定し、結果を読み返す領域全体のことだ。入力欄は目に見える部分にすぎない。コンポーネントとは、そこに取り付けられたすべてを指す。

入力欄そのものは1つの要素だ。提案付きの空の状態、添付スロット、モデルピッカー、ツールトグル、送信アフォーダンス、ストリーミング出力領域、再生成・編集・分岐のコントロール、履歴サーフェスが残りを構成する。ボックスだけを設計したチームは、氷山の一角だけを出荷したことになる。

Cursor、Claude、Linear AI、v0、Lovable、Notion AI、Raycast AI、Vercel AI Playground。どれも入力をtextareaとして扱っていない。それぞれが構造化されたサーフェスを出荷しており、入力は設定可能で、観察可能で、取り消し可能なインタラクションへの入り口になっている。それが基準だ。

機能するプロンプトサーフェスの構造

パーツは8つ。空の状態、サジェスト、添付スロット、モデルピッカー、ツールトグル、送信アフォーダンス、ストリーミング出力領域、リビジョンコントロール。6つ未満しか出荷しないプロンプトサーフェスは未完成だ。

空の状態は、テキストの垂れ流しなしにプロダクトを教えなければならない。Cursorのコマンドバーは最近のファイルと最近のプロンプトを見せる。Notion AIのスラッシュメニューは、意図ごとに分岐した空の状態そのものだ。v0はスタータープロンプトのギャラリーを出荷していて、それがそのまま実力の証明になる。「何でも聞いてください」は敵だ。ユーザーにユースケースをゼロから考えさせてしまう。

サジェストはユーザーを途中まで迎えに行く。インラインのチップ提案、最近のプロンプト履歴、文脈を踏まえた補完。Cursorの@メンションピッカーは教科書的な例で、キー1つでプロンプトをファイル、関数、ドキュメントにスコープできる。

添付スロットは入力をマルチモーダルにする。v0ではスクリーンショットを貼り付けて、それに対してプロンプトできる。ClaudeはPDF、画像、コードファイルを受け付ける。LovableはFigmaのフレームをコンテキストとして受け取る。スロットは契約だ。

モデルピッカー、ツールトグル、送信アフォーダンスは設定レイヤーだ。何が起きるのかを、起きる前にユーザーに伝える。Vercel AI Playgroundはモデルピッカーを最も目立つコントロールとして露出している。Cursorは送信前にエージェントモードとインライン編集を切り替えられる。設定を隠せば、ユーザーは当てずっぽうになる。

ストリーミング出力領域とリビジョンコントロールがループを閉じる。Claudeのアーティファクトペインは、出荷されているなかで最もクリーンな例の1つだ。出力は専用の領域を持ち、プロンプトサーフェスは生きたままで、ユーザーはどちらも失わずにプロンプトを編集したりアーティファクトを再生成したりできる。

信頼のシグナルが荷重を支える細部だ

プロンプトサーフェスは、ユーザーがモデルを信頼するかどうかを決める場所だ。目に見えるシグナルは、すべて信頼を稼ぐか、燃やすかのどちらかになる。

信頼は明快さから生まれる。モデルの正体が見える。ツール呼び出しは実行前に一覧されるか、実行中にストリームされる。ストリーミングのフィードバックは正直で、仕事をしているふりをする偽のスピナーではない。取り消しのアフォーダンスは1秒以内に届く。エラー経路は何が、なぜ失敗したかを名指しする。これは優れたエージェントUIが求めるのと同じ職人技を、入力の範囲に絞ったものだ。

最も安上がりな信頼シグナルは停止ボタンだ。目に見える停止のないストリーミング応答は、敵対的なサーフェスである。ユーザーはモデルが間違っているとすでに分かっている文章を書くのを眺めていて、逃げ道はタブを閉じることだけ。Claude、Cursor、v0はどれも見える停止ボタンを出荷している。自前のチャットUIの多くは、それを忘れている。

プロンプトサーフェスを殺す6つの失敗モード

現在本番にあるプロンプトサーフェスの大半は、このうち少なくとも1つを抱えている。修正は難しくない。

空っぽの四角形。 textarea、「どのようにお手伝いできますか」というプレースホルダー、以上。ユーザーはユースケースをゼロから考えるはめになる。修正:実際のプロダクト機能に結びついた、具体的なスターターを3〜5個並べた構造化された空の状態。

サジェストのない入力。 サーフェスはプロンプトを受け付けるが、提案は一切しない。パワーユーザーはパターンを覚える。新規ユーザーは離脱する。修正:最近のプロンプト、スコープ付きサジェスト(Cursorの@メンション、v0の選択ピッカー)、現在の文脈に合わせたインライン補完。

死んだストリーミングスピナー。 モデルが裏で黙って10回ツールを呼び出している間スピナーが回り続け、ユーザーにはそれが何を意味するのか分からない。修正:実際の作業をストリームする。ツール呼び出しも、ファイル編集も、中間出力も見せる。

切り替えられないモデル。 プロダクトがモデルを選び、その選択を隠す。パワーユーザーは重いタスクをより強いモデルに回せず、コスト意識の高いユーザーは軽いタスクをより安いモデルに回せない。修正:ピッカーを表に出し、妥当なデフォルトを設定し、タスクごとに選択を保持する。

健忘サーフェス。 新しいプロンプトのたびにコンテキストがリセットされる。ユーザーはターンごとにファイルやURLやブリーフを貼り直す。修正:メモリチップ、固定されたコンテキストスロット、あるいはユーザーが見て編集できるセッションレベルのスコープ。

破壊的な再生成。 再生成ボタンがバージョン履歴なしで前の出力を上書きする。ユーザーは最高の回答を失い、取り戻せない。修正:上書きではなく分岐としての再生成。Claudeの履歴やv0のバージョンスタックがすでにやっている方法だ。

プロンプトサーフェスのパターンライブラリ

プリミティブに感じられるプロンプトサーフェスと、プレースホルダーに感じられるものを分けるのは、名前の付いた6つのパターンだ。何かを再設計する前に、このリストから引こう。

スコープ付きプロンプト。 入力がスコープトークンを受け付け、モデルが触れてよい範囲を制約する。Cursorの@メンションピッカーが代表例だ。ユーザーが @layout.tsx と打てば、プロンプトはそのファイルにスコープされる。v0には選択駆動の似たスコープがあり、ユーザーがキャンバスの領域をクリックすると、プロンプトはその領域に対して働く。スコープ指定は、ユーザーにより多く書かせることなく、曖昧なプロンプトを精密なものに変える。

選択駆動プロンプト。 ユーザーがプロダクト内で何かを選択すると、その選択をコンテキストとしてあらかじめ紐付けた状態でプロンプトサーフェスが現れる。v0はキャンバスの選択でこれをやる。Notion AIはハイライトしたテキストでやる。LinearのAIはIssueのスコープを自動で拾う。ユーザーがすでに指し示したものを、もう一度説明させてはいけない。

インラインツールトグル。 サーフェスが、入力フレーム上のトグルやチップとしてツール呼び出しを露出する。Cursorはエージェントモード、編集モード、ツールセットを切り替える。Raycast AIはコマンドを露出する。Vercel AI Playgroundは関数呼び出しのトグルを露出する。ユーザーは送信前に、どのツールが待機中かを把握できる。

メモリチップ。 現在のセッションについて、モデルがすでに何を知っているかを示す常設のアフォーダンス。ChatGPTもClaudeも、その変種を出荷している。チップは編集でき、削除でき、見える。仕掛けはそれだけだ。隠れたメモリは、機能の顔をした情報漏えいリスクである。

分岐プロンプト。 再生成が会話を上書きせず、フォークする。各ブランチは、ユーザーが戻れる保存済みの状態だ。Claudeの会話履歴はこれを表に出し、v0は生成したUIのバージョンスタックを保持し、Cursorのチャットスレッドは分岐できる。実験はカジノのスピンではなく、ツリーになる。

承認ゲート付きツール呼び出し。 サーフェスは破壊的なツール呼び出しの前で一時停止し、ユーザーに承認、修正、キャンセルを求める。Cursorのcomposerは危険なシェルコマンドにゲートをかける。Claude Codeは破壊的な操作を権限システムの背後に置く。ChatGPT Operatorはブラウザ内の支払い操作にゲートをかける。取り消せない瞬間こそ減速し、実行前にそのアクションを平易なテキストで見せよう。

これらのパターンは組み合わさる。優れたプロンプトサーフェスは、たいていスコープ、選択駆動、インラインツール、承認ゲートを1つの一貫したコンポーネントとして出荷している。パターン同士は対立せず、協奏する。

7つの質問によるプロンプトサーフェス監査

AI入力はリリース前に必ずこれを通そう。3つ以上落ちたら、そのサーフェスはまだ出せない。

1. 空の状態。 サーフェスはユーザーに何を入力すべきかを教えているか、それとも空欄を放り出しているか。
2. サジェスト。 サーフェスは、文脈、最近の履歴、選択に基づいて次のプロンプトを提案しているか。
3. スコープ。 ユーザーは、より多く書かずに、プロンプトをファイル、選択範囲、ブロック、セッションに絞り込めるか。
4. 設定の可視性。 モデル、ツール、自律レベルは、設定の引き出しに埋もれず、送信前に見えているか。
5. ストリーミングの誠実さ。 ストリーミング出力は実際の作業を見せているか、それとも何の意味もないスピナーか。
6. 停止と修正。 ストリーミング中に見える停止ボタンがあり、その後に非破壊の再生成があるか。
7. メモリの透明性。 ユーザーは、モデルがセッションを通じて記憶していることを見て、編集できるか。

7つすべてを通過するサーフェスは、プリミティブに感じられる。3つ以上落ちるサーフェスは、検索バーに感じられる。この2つの結果の差こそが、AIネイティブなプロダクトデザインと、後付けのAIを分けるものだ。

プロンプトサーフェスを本物のコンポーネントとして作っているチームは、エンジニアリング側でもプロンプトをコンポーネントとして扱っているチームでもある。その規律は、同じ形で報われる。

FAQ

プロンプトサーフェスとは何ですか?

プロンプトサーフェスとは、ユーザーがプロンプトを入力し、その周辺で設定し、結果を読み返すUI領域全体のことです。入力欄、空の状態、サジェスト、添付スロット、モデルピッカー、ツールトグル、送信アフォーダンス、ストリーミング出力領域、リビジョンコントロールを含みます。textareaとして扱うのが間違いです。コンポーネントとして扱うことが基準です。

プロンプトサーフェスはチャット入力とどう違いますか?

チャット入力は、ターンごとのメッセージボックスです。プロンプトサーフェスは、設定可能で、観察可能で、取り消し可能なインタラクションコンポーネントです。チャットUIは会話に最適化されています。プロンプトサーフェスは、ゴールの明確さ、モデルへの信頼、タスクのスループットに最適化されています。チャット入力はプロンプトサーフェスの表現の1つであり、同義語ではありません。

プロンプトUI設計で最もよくある間違いは何ですか?

サジェストのない空の四角形、死んだストリーミングスピナー、切り替えられないモデル、プロンプトのたびにコンテキストを忘れる健忘サーフェス、良い出力を上書きする破壊的な再生成ボタン、そしてストリーミング中の停止ボタンの欠如です。どれもサーフェスの小さな変更で直せます。コピーで直せるものは1つもありません。

2026年に最高のプロンプトサーフェスを持つプロダクトはどれですか?

スコープ付きプロンプトはCursor、分岐可能な履歴とアーティファクトペインはClaude、選択駆動プロンプトはv0、埋め込み型プロンプトはLinear AI、スラッシュメニューの空の状態はNotion AI、ピッカーの規律はRaycast AI、設定の可視性はVercel AI Playgroundです。すべてのパターンを全力で出荷しているところはなく、だからこそこのカテゴリはまだ大きく空いています。

入力を、プロダクトそのものとして作れ

プロンプトサーフェスは、あらゆるAIネイティブプロダクトで最も重要なコンポーネントなのに、ほとんどのチームはいまだに後回しのものとして設計している。textarea、送信ボタン、プレースホルダー、出荷。そのスタックは、CursorとClaudeが基準を引き上げた日に腐った。

入力をプリミティブとして扱おう。8つのパーツを出荷する。6つの失敗モードを避ける。6つのパターンを組み合わせる。7つの質問の監査を回す。その先に出てくるプロダクトは、ロゴだけ新しくした2022年のチャットサイドバーではなく、2026年のものに感じられる。

プロンプトサーフェスをtextareaではなく完全なコンポーネントとして出荷するチームが欲しいなら、Brainyに依頼してください。空の状態からストリーミング出力パネルまで、最初のユーザーが一言目を入力するより前に信頼のシグナルを組み込んだ、AIネイティブなプロダクトUIをエンドツーエンドで設計します。