Claude CodeでUI/Webデザインを改善する方法｜AIにデザインセンスを発揮させる実践法
Claude CodeでUI/UXデザインを改善する方法｜AIにデザインセンスを発揮させる実践法
「Claude Code デザイン」で検索する人の多くは、こう感じているはずです——AIはコーディングは得意だが、デザインは苦手だと。
結論から言うと、これは典型的なスキルイシューです。AIに漠然と「いい感じにして」と頼むから品質が低い。構造化された具体的なフィードバックを与えれば、AIのデザイン出力は劇的に改善します。
この記事では、デザイン調整を基本的にすべてAIで行っている私の実務ワークフローと、海外で話題になった「構造化デザイン批評」のアプローチを組み合わせ、Claude Codeでデザイン品質を引き上げる具体的な方法を解説します。
「AIはデザインが苦手」が間違いである理由
多くの人がAIのデザイン出力に不満を持つのは、指示の出し方に問題があるケースがほとんどです。
よくある失敗パターン
- 「もっときれいに」「モダンにして」: 抽象的すぎてAIが解釈できない。「きれい」の基準は人それぞれ
- テキストだけで指示する: 言葉だけでデザインのイメージを共有するのは、人間同士でも難しい
- 一発で完成を求める: 1回のプロンプトで完璧なデザインを期待するのは非現実的
デザイン品質を上げる鍵：マルチモーダル × 具体性
現在のAIツールはマルチモーダル対応——つまり画像も読み取れます。これがデザイン指示において決定的に重要です。
私がデザイン調整で重視しているのは、「どれだけ詳細に自分のイメージを伝えられるか」の一点です。具体的には：
- スクリーンショットを撮って「ここのこれ」と指定する: 修正したい箇所を視覚的に示す
- 再現したいデザインに近いコードを見せる: 参考にしたいUIのCSS・HTMLを直接共有する
- 参考サイトのスクショを貼る: 「このサイトのこの部分のような雰囲気」と具体例を示す
- 数値で指示する: 「余白を広く」ではなく「padding: 32px」「font-size: 14px」「border-radius: 12px」と具体的に
テキストだけの指示と、スクリーンショット＋具体的な数値を添えた指示では、出力品質に天と地ほどの差が出ます。
実践ワークフロー：構造化デザイン批評 × Claude Code
海外のプロダクトデザイナーAlex Kehr氏が公開したワークフローが示唆に富んでいます。氏は「構造化されたデザイン批評」をAIに渡すことで、デザイン出力が劇的に改善すると述べています。このアプローチを、私の実務フローと組み合わせて解説します。
ステップ1：スクリーンショットを撮り、デザイン批評を書く
改善したいページのスクリーンショットを撮影し、以下の6つの問いに答える形でデザイン批評を書きます。
- このページの目的は何か: ページが達成すべきゴールを明確にする
- 最初に目に入るものは何か: 視覚的な優先順位（ヒエラルキー）が意図通りか
- 理解しやすいか: 初見のユーザーが迷わないか
- 何ができるかが明確か: CTAやアクション導線が伝わるか
- 統一感があるか: 色・フォント・余白が一貫しているか
- 最初に何を変えるか: 最も優先度の高い改善点
このプロセスの本質は、プロンプトを書く前にデザイナーとして考えることを強制する点にあります。「何を直すか」を自分で言語化してからAIに渡すことで、AIは「改善の方向性」を的確に理解できます。
ステップ2：批評をプロンプトに変換する
ステップ1で書いたデザイン批評を、AIが実装しやすい形に整理します。私の場合、批評をそのままClaude Codeに渡すのではなく、以下の構造に落とし込みます：
- 現状の問題点（批評から抽出）
- 改善の方向性（どう変えたいか）
- 具体的な参考情報（スクショ・参考コード・数値指定）
例えば、建設会社のコーポレートサイトを制作した際、「伝統的な格式と若者への親しみやすさを両立する」というコンセプトがありました。クライアントから「黒を使いすぎると硬くなりすぎる」というフィードバックを受け、「ベージュ・ゴールド・白を基調に、縦書きテキストで和の雰囲気を出しつつ、GSAPアニメーションで現代感を加える」という具体的な方向性に落とし込みました。このレベルの具体性があれば、AIは的確にデザインを実装できます。
ステップ3：スクショ付きでClaude Codeに渡し、反復する
スクリーンショットとプロンプトをClaude Codeに渡し、実装させます。ここで重要なのは、1回目の出力を最終版と見なさないことです。
1回目の出力が返ってきたら、再度スクリーンショットを撮って次のラウンドに入ります。
- 「ここの余白がまだ詰まりすぎている。padding-topを24pxから40pxに」
- 「このカードの角丸をもう少し大きく。border-radius: 16pxで」
- 「フォントの色が薄すぎる。#6b7280から#374151に変更して」
このように具体的な数値で指示する反復を2〜3回繰り返すと、デザイン品質は格段に上がります。AIにとっても「もっといい感じに」より「border-radius: 16px」の方が確実に正しく実装できます。
ツール別：デザイン作業の使い分け
デザイン関連の作業では、ツールの使い分けが品質と効率に直結します。
Claude Code（CLI / VS Code拡張）
- 得意: レイアウト構造の変更、コンポーネント設計、レスポンシブ対応、ロジックを伴うUI実装
- 使い方: スクリーンショットを貼り付け、改善点を具体的に指示。大規模なUI変更やコンポーネントの作り直しに強い
Cursor（IDE上でのデザイン微調整）
- 得意: 色・余白・フォントサイズなどの細かい調整、diffを確認しながらの微修正
- 使い方: CSSの修正をdiffで確認しながら進められるため、デザインの微調整に最適。複数モデルを切り替えて、Geminiのデザイン能力も活用可能
Gemini（デザイン特化の作業）
- 得意: UIデザインのコーディング、素材を元にしたデザイン作成、グラフィック関連全般
- 使い方: Windsurf上でGemini Proを使い、デザインの大きな方向性を決める。画像生成もGeminiが最も得意
以前はデザイン系のMCPサーバーも接続していましたが、現在は外しています。理由は、プロンプトやスキルでガイドラインを定義し、コード上でデザインを整える方がトータルの作業コストが下がると判断したからです。
デザイン品質を担保するための3つのルール
1. デザインシステムをCLAUDE.mdに定義する
色、フォント、余白、角丸などのデザイントークンをCLAUDE.mdやルールファイルに定義しておくと、AIは一貫したデザインを出力しやすくなります。
例えば私のプロジェクトでは、CSS変数ベースで--cc-accent（アクセントカラー）、--cc-text-main（メインテキスト色）などを定義し、Claude Codeがこれに準拠してデザインするよう設定しています。
2. 「自分の目で見る」を省略しない
AIの出力は必ずブラウザで実際に表示して確認する。コード上は正しく見えても、実際の表示では余白が詰まっていたり、色の印象が違ったりすることがあります。スクリーンショットで確認→フィードバック→修正のサイクルが品質を決めます。
3. AIに自己批評させる
Alex Kehr氏のワークフローで特に有効なのが、AIに自分のデザインを批評させるテクニックです。「このデザインは10点満点で何点？改善点は？」と問いかけることで、AIは自分の出力を客観的に評価し、さらに高い品質を目指して修正案を提示します。
1回目の出力を「回答」ではなく「デザイン探索の起点」として扱うことで、反復を重ねるごとに品質が向上します。
まとめ｜AIデザインの品質は「伝え方」で決まる
Claude Codeでデザイン品質を上げるためのポイントは、AIのデザイン能力を疑うことではなく、自分のイメージをどれだけ具体的に伝えられるかに集約されます。
- マルチモーダルを活用: スクショ・参考画像・コードを積極的に添付する
- 構造化デザイン批評: 6つの問いで改善点を言語化してからプロンプトを書く
- 具体的な数値で指示: 「余白を広く」ではなく「padding: 32px」
- 反復が前提: 1回で完成を求めず、2〜3回のフィードバックサイクルを回す
- ツールを使い分ける: 大きなUI変更はClaude Code、微調整はCursor、デザイン特化はGemini
AIはデザイナーを置き換えるのではなく、批評と実装の間のギャップを圧縮するツールです。あなたのデザインセンスを活かしつつ、実行スピードを劇的に上げる——それがAIデザインの本質です。
御社の業務に合わせたClaude Code導入支援
「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。