# Claude Codeユーザー必携の2つのツール — AgentationとReadout

> Author: Tony Lee
> Published: 2026-03-03
> URL: https://tonylee.im/ja/blog/two-tools-every-claude-code-user-needs-agentation-readout/
> Reading time: 1 minutes
> Language: ja
> Tags: ai, claude-code, 開発ツール, フロントエンド, ワークフロー, agentation, readout

## Description

AgentationはCSSセレクタでAIエージェントにピクセル単位の視覚フィードバックを提供。ReadoutはClaude Codeセッションを動画のように巻き戻し再生。AI支援フロントエンド開発の二大ボトルネックを解消します。

## Content

Claude Codeでフロントエンド作業をするたびに、2つのことがずっと引っかかっていました。エージェントに「どこを直すか」を正確に伝えること。そしてセッション終了後にエージェントが何をしたのかを把握すること。

この2つの問題を解決するツールを、同じ一人の人物が作りました。

## Agentation：UI要素を言葉で説明する時代は終わった

AIエージェントに「あの青いボタンを直して」と伝える時代は終わりました。

[Agentation](https://benji.org/agentation)は、画面上で修正したい要素をクリックするだけでCSSセレクタと位置情報を自動で抽出する視覚フィードバックツールです。「サイドバーの青いボタン」と説明する代わりに、`.sidebar > button.primary`をそのままエージェントに渡せます。

効果はすぐに表れます。3〜4回のやり取りが必要だった修正が、ほとんど一発で決まるようになります。

### 主な特徴

- **インストールは1行。** `npm i agentation`でReact 18+プロジェクトにコンポーネントを1つ追加するだけ。
- **4段階の出力モード。** Compact（セレクタ＋メモ）からForensic（計算済みスタイル全量）まで、必要な詳細度を選択可能。
- **MCP連携のAgent Sync。** MCPサーバーを接続すると、エージェントが視覚フィードバックをリアルタイムで読み取ります。
- **アニメーションデバッグ。** CSSアニメーションを途中フレームで一時停止し、中間状態へのフィードバックが可能。タイミングカーブやキーフレーム位置まで指定できます。
- **テキスト・エリア選択。** テキスト選択やエリアドラッグで、余白やレイアウトに関するフィードバックも提供可能。

npmダウンロード数は17万を突破。1つのツイートで67万ビューを記録。これほどの数字は、実際の課題を解決しているツールの証拠です。

## Readout：Claude Codeセッションを動画のように巻き戻す

[Readout](https://readout.org)は、Claude Codeの開発環境と設定状態を一画面で表示するmacOSネイティブアプリです。

最も印象的な機能はセッションリプレイです。過去のセッションを選んでタイムラインをスクラブできます。プロンプト、ツール呼び出し、ファイル変更が時系列で表示され、編集されたファイルがリアルタイムで点滅して示されます。

エージェントシステムを設計する立場でも、長時間の自律実行後に何が起きたかを監査する立場でも、セッションログ分析は避けて通れません。ここまで直感的に見せてくれるツールは他にありません。

### 詳細

- **無料ダウンロード。** readout.orgからすぐにダウンロード可能。アカウント不要、完全ローカル動作。
- **再生速度調整。** 速度変更やイベント単位の手動ステップ移動に対応。
- **Codex対応。** Claude CodeとCodexの両方のセッションに対応済み。

## フロントエンドのボトルネックはモデル性能ではなく、フィードバック精度

直感に反する話です。AIコーディングツールの性能を責める前に、自分が提供しているフィードバックの品質を見直すべきです。

Storybookでコンポーネントを分離し、Agentationで視覚フィードバックをキャプチャし、Claude Codeに渡す。このループがあれば、ほとんどのUI修正をエージェントが単独で処理できます。

Agentationのドキュメントサイト自体がこのワークフローで構築されています。アニメーションのタイミング調整からカーソル動作の改善まで、すべてが視覚フィードバックループの繰り返しで生まれた成果物です。

## 同じ作り手、同じ原点

2つのツールはどちらも、Coinbase Baseのデザインヘッドを務めるBenji Taylorが開発しました。本職が開発者ではない人が、AIでコーディングしながら感じた不便さを自らツールにしたのです。

「なぜこれを言葉で説明しなきゃいけないんだ？」がAgentationになり、「セッション記録を一目で見られないのか？」がReadoutになりました。ユーザー視点から生まれたツールが、かえって現場の開発者ワークフローにフィットするケースが増えています。

BenjiはFamilyウォレットを創業後、Aaveによる買収を経て、現在Coinbase Baseでデザインを統括しています。

## まとめ

AIコーディングツールを使いこなすだけでは足りません。ツールが足りなければ自分で作る人が、結局先を行くのです。

---

Author: Tony Lee | Website: https://tonylee.im
For more articles, visit: https://tonylee.im/ja/blog/
This content is original and authored by Tony Lee. Please attribute when quoting or referencing.