Claude Code デザイナー向け：働くデザイナーのセットアップ

先月一緒に仕事をしたデザイナーは、たった3日でデザインシステムの全面的なリファクタリングを成功させました。彼女はエンジニアではありません。Bashも知りません。正規表現を書いたことすらありません。彼女が持っていたのは、Claude CodeとCLAUDE.mdファイル、そして自分の判断ミスを指摘する気質だけでした。

これが、誰も話題にしないこのツールのバージョンです。Claude Codeの記事はすべて、シニアエンジニアがシニアエンジニア向けに書いたものです。エージェントレーン、フックスクリプト、そして難解なフラグで溢れています。デザイナーはそれを読んでも、自分には関係ないと思い込み、タブを閉じてしまいます。

しかし、これはあなた向けです。正直言って、ほとんどのエンジニアよりもあなた向けです。なぜなら、デザイナーが苦労するのはコードを書くことではなく、チームが次々と機能を追加していく中で、10個ものリポジトリにまたがるデザインシステムを維持することだからです。Claude Codeはまさにその問題を解決するツールなのです。

Claude Code はエージェントであり、オートコンプリートではありません。

Claude Code は GitHub の Copilot クローンではありません。コードテーマのチャットウィンドウでもありません。これは、ターミナルに常駐し、リポジトリ全体を読み込み、ファイルを編集し、テストを実行し、プルリクエストを作成し、混乱した際には応答する、長時間稼働するエージェントです。

重要な変化は、どの行を編集するかを指示されるのを待つ必要がないことです。目標を与えるだけで、どのファイルを開き、何を変更し、新しいコンポーネントを追加するか既存のコンポーネントを修正するか、そして作業中に他のコードの動作を維持する方法を判断します。

これがデザイナーにとってすべてを変える部分です。特定の行を指し示すのではなく、結果を記述するようになります。結果を適切に記述することは、それ自体が独立した専門分野であり、設計者向け迅速エンジニアリング で解説されています。 「すべてのボタンコンポーネントを新しいフォーカスリングトークンを使用するように更新してください。従来の無効化バージョンも含め、Storybookのストーリーが正しく処理されることを確認してください。」これは一文です。しかし、これはデザインオペレーションの1日分の作業をわずか4分で終わらせることを意味します。

デザイナーの仕事は常にセンスであり、構文ではありません。Claude Codeは、センスそのものを製品にします。

10分でインストール

必要なものは3つです。Node.js、ターミナル、そしてClaudeアカウントです。

1. ターミナルを開きます（Macの場合：Cmd+Spaceを押して「ターミナル」と入力します）。2つのコマンドを入力するだけでインストールは完了です。

2. Nodeがインストールされていない場合はインストールします。nodejs.orgにアクセスし、LTS版をダウンロードして実行します。これは通常のインストーラーで、ダブルクリックでインストールできます。

3. ターミナルに以下を貼り付けます: npm install -g @anthropic-ai/claude-code

4. デザインリポジトリに移動します: cd ~/path/to/your/repo

5. 実行します: claude

初回実行時には、ログイン手順が表示されます。これで完了です。

リポジトリは、デザインシステムパッケージ、Next.js マーケティングサイト、Storybook、Figma トークンエクスポート、Tailwind 設定など、作業環境に応じて何でも構いません。ファイルを含むフォルダであれば、Claude Code で読み込むことができます。

| 手順 | 画面表示 | 所要時間 |

|------|-------------------|----------|

| Node のインストール | 標準 Mac/Windows インストーラー | 2 分 |

| Claude Code のインストール | npm コマンド 1 つ | 1 分 |

| ログイン | ブラウザのリダイレクト | 1分 |

| 初回セッション | claude 任意のフォルダ | 即時 |

CLAUDE.md は、README ではなく、デザインブリーフのように記述してください

CLAUDE.md は、Claude Code がリポジトリを開くたびに最初に読み込むファイルです。エンジニアはビルドコマンドやテストパスを確認するためにこれを使用します。それは問題ありません。しかし、それでは真の価値の90%を無駄にしていることになります。

CLAUDE.md は、新人デザイナーに渡すデザインブリーフのように扱ってください。ブランドの特徴、ブランドルール、この製品とは何か、決して行わないこと、ここでのクリーンな作業とはどのようなものかなどを明確に記述してください。CLAUDE.md に記述した文章はすべて、チャットで繰り返す必要のない文章になります。

私が採用するすべてのデザイナーに渡すテンプレート：

# CLAUDE.md

## What this repo is
One line. "Marketing site for Acme, a B2B analytics tool for finance teams."

## Voice
Three adjectives that describe how we write. Three phrases we never use. One example of a sentence we would ship and one we would cut.

