エージェントが見ている前提のデザイン

もうユーザーは画面の向こうで一人きりではありません。人間が見出しを読んでいる間に、AIエージェントはDOMを解析し、ボタンに名前を付け、セレクタを品定めし、あなたのプロダクトが誰かの代わりに操作できる相手かどうかを判断しています。ユーザーを一人だけ想定してデザインできたのは、2024年の贅沢でした。

この変化は見た目ではなく構造の話です。Cursorはあなたのボタンを呼び出します。Claudeはスクリーンショットを読みます。AnthropicのComputer Useはフォームをクリックして進みます。OpenAI Operatorはあなたのチェックアウトで買い物をします。人間が触れるすべてのサーフェスに、いまやエージェントも触れます。しかも「良い」の基準はまったく別物です。

2つの受け手、1つの画面

2026年のあらゆるプロダクトのサーフェスには、人間プレーンとマシンプレーンが同じDOMの中に重なっています。

人間プレーンは、デザイナーがずっと作ってきたものです。フロー、センス、ヒエラルキー、ラベルの約束どおりにボタンが動くときにユーザーが感じる信頼。マシンプレーンは、同じサーフェスを別のユーザーが読んだ姿です。安定したセレクタ、名前の付いたアフォーダンス、セマンティックHTML、機械可読なステータス、エージェントが曖昧さなく解析できる構造。

多くのチームがやる間違いは、2つのプレーンを「優先順位が違うだけの同じプレーン」だと思い込むことです。違います。アクセシブルネームが「ここをクリック」だったり、DOMノードがクリックハンドラ付きのdivだったりすれば、人間には完璧に見えるボタンもエージェントには見えません。

エージェントに見られていることが表れる5つのレイヤー

エージェントウォッチングはスタックです。5つのレイヤーがあり、それぞれ人間プレーンとマシンプレーンが噛み合うか、ぶつかるかが決まる場所です。ツールサーフェス、セレクタの安定性、機械可読な構造、ステータスの可読性、トラストシグナル。デュアルユーザーを前提にデザインするプロダクトは、こう呼んでいなくても、この5つすべてで判断を下しています。

レイヤー1:ツールサーフェスは、エージェントが呼び出す名前付きボタン

ツールサーフェスとは、エージェントが名前で呼び出せるプロダクトの機能すべてです。Cursorのツール呼び出し、Claudeのツール使用、Anthropic Computer Useの画面操作、Vercel Sandboxの実行コマンド。エージェントはピクセルでは考えません。名前の付いた動詞で考えます。

プロダクトのあらゆる主要アクションは、ツールサーフェスの候補です。Stripeはその金字塔で、エージェント時代よりずっと前から、すべてのアクションに名前があり、文書化され、予測可能なアフォーダンスを持っています。customers.createは名前どおりのことをします。主要アクションがラベルのないボタンの奥に埋もれているプロダクトは、エージェントが推測なしには操作できないプロダクトです。

デザイン上の打ち手は、重要なアクションをすべて名前付きツールとして扱うことです。ラベル、ARIA説明、ルート、APIエンドポイント、そしてModel Context Protocolのハンドラが、すべて同じ動詞を持つべきです。そうすればエージェントと人間は、別々の扉から同じアフォーダンスに手を伸ばせます。

レイヤー2:セレクタの安定性は、デザイナーとエージェントの契約

2024年なら、デザイナーは<div onClick={handle}>を出荷して終わりにできました。2026年では、そのdivは誰かがラッパーをリファクタした日に、あらゆるエージェント連携を壊します。

セレクタの安定性とは、エージェントが昨日学んだアフォーダンスが明日も動くようにすることです。決めることは3つ。セマンティックHTMLがあるなら使う、つまり<div>ではなく<button>。エージェントやテストランナーが見つける必要のあるものにはdata-testidを付ける。アクセシブルネームはリリースをまたいで安定させる。APIのフィールド名を安定させるのと同じ要領です。

