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がこれに準拠してデザインするよう設定しています。
Xのエンジニア界隈で話題になっているDESIGN.mdも本質は同じです。ファイル名がCLAUDE.mdでもDESIGN.mdでも、プロンプトで毎回デザインを指示するのではなく、ガイドラインを一度定義してAIに準拠させるアプローチが肝心です。
2. 「自分の目で見る」を省略しない
AIの出力は必ずブラウザで実際に表示して確認する。コード上は正しく見えても、実際の表示では余白が詰まっていたり、色の印象が違ったりすることがあります。スクリーンショットで確認→フィードバック→修正のサイクルが品質を決めます。
3. AIに自己批評させる
Alex Kehr氏のワークフローで特に有効なのが、AIに自分のデザインを批評させるテクニックです。「このデザインは10点満点で何点？改善点は？」と問いかけることで、AIは自分の出力を客観的に評価し、さらに高い品質を目指して修正案を提示します。
1回目の出力を「回答」ではなく「デザイン探索の起点」として扱うことで、反復を重ねるごとに品質が向上します。
コンセプトから逆算する｜全デザイン判断に「なぜ」を持つ
プロのデザインとアマチュアのデザインの最大の違いは、個々のデザイン要素に「なぜそうしたか」の理由があるかどうかです。色・フォント・余白・アニメーション——全てがコンセプトから逆算されている状態が、プロ品質のデザインです。
AIに「おしゃれにして」と頼んでも、コンセプトがないので「なんとなくおしゃれっぽい」止まりで終わります。「このサイトのコンセプトは〇〇で、ターゲットは〇〇だから、〇〇な雰囲気にしたい」と伝えれば、AIの出力は一貫性を持ったものになります。
コンセプトを固めるために、最低限以下の3点を最初にAIに渡すことをおすすめします。
- ターゲット: 誰に向けたデザインか（年齢層、業種、ITリテラシーなど）
- キーワード3つ: デザインの方向性を表す言葉（例：信頼感／親しみ／先進性）
- NGイメージ: 避けたい雰囲気（例：堅すぎない／安っぽくない／古臭くない）
前述の建設会社のコーポレートサイトでも、この3点が最初に決まっていたからこそ、色の議論で迷った時に「伝統のゴールド × 若者向けのベージュ」という判断に辿り着けました。個別判断に迷ったら「コンセプトに照らして合っているか？」という一文をAIに投げるだけで、出力の質が変わります。
AIデザインの典型的なワークフロー
私が普段行っているAIデザインの作業フローを、工程ごとに時間目安付きで整理します。デザインツール（FigmaやPhotoshop）を使わず、コード上で全てのデザイン調整を行う前提です。
- コンセプト定義：ターゲット・キーワード3つ・NGイメージを決める（5〜10分）
- ガイドライン作成：カラー・フォント・余白のルールをCLAUDE.mdやrules/に記述（15〜30分）
- 参考サイト収集：再現したい雰囲気のサイトを2〜3つスクショで保存（10分）
- 大枠のデザイン生成：Geminiに参考画像＋コンセプト＋ガイドラインを渡してHTMLを生成（30分〜1時間）
- 細部の調整：Claude Codeでスクショを貼りながら、数値指定で微調整（1〜2時間）
- レスポンシブ対応：モバイル表示のスクショを確認しながら修正（30分〜1時間）
このフローで、1ページあたり3〜5時間でプロ品質のUIが完成します。重要なのは、各工程で具体的な成果物（コンセプトメモ・ガイドラインmd・参考画像・スクショ）が次の工程の入力になっている点です。抽象的な「いい感じにしたい」がどこにも存在しません。
よくある失敗パターンと対策
最後に、AIデザインで陥りがちな失敗と対策をまとめます。
失敗1：一度の指示で完璧を求める
AIデザインは「一発で完成」ではなく、反復的な改善プロセスです。最初の出力が70点でも、スクショを貼って「ここをこう修正して」を3〜4回繰り返せば90点以上に仕上がります。1回で完璧を求めると挫折します。
失敗2：テキストだけで指示する
「もう少し余白を」「色をいい感じに」——テキストだけの曖昧な指示はAIにとって最も難しい入力です。必ずスクショを添えて、視覚的に「ここ」と指し示してください。言葉で10行書くより、スクショ1枚＋1行の指示の方が正確に伝わります。
失敗3：デザインガイドラインなしで複数ページを作る
ガイドラインなしで複数ページを作ると、ページごとに色・フォント・余白がバラバラになります。2ページ以上のサイトを作る場合は、必ずCLAUDE.md（またはDESIGN.md）にガイドラインを定義してから作業を始めてください。
失敗4：1つのツールで全てをやろうとする
Claude Codeは万能ですが、画像生成やゼロからのUIデザインではGeminiに軍配が上がる場面があります。ツールの得意分野を把握して使い分けることで、トータルの品質と効率が最大化されます。
まとめ｜AIデザインの品質は「伝え方」で決まる
Claude Codeでデザイン品質を上げるためのポイントは、AIのデザイン能力を疑うことではなく、自分のイメージをどれだけ具体的に伝えられるかに集約されます。
- マルチモーダルを活用: スクショ・参考画像・コードを積極的に添付する
- 構造化デザイン批評: 6つの問いで改善点を言語化してからプロンプトを書く
- 具体的な数値で指示: 「余白を広く」ではなく「padding: 32px」
- コンセプトから逆算: ターゲット・キーワード3つ・NGイメージを最初に決める
- 反復が前提: 1回で完成を求めず、2〜3回のフィードバックサイクルを回す
- ツールを使い分ける: 大きなUI変更はClaude Code、微調整はCursor、デザイン特化はGemini
AIはデザイナーを置き換えるのではなく、批評と実装の間のギャップを圧縮するツールです。あなたのデザインセンスを活かしつつ、実行スピードを劇的に上げる——それがAIデザインの本質です。
「Claude Code を自分で使いこなしたい」「自社の業務に組み込みたい」
── そんな方は、まず初回無料相談でお話ししてみませんか。
御社の業務に合わせたClaude Code導入支援
「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。