From 40c8a66a472aedd8b25797a999876f80db505576 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 7 Apr 2026 19:16:56 +0000
Subject: [PATCH 1/2] Add Japanese designer guide for Claude Code

Non-programmer/designer-focused introduction covering CLAUDE.md setup,
key slash commands, output styles, plan mode, custom commands, skills,
loops, hooks, team settings, subagents, MCP servers, and a starter roadmap.

https://claude.ai/code/session_013uxVo5xDYisg39ApAwNs4U
---
 ...\256ClaudeCode\345\205\245\351\226\200.md" | 384 ++++++++++++++++++
 1 file changed, 384 insertions(+)
 create mode 100644 "\343\203\207\343\202\266\343\202\244\343\203\212\343\203\274\343\201\256\343\201\237\343\202\201\343\201\256ClaudeCode\345\205\245\351\226\200.md"

diff --git "a/\343\203\207\343\202\266\343\202\244\343\203\212\343\203\274\343\201\256\343\201\237\343\202\201\343\201\256ClaudeCode\345\205\245\351\226\200.md" "b/\343\203\207\343\202\266\343\202\244\343\203\212\343\203\274\343\201\256\343\201\237\343\202\201\343\201\256ClaudeCode\345\205\245\351\226\200.md"
new file mode 100644
index 00000000..7b5b36d0
--- /dev/null
+++ "b/\343\203\207\343\202\266\343\202\244\343\203\212\343\203\274\343\201\256\343\201\237\343\202\201\343\201\256ClaudeCode\345\205\245\351\226\200.md"
@@ -0,0 +1,384 @@
+# デザイナーのための Claude Code 入門ガイド
+
+> **対象**: プログラミング経験がないデザイナー、またはコードを書かないクリエイター  
+> **目的**: Claude Code をデザイン業務に活用するための、実践的な使い方を理解する
+
+---
+
+## はじめに — Claude Code とは何か？
+
+Claude Code は、ターミナル（黒い画面のコマンド操作ツール）上で動く AI アシスタントです。  
+「AIとチャットするツール」と思えば大丈夫です。ただし、通常のチャットとの大きな違いがあります。
+
+| 普通の Claude チャット | Claude Code |
+|---|---|
+| 会話が終わると記憶がリセットされる | プロジェクトに記憶ファイルを置ける |
+| 毎回説明し直す必要がある | 一度設定すれば毎回覚えてくれる |
+| ファイルを直接操作できない | フォルダ・ファイルを直接読み書きできる |
+| 毎回手動で依頼する | 定型作業を自動化・スケジュール実行できる |
+
+デザイナーにとっての活用シーン例：
+
+- デザインドキュメントの下書き・翻訳・整理
+- デザインシステムのルールをAIに覚えさせ、一貫したコピーライティングを生成
+- ファイル名の一括変換・整理
+- プレゼンテーション資料の構成案生成
+- チームへの引き継ぎドキュメントの自動生成
+
+---
+
+## PART 1 — デザイナーが最初に覚えるべきこと
+
+### 1. CLAUDE.md — AIへの「プロジェクト説明書」
+
+**これが最も重要な概念です。**
+
+`CLAUDE.md` とは、プロジェクトのフォルダに置くテキストファイルで、  
+「このプロジェクトで AI に覚えておいてほしいこと」を書く場所です。
+
+デザインの世界でいえば、**スタイルガイドやブランドガイドライン**に相当します。
+
+```
+プロジェクトフォルダ/
+├── CLAUDE.md        ← ここに書くと、常にAIが読む
+├── デザインファイル/
+└── ドキュメント/
+```
+
+**書くべき内容の例（デザイン案件の場合）：**
+
+```markdown
+# このプロジェクトについて
+
+## クライアント情報
+- クライアント: 株式会社〇〇
+- ブランドカラー: #1A3B6E（ネイビー）、#F5A623（ゴールド）
+- トーン: 誠実・信頼感・親しみやすさ
+
+## 命名規則
+- ファイル名はすべて小文字、ハイフン区切り（例: hero-image-v2.jpg）
+- 日本語テキストは常に敬体（〜です、〜ます）
+
+## 避けること
+- 過度なキャッチコピー
+- カタカナ英語の多用
+```
+
+これを置くだけで、**毎回「このブランドは〜」と説明しなくてよくなります。**
+
+#### グローバル CLAUDE.md（全プロジェクト共通）
+
+自分のパソコン全体に適用したいルール（例：自分の名前、よく使うフォーマット）は  
+`~/.claude/CLAUDE.md` に書けば、すべてのプロジェクトで有効になります。
+
+---
+
+### 2. スラッシュコマンド — すぐに使える便利な操作
+
+`/` を打つと、使えるコマンドのメニューが表示されます。  
+デザイナーがとくに知っておくべきものを厳選します。
+
+#### セッション管理
+
+| コマンド | できること |
+|---|---|
+| `/clear` | 会話履歴をリセットして新鮮な状態に |
+| `/compact` | 長くなった会話を要約してコンテキストを節約 |
+| `/resume` | 過去の会話を再開する |
+| `/rename` | セッションに名前をつけて管理しやすくする |
+| `/rewind` | さっきの操作を取り消して前の状態に戻す（`Esc Esc` でも可） |
+
+#### 見た目・操作感のカスタマイズ
+
+| コマンド | できること |
+|---|---|
+| `/theme` | ライト/ダークモード、カラーテーマの変更 |
+| `/color` | プロンプトバーの色を変える（赤、青、緑など） |
+| `/voice` | 音声入力で話しかけながら作業（20言語対応） |
+| `/config` | 設定画面を開く（テーマ、モデル、出力スタイルなど） |
+
+#### 作業の記録・共有
+
+| コマンド | できること |
+|---|---|
+| `/export` | 会話をテキストファイルに書き出す |
+| `/copy` | 最後のAI回答をクリップボードにコピー |
+| `/diff` | 変更内容をビジュアルで確認する |
+
+---
+
+### 3. Output Styles — AIの話し方を変える
+
+`/config` から「Output Style（出力スタイル）」を設定できます。  
+デザイン作業において特に有用な2つを紹介します。
+
+**Explanatory（解説型）**  
+→ 作業しながらコードや構造を丁寧に説明してくれる。  
+　 新しいプロジェクトや慣れないシステムを学ぶときに最適。
+
+**Learning（学習型）**  
+→ 答えを教えるのではなく、一緒に考えながら進めてくれる。  
+　 「なぜこうするのか」を理解しながら作業したい人向け。
+
+**カスタム**  
+→ 「常に箇条書きで答えてください」「必ず日本語で返してください」など、  
+　 自分専用のスタイルを作れます。
+
+---
+
+### 4. Plan Mode — まず計画だけ立ててもらう
+
+`Shift + Tab` を押すか `/plan` と入力すると、  
+AIは**実際に何かを変える前に計画だけを提案**してくれます。
+
+デザインの世界で言えば「まずラフスケッチを見せて」に相当します。  
+AIが勝手に大量のファイルを作ったり変えたりするのを防ぎたいときに使いましょう。
+
+**おすすめの使い方：**
+1. `/plan` でモードに入る
+2. 「このプロジェクトのドキュメント構成を整理したい」と伝える
+3. 計画を確認して「OK、やって」と承認する
+4. 気に入らなければ「やり直して」と指示する
+
+---
+
+### 5. @ファイル参照 — ファイルを指定して話しかける
+
+チャット中に `@ファイル名` と書くと、そのファイルの内容を参照しながら話せます。
+
+```
+@デザイン仕様書.md の内容をもとに、クライアント向けの説明文を作って
+```
+
+```
+@old-copy.txt のコピーを、よりフレンドリーなトーンに書き直して
+```
+
+---
+
+## PART 2 — 中級：繰り返し作業を自動化する
+
+### 6. Commands（カスタムスラッシュコマンド）— 定型作業をボタン化
+
+Claude Code では、**自分専用のスラッシュコマンド**を作れます。  
+毎回同じような依頼をするなら、コマンドにしてしまいましょう。
+
+`.claude/commands/` フォルダの中に `.md` ファイルを作るだけです。
+
+**例：リリースノートを自動生成するコマンド**
+
+ファイル: `.claude/commands/release-note.md`
+
+```markdown
+---
+description: 今月の変更点をリリースノートとしてまとめる
+---
+
+以下の変更リストをもとに、クライアント向けのリリースノートを
+日本語・丁寧語・箇条書きで作成してください。
+
+変更点はgitの差分から取得してください。
+フォーマット：
+- タイトル（簡潔に）
+- 概要（2〜3文）
+- 変更点リスト（箇条書き）
+```
+
+作成後は `/release-note` と打つだけで実行できます。
+
+---
+
+### 7. Skills（スキル）— 再利用可能な「得意技」を登録する
+
+Skills は Commands に似ていますが、より柔軟で再利用しやすい仕組みです。  
+`.claude/skills/<スキル名>/SKILL.md` というファイルを作ります。
+
+**デザイナー向け活用例：**
+
+- `/translate-copy` — コピーを英語↔日本語に翻訳
+- `/accessibility-check` — テキストの読みやすさをチェック  
+- `/tone-review` — ブランドトーンに沿っているか確認
+
+スキルの便利な点：
+- `/skills` で一覧確認できる
+- 特定のファイルタイプを扱うときだけ自動的に読み込まれる（`paths` 設定）
+- チームで共有して、誰もが同じスキルを使える
+
+---
+
+### 8. /loop — 定期実行でルーティンを自動化
+
+`/loop 30m /コマンド名` のように書くと、  
+指定した間隔で自動的にコマンドを実行してくれます。
+
+**活用例：**
+- `/loop 1h /check-feedback` — 1時間ごとにフィードバックをまとめる
+- `/loop 30m /update-doc` — 30分ごとにドキュメントを最新化
+
+最大3日間連続で動かせます。長時間の作業を頼みたいときに有効です。
+
+---
+
+### 9. Hooks — 特定のタイミングで自動的に動く仕掛け
+
+Hooks は「AがあったらBを実行する」という仕掛けです。  
+例えば：
+
+- **Claude が止まったら** → 「続けて」と自動的に送る
+- **ファイルを保存したら** → バックアップを取る  
+- **作業が終わったら** → 通知音を鳴らす（このリポジトリにはその実装例があります）
+
+設定は `.claude/settings.json` に書きます。  
+プログラミングの知識が必要ですが、Claude に「こんな Hooks を作って」と頼めば作ってくれます。
+
+---
+
+## PART 3 — 応用：チームで使う
+
+### 10. Settings.json — チームの共通設定をまとめる
+
+`.claude/settings.json` はチームで共有する設定ファイルです。  
+Git（バージョン管理ツール）に追加してチームで統一できます。
+
+設定できる主な内容：
+- デフォルトのモデル（Claude の種類）
+- 事前に許可するコマンド（毎回確認しなくていいもの）
+- カスタム出力スタイル
+- チームで使うプラグインやMCPサーバー
+
+**個人設定を分ける：**  
+`.claude/settings.local.json` はチームに共有しない個人専用の設定ファイルです。  
+（.gitignore で Git の管理外にする）  
+チームの設定を崩さずに自分だけの調整ができます。
+
+---
+
+### 11. Subagents（サブエージェント）— 専門家チームを作る
+
+Subagents は特定の仕事専門の AI を作る仕組みです。  
+`.claude/agents/` フォルダにファイルを置くだけで作れます。
+
+**デザインチームでの例：**
+
+```
+.claude/agents/
+├── copywriter.md      # コピーライティング専門エージェント
+├── ux-reviewer.md     # UXレビュー専門エージェント
+└── translator.md      # 翻訳専門エージェント
+```
+
+各エージェントに：
+- 専門領域と役割
+- 使えるツールの制限
+- 採用するモデル（軽い作業はHaiku、重要な判断はOpusなど）
+
+を設定できます。
+
+このリポジトリの `development-workflows/rpi/` には `ux-designer` エージェントの実装例があります。
+
+---
+
+### 12. MCP サーバー — 外部ツールと接続する
+
+MCP（Model Context Protocol）は Claude Code を外部サービスに繋ぐ仕組みです。
+
+**デザイナーに関連する接続例：**
+- **Figma MCP** — デザインファイルの情報を直接参照
+- **Notion MCP** — ドキュメント管理ツールと連携
+- **GitHub MCP** — コードの変更履歴を参照してドキュメントに反映
+
+`/mcp` コマンドで設定・管理できます。
+
+---
+
+## PART 4 — 知っておくと良い概念（簡易解説）
+
+デザイナーとして直接使う機会は少ないかもしれませんが、  
+チームのエンジニアと話すときに知っておくと役立つ概念です。
+
+### Checkpointing（チェックポイント）
+作業の途中経過が自動的に保存されます。  
+`/rewind` または `Esc Esc` で前の状態に戻れます。  
+→ デザインツールの「Ctrl+Z」に相当。
+
+### Git Worktrees（ワークツリー）
+複数の作業を並行して進めるための仕組みです。  
+エンジニアが「別ブランチで作業する」ときに使います。  
+→ Figmaで複数のドラフトを並行して作るイメージ。
+
+### Context（コンテキスト）
+Claude が「今の会話で覚えていられる情報量」です。  
+長い会話をしているとコンテキストが満杯になり、古い情報を忘れます。  
+→ `/compact` で要約してリフレッシュできます。  
+→ コンテキスト使用量は `/context` で確認できます。
+
+### Permission Mode（パーミッションモード）
+Claude がファイルを変更したり、コマンドを実行したりする前に  
+毎回確認するかどうかの設定です。  
+- **default** — 毎回確認する（安全）
+- **acceptEdits** — 編集は自動承認、実行は確認
+- **auto** — AIが安全か判断して自動で進める
+
+### Effort Level（エフォートレベル）
+Claude が考える深さを調整する設定です。  
+`/effort low` は速くて軽い作業向け、`/effort high` は複雑な判断向けです。  
+→ `/model` コマンドからも設定できます。
+
+### Plugins（プラグイン）
+スキル・エージェント・MCPサーバーなどをひとまとめにした配布パッケージです。  
+`/plugin` でインストール・管理できます。  
+公式マーケットプレイスから一発インストールできます。
+
+### Agent Teams（エージェントチーム）
+複数の AI エージェントが同時に並行して作業する仕組み（ベータ機能）。  
+大規模なプロジェクトで使います。
+
+### GitHub Actions / Slack 連携
+GitHub の Pull Request レビューや Slack での @Claude 呼び出しができます。  
+エンジニアが主に使いますが、デザイナーがドキュメント PR のレビューを  
+AI に依頼するといった使い方もあります。
+
+### Ultraplan（ウルトラプラン）
+`/ultraplan` コマンドで、大きな計画をブラウザ上でレビューできる機能（ベータ）。  
+コメントを入れながら計画を調整し、そのまま実行できます。
+
+### Remote Control（リモートコントロール）
+`/remote-control` でスマートフォンや別のパソコンから作業を継続できます。  
+移動中にスマホでレビューして、そのまま作業を続けるといった使い方が可能。
+
+---
+
+## まとめ：デザイナーの Claude Code スタートロードマップ
+
+```
+Week 1: 基本操作
+  ✓ CLAUDE.md を作ってブランド情報を書く
+  ✓ /clear, /compact, /rewind を覚える
+  ✓ Output Style を Explanatory に設定する
+  ✓ /voice で音声入力を試す
+
+Week 2: カスタマイズ
+  ✓ よく使う依頼をコマンド化（.claude/commands/）
+  ✓ /loop でルーティン作業を自動化してみる
+  ✓ /plan モードで大きな変更前に確認する習慣をつける
+
+Week 3: チーム活用
+  ✓ settings.json をチームで共有する
+  ✓ 専門エージェントを1つ作ってみる（コピーライター等）
+  ✓ /export で作業ログを共有する
+```
+
+---
+
+## 参考リンク
+
+- [Claude Code 公式ドキュメント](https://code.claude.com/docs)
+- [このリポジトリの README](./README.md)
+- [Memory（CLAUDE.md）の書き方ベストプラクティス](./best-practice/claude-memory.md)
+- [Commands ベストプラクティス](./best-practice/claude-commands.md)
+- [Skills ベストプラクティス](./best-practice/claude-skills.md)
+- [Subagents ベストプラクティス](./best-practice/claude-subagents.md)
+
+---
+
+*このドキュメントは [claude-code-best-practice](https://github.com/dotandlinejp/claude-code-best-practice) リポジトリの内容をもとに、デザイナー向けに再編集したものです。*

From 18df97316e9636be024fd3a89129d0dcc7679d8e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 7 Apr 2026 19:28:50 +0000
Subject: [PATCH 2/2] Redesign Japanese designer guide with table-first layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rewrote the guide using scannable tables throughout — modeled after
README.md's Feature | Location | Description structure. Each section
now uses priority ratings (★★★/★★☆/★☆☆), design analogies, and
a structured roadmap table for quick orientation.

https://claude.ai/code/session_013uxVo5xDYisg39ApAwNs4U
---
 ...\256ClaudeCode\345\205\245\351\226\200.md" | 443 +++++++-----------
 1 file changed, 162 insertions(+), 281 deletions(-)

diff --git "a/\343\203\207\343\202\266\343\202\244\343\203\212\343\203\274\343\201\256\343\201\237\343\202\201\343\201\256ClaudeCode\345\205\245\351\226\200.md" "b/\343\203\207\343\202\266\343\202\244\343\203\212\343\203\274\343\201\256\343\201\237\343\202\201\343\201\256ClaudeCode\345\205\245\351\226\200.md"
index 7b5b36d0..e668b924 100644
--- "a/\343\203\207\343\202\266\343\202\244\343\203\212\343\203\274\343\201\256\343\201\237\343\202\201\343\201\256ClaudeCode\345\205\245\351\226\200.md"
+++ "b/\343\203\207\343\202\266\343\202\244\343\203\212\343\203\274\343\201\256\343\201\237\343\202\201\343\201\256ClaudeCode\345\205\245\351\226\200.md"
@@ -5,380 +5,261 @@
 
 ---
 
-## はじめに — Claude Code とは何か？
+## Claude Code とは？
 
-Claude Code は、ターミナル（黒い画面のコマンド操作ツール）上で動く AI アシスタントです。  
-「AIとチャットするツール」と思えば大丈夫です。ただし、通常のチャットとの大きな違いがあります。
+ターミナル（黒い画面）で動く AI アシスタント。通常のチャットと大きく違う点が3つある。
 
-| 普通の Claude チャット | Claude Code |
-|---|---|
-| 会話が終わると記憶がリセットされる | プロジェクトに記憶ファイルを置ける |
-| 毎回説明し直す必要がある | 一度設定すれば毎回覚えてくれる |
-| ファイルを直接操作できない | フォルダ・ファイルを直接読み書きできる |
-| 毎回手動で依頼する | 定型作業を自動化・スケジュール実行できる |
-
-デザイナーにとっての活用シーン例：
-
-- デザインドキュメントの下書き・翻訳・整理
-- デザインシステムのルールをAIに覚えさせ、一貫したコピーライティングを生成
-- ファイル名の一括変換・整理
-- プレゼンテーション資料の構成案生成
-- チームへの引き継ぎドキュメントの自動生成
+| 比較項目 | 普通の Claude チャット | Claude Code |
+|---|---|---|
+| 記憶 | 会話が終わるとリセット | プロジェクトに記憶ファイルを置ける |
+| ファイル操作 | できない | フォルダ・ファイルを直接読み書きできる |
+| 繰り返し作業 | 毎回手動で依頼 | 定型作業を自動化・スケジュール実行できる |
 
 ---
 
-## PART 1 — デザイナーが最初に覚えるべきこと
-
-### 1. CLAUDE.md — AIへの「プロジェクト説明書」
-
-**これが最も重要な概念です。**
+## 🎯 デザイナーが使うべき機能
+
+| 機能 | 操作場所 | デザイナーにとっての意味 | 優先度 |
+|---|---|---|---|
+| **Memory** | `CLAUDE.md`（プロジェクトルート） | ブランドガイドライン・トーン・命名規則を一度書けば毎回覚えてくれる | ★★★ |
+| **Output Styles** | `/config` → Output Style | AIの話し方・回答フォーマットを変える。「解説型」「学習型」「カスタム」 | ★★★ |
+| **Commands** | `.claude/commands/<名前>.md` | よく使う依頼をスラッシュコマンドとして登録。`/release-note` など | ★★★ |
+| **Plan Mode** | `Shift+Tab` または `/plan` | 実行前に計画だけ提案させる。「まずラフを見せて」に相当 | ★★★ |
+| **Checkpointing** | `Esc Esc` または `/rewind` | 操作を取り消して前の状態に戻す。Ctrl+Z に相当 | ★★★ |
+| **Skills** | `.claude/skills/<名前>/SKILL.md` | 再利用可能な「得意技」。翻訳・トーンチェック・アクセシビリティ確認など | ★★☆ |
+| **Settings** | `.claude/settings.json` | チーム全員の共通設定。Gitで共有できる | ★★☆ |
+| **Subagents** | `.claude/agents/<名前>.md` | コピーライター・UXレビュアーなど専門家AIを作る | ★★☆ |
+| **Hooks** | `.claude/settings.json` の hooks 設定 | 「作業が終わったら通知」など、特定タイミングで自動実行 | ★☆☆ |
+| **MCP Servers** | `/mcp` コマンド | Figma・Notionなど外部ツールと接続 | ★☆☆ |
 
-`CLAUDE.md` とは、プロジェクトのフォルダに置くテキストファイルで、  
-「このプロジェクトで AI に覚えておいてほしいこと」を書く場所です。
+---
 
-デザインの世界でいえば、**スタイルガイドやブランドガイドライン**に相当します。
+## 🧠 MEMORY — AIへの「ブランドガイドライン」
 
-```
-プロジェクトフォルダ/
-├── CLAUDE.md        ← ここに書くと、常にAIが読む
-├── デザインファイル/
-└── ドキュメント/
-```
+| 項目 | 内容 |
+|---|---|
+| **ファイル名** | `CLAUDE.md` |
+| **置く場所** | プロジェクトのルートフォルダ |
+| **何ができる** | プロジェクトのルール・文脈をAIに永続的に記憶させる |
+| **デザイン例** | ブランドカラー、トーン、命名規則、NGワードなど |
+| **チーム共有** | Gitに追加してチーム全員で共有できる |
+| **個人設定** | `~/.claude/CLAUDE.md` に書けば全プロジェクトに適用 |
 
-**書くべき内容の例（デザイン案件の場合）：**
+**書き方の例：**
 
 ```markdown
 # このプロジェクトについて
 
 ## クライアント情報
-- クライアント: 株式会社〇〇
 - ブランドカラー: #1A3B6E（ネイビー）、#F5A623（ゴールド）
 - トーン: 誠実・信頼感・親しみやすさ
 
-## 命名規則
-- ファイル名はすべて小文字、ハイフン区切り（例: hero-image-v2.jpg）
+## テキストルール
 - 日本語テキストは常に敬体（〜です、〜ます）
-
-## 避けること
-- 過度なキャッチコピー
-- カタカナ英語の多用
+- ファイル名は小文字・ハイフン区切り（例: hero-image-v2.jpg）
+- カタカナ英語は最小限に
 ```
 
-これを置くだけで、**毎回「このブランドは〜」と説明しなくてよくなります。**
-
-#### グローバル CLAUDE.md（全プロジェクト共通）
-
-自分のパソコン全体に適用したいルール（例：自分の名前、よく使うフォーマット）は  
-`~/.claude/CLAUDE.md` に書けば、すべてのプロジェクトで有効になります。
-
 ---
 
-### 2. スラッシュコマンド — すぐに使える便利な操作
+## ⌨️ スラッシュコマンド — よく使う操作一覧
 
-`/` を打つと、使えるコマンドのメニューが表示されます。  
-デザイナーがとくに知っておくべきものを厳選します。
+`/` を打つとメニューが出る。デザイン業務で使いやすいものを厳選。
 
-#### セッション管理
+### セッション管理
 
 | コマンド | できること |
 |---|---|
-| `/clear` | 会話履歴をリセットして新鮮な状態に |
-| `/compact` | 長くなった会話を要約してコンテキストを節約 |
+| `/clear` | 会話履歴をリセット。新しいテーマに切り替えるとき |
+| `/compact` | 長い会話を要約してコンテキストを節約 |
 | `/resume` | 過去の会話を再開する |
-| `/rename` | セッションに名前をつけて管理しやすくする |
-| `/rewind` | さっきの操作を取り消して前の状態に戻す（`Esc Esc` でも可） |
+| `/rename` | セッションに名前をつけて管理 |
+| `/rewind` | さっきの操作を取り消して前の状態に戻す |
+| `/export` | 会話をテキストファイルに書き出す |
+| `/copy` | 最後のAI回答をクリップボードにコピー |
 
-#### 見た目・操作感のカスタマイズ
+### 見た目・操作感
 
 | コマンド | できること |
 |---|---|
-| `/theme` | ライト/ダークモード、カラーテーマの変更 |
-| `/color` | プロンプトバーの色を変える（赤、青、緑など） |
-| `/voice` | 音声入力で話しかけながら作業（20言語対応） |
-| `/config` | 設定画面を開く（テーマ、モデル、出力スタイルなど） |
+| `/theme` | ライト/ダーク、カラーテーマを変更 |
+| `/color` | プロンプトバーの色を変える（赤・青・緑など） |
+| `/voice` | 音声入力で話しかける（20言語対応） |
+| `/config` | 設定画面を開く（テーマ・モデル・Output Styleなど） |
+| `/statusline` | 画面下部のステータスバーをカスタマイズ |
 
-#### 作業の記録・共有
+### 作業制御
 
 | コマンド | できること |
 |---|---|
-| `/export` | 会話をテキストファイルに書き出す |
-| `/copy` | 最後のAI回答をクリップボードにコピー |
-| `/diff` | 変更内容をビジュアルで確認する |
-
----
-
-### 3. Output Styles — AIの話し方を変える
-
-`/config` から「Output Style（出力スタイル）」を設定できます。  
-デザイン作業において特に有用な2つを紹介します。
-
-**Explanatory（解説型）**  
-→ 作業しながらコードや構造を丁寧に説明してくれる。  
-　 新しいプロジェクトや慣れないシステムを学ぶときに最適。
-
-**Learning（学習型）**  
-→ 答えを教えるのではなく、一緒に考えながら進めてくれる。  
-　 「なぜこうするのか」を理解しながら作業したい人向け。
-
-**カスタム**  
-→ 「常に箇条書きで答えてください」「必ず日本語で返してください」など、  
-　 自分専用のスタイルを作れます。
-
----
-
-### 4. Plan Mode — まず計画だけ立ててもらう
+| `/plan` | 実行前に計画だけ提案させる（Plan Mode） |
+| `/effort [low\|medium\|high\|max]` | AIが考える深さを調整。重要な作業は `high` に |
+| `/model` | 使うAIモデルを切り替える |
+| `/context` | コンテキスト使用量をビジュアルで確認 |
+| `/diff` | 変更内容をビジュアルで確認 |
+| `/loop 30m /コマンド名` | 指定間隔で定期実行（最大3日） |
 
-`Shift + Tab` を押すか `/plan` と入力すると、  
-AIは**実際に何かを変える前に計画だけを提案**してくれます。
+### 機能確認・設定
 
-デザインの世界で言えば「まずラフスケッチを見せて」に相当します。  
-AIが勝手に大量のファイルを作ったり変えたりするのを防ぎたいときに使いましょう。
-
-**おすすめの使い方：**
-1. `/plan` でモードに入る
-2. 「このプロジェクトのドキュメント構成を整理したい」と伝える
-3. 計画を確認して「OK、やって」と承認する
-4. 気に入らなければ「やり直して」と指示する
+| コマンド | できること |
+|---|---|
+| `/skills` | 使えるスキル一覧を確認 |
+| `/agents` | エージェント設定を管理 |
+| `/powerup` | 10個のインタラクティブ機能紹介レッスンを受ける |
+| `/doctor` | 環境の診断・動作確認 |
+| `/memory` | `CLAUDE.md` を編集する |
 
 ---
 
-### 5. @ファイル参照 — ファイルを指定して話しかける
+## 🎨 OUTPUT STYLES — AIの話し方を変える
 
-チャット中に `@ファイル名` と書くと、そのファイルの内容を参照しながら話せます。
+| スタイル | 特徴 | こんなときに |
+|---|---|---|
+| **Explanatory（解説型）** | 作業しながら内容を丁寧に説明してくれる | 新しいプロジェクト・慣れないシステムを学ぶとき |
+| **Learning（学習型）** | 答えを教えるより一緒に考えながら進む | 「なぜこうするのか」を理解しながら作業したいとき |
+| **カスタム** | 自分専用ルールを定義 | 「常に日本語で」「必ず箇条書きで」など |
 
-```
-@デザイン仕様書.md の内容をもとに、クライアント向けの説明文を作って
-```
-
-```
-@old-copy.txt のコピーを、よりフレンドリーなトーンに書き直して
-```
+設定場所: `/config` → Output Style
 
 ---
 
-## PART 2 — 中級：繰り返し作業を自動化する
-
-### 6. Commands（カスタムスラッシュコマンド）— 定型作業をボタン化
+## 📁 COMMANDS — 定型作業をボタン化する
 
-Claude Code では、**自分専用のスラッシュコマンド**を作れます。  
-毎回同じような依頼をするなら、コマンドにしてしまいましょう。
-
-`.claude/commands/` フォルダの中に `.md` ファイルを作るだけです。
+| 項目 | 内容 |
+|---|---|
+| **ファイルを置く場所** | `.claude/commands/<名前>.md` |
+| **呼び出し方** | `/名前` と入力するだけ |
+| **チーム共有** | Gitに追加して全員で使い回せる |
 
-**例：リリースノートを自動生成するコマンド**
+**作成例：リリースノートを自動生成するコマンド**
 
-ファイル: `.claude/commands/release-note.md`
+ファイル名: `.claude/commands/release-note.md`
 
 ```markdown
 ---
-description: 今月の変更点をリリースノートとしてまとめる
+description: 今月の変更点をクライアント向けリリースノートにまとめる
 ---
 
-以下の変更リストをもとに、クライアント向けのリリースノートを
+変更リストをもとに、クライアント向けのリリースノートを
 日本語・丁寧語・箇条書きで作成してください。
 
-変更点はgitの差分から取得してください。
-フォーマット：
+フォーマット:
 - タイトル（簡潔に）
 - 概要（2〜3文）
 - 変更点リスト（箇条書き）
 ```
 
-作成後は `/release-note` と打つだけで実行できます。
+→ 以後 `/release-note` と打つだけで実行できる。
 
 ---
 
-### 7. Skills（スキル）— 再利用可能な「得意技」を登録する
+## 🔧 SKILLS — 再利用可能な「得意技」を登録する
 
-Skills は Commands に似ていますが、より柔軟で再利用しやすい仕組みです。  
-`.claude/skills/<スキル名>/SKILL.md` というファイルを作ります。
+Commands に似ているが、より柔軟で細かく設定できる。
 
-**デザイナー向け活用例：**
+| 項目 | 内容 |
+|---|---|
+| **ファイルを置く場所** | `.claude/skills/<名前>/SKILL.md` |
+| **呼び出し方** | `/名前` で実行 |
+| **特徴** | 特定ファイルタイプを扱うときだけ自動起動できる |
+| **確認方法** | `/skills` コマンドで一覧表示 |
 
-- `/translate-copy` — コピーを英語↔日本語に翻訳
-- `/accessibility-check` — テキストの読みやすさをチェック  
-- `/tone-review` — ブランドトーンに沿っているか確認
+**デザイナー向け活用例：**
 
-スキルの便利な点：
-- `/skills` で一覧確認できる
-- 特定のファイルタイプを扱うときだけ自動的に読み込まれる（`paths` 設定）
-- チームで共有して、誰もが同じスキルを使える
+| スキル名（例） | 何をする |
+|---|---|
+| `/translate-copy` | コピーを英語↔日本語に翻訳 |
+| `/tone-review` | ブランドトーンに沿っているか確認 |
+| `/accessibility-check` | テキストの読みやすさをチェック |
+| `/summarize-feedback` | フィードバックを箇条書きで整理 |
 
 ---
 
-### 8. /loop — 定期実行でルーティンを自動化
-
-`/loop 30m /コマンド名` のように書くと、  
-指定した間隔で自動的にコマンドを実行してくれます。
-
-**活用例：**
-- `/loop 1h /check-feedback` — 1時間ごとにフィードバックをまとめる
-- `/loop 30m /update-doc` — 30分ごとにドキュメントを最新化
-
-最大3日間連続で動かせます。長時間の作業を頼みたいときに有効です。
+## 🤖 SUBAGENTS — 専門家チームを作る
 
----
-
-### 9. Hooks — 特定のタイミングで自動的に動く仕掛け
+`.claude/agents/` に `.md` ファイルを置くだけで専門家AIが作れる。
 
-Hooks は「AがあったらBを実行する」という仕掛けです。  
-例えば：
+| 項目 | 内容 |
+|---|---|
+| **ファイルを置く場所** | `.claude/agents/<名前>.md` |
+| **呼び出し方** | 説明文に「PROACTIVELY」と書けば自動起動 |
+| **確認方法** | `/agents` コマンドで一覧表示 |
 
-- **Claude が止まったら** → 「続けて」と自動的に送る
-- **ファイルを保存したら** → バックアップを取る  
-- **作業が終わったら** → 通知音を鳴らす（このリポジトリにはその実装例があります）
+**デザインチームでの設定例：**
 
-設定は `.claude/settings.json` に書きます。  
-プログラミングの知識が必要ですが、Claude に「こんな Hooks を作って」と頼めば作ってくれます。
+| エージェント名 | 役割 |
+|---|---|
+| `copywriter` | ブランドトーンに沿ったコピー生成 |
+| `ux-reviewer` | UX観点でのフィードバック |
+| `translator` | 多言語翻訳専任 |
+| `doc-writer` | 仕様書・引き継ぎ書の作成 |
 
 ---
 
-## PART 3 — 応用：チームで使う
-
-### 10. Settings.json — チームの共通設定をまとめる
+## ⚙️ SETTINGS — チームの共通設定をまとめる
 
-`.claude/settings.json` はチームで共有する設定ファイルです。  
-Git（バージョン管理ツール）に追加してチームで統一できます。
+| ファイル | 用途 |
+|---|---|
+| `.claude/settings.json` | チーム共通設定。Gitに追加して全員で共有 |
+| `.claude/settings.local.json` | 個人専用設定。Gitの管理外（`.gitignore`に追加） |
+| `~/.claude/settings.json` | 自分のPC全体に適用するグローバル設定 |
 
-設定できる主な内容：
-- デフォルトのモデル（Claude の種類）
-- 事前に許可するコマンド（毎回確認しなくていいもの）
+設定できる主な内容:
+- デフォルトのAIモデル
+- 事前許可するコマンド（毎回確認しなくてよいもの）
 - カスタム出力スタイル
 - チームで使うプラグインやMCPサーバー
 
-**個人設定を分ける：**  
-`.claude/settings.local.json` はチームに共有しない個人専用の設定ファイルです。  
-（.gitignore で Git の管理外にする）  
-チームの設定を崩さずに自分だけの調整ができます。
-
----
-
-### 11. Subagents（サブエージェント）— 専門家チームを作る
-
-Subagents は特定の仕事専門の AI を作る仕組みです。  
-`.claude/agents/` フォルダにファイルを置くだけで作れます。
-
-**デザインチームでの例：**
-
-```
-.claude/agents/
-├── copywriter.md      # コピーライティング専門エージェント
-├── ux-reviewer.md     # UXレビュー専門エージェント
-└── translator.md      # 翻訳専門エージェント
-```
-
-各エージェントに：
-- 専門領域と役割
-- 使えるツールの制限
-- 採用するモデル（軽い作業はHaiku、重要な判断はOpusなど）
-
-を設定できます。
-
-このリポジトリの `development-workflows/rpi/` には `ux-designer` エージェントの実装例があります。
-
 ---
 
-### 12. MCP サーバー — 外部ツールと接続する
+## 🔗 MCP サーバー — 外部ツールと接続する
 
-MCP（Model Context Protocol）は Claude Code を外部サービスに繋ぐ仕組みです。
-
-**デザイナーに関連する接続例：**
-- **Figma MCP** — デザインファイルの情報を直接参照
-- **Notion MCP** — ドキュメント管理ツールと連携
-- **GitHub MCP** — コードの変更履歴を参照してドキュメントに反映
+| ツール | 何ができる |
+|---|---|
+| **Figma MCP** | デザインファイルの情報を直接参照 |
+| **Notion MCP** | ドキュメント管理ツールと連携 |
+| **GitHub MCP** | コードの変更履歴を参照してドキュメントに反映 |
+| **Slack MCP** | Slackのフィードバックを自動で取り込む |
 
-`/mcp` コマンドで設定・管理できます。
+設定場所: `/mcp` コマンド
 
 ---
 
-## PART 4 — 知っておくと良い概念（簡易解説）
-
-デザイナーとして直接使う機会は少ないかもしれませんが、  
-チームのエンジニアと話すときに知っておくと役立つ概念です。
-
-### Checkpointing（チェックポイント）
-作業の途中経過が自動的に保存されます。  
-`/rewind` または `Esc Esc` で前の状態に戻れます。  
-→ デザインツールの「Ctrl+Z」に相当。
-
-### Git Worktrees（ワークツリー）
-複数の作業を並行して進めるための仕組みです。  
-エンジニアが「別ブランチで作業する」ときに使います。  
-→ Figmaで複数のドラフトを並行して作るイメージ。
-
-### Context（コンテキスト）
-Claude が「今の会話で覚えていられる情報量」です。  
-長い会話をしているとコンテキストが満杯になり、古い情報を忘れます。  
-→ `/compact` で要約してリフレッシュできます。  
-→ コンテキスト使用量は `/context` で確認できます。
-
-### Permission Mode（パーミッションモード）
-Claude がファイルを変更したり、コマンドを実行したりする前に  
-毎回確認するかどうかの設定です。  
-- **default** — 毎回確認する（安全）
-- **acceptEdits** — 編集は自動承認、実行は確認
-- **auto** — AIが安全か判断して自動で進める
-
-### Effort Level（エフォートレベル）
-Claude が考える深さを調整する設定です。  
-`/effort low` は速くて軽い作業向け、`/effort high` は複雑な判断向けです。  
-→ `/model` コマンドからも設定できます。
-
-### Plugins（プラグイン）
-スキル・エージェント・MCPサーバーなどをひとまとめにした配布パッケージです。  
-`/plugin` でインストール・管理できます。  
-公式マーケットプレイスから一発インストールできます。
-
-### Agent Teams（エージェントチーム）
-複数の AI エージェントが同時に並行して作業する仕組み（ベータ機能）。  
-大規模なプロジェクトで使います。
-
-### GitHub Actions / Slack 連携
-GitHub の Pull Request レビューや Slack での @Claude 呼び出しができます。  
-エンジニアが主に使いますが、デザイナーがドキュメント PR のレビューを  
-AI に依頼するといった使い方もあります。
-
-### Ultraplan（ウルトラプラン）
-`/ultraplan` コマンドで、大きな計画をブラウザ上でレビューできる機能（ベータ）。  
-コメントを入れながら計画を調整し、そのまま実行できます。
-
-### Remote Control（リモートコントロール）
-`/remote-control` でスマートフォンや別のパソコンから作業を継続できます。  
-移動中にスマホでレビューして、そのまま作業を続けるといった使い方が可能。
+## 📖 知っておくと良い概念（デザイナーが直接使う機会は少ないもの）
+
+| 概念 | ひとことで言うと | デザインのアナロジー |
+|---|---|---|
+| **Checkpointing** | 作業の自動セーブ＋巻き戻し | Figma の「バージョン履歴」 |
+| **Context** | AIが今の会話で覚えていられる情報量 | キャンバスの作業領域 |
+| **Permission Mode** | AIが実行前に確認するかどうかの設定 | 「変更前に確認ダイアログを出す」設定 |
+| **Effort Level** | AIが考える深さ（low / medium / high / max） | レンダリングの品質設定 |
+| **Git Worktrees** | 複数の作業を並行して進める仕組み | Figmaで複数ドラフトを並行して作るイメージ |
+| **Agent Teams** | 複数AIが同時に並行して作業（ベータ） | 複数のフリーランサーに同時に依頼するイメージ |
+| **Plugins** | スキル・エージェント・MCPをひとまとめにした配布パッケージ | Figmaプラグイン |
+| **Ultraplan** | 大きな計画をブラウザ上でレビュー・修正してから実行（ベータ） | プレゼンで上司に確認してからGO |
+| **GitHub Actions** | GitHubのPRレビューをAIが自動実行 | デザインレビューの自動チェック |
+| **Remote Control** | スマホ・別PCから作業を継続できる | どこからでもFigmaを開ける感覚 |
+| **Hooks** | 「AがあったらBを実行する」自動トリガー | Zapierのような条件付き自動化 |
 
 ---
 
-## まとめ：デザイナーの Claude Code スタートロードマップ
-
-```
-Week 1: 基本操作
-  ✓ CLAUDE.md を作ってブランド情報を書く
-  ✓ /clear, /compact, /rewind を覚える
-  ✓ Output Style を Explanatory に設定する
-  ✓ /voice で音声入力を試す
-
-Week 2: カスタマイズ
-  ✓ よく使う依頼をコマンド化（.claude/commands/）
-  ✓ /loop でルーティン作業を自動化してみる
-  ✓ /plan モードで大きな変更前に確認する習慣をつける
-
-Week 3: チーム活用
-  ✓ settings.json をチームで共有する
-  ✓ 専門エージェントを1つ作ってみる（コピーライター等）
-  ✓ /export で作業ログを共有する
-```
-
----
-
-## 参考リンク
-
-- [Claude Code 公式ドキュメント](https://code.claude.com/docs)
-- [このリポジトリの README](./README.md)
-- [Memory（CLAUDE.md）の書き方ベストプラクティス](./best-practice/claude-memory.md)
-- [Commands ベストプラクティス](./best-practice/claude-commands.md)
-- [Skills ベストプラクティス](./best-practice/claude-skills.md)
-- [Subagents ベストプラクティス](./best-practice/claude-subagents.md)
+## 🚀 スタートロードマップ
+
+| フェーズ | やること | コマンド |
+|---|---|---|
+| **Week 1 — 基本操作** | CLAUDE.md を作ってブランド情報を書く | `/memory` |
+| | 見た目を自分好みに設定する | `/theme` `/color` |
+| | Output Style を Explanatory に設定 | `/config` |
+| | 音声入力を試す | `/voice` |
+| | 操作を間違えたら戻す | `Esc Esc` または `/rewind` |
+| **Week 2 — カスタマイズ** | よく使う依頼をコマンド化 | `.claude/commands/` に作成 |
+| | 大きな変更前は計画を確認してから | `/plan` |
+| | ルーティン作業を定期実行してみる | `/loop 30m /コマンド名` |
+| **Week 3 — チーム活用** | settings.json をチームで共有する | `.claude/settings.json` → Git に追加 |
+| | 専門エージェントを1つ作ってみる | `.claude/agents/` に作成 |
+| | 会話ログをエクスポートして共有 | `/export` |
 
 ---
 
-*このドキュメントは [claude-code-best-practice](https://github.com/dotandlinejp/claude-code-best-practice) リポジトリの内容をもとに、デザイナー向けに再編集したものです。*
+*このドキュメントは [claude-code-best-practice](https://github.com/dotandlinejp/claude-code-best-practice) リポジトリの内容をもとに、デザイナー向けに再編集したものです。*  
+*参考: [best-practice/](./best-practice/) · [README.md](./README.md)*