本記事は、Claude Codeの開発に携わるAnthropicのThariq Shihipar（@trq212）氏がXに投稿した内容をもとに作成しています。原文はこちらをご参照ください → https://x.com/trq212
「テキストで伝えるのが難しい」問題
Claude Codeを使っていると、「テキストで指示を出してもうまく伝わらない」場面に必ずぶつかります。
- 「もう少し余白を広くして」→どのくらい？
- 「もっとすっきりしたデザインにして」→どのくらいすっきり？
- 「このキャラクターをもう少し強くして」→どの数値をどれだけ？
こういった感覚的なフィードバックは、テキストで表現するのが難しいんですよね。
そこで登場したのがプレイグラウンド（Playground）機能です。
プレイグラウンドとは何か？
プレイグラウンドは、Claude Codeが生成するHTMLファイルです。ただのウェブページではなく、ブラウザ上で操作しながらフィードバックを送れるインタラクティブなインターフェースになっています。
テキストで伝えにくい「感覚的なフィードバック」を、実際に動かして確認しながら伝えられるのが最大の特徴です。
使い方の流れ
1. 「プレイグラウンドスキルを使って〇〇して」とClaude Codeに指示
↓
2. Claude CodeがHTMLファイルを生成
↓
3. ブラウザでそのファイルを開き、実際に操作・確認する
↓
4. 「この部分をもっと大きく」「この色が好き」などをフィードバック
↓
5. フィードバックをClaude Codeに貼り付けて修正を依頼
この「操作しながら伝える」というプロセスが、テキストだけのやり取りには出せない精度を生みます。
Thariq氏が実際に使っているプレイグラウンドの例
1. コードベースのアーキテクチャを可視化する
大きなプロジェクトのファイル構成や部品の関係を、図として表示します。気になる箇所をクリックして「ここはどういう役割？」と質問したり、コメントを書き込んだりできます。
プロンプト例：
「プレイグラウンドスキルを使って、このメールエージェントのコードベースの仕組みを見せて。アーキテクチャ上の各部分にコメントしたり、質問したり、編集したりできるようにして」
2. UIのデザインをリアルタイムで調整する
Claude Code自体のUIデザイン変更を検討するとき、Thariq氏はプレイグラウンドを使って「触りながら感覚を掴む」ようにしているそうです。
プロンプト例：
「プレイグラウンドスキルを使って、AskUserQuestionツールのレイアウト変更案を試せるプレイグラウンドを作って」
3. 文章のインラインレビュー
ドキュメントを読みながら、文章を選択して「承認・却下・コメント」を操作できるインターフェースを作れます。
プロンプト例：
「プレイグラウンドスキルを使って、私のSKILL.MDをレビューして、承認・却下・コメントができるインライン提案を表示して」
4. 動画イントロ画面の調整
映像コンテンツの冒頭画面を「より面白く、より気持ちよく」したいとき。言葉で表現するのが難しい「感触」を、プレイグラウンドで操作しながら伝えられます。
プロンプト例：
「プレイグラウンドスキルを使って、私のイントロ画面をもっと面白くて気持ちのいいものに調整できるようにして」
5. ゲームのバランス調整
Thariq氏自身がローグライクゲーム（毎回違う展開をするゲームジャンル）を趣味で作っているそうで、キャラクターの強さやスキルのバランスをプレイグラウンドで調整しています。数値をスライダーで動かしながらリアルタイムで確認できます。
プロンプト例：
「プレイグラウンドスキルを使って、スーパーヒーローゲームの『インフェルノ』キャラクターのデッキバランスを調整するのを手伝って」
インストール方法
プレイグラウンドはClaude Codeのプラグインとして提供されています。Claude Codeで以下のコマンドを実行するとインストールできます。
/plugin marketplace update claude-plugins-official
/plugin install playground@claude-plugins-official
インストール後は「プレイグラウンドスキルを使って〇〇して」と指示するだけで使い始めることができます。
面白いプレイグラウンドを作るコツ
Thariq氏のアドバイスはシンプルです。
「何をしたいかではなく、どう操作したいかを考えてみてください。AIとの対話において、きっと驚くような体験ができます。」
「デザインを変えたい」という普通のお願いが「スライダーで余白を調整しながら、プレビューがリアルタイムで変わるようにして」という形になると、プレイグラウンドの真価が発揮されます。
「テキストで伝えにくい」と感じた瞬間が、プレイグラウンドを使うサインです。
まとめ
Claude Codeはテキストでの指示だけでなく、プレイグラウンドを使った視覚的・インタラクティブな操作にも対応しています。
| 通常のやり取り | プレイグラウンドを使う場合 |
|---|---|
| テキストでフィードバックを伝える | 操作しながら「感覚」を伝えられる |
| 抽象的な言葉が必要 | 「これ」「ここ」という直感的な操作で伝わる |
| 何度かやり直しが発生しやすい | 触りながら確認するので修正が速い |
デザイン、バランス調整、ドキュメントレビューなど、「言葉では伝わりにくい」作業こそプレイグラウンドの出番です。
コメント