## Design system
Where tokens live (path). Where components live (path). How we name things. Forbidden patterns (no inline styles, no hardcoded hex, no px values for spacing).

## Components we have
One-line descriptions of Button, Card, Hero, Nav, etc. So Claude does not build a new one when we already have it.

## What clean work looks like
A short paragraph. "We ship small, focused PRs. We update the Storybook story when we change a component. We never introduce a new dependency without asking."

## What to ask before proceeding
"If you are about to add a new color, stop and ask. If you are about to rename a component, stop and ask."

## Review standards
"Every change must pass typecheck and lint. Screenshots of before/after for any visual change."

リポジトリごとに一度記述してください。エージェントがコードベースでどのような問題を起こすかについて新しい発見があった場合は、更新してください。積み重なっていく。

重要な5つのワークフロー

ほとんどのClaude Codeチュートリアルでは20個の機能が挙げられていますが、デザイナーの価値の90%は、そのうちの5つに集約されます。

デザインシステムのメンテナンス 「古い間隔値（8px、16px、24px）をまだ使用している箇所をすべて見つけて、トークン（--space-2、--space-4、--space-6）に置き換えてください。コンポーネントを更新し、ストーリーを滞りなく進めてください。」所要時間はわずか2分。従来は1週間かかっていました。

コンポーネントのリファクタリング 「ボタンのバリエーションが12個に増えました。それらを監査し、実際に使用されている3つと、使用されていない9つを教えてください。そして、統合されたAPIを提案し、フィーチャーフラグで実装してください。」提案内容を確認し、承認すれば、リリースされます。

Figma-ページへ Figmaのスクリーンショットを貼り付けるか、より良い方法として⟦ブランド0⟧ ⟦ブランド1⟧を接続してください。「このヒーローセクションは、新しいコンポーネントとトークンではなく、既存のコンポーネントとトークンを使用して構築してください」と指示してください。これにより、1～2回のフィードバックでデザインに一致するプルリクエストが生成されます。

トークンの伝播 ブランドが色を更新します。「モノレポ全体で --color-accent を置き換えて、タイプチェックを実行してください。」作業はタイピングではなく、勇気です。Claude Codeは無限の勇気とゼロのエゴを持っています。

ビジュアルレビュー 「開発サーバーを起動し、すべてのページのスクリーンショットを撮って、前回のデプロイと比較してスペーシングが崩れているページやオーバーフローしているページを教えてください。」リポジトリにPlaywrightなどの設定がある場合は、これは魔法のような機能です。目視では見落としてしまうような問題を検出してくれます。

| ワークフロー | Claude Code適用前 | Claude Code適用後 | |----------|-------------------|------------------|

| デザインシステム全体の見直し | 2～5日​​、デザイナー1名＋エンジニア1名 | 20分、デザイナー1名 |

| コンポーネントの監査＋リファクタリング | 1スプリント | 午後1時間 |

| Figmaからページへの変換 | 1～3日 | 1～3時間 |

| トークンの伝播 | 1週間、エラーが発生しやすい | 数分、確実 |

| ビジュアルリグレッションテスト | 通常は発生しない | プルリクエストごと |

スクリーンショットではなく、Figmaを渡してください

PNG画像しかない場合は、PNGを貼り付けてください。Claude Codeは画像に対応しています。スペーシングの正確さやタイポグラフィのニュアンスの一部は失われますが、構造は反映されます。

Figmaをお持ちの場合は、Figma MCPサーバーを接続してください。インストールはわずか5分で完了し、Claude CodeがFigmaフレームに直接アクセスできるようになります。フレームID、レイヤー名、間隔値、トークンリンク、構造全体など、あらゆる情報が読み込まれます。出力品質は飛躍的に向上し、モデルが推測に頼る必要がなくなります。

いずれにしても、一つだけルールがあります。常に既存のデザインシステムを与え、白紙のキャンバスを与えないでください。「コンポーネントを使ってこれを作成する」という指示は、「これを作成する」という指示よりも常に優れています。キャンバスを白紙のままにしておくと、Claude Codeは既に存在するコンポーネントを勝手に作成してしまいます。これは無駄な作業です。

Claude Codeが信頼を失う点

正直に言ってください。これが、このツールが現状では不十分な点です。

実際のブランドイラスト。特定の芸術スタイル、手描きのキャラクターデザイン、あるいはブランドイメージに忠実なマスコットキャラクターなど、特定の要素が求められるものすべて。Claude Codeはジェネレーターを呼び出すだけで、センスはありません。そのため、Prismlight、Runesmith、あるいは人間のイラストレーターに依頼する必要があります。

