[無料サービス #1] AgentationでAIのデザインを修正する

AIにWebサイトを作ってもらうのは、もう難しくありません。本当に大変なのはその後です。完成した画面を表示して「このボタン、少し変じゃないですか」と言った瞬間から始まります。

「中央の青いボタンです」→ AIは別のボタンを修正します。 「違います、その上にあるものです」→ また別のものに触れます。 「上から2番目で、Loginの横にある…」→ 結局、自分でコードを開くことになります。

原因は単純です。人は画面を見て、AIはコードを見ます。異なる視点を言葉でつなごうとすると、すき間が生まれます。そのすき間を埋めるためのツールがAgentation（エージェンテーション）です。

この連載では、お金をかけずに使えるサービスを一つずつ紹介します。何をしてくれるのか、どこまで無料なのか、どんな条件があるのかを確認します。第1回はAgentationです。

画面で指し示すと、AIが理解できる言葉に変換する

Agentationは、作成中のWebサイト上に浮かぶ小さなツールバーです。気になる場所をクリックして「余白が狭すぎます」のようなメモを残すと、AIコーディングツールがそのまま実行できる形式に整理してくれます。

ポイントは「整理してくれる」ことです。1回クリックするだけで、次のような情報が自動で付加されます。

• コードから要素を特定するCSSセレクター（画面要素をコード上で指し示す住所のようなもの）— body > main > .hero-section > button.cta
• その要素を作ったソースファイルと行番号 — src/components/Button.tsx:42
• Reactコンポーネント階層 — App > LandingPage > HeroSection > CTAButton
• 位置とサイズ、周囲のテキスト、現在適用されている色・フォント・余白の値

コピーを押すと、このような情報がクリップボードに入ります。

## Page Feedback: /landing
**Viewport:** 1440×900

### 1. button
**Location:** body > main > .hero-section > button.cta
**Source:** src/components/Button.tsx:42
**React:** App > LandingPage > HeroSection > CTAButton
**Feedback:** Button is cut off on mobile viewport

情報量は調整できます。Compact・Standard・Detailed・Forensicの4段階があり、上の例は初期値のStandardです。余白や色がなぜそうなっているのか調べたいときはForensicにすると、適用済みのCSS値まで取得できます。

なお、Source:行、つまりソースファイルと行番号は開発モードでのみ付加されます。Vite・Next.js・webpack・Turbopackに対応していますが、バンドラーの設定によってはこの情報がない場合があります。その場合もセレクターとコンポーネント階層で探せるので、使えないわけではありません。

これをClaude CodeやCursorのチャットに貼り付ければ完了です。AIはもう「青いボタン」がどれか推測する必要がありません。住所を受け取り、そのファイルのその行へ直接移動します。

スクリーンショットに矢印を描いて渡すのではだめですか

よく使われる方法で、まったく駄目というわけでもありません。ただしスクリーンショットは画像にすぎず、コードとはつながっていません。AIは画像内のボタンがコードのどこにあるか、最初から探し直す必要があります。その過程で、似た別のボタンを修正してしまうこともあります。

Agentationが渡すのは画像ではなく、検索可能な文字列です。セレクターとクラス名があれば、AIはコードベースを検索して正確な場所を特定できます。矢印を書いた画像との決定的な違いです。

指し示す方法は5つあります

指摘したい対象がいつも1つのボタンとは限りません。そこで方法が分かれています。

• 要素クリック — ボタン、カード、画像を1つ指定します。
• テキスト選択 — 誤字や文言を直すときに使います。選択した文章が引用符付きで結果に入り、AIはコードからその文章を直接検索できます。
• 複数選択 — ドラッグして複数の要素を一度に選びます。「この3つのカードの間隔をそろえてください」のような依頼に適しています。
• 範囲指定 — 空白も指定できます。「ここが寂しい」と伝えられます。
• アニメーション停止 — PキーでCSS・JavaScript・動画のアニメーションを停止します。すぐ通り過ぎてつかめなかった瞬間を止めて指摘できます。ただし、一部のサードパーティ製アニメーションライブラリは完全には停止しません。

よく使うショートカットも覚えておくと便利です。Cmd+Shift+F（WindowsではCtrl+Shift+F）でフィードバックモードを切り替え、Cでコピー、Xで全削除、Hでマーカーを隠します。

配置を変えるならレイアウトモード

「このカードを右に移動して、その下にフォームを追加してください」のような依頼は、言葉にすると曖昧になります。Lキーを押すとツールバーがレイアウトモードに変わります。配置を説明する代わりに、直接動かして見せるための機能です。

• コンポーネントパレットから65種類を超える要素を画面上へドラッグ＆ドロップします。
• 既存のセクションにマウスを乗せるとCSSセレクターのラベルが表示され、そのままドラッグして順序を変更できます。
• 「新しいページのワイヤーフレーム」を有効にすると、現在のデザインが薄くなり、空白の画面でスケッチできます。不透明度スライダーで元の画面を透かしながら描くこともできます。
• このページの用途を書いておく欄も別に用意されています。

この方法で作った変更は、各アノテーションにfeedback・placement・rearrangeのいずれかが付いて渡されます。AIが受け取るのは「中央に移動してください」という文章ではなく、座標とサイズです。ただしレイアウトモードはAgentation 3.0からの機能なので、バージョンを確認してください。他の機能と同じくデスクトップでのみ動作します。詳しくは公式ブログ記事をご覧ください。

開発者を呼ばずにインストール

Claude Codeを使っているなら、ターミナルに1行入力するだけです。

npx skills add benjitaylor/agentation

続いてClaude Codeで/agentationと入力すると、フレームワークを自動検出してインストールまで完了します。コードを読めなくてもここまでは進められます。

手動で行う場合は、パッケージをインストールしてコンポーネントを1行追加します。

npm install agentation -D

import { Agentation } from 'agentation';

function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === 'development' && <Agentation />}
    </>
  );
}

