Claude Skillsは、ペルソナ・ワイヤー・コンポーネント・アクセシビリティ・コピー・UIレビューの6個を入れ替えるだけで、UI/UXデザイナーの1案件を上流から最後まで回す土台になる設計です。
競合記事の63個・33個・10選はほぼ全部Claude Code前提で、ターミナルもエディタも触らない非エンジニア系デザイナーは入口で詰まります。
私はここがデザイナー界隈で一番ボトルネックになっていると見ています。
Claude Desktop（Cowork）と/skill-creatorの対話ウィザードがあれば、Markdown1枚で1スキル完成。
コード知識ゼロでも、Pro契約済みなら今日から組めます。
この記事はClaude Pro以上を契約済み・Figma常用・コードは書きたくないUI/UX/Webデザイナー向け（Markdownのファイルを保存できれば読めます）。
そもそもClaude Skillsって、デザイナーに何の関係があるの？
Claude Skillsは、Anthropic公式ヘルプによれば「特定タスクのパフォーマンス向上のためにClaudeが動的に読み込む、命令・スクリプト・リソースのフォルダ」と定義されています（出典: support.claude.com）。
かみ砕くと「ペルソナを作って」「ワイヤーを起こして」と毎回ゼロから指示する代わりに、SKILL.mdというMarkdownファイルにルール・手順・出力形式・例を書いておけば、Claudeが勝手に発火してくれる仕組み。
毎回コピペしてる作業を、ファイル1枚に畳む。これが本質。
Zapierの解説では、毎回同じやり方で特定タスクをこなさせる、再利用可能な命令の塊と紹介されています（出典: zapier.com）。
同じワークフローが毎週繰り返されるデザイナーほど、効きます。
なぜ今このSkills設計を「6個パッケージ」で組む価値があるのか？
市場に出回っているClaude Skills解説の主要どころを並べると、ある偏りが見えます。
| 記事系統 | 収録スキル数 | 前提環境 | 主戦場 |
|---|---|---|---|
| 大型コレクション系（海外個人発信） | 33〜63スキル | Claude Code | デザインプロセス全体 |
| 実装プロセス特化系 | 7スキル | Claude Code | Design Brief・Tokens等の実装寄り |
| UI/UX Engineers向け監査系 | 8スキル | Claude Code | 実装後のコード監査 |
| フロントデザイン10選系 | 10選 | Claude Code | frontend-design中心 |
| 本記事の角度 | 6個固定 | Claude Desktop単体 | Figma前の上流工程 |
全部Claude Code前提で、しかも実装後のコード監査が主戦場。
コードを書かないデザイナーは、海外発の63スキル系リポジトリを開いた瞬間に「You'll need Claude Code — Anthropic's agentic coding tool that works in your terminal, VS Code, or browser.」という一文で離脱します。
これ、入口の段差がデカすぎます。離脱率は体感で80%超え。
私が注目してるのは、Claude Desktop（Cowork）単体で完結させる設計です。
CDO養成スクール系の解説記事は、Coworkでターミナルを使わずClaude Codeと同等の機能が使えるようになった、と書いています（出典: thecdo.school）。
個人的に重要だと感じる点は、数を盛るより「6個で1案件回せる」の方が圧倒的に運用に乗ること。
Skills関連の海外Substack解説によれば、最も価値を引き出しているのは技術者ではなく、毎週同じワークフローを繰り返すコンテンツ系の運営者だ、と整理されています。
毎週同じ流れで案件が回るデザイナーにこそ刺さる、という観察です。
提案する6スキルの中身は？（ペルソナ／ワイヤー／コンポーネント／アクセシビリティ／UXコピー／UIレビュー）
ここが本記事の主軸です。
1案件をFigmaに入る前から納品レビューまで一気通貫で支える、最小完成パッケージ。
| # | スキル名（推奨） | 担当フェーズ | 出力 |
|---|---|---|---|
| 1 | persona-builder | リサーチ | ペルソナ・エンパシーマップ・ジャーニー |
| 2 | wireframe-sketcher | 構造設計 | 主要画面のワイヤー（テキスト＋ASCII） |
| 3 | component-extractor | UI設計 | 必要コンポーネント一覧＋命名 |
| 4 | a11y-checker | アクセシビリティ | WCAG 2.2 AA基準の事前チェックリスト |
| 5 | ux-copywriter | マイクロコピー | ボタン・エラー文・空状態テキスト案 |
| 6 | ui-reviewer | レビュー | Figma画面の口頭レビュー観点 |
1〜2はFigmaに入る前。
3〜5はFigma作業中に並走。
6は納品前のセルフレビュー。
これで案件の8割が回ります。私なら6スキルで月10案件は回せると見ています。
各スキルの参考になるSKILL.md設計
海外発の63スキル系コレクションには、design-researchプラグイン内にペルソナ生成用の /discover コマンドがあり、SKILL.md内で「Demographics, goals, frustrations, behavioural patterns, context of use.」という観点が並ぶ構成です。
これはClaude Code前提設計ですが、観点リスト自体はDesktop版のSKILL.mdに転用可能です。
ワイヤーフレーム関連では、独立リポジトリの Magdoub/claude-wireframe-skill が「5つのUXアプローチ」を白黒で40〜60秒で出力する設計を採っています。
アクセシビリティについては、Snykの解説で紹介されているAccessLintが参考になります。
他のスキルに混ぜ込んだ機能ではなくアクセシビリティだけに専念する設計、と紹介されています（出典: snyk.io）。
contrast-checker / refactor / use-of-color / link-purpose の4スキル構成です。
WCAG 2.2 AAでは通常テキストで最低4.5:1、大テキスト（18pt以上または14pt bold以上）で3:1のコントラスト比が要件と定められています（出典: W3C WCAG 2.2）。
a11y-checkerスキルにはこの数字をそのまま埋め込むのが筋。
Desktop単体で6スキルを揃える手順は？
ここが再現パートです。
Anthropic公式ヘルプとskill-creatorプラグインのドキュメントから、コードもターミナルも触らない流れを再構成します。
所要時間の目安として、Skills関連の海外解説では、skill-creatorで初スキルを作るのに15〜30分・Markdownやコード知識は不要、と報告されています。
1スキルあたり20分なら、6スキルで2時間あれば組み終わる計算です。
半日あれば武器が1セット揃う。
私はこの2時間が一番費用対効果が高いと考えています。
月20ドルで6スキル分の自動化が手に入る計算です。
STEP1: Claude Desktopアプリで「Code execution」を有効化する
公式ヘルプ（support.claude.com）の手順を引きます。
- Claude Desktop を開く
- 右上のアイコンから Settings へ移動
- 左メニューの Capabilities を選び、「Code execution and file creation」のトグルをオンに切り替える
- 同じくCustomize → Skillsを開き、利用したい組み込みスキルのオン・オフを確認
ここで「Code execution」と書いてありますが、デザイナーがコードを書くわけではありません。
Claudeが内部でファイルを扱うための機能を解禁する操作なので、ボタンを1つ押すだけです。
STEP2: チャットで「/skill-creator」を起動して1個目を作る
- Claude Desktopのチャット入力欄に
/skill-creatorと入れる - 4つのモード（Create / Eval / Improve / Benchmark）が出たら「Create」を選ぶ
- Claudeが「このスキルは何をしますか？」「いつトリガーされますか？」「期待する出力形式は？」と質問してくるので、デザイナー言葉でそのまま答える。例として「BtoB SaaSのオンボーディング画面のペルソナを3パターン作って欲しい。性別・年齢・業務・課題・期待を含めて」のような形
- 対話が終わるとSKILL.mdの草案が画面内に生成され、「Copy to your skills」ボタンで自動保存される
Anthropic公式ブログ（2026年3月3日アップデート）によれば、skill-creatorの作成フローは「Capture Intent → Interview and Research → Write the SKILL.md → テストと評価 → 改善ループ」の5段階です（出典: claude.com/blog）。
STEP3: 残り5個も同じ流れで作って6個揃える
- persona-builderが完成したら、同じ要領で wireframe-sketcher → component-extractor → a11y-checker → ux-copywriter → ui-reviewer の順で作る
- 各SKILL.mdの description（最大200文字）には「いつ使うか」を必ず書く。例として「ボタン・エラーメッセージ・空状態のテキスト案を3パターン提案する。マイクロコピーが必要な時に使う」のような形
- 1個できる度にチャット内で「ペルソナを作って」「ワイヤーを起こして」とシンプルに頼んで発火するか確認
descriptionが曖昧だとスキルが発火しません。
Skills関連のSubstack解説では「The description is everything」と強調されています。
「いつ呼び出すか」を200文字以内で具体的に。
料金とプランは結局どうなってる？
既存の解説で「Pro以上が必要」と書かれているものがありますが、2026年5月時点の公式ヘルプ（support.claude.com）には「Skills are available for users on Free, Pro, Max, Team, and Enterprise plans.」と明記されています。
原則Free含む全プランで使える、ということ。
ただしSettings → Capabilitiesで「Code execution and file creation」を有効化することが前提条件です。
Team/Enterpriseはさらに管理者側で「Organization settings → Skills」の解禁が必要。
| プラン | 月額（年契約） | 月額（月次） | Skills利用 |
|---|---|---|---|
| Free | 0ドル | 0ドル | ○（Code execution有効化必要） |
| Pro | 17ドル/月 | 20ドル/月 | ○ |
| Max | 100ドル/月〜 | 100ドル/月〜 | ○（5x or 20x枠） |
| Team | 20ドル/座席 | 25ドル/座席 | ○（管理者解禁必要） |
| Enterprise | 20ドル/座席+使用量課金 | — | ○（管理者解禁必要） |
Pro契約済みのデザイナーなら、月20ドルの追加課金ゼロで6スキルパッケージを組めます。
個人的に押さえておきたい注意点は、Maxプラン利用者でも集中的に使うと「30分以内に使用枠を使い切る」報告があること。
Skillsを6個入れて1案件丸ごと回すとペルソナ→ワイヤー→コンポーネント→a11y→コピー→レビューと連続呼び出しになるので、Pro 月20ドルでも分割運用が安全です。
「Desktop単体」と言うけど、Claude Codeとは何が違うの？
Cowork系の解説サイトでは、Claude Codeは開発作業で強力・Coworkはそれ以外全般でアクセスしやすい、と整理されています（出典: findskill.ai）。
| 項目 | Claude Desktop（Cowork） | Claude Code |
|---|---|---|
| UI | 普通のチャット画面 | ターミナル/CLI |
| 主な利用層 | デザイナー・PM・ライター | エンジニア |
| SKILL.md保存場所 | Desktop専用ディレクトリ | ~/.claude/skills/ |
| 同期 | Web↔Desktopは同期 | CLI側は手動管理 |
| ファイル直接編集 | UI上で編集 | テキストエディタで直編集 |
注意点が1つ。
Anthropic公式リポジトリのGitHub issue #20697で「Skills added in the Claude Desktop app are stored in a different location than skills for Claude Code CLI」と報告されており、DesktopとCode版の間でスキルは自動同期されません（出典: github.com）。
デザイナー側はDesktop単体で完結するので問題なし。
エンジニアと同じスキルを共有したい時は、SKILL.mdをコピペで渡す運用になります。
Claude DesignとClaude Skillsって、同じやつじゃないの？
ここ、日本語の解説記事で混同が多いポイント。
Claude Designは2026年4月17日にAnthropicが発表した「会話型ビジュアル制作サービス」で、Claude Opus 4.7を動力にスライドやプロトを生成する別系統機能です。
Figmaの市場シェア80〜90%への直接競合として注目されています。
一方Claude Skillsは「技能登録機能」で、SKILL.mdにルールを書いてClaudeの動き方そのものを定義するもの。
出力対象は文章・観点リスト・チェックリストが中心で、ビジュアルそのものは生成しません。
役割が違うので、両方使うのが筋です。
「AIが作るとAIっぽいデザインになる」問題はSkillsで解けるのか？
hexabaseの解説では「AIにデザインを頼むと、なんだか『AIっぽい』仕上がりになる。
過剰なグラデーションや、謎の装飾が入って使いにくい」「原因は文脈とルールの欠如」と指摘されています（出典: hexabase.com）。
これがSKILL.mdで解ける一番の論点です。
デザインプロセス特化型Skillsを発信している海外の実務者は「AI is not just replacing the tool. It is replacing the process.」「Speed without direction just means you waste time faster.」という警告を残しています。
方向性なき速度は、ただ時間を無駄にするのが速くなるだけ。
SKILL.mdに「自社プロダクトのトンマナ」「使う色のHEX」「禁止する装飾」「文体ガイド」を書き込むことで、出力の方向性を縛るのが正しい使い方。
私の見方では、Skillsの本当の価値はここにあります。
63スキル系の発信者も「This isn't a replacement for design judgment. It's an amplifier for it.（デザイン判断の代替ではなく、増幅器）」と書いています。
判断はデザイナー、繰り返しはClaudeに、という分業設計。
使う前に知っておきたい落とし穴は？
賛の声だけ並べると公平じゃないので、批判系も並べます。
- descriptionが曖昧だと発火しない: 海外Substack解説「The description is everything」。50ワード以内で具体的に書く
- 意図せず過剰発火する: 同解説「Skills can hijack conversations」。複数スキルが競合すると会話の主導権がスキル側に奪われる
- Coworkはファイルを上書きする: CDO養成スクール系解説「Cowork will overwrite files unless you tell it not to.」。版管理機能はClaude側にないので、納品物は手元でバックアップ
- 使用枠は普通に枯れる: Maxユーザーでも30分で枯れる報告あり。Pro 月20ドルで6スキル連鎖呼び出しは要分割
- モバイルアプリでは使えない: ZapierがiOS/Android非対応と明記。電車内チェックは諦める
- 暗黙の文脈は把握できない: 会議前の政治的事情・クライアントの本音は人間がブリーフィングするしかない
制約を踏まえた上で、ハマる人にはガッチリハマる。
LinkedIn上のコメント発信では、ワークフローを再利用可能なSkillsに変換したチームは個人の習慣に依存するチームを上回る、という観察があります。
これ、5年後の業界格差の話だと思います。
FAQ
Claude SkillsはFigmaの代わりになりますか？
なりません。
Skillsは文章・観点リスト・チェックリストを出力する機能で、ビジュアルそのものは作りません。
Figmaに入る前のリサーチ・設計段階と、Figma作業中の壁打ち、納品前のレビューを担当する役割分担になります。
ビジュアル生成が必要ならClaude Design（別機能）の方を見るのが筋です。
Claude FreeプランでもSkillsは使えますか？
はい、使えます。
Anthropic公式ヘルプ（support.claude.com/en/articles/12512180）では「Free, Pro, Max, Team, Enterpriseの全プランで利用可能」と明記されている形です。
ただしSettings → Capabilitiesから「Code execution and file creation」をオンにする必要あり。
SKILL.mdを書くのにプログラミング知識は要りますか？
不要です。
SKILL.mdは普通のテキストファイルで、先頭にYAML（name・description）を書き、その後にMarkdownで手順や例を書くだけ。
海外の実務発信では「マークダウンやコード知識は不要」「初スキル作成15〜30分」と報告されています。
Desktop版の /skill-creator を起動すれば対話形式で組み立ててくれます。
Claude Code向けに公開されている63スキル系コレクションは、コードを書かないデザイナーにも使えますか？
そのままは使えません。
海外発の大型コレクションリポジトリは「You'll need Claude Code」と前提条件が明記されており、ターミナル・テキストエディタ・gitの操作が必要になります。
設計思想・SKILL.mdの観点リスト（ペルソナの記述項目など）を参考にして、Desktop版の /skill-creator で個人用に組み直すのが筋。
どの順番で6スキルを作ればいいですか？
1案件で実際に使う順番がそのまま作る順番です。
具体的にはpersona-builder → wireframe-sketcher → component-extractor → a11y-checker → ux-copywriter → ui-reviewerの順。
1〜2はFigma前、3〜5はFigma並走、6は納品前レビュー。
1個ずつ作って実際の案件で発火確認してから次へ進むと、descriptionの精度が早く上がります。
DesktopとClaude Codeで同じスキルを共有できますか？
同期はされません。
GitHub issue #20697で報告されている通り、ファイル保存場所がDesktopとCLIで異なります。
共有したい場合はSKILL.mdの中身をコピペでもう一方に渡す手動運用になります。
Web版とDesktop版の間は同期されるとZapierが書いていますが、CLI側との同期は別問題です。
このページに出てきた言葉
- Claude Skills
- Claudeに「このタスクの時はこう振る舞え」を覚えさせる小さなフォルダ。Markdownファイル中心で構成される
- SKILL.md
- 1スキル=1ファイル。先頭YAMLにname・descriptionを書き、本文に手順・例・出力形式を書くMarkdown
- Markdown
- 普通のテキストに記号を付けて見出しや箇条書きを作るシンプルな書き方。メモ帳でも書ける
- YAML（フロントマター）
- SKILL.mdの先頭に
---で囲んで設定値を並べる部分。name（最大64文字）と description（最大200文字）が必須 - skill-creator
- Anthropic公式の対話ウィザード。チャットで
/skill-creatorと入力すると4モード（Create/Eval/Improve/Benchmark）が起動する - Claude Cowork
- Claude Desktopアプリの愛称。普通の入力欄でClaudeとやり取りする、コマンド入力不要の環境
- Code execution and file creation
- Claudeが内部でファイル操作・コード実行を扱う機能。Skillsを使うには Settings → Capabilities でオンにする必要がある
- Progressive Disclosure
- Claudeが必要に応じて情報を段階的に読み込む仕組み。SKILL.mdのdescriptionで発火判定し、本文を後から参照する
- WCAG 2.2 AA
- W3Cが定めるWebアクセシビリティ国際基準のAAレベル。通常テキスト4.5:1、大テキスト3:1のコントラスト比が必須
- マイクロコピー
- ボタン名・エラーメッセージ・空状態の案内など、UI上の小さな文章。CV率や離脱率に直結する
- エンパシーマップ
- ペルソナの「見ている」「聞いている」「考えている」「感じている」を4象限で書き出すUXリサーチのフォーマット
参考リンク
- Anthropic公式: Use Skills in Claude（対応プラン・有効化手順）
- Anthropic公式: What are Skills（定義）
- Anthropic公式: How to create custom skills（SKILL.md構造）
- Anthropic公式: skill-creatorプラグイン
- Anthropic公式ブログ: skill-creator改善（2026年3月3日）
- Anthropic公式 Skillsリポジトリ（GitHub）
- Claude料金ページ
- claude-wireframe-skill（GitHub）
- Snyk: Top Claude Skills for UI/UX Engineers
- thecdo.school: Claude Cowork for Designers
- Zapier: Claude Skills解説
- FindSkill.ai: Claude Cowork Guide
- hexabase: Claude Skills UIデザインワークフロー
- W3C: WCAG 2.2公式仕様
- GitHub: Desktop↔CLI同期issue #20697
※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。