Linearがこれに異常なほど強いのは、APIファーストで作られ、UIは数あるサーフェスの1つにすぎないからです。主要アクションにはすべて、安定したセレクタと安定した名前があります。多くのエンタープライズSaaSは、リファクタでクラス名を差し替え、それに触れていたすべての連携を黙って壊します。エージェントに非推奨の通知は届きません。ただ動かなくなるだけです。

レイヤー3:機械可読な構造は、これまで飛ばしてきたデザイン成果物

あなたのプロダクトを読むエージェントは、Open Graphタグ、JSON-LD、サイトマップ、そして最近ではllms.txtやAGENTS.mdも読んでいます。2026年において、これらはどれも開発者の雑務ではなく、デザイン成果物です。

AGENTS.mdは新しいREADMEですが、読み手はモデルです。プロダクトが何をするのか、どのサーフェスが安全か、どんな慣習が大事かを伝えます。JSON-LDは各ページが何なのかを伝えます。Model Context Protocolのエンドポイントは、プロダクトがどんなツールを公開していて、どう呼ぶのかを伝えます。

これはエンジニアリングの領分だと考えるデザイナーは、レバレッジを取り逃しています。エージェントが最初に目にするものの階層、ツールに付ける名前、各サーフェスに書く説明。そのすべてが、見出しやマイクロコピーが人間に対してそうするのと同じように、プロダクトに対するエージェントのメンタルモデルを形づくります。

レイヤー4:ステータスの可読性とは、何が起きたかを機械が判別できること

ローディングスピナーは人間にはそれで十分ですが、画面を見ていないエージェントには見えません。緑のフラッシュだけで伝える成功状態は、緑が見えない人には読み取れません。静かに閉じるモーダルは、エージェントにとっては、起きなかった状態変化です。

ステータスの可読性とは、あらゆる状態を機械が検知できるようにすることです。LinearのAPIは、すべてのアクションに対して安定したレスポンスオブジェクトを返します。Vercelのデプロイのステートマシンには、READY、BUILDING、ERRORという名前付きの状態があり、遷移のたびに構造化されたペイロードが付きます。Claude Codeは、すべてのツール呼び出しと結果を、エージェントが解析できる構造化テキストとしてストリームします。

デザイン上の打ち手は、視覚的なレイヤーと並んでエージェントが読むステータスレイヤーを持つことです。新しい状態を通知するARIAライブリージョン。構造化されたrole="status"を持つトースト。ツールを呼んだときにエージェントへ返るレスポンスオブジェクト。人間にはスピナーを残し、エージェントには構造化イベントを渡します。これはAIレイテンシのデザインと同じ姿勢で、あちらも2つのプレーンで同時に読めなければなりません。

レイヤー5:トラストシグナルは、エージェントが動いたあとにループを閉じる

エージェントがユーザーの代わりに何かをしたら、ユーザーは何をしたのかを素早く確認できなければなりません。多くのプロダクトはこのレイヤーを飛ばしますが、連携を二度使ってもらえるほど信頼されるかどうかを決めるのは、まさにここです。

Cursorのdiff承認は教科書的な例です。エージェントがファイルを編集し、diffがインラインで現れ、ユーザーはチャンクごとに承認か却下をします。Claude artifactsは同じパターンを別の形で出荷しています。GitHub Copilot Workspaceは、すべてのステップに承認と却下がある、計画と実行のデュアルペインのサーフェスです。

トラストシグナルは飾りではありません。エージェントの自律性を生き延びられるものにする、荷重を支える構造です。エージェントが動き、人間は事後の状態しか見られないプロダクトは、最初に何かがうまくいかなかった時点で信頼を失います。

うまくやっているプロダクトは実際に何を出荷しているか

デュアルユーザーという枠組みは、出荷されたプロダクトで見るとわかりやすくなります。短い分解を、それぞれ具体的に。