後ろのNODE_ENV === 'development'条件は「開発中だけツールバーを表示する」という意味です。本番サービスの訪問者には見えないようにする安全策なので、忘れずに入れてください。

フレームワークごとのインストール方法と設定項目は、公式サイトのInstall・Featuresドキュメントにまとめられています。

コピー＆ペーストも面倒ならMCPで接続

メモを残し、コピーして、チャットに貼り付ける。これを繰り返すと作業になります。MCP（Model Context Protocol、AIツールが外部プログラムとやり取りする標準仕様）で接続すれば、この往復が丸ごとなくなります。画面にメモを残すとAIが自動で取得します。ツールバーとは別にagentation-mcpサーバーを接続し、設定で同期を有効にする必要があります。

ここから使い方は3つに分かれます。

• ハンズフリー — 新しいメモが追加されると、AIが確認・修正・解決済みへの変更まで自動で行います。人は画面を見ながら指摘し続けるだけです。
• クリティーク（Critique） — 逆にAIがブラウザーを開いてページを確認し、デザイン上の問題をメモとして残します。人はそれをレビューします。
• セルフドライビング — 指摘も修正もAIが行います。

後の2つはAIがブラウザーを直接開く必要があるため、agent-browserスキルを別途インストールします。初めてならハンズフリーから始めるのが無難です。

接続すると、メモが一方通行でなくなる点も重要です。AIがメモ上で「24pxにしますか、16pxにしますか」と聞けば、同じ場所で答えられます。保留中・確認中・解決済み・保留といった状態も残ります。投げて終わりではなく、会話になります。

ちなみに、こうしたメモのデータ構造はAFS（Annotation Format Schema、アノテーション形式の規格）として公開されています。作成者はこれを「実行中のアプリに付けるスマートなFigmaコメント」と説明しています。

始める前に知っておきたい条件

良い話だけでは困るので、制限をはっきりさせます。

**他人のWebサイトは修正できません。**自分が作っているプロジェクトにインストールし、自分のコンピューターで開発サーバーを起動した状態で使うツールです。任意のサイトを開いてデザインを変更する拡張機能ではありません。

**React 18以上が必要です。**AIにWebアプリを作らせたなら、ほぼ確実にReactで作られますが、確認してください。Next.js・Remix・AstroなどのSSR/SSGフレームワークでも問題なく動作します。AstroはReactベースではありませんが、Reactを組み込む構成なら利用できます。

**デスクトップ専用です。**マウスオーバーとドラッグで対象や範囲を選ぶツールなので、モバイルでは実質操作できません。モバイルで崩れた部分を確認するには、デスクトップブラウザーのウィンドウ幅を狭めて見る方法で代用してください。

**成果物に画像はありません。**すべてテキストです。色合いや雰囲気など、言葉にしにくいフィードバックには今もスクリーンショットの方が適しています。

**iframeの内側は指定できません。**外部から埋め込んだ決済ウィジェットや地図が該当します。別サイトの画面全体が入り込んでいる領域です。ブラウザーのセキュリティポリシー上、避けられません。

**メモは長く残りません。**MCPに接続していなければ、ブラウザーにページ単位で保存され、7日後に消えます。ためて後で処理するなら、接続しておく方がよいでしょう。

料金の負担はありません。個人でも会社でも、社内利用は無料です。再配布または商用提供する場合のみ、別途ライセンスが必要です。PolyForm Shield 1.0.0に従います。

まとめ

• Agentationは、画面上でクリックした場所を、AIが理解できるコード上の住所に変換するツールバーです。
• セレクターとコンポーネント階層が自動で付き、開発モードではソースファイルと行番号も付くため、AIは「あのボタン」を推測しません。
• クリック・テキスト選択・複数選択・範囲指定・アニメーション停止の5通りで指摘できます。
• Lキーのレイアウトモードでは、コンポーネントをドラッグ＆ドロップし、セクションの順序を変えて配置そのものを示せます（3.0以上）。
• Claude Codeなら、npx skills add benjitaylor/agentationの後に/agentationを1回実行するだけでインストールが完了します。
• MCPで接続すると、コピー＆ペーストなしでAIがメモを直接取得し、質問と回答のやり取りもできます。
• ただし、自分のReact 18+プロジェクトを開発サーバーで起動した状態で、デスクトップブラウザーからのみ使えます。

言葉で説明して疲れる場面が何度もあるなら、指でその場所を示す方法に変えてみる価値があります。公式サイトはhttps://www.agentation.com/です。次回も無料で使えるサービスを1つ取り上げます。

あわせて読みたい

• Vibe Codingを正しく行う方法。コードはどこまで読むべきか
• Vibe Codingの事故をルールファイルで最初から防ぐ方法