デザイナーのためのClaudeとClaude Code活用ガイド

「Claudeはデザイナーの仕事を奪うのか」とよく聞かれます。16年以上デザインをしてきた立場から言うと、心配する場所が少しずれています。Claudeが得意なのは、決めたルールを正確に大量に適用すること、実装すること、資料を作ることです。一方で、何が良いかを決めるのは今も私たちの仕事です。その分担を前提に設定すると、Claudeはとても頼れるチームメイトになります。

この記事では、日本語のUIや日本の仕事の進め方を前提に、デザイナーがClaudeとClaude Codeを使うための具体的な設定をまとめます。

claude.aiとClaude Codeの使い分け

• claude.ai・デスクトップアプリ：提案資料、PDF、スクリーンショットのレビュー、簡単なプロトタイプ向きです。設定のCapabilitiesでコード実行を有効にすると、PowerPointやPDFを作るスキルがそのまま使えます。スキルの管理はCustomizeのSkillsから行います。
• Claude Code：実際のコードベースでUIを作る場所です。デザイン系のスキルやプラグインの多くもここで入れます。

まずはclaude.aiで既存画面のレビューや資料作りから始め、実装したくなったらClaude Codeに移るのが自然な順番です。

Figmaとつなぐ

公式マーケットプレイスにはFigmaのプラグインがあり、FigmaのMCPサーバーが含まれています。

/plugin install figma@claude-plugins-official

インストール後に/mcpでログインします。これでClaudeはスクリーンショットから推測するのではなく、フレームやコンポーネント、変数を直接読めるようになります。ただし結果の質はファイルの整理具合で決まります。レイヤー名、コンポーネント、色や余白の変数がきちんとしているほど、実装の精度も上がります。

日本語タイポグラフィのルールをスキルにする

Claudeが作るUIは、放っておくと欧文を前提にした設定になりがちです。見出しの字間が詰まっていなかったり、本文の行間が窮屈だったり、日本語フォントの指定が抜けていたりします。毎回指摘するより、ルールをスキルとして渡す方が確実です。

プロジェクトに.claude/skills/ja-typography/SKILL.mdを作ります。

---
name: ja-typography
description: 日本語UIの文字組みルール。画面、コンポーネント、CSS、コピーを作成・変更するときに必ず使う。
---

# フォント
font-family は tokens.css の --font-ja を使う。欧文フォント単体で指定しない。

# 見出し
font-feature-settings: "palt" を適用し、字間を詰める。
行間は本文より狭くする。

# 本文
行間は tokens.css の --leading-body を使う（欧文より広め）。
1行はおよそ35文字前後を上限にする。

# 改行
見出しは単語の途中で改行しないよう、文節単位で調整する。
CSSの word-break: auto-phrase は対応ブラウザが限られるので、表示を確認すること。

# コピー
です・ます調で統一。全角と半角の混在ルールは copy-guide.md に従う。

数値はチームで決めたものを入れてください。大事なのは、判断をClaudeに任せず、あなたの基準を文章にして渡すことです。

方向性を先に決めさせる

Anthropicのfrontend-designスキルは、コードを書く前に見た目の方向性を決めるよう促してくれます。

/plugin install frontend-design@claude-plugins-official

依頼は、後輩デザイナーへのブリーフと同じように書きます。

地方の老舗旅館の予約ページを作ります。
対象は40代以上の国内旅行者。落ち着いた、上質で静かな雰囲気。
グラデーションやすりガラス風の表現は使わない。
コードを書く前に、方向性を5項目で提案して、私の承認を待ってください。

最後の一文が一番大切です。方向性の確認は1分で済みますが、完成したページのやり直しには何倍も時間がかかります。

自分の目で見る前に、Claudeにも見せる

Playwrightのプラグインを入れると、Claudeが実際のブラウザで画面を開いてスクリーンショットを撮れるようになります。

/plugin install playwright@claude-plugins-official

http://localhost:3000 を開き、幅390pxと1440pxでスクリーンショットを撮ってください。
ja-typography のルールと比べて、問題を重要な順に挙げてください。
修正は上位3つだけにして、もう一度撮影してください。

一度に直す数を絞ると、変更内容をきちんと確認できます。

提案資料と納品物も任せる

日本の案件では、デザインそのものより提案資料や説明資料に時間を取られることがよくあります。社内の稟議に回すための資料も同じです。claude.aiなら構成案とブランドカラーを渡すだけで、編集できる.pptxを作れます。Claude Codeでは次のように入れます。

/plugin marketplace add anthropics/skills
/plugin install document-skills@anthropic-agent-skills

ただし、決裁者向けの資料ほど、数字や固有名詞は必ず自分で確認してください。

最初は実案件の画面を一つだけ選び、Figmaとの接続とタイポグラフィのスキルを用意して、Claudeに作らせてみてください。アートディレクターはあなたのままです。変わるのは、決めてから形になるまでの距離です。