レイアウトの主観的なセンス。ページを正しくレイアウトすることはできますが、ページが感情的に退屈だと指摘することはできません。ヒーローにもっと余白が必要だと指摘することもできません。ウェイトの決定が間違っていると感じ取ることもできません。それは依然としてあなた自身の仕事です。

製品の第一原理に基づく意思決定。あなたが要求したものは何でも実装できますが、そもそもそれを要求すべきかどうかは判断できません。それはデザイナーの仕事であり、実際に報酬を得るのもデザイナーの仕事です。

リポジトリが混乱している場合。コードベースに一貫したシステムがなく、CLAUDE.mdがなく、命名規則がなく、トークンもない場合、Claude Codeは混乱をさらに悪化させるだけです。まずは基盤を整理する必要があります。それは確かにイライラしますが、同時に公平でもあります。

AIワークフローの詳細をさらに知りたい場合は、Brainy 論文 の残りの部分をご覧ください。デザインチームに適切に導入したい場合は、Brainy を雇用する をご覧ください。セットアップと最初の実際のワークフローを弊社がサポートいたします。

デザイナー向けスターターチェックリスト

1日目、実際のチェックリストはこちらです。

• Claude Code をインストールする（npmコマンド、1分）

• ログインしてセッションが正常に動作することを確認する

• リポジトリを1つ選ぶ。1つだけでいい。まずは小規模から始めてください。

• 上記のテンプレートを使用してCLAUDE.mdを作成する。1時間かけて作成してください。

• 5つのワークフローのうち1つを選び、最初から最後まで実行してください。

• 差分を注意深く確認してください。安易に承認しないでください。あなたはアートディレクターです。

• Claude にどこが間違っていたかを伝えてください。 CLAUDE.md にレッスンを追加してください。

• 別のワークフローを実行してください。明日も実行してください。

1週間続ければ違いを実感できるでしょう。1ヶ月後にはもう以前の方法には戻りたくなくなるはずです。

よくある質問

Claude Code を使うにはコーディングの知識が必要ですか？

いいえ。必要なのは、何が必要か、それをどのように説明するか、そして差分を適切に読み取って「これは正しい」「これは間違っている」と判断できる能力です。ジュニアデザイナーにフィードバックを与えた経験があれば、そのスキルは身についているはずです。

Claude Code は本番環境のリポジトリで安全に使えますか？

はい、ブランチを使用すれば安全です。メインブランチでは絶対に実行しないでください。ブランチを作成し、そこで Claude Code を動作させ、他のプルリクエストと同様にレビューを行い、問題がなければマージしてください。Git が保護してくれます。プルリクエストにテストの合格を必須にすることも同様に保護になります。

Claude Code vs Cursor vs v0 vs Lovable、違いは何ですか？

CursorはClaudeを内蔵したフル機能のエディタです。v0とLovableはプロンプトからUIを生成しますが、リポジトリに長期的に保存されることはありません。Claude Codeはヘッドレスで、どのリポジトリにも保存でき、既存のコードベースに対して最も強力なツールです。新規プロトタイプの作成には、v0またはLovableの方が高速です。実際の製品開発には、Claude Codeが最適です。

Claude Codeの料金はいくらですか？

Claude Maxサブスクリプションで利用でき、ほとんどのデザイナーはまずこのプランから始めるのが良いでしょう。大規模なチームはAPI料金プランに移行します。いずれにしても、上記のワークフローで節約できる時間を考えると、非常に安価です。

Claude Code を絶対に使ってはいけないことは何ですか？

ブランドイラスト、主観的な好みの判断、製品戦略、ユーザーがなぜその機能を必要とするのかを理解する必要のあるあらゆる作業。これらは自分でやりましょう。ツールには反復的な作業を任せましょう。

あなたはもうジュニアではありません

長い間、デザイナーはビジョンを描き、それを実際に構築するエンジニアに渡す役割を担っていました。つまり、デザイナーは待つしかなかったのです。スプリントのキャパシティを、バックエンド作業を、誰かがタイピングしてくれるのを。

そんな時代は終わりました。

ジュニアはもはや人間ではありません。ジュニアはモデルです。あなたはアートディレクターです。

CLAUDE.md をデザインブリーフのように書きましょう。エージェントに作業を渡しましょう。ジュニアのモックアップをレビューするように、基準に基づいて差分をレビューしましょう。間違っていたら返送し、正しくできたらリリースしましょう。

デザインシステムのリファクタリングは3日間で完了します。3スプリントではありません。マーケティングサイトは今週中にリリースされます。来四半期ではありません。トークンの更新は数分で反映され、何日も追いかける必要はありません。

インストールしてください。ブリーフを作成してください。成果物を納品してください。