ブログ

プロダクトデザイナーのためのClaude Code活用術：デザインを理解する環境の作り方

2026年6月10日 H.Ueda

今回は、Nick Babich氏による Ultimate Claude Code Setup for Product Designers という記事を参考に、プロダクトデザイナーがClaude Codeを導入する際に意識したい「デザインを深く理解させるためのセットアップ」について、実務での活用シーンを交えながら整理してみます。

参考まで

プロダクトデザイナーにとって、Claude Codeは単に「代わりにコードを書いてくれるツール」ではありません。私たちが本当に必要としているのは、自分の頭の中にあるプロダクトの構想やユーザー体験の意図を、素早く、かつ正確に形にしてくれるパートナーではないでしょうか。

そのためには、Claudeがプロジェクトのコンテキスト（文脈）を正しく把握できる「デザインを意識した環境」を整えることが、最初の、そして最も重要な一歩になります。

1. 適切なワークスペースの構造化

AIとのやり取りにおいて、コンテキストの提供が重要であることは、実際に使っていると感じる部分かと思います。Claude Codeを最大限に活かすには、単発のプロンプトで指示を出すのではなく、プロジェクト全体の構造をClaudeが理解しやすい形に整理しておくのが理想的です。

具体的には、以下のようなディレクトリ構成にすることで、Claudeは必要な情報を自分から探しに行けるようになります。

/project
  /app           (アプリケーション本体)
  /components    (再利用可能なコンポーネント)
  /docs          (ドキュメント類)
    prd.md              (製品要求仕様書)
    user-flows.md       (ユーザーフロー)
    ux-principles.md    (UXの基本原則)
    design-system.md    (デザインシステムの概要)
  /design        (デザイン定義)
    tokens.md           (色、余白、型などのトークン)
    components.md       (UIコンポーネントの仕様)
    interaction-patterns.md (共通のインタラクション)
  CLAUDE.md      (Claudeへの指示書)

このように「信頼できる唯一の情報源（Source of Truth）」を明示的に配置しておくことで、Claudeは「勝手に新しいボタンの色を決める」といった、意図しない挙動を抑えられるようになります。

2. 羅針盤となる CLAUDE.md の作成

セットアップの中で、実質的に最も重要なのが CLAUDE.md ファイルです。これは、そのプロジェクト内でのClaudeの振る舞いや性格を定義するための指示書のようなものです。

プロダクトデザインのタスクを任せる場合、このファイルに「デザイナーとしての視点」を組み込んでおくと、アウトプットの質が格段に変わります。

CLAUDE.md の構成例

たとえば、以下のような内容を定義してみるのはいかがでしょうか。

# 役割
あなたはシニアプロダクトデザイナー兼フロントエンドエンジニアです。

# プロダクトのコンテキスト
このプロダクトは [ターゲットユーザー] が [特定の目標] を達成するのを助けるためのものです。

# デザイン原則
- 視覚的な装飾よりも、情報の明快さを優先してください。
- 複雑なフローには、段階的開示（Progressive Disclosure）を取り入れてください。
- 必要がない限り、独自の新しいUIパターンは導入しないでください。

# デザインシステムのルール
- 新しいコンポーネントを作る前に、既存のコンポーネントが使えないか検討してください。
- /design/tokens.md に定義されているスペーシングとカラーに従ってください。

# ワークフロー
変更を加える前に、以下のステップを踏んでください：
1. 現在のUXの状態を分析する。
2. 提案する変更の内容を説明する。
3. 影響を受けるコンポーネントを特定する。
4. 計画を提案し、承認を得る。

このように、作業を開始する前の「思考プロセス」を指定しておくことで、いわゆる「いきなりコードを書き換えてしまう問題」を防ぎやすくなります。

3. セットアップによる効果の違い

一般的なAIの使い方と、今回のようなセットアップを行った場合で、何が違うのかを表にまとめてみました。

項目 一般的なセットアップ デザイン最適化セットアップ
指示の出し方 「ログイン画面を作って」 「docs/にある要件に従って画面を作って」
デザインの一貫性 AIが適当な色や余白を選ぶ tokens.md に基づいたスタイルを適用
UXの配慮 動くコードを優先する デザイン原則に基づき、使い勝手を考慮する
既存資産の活用 新しいボタンを毎回作る 既存のコンポーネントを再利用する

実際の作業の流れをMermaid図にすると、以下のようなイメージになります。Claudeがドキュメントを参照しながら思考するプロセスが可視化されます。

flowchart TD
    A[ユーザーの指示] --> B{CLAUDE.mdを確認}
    B --> C[docs/プロジェクト要件を参照]
    C --> D[design/デザイン定義を確認]
    D --> E[UX上の根拠を分析]
    E --> F[変更計画を提案]
    F --> G[承認後に実装開始]

4. プロダクトデザイナーとしてのワークフロー

実際にClaude Codeを使ってデザイン変更や機能追加を行う際は、以下のようなコミュニケーションを心がけるとスムーズかもしれません。

  1. UXの根拠を求める: 「なぜこの配置にしたのか？」をClaudeに問いかけ、ux-principles.md に基づいた説明をさせます。
  2. トレードオフを確認する: 提案された変更によって、アクセシビリティや実装コストにどのような影響が出るかを確認します。
  3. 段階的な実装: 一気に全部変えるのではなく、まずは「主要なフローのプロトタイプ」から進めてもらうように指示します。

まとめ

Claude Codeをプロダクトデザイナーの頼もしい相棒にするためには、「Claudeに何を知っておいてほしいか」をドキュメントとして整理し、それを CLAUDE.md で適切に紐付けることが重要です。

これによって、Claudeは単なるコード生成器ではなく、プロジェクトの背景やデザイン哲学を理解した「チームの一員」のように振る舞ってくれるようになります。

まずは、自分のプロジェクトのルートディレクトリに、簡単な CLAUDE.md を作るところから始めてみてはいかがでしょうか。それだけでも、Claudeとのやり取りがぐっと実務に近いものに変わるはずです。

参照記事

« 記事一覧へ戻る