Cursor。エージェントのdiff承認が、トラストループのすべてです。チャンクごとのインライン承認と却下、ファイル全体のdiffの可視化、同意なしにエージェントがコミットすることは決してありません。

Claude artifacts。artifactのプレビューペインが、エージェントと人間の契約です。エージェントが生成し、人間がレビューし、artifactには安定したURLと、次のエージェントが拾える構造化出力があります。

Anthropic Computer Use。スクリーンショットが、エージェントとプロダクトの契約です。ビジュアルヒエラルキーとラベルに関するあらゆる判断が、そのままエージェントにとっての読みやすさの判断になります。アクセシブルネームのないアイコンボタンは、エージェントが当てずっぽうで扱うしかないボタンです。

Vercel v0。人間のプロンプトとエージェントのレンダリングという契約が、サーフェスのすべてです。ユーザーが記述し、エージェントがレンダリングし、すべてのレンダリングがレビュー可能な成果物になります。

LinearとStripe。どちらも姿勢としてAIネイティブで、アーキテクチャとしてAPIファーストです。主要アクションはすべて、名前があり、安定していて、呼び出せます。どちらもエージェント時代が来る前からこの規律を出荷していたので、あらゆるエージェントプロダクトがきれいに連携できるのです。

Replit Agent、Raycast、GitHub Copilot Workspaceも顔ぶれに加わります。Replitはエージェントの作業を、編集可能なライブワークスペースとして見せます。Raycastのコマンドパレットは、人間とエージェントがネイティブに共有するサーフェスです。Copilot Workspaceの計画と実行のデュアルペインは、行動の前に計画を文章でコミットするので、実行途中の軌道修正が可能になります。

これらのプロダクトが共有するパターンライブラリの全体像は、AIエージェントUIデザインパターンの解説にまとめてあり、その下にあるアーキテクチャはAIネイティブなプロダクトデザインで扱っています。

エージェント連携を壊すアンチパターン

5つの失敗パターンが何度も繰り返し現れます。どれもエンジニアリングの見落としではなく、デザイン上の判断です。

Divスープ。スタイリングが楽だからと、クリックできるものをすべて<div>で包む。リファクタのたびにすべてのセレクタが壊れます。対策:デフォルトはセマンティックHTML、クラス名の変更を生き延びる必要があるものにはdata-testidを付ける。

ホバーが必要な隠れたアフォーダンス。マウスオーバーのときだけ現れる「編集」ボタン。エージェントはホバーしません。対策:ポインタの状態に関係なくDOMに現れる、キーボードで到達できるアフォーダンス。

「ここをクリック」リンク。同じページに5つの「ここをクリック」があれば、DOMを読むものにとっては5つの同一のアフォーダンスです。対策:行き先を示すリンクテキスト。

色だけで伝える成功状態。緑の枠、緑のフラッシュ、緑のアイコン。どれもビジョンモデルなしでは検知できません。対策:視覚シグナルと並べて、構造化イベント、ARIAライブリージョン、またはレスポンスオブジェクトを用意する。

見つけられる閉じるボタンがないモーダルポップアップ。ラベルのない<svg>の「X」。対策:すべてのモーダルにアクセシブルネーム付きの閉じるボタンを置き、エスケープの挙動を文書化する。

5つに共通するパターンはこれです。人間の目やポインタに依存するものは、ユーザーの半分には見えません。

デュアルユーザー監査

どんなサーフェスも、出荷前にこれを通してください。7つの質問、所要3分。

1. 名前付きアクション。すべての主要アクションに、安定したアクセシブルネームと安定したセレクタがある。
2. マシンステート。すべての状態変化が構造化イベントを発行する。
3. 見えるdiff。エージェントによるすべての変更が、コミット前にレビュー可能な成果物として現れる。
4. キーボード経路。ホバー専用のアフォーダンスは、すべてポインタなしでも到達できる。
5. 安定したセレクタ。すべてのインタラクティブ要素に、リファクタを生き延びるdata-testidまたはセマンティックな同等物がある。
6. ヒューマン・イン・ザ・ループ。破壊的なアクションはゲートし、壊滅的なアクションは二重にゲートし、取り消せるアクションはundo付きで実行する。
7. 文書化されたサーフェス。プロダクトがAGENTS.mdかそれに相当するものを出荷し、何があり、何が安全で、どんな慣習が大事かをエージェントに伝えている。

7つ中7つ通れば、そのサーフェスはデュアルユーザーとして完成です。3つ以上落ちるなら、人間プレーンがどれだけ良く見えても、エージェントを締め出したまま出荷しています。

監査は一度きりの演習ではなく、習慣です。新しいサーフェス、リファクタ、ブランドの再デザインのすべてが、出荷前にこの7つの質問を通ります。あらゆるリデザインがアクセシビリティを通るのと同じです。エージェントにとっての読みやすさは新しいアクセシビリティであり、同じように複利で効いてきます。

この規律の入力レイヤー版についてはプロンプトサーフェスを、空状態の系論については空状態こそプロダクトであるを参照してください。土台となる考え方はウェブデザインの原則で、構造がいまや美学である理由を扱っています。

FAQ

2026年に「AIエージェント向けにデザインする」とは実際にどういう意味ですか?

エージェントを、防ぐべきボットではなく、プロダクトのファーストクラスのユーザーとして扱うことです。エージェントはDOMを読み、ボタンを呼び出し、人間には決して見えない基準でインターフェースを判断します。すべてのサーフェスに、同じアフォーダンス、状態、語彙を共有する人間プレーンとマシンプレーンが必要です。

アクセシビリティデザインとはどう違いますか?

ほとんどは重なります。安定したアクセシブルネーム、セマンティックHTML、キーボードでの到達性、構造化されたステータス。これらはすべて、新しいユーザーに適用されたアクセシビリティの規律です。新しいレイヤーは、ツールサーフェスと機械可読な構造で、MCPエンドポイント、AGENTS.mdファイル、JSON-LDが含まれます。アクセシビリティを土台とし、エージェントにとっての読みやすさをその一つ上の階と考えてください。

エージェント対応にMCPサーバーは必要ですか?

初日は不要です。きれいなDOM、名前付きアクション、安定したセレクタ、構造化されたステータス、レビュー可能な成果物があるプロダクトは、すでに80パーセントエージェント対応です。MCPサーバーはエージェントの仕事をより速く確実にしますが、構造が先、プロトコルは後で出荷してください。

2人のユーザー、1つの画面、1つの仕事

エージェントはデザインへの脅威ではありません。ニーズの違う2人目のユーザーであり、そう扱っているプロダクトは、そうしなかったプロダクトからすでに引き離しにかかっています。

ほとんどのチームは、いまだに1人のユーザーのためにデザインしています。ブランドブリーフは人間について語り、ムードボードは人間を描き、リサーチは人間にインタビューします。エージェントはローンチ後、連携のリクエストが届いたときに現れ、チームはセレクタ、名前、構造、信頼を後付けで直すことになります。後付けは、初日から両方のプレーンをデザインするより、いつも高くつきます。

この変化は技術ではなく、姿勢の問題です。あらゆるサーフェスをデュアルユーザーとして扱い、出荷前に監査を行い、人間にかけるのと同じ配慮をエージェントにも注いでください。拒めば、エージェントのトラフィックも、パートナーシップも、売上も、他社のプロダクトのものになります。

両方のプレーンを後から縫い合わせるのではなく、同時にデザインしてブランドとプロダクトUIを出荷するチームがほしいなら、Brainyに依頼してください。人間プレーンはこれまでどおりにデザインし、マシンプレーンは、それが実際にそうである2人目のユーザーとして扱います。