Claude CodeでUI/UXをデザインする：アイデアからインターフェースまでの実践ワークフロー（2026年）

Claude Codeは本当にUI/UXをデザインできるのか？

はい。ただし、まずツールを理解する必要があります。Claude Codeはターミナル上で動作するエージェント型CLIです。リポジトリを読み取り、インターフェースコードを直接書き（React、Next.js、Tailwind、shadcn/ui）、モックアップを描いてそのまま放置するのではなく、すぐに実行できるものを生成します。これが、英語圏の検索結果の多くが実際に語っているWebベースの「Claude Design」体験との最大の違いです。

簡単に言えば、Claude CodeはUI/UXをデザインする際に「アイデアから動くコードへ」というアプローチを取り、一方でClaude Design（Web版）はワイヤーフレーム → ビジュアルモックアップに寄っています。実際のReact/Nextプロジェクトに取り組む開発者であれば、出力がGit、テスト、ビルドとともにコードベースに直接届くため、Claude Codeが正しい選択です。

正直に注意点をお伝えします。デフォルトでは、Claude Codeが生成するUIは「無難」すぎて退屈になりがちです。均一なレイアウト、紫のグラデーション、Interフォント、まったく同じ角丸のフィーチャーカードなどです。モデルが見栄えの良いものを作れないわけではなく、審美的な制約が欠けているのです。この記事の残りの部分では、品質をプロダクションレベルまで引き上げるために、そうした制約をどう与えるかを説明します。

なぜClaude CodeのUIは「ありきたり」に仕上がるのか？

原因を理解すれば、正しい部分を修正できます。ありきたりなUIは、モデルが「審美的に苦手」なのではなく、入力が欠けている結果です。

• デザインシステムがない。単に「ランディングページを作って」と言うだけでは、モデルにはパレットもスペーシングスケールもフォントの組み合わせもありません。そのため、学習データで最も多く見てきた最も無難なデフォルト、つまりInter、紫／青のグラデーション、柔らかいシャドウを選びます。
• ビジュアルリファレンスがない。Claude Codeは主にテキストで動作します。リファレンス（モックアップや好みのサイトのスクリーンショット）を「見る」機会が一度もなければ、目指すべき審美的な目標がありません。
• コンポーネントの制約がない。方向性がなければ、適切なライブラリを使わず自前でボタン／入力／カードを手作りしてしまい、一貫性の欠如とアクセシビリティの弱さにつながります。
• フィードバックループがない。コードを一度書いて止まってしまい、レンダリング結果を見て自ら修正することがありません。

良い知らせは、4つの原因すべてが具体的なステップで解決できることです。だからこそ、この記事は1つの「魔法の」プロンプトではなく、プロセスに焦点を当てています。

始める前に：必要なもの

途中で止まらずに済むよう、まず環境を整えましょう。

• Claude Codeをインストールしてログイン済みであること（まだの場合はClaude Codeのインストール方法を参照）。
• Node.js（npx経由で動作するMCPサーバー用）と、すでに初期化済みのReact/Next.js + Tailwindプロジェクト。
• MCPサーバー（shadcn、Playwright）を接続するためのアカウント／キー。概念についてはMCPとはを参照。

使用する3つのツールグループ：

Claude CodeでUI/UXをデザインする6ステップのワークフロー

これは私が何度も繰り返し使っているプロセスです。各ステップには明確なゴール、具体的なコマンドやプロンプト、そして目にするはずの結果があります。最初からすべてをやる必要はありませんが、ステップを飛ばすと、まさにその箇所でUIが「ありきたり」になります。

ステップ1 - 適切なデザインシステムを生成する（デザインインテリジェンススキル）

これは最も効果の大きいステップです。モデルにパレットやフォントを推測させる代わりに、デザインインテリジェンススキルを使ってデザインシステム全体を一度に生成します。カラーパレット、フォントの組み合わせ、スペーシングスケール、ボーダー半径、そして正確な製品タイプ（SaaSダッシュボード、ランディングページ、eコマースなど）に合わせたUXガイドラインです。

ak-ui-ux-pro-maxのようなスキルは、大規模なリファレンスライブラリ（50以上のスタイル、161のパレット、57のフォントの組み合わせ、161の製品タイプ、99のUXガイドライン、25のチャートタイプ、10のスタック）と照合します。そのため、「きれいそうなものを推測する」のではなく、検証済みの組み合わせを選びます。製品を説明すれば、Tailwind設定にそのまま組み込めるトークンとしてデザインシステムが返ってきます。

# In Claude Code, describe the product so the skill generates a design system
Use the ui-ux design-intelligence skill: generate a design system for a
SaaS task-management landing page, professional yet modern tone, audience
is developers. Return a palette (with hex codes), one font pairing
(heading/body), a spacing scale, radius, and 5 core UX guidelines.
Output it as tokens.

期待される結果：（「柔らかい青」ではなく）tailwind.configにそのままコピペできる具体的なトークンの表です。これ以降、すべてのコンポーネントが同じ単一のソースを参照します。

ステップ2 - 審美的なルールをCLAUDE.mdに書き込む

デザインシステムは、Claude Codeがすべてのセッションでそれに従って初めて役立ちます。最も長続きする方法は、ルールをリポジトリルートのCLAUDE.mdファイルにハードコードすることです。このファイルは、作業のたびに自動的にコンテキストへ読み込まれます（詳しくはCLAUDE.mdガイドを参照）。

# CLAUDE.md - Design rules (UI/UX)

## Aesthetics (must follow)
- DO NOT use the Inter or Roboto font. Use the font pairing in the design tokens.
- DO NOT use default purple/blue gradients. Only use colors from the palette tokens.
- Every spacing/color/radius must reference tokens - no loose hardcoded values.
- UI components must use shadcn/ui - do not hand-roll button/input/card.
- Minimum contrast 4.5:1; every interactive element has a visible focus ring.
- Minimum touch target 44x44px; no horizontal scroll on mobile.

これは最も重要なガードレールです。審美的な判断を、緩やかな提案ではなく厳格な制約に変えます。Claude Codeが「手軽に」Interに手を伸ばそうとするたびに、このルールが引き戻します。

ステップ3 - MCP経由でコンポーネントライブラリを接続する（shadcn/ui）

Claude Codeに自前のものを書き直させるのではなく適切なコンポーネントを組み立てさせるには、shadcnをMCP経由で接続します。shadcn/uiのコンポーネントはすでにアクセシビリティに対応しており（内部はRadix）、スタイルも一貫しています。

claude mcp add shadcn -- npx -y shadcn@latest mcp

接続が済んだら、「shadcnを使ってログインフォームを追加して」といった具合に依頼します。すると、Claude Codeが適切なコンポーネント（button、input、dialog）を取り込み、ステップ1のトークンに沿って組み立てます。その結果、手作りのコンポーネントが減り、アクセシビリティのバグが減り、目に見えて一貫性のあるUIになります。

ステップ4 - Claude Codeにビジュアルリファレンスを与える

モデルは目指すべき目標があると、はるかに優れたUI作業をします。画面をコーディングするよう指示する前に、ビジュアルリファレンスを渡しましょう。モックアップ画像、好みのページのスクリーンショット、既存のコンポーネントなどです。

効果的なやり方：リファレンス画像をセッションに貼り付け、借りたい要素を正確に説明します。たとえば「この画像のヒーローのレイアウトとスペーシングのリズムに従い、ただしパレットとフォントはトークンのものを使って」といった具合です。具体的であるほど（「ゆったりした余白」「タイポグラフィを主役に」「大胆なCTA」など）、結果はありきたりでなくなります。単に「見栄え良くして」と言うのではなく、どんな良さなのかを指し示しましょう。

ステップ5 - スクリーンショット → 比較 → 改善のループ（Playwright MCP）

これは、このガイドを他と一線を画すステップです。自分で画面のスクリーンショットを撮って欠点を説明する代わりに、Playwright MCPを使ってClaude Code自身に結果を「見せ」ます。レンダリングされたページを開き、スクリーンショットを撮り、リファレンスと比較し、コードを修正します。これを少なくとも2回繰り返します。

claude mcp add playwright -- npx -y @playwright/mcp@latest

ループのプロンプト：

Use Playwright MCP: open http://localhost:3000 and screenshot the hero
screen. Compare it to the reference on spacing, hierarchy, and contrast.
List the 3 biggest gaps, fix the code, screenshot again, and loop until
it matches the reference. Keep the constraints in CLAUDE.md.

各パスで、モデルは「自分がコーディングしたもの」と「到達すべきもの」との差を見るため、最初の一発で止まるのではなく品質が上がっていきます。これは、テキスト優先のツールが持つ視覚的な弱点を補う、最も近い方法です。

ステップ6 - デザイントークンを固定し、アクセシビリティを確認する

UIに満足したら、後のセッションで「ぶれない」よう固定します。デザイントークンを単一のソースファイル（たとえばtokens.cssやtailwind.config内のブロック）にエクスポートし、これが信頼できる唯一の情報源であることをCLAUDE.mdに明記します。新しい画面はすべてこれを参照しなければならず、ばらばらの値は使いません。

その直後に、簡単なアクセシビリティチェックを実行します（詳細は下のセクション）。コントラスト4.5:1、視認できるフォーカスリング、44px以上のタッチターゲット、横スクロールなし、そしてprefers-reduced-motionへの配慮です。トークンを固定し、アクセシビリティを確認することで、「たまたま見栄えの良いビルド」が再現可能なシステムになります。

実例：1つのランディングページを作る、ビフォー／アフター

具体的にするために、SaaSタスク管理ツール（開発者向け）のランディングページを例に挙げます。プロセスは上記の6ステップを正確に踏襲します。

v1のビルド（制約なし）：Claude Codeは典型的な「ありきたり」な見た目を返しました。中央寄せのヒーロー、Interフォント、CTAボタンの紫のグラデーション、まったく同じ角丸の3つのフィーチャーカードです。動作はしましたが、一目で「AIが作った」と分かるものでした。

ステップ1〜5を適用した後：デザインシステムは、より個性のあるフォントの組み合わせ（見出しにセリフ、本文にサンセリフ）、1色の暖かなアクセントカラーを持つニュートラルなパレット、より広いスペーシング、グラデーションではなく単色のCTAへと変わりました。Playwrightのループを3回回した後、階層がより明確になり、フィーチャーカードは繰り返しではなく異なるリズムを持つようになりました。

限界について正直に言います。Claude Codeはレイアウト、体系的なスペーシング、コンポーネントの組み立てを非常にうまくこなします。私がいまだに手作業で直すのは、マイクロインタラクション（アニメーションのタイミング、イージング）と、テキストのルールでは完全に伝えきれない一部の「センス」に関する判断です。言い換えれば、全体の80%はこなしてくれますが、最後の20%はまだ人間の目が必要です。フロントエンドの構築をさらに深く知りたい場合は、Claude CodeでReactフロントエンドを構築するをお読みください。

アクセシビリティとレスポンシブ対応を確認する（省略しないこと）

ほとんどのガイドは「見栄え」ばかりを語り、アクセシビリティを飛ばしてしまいます。これは残念なことです。というのも、コードで検証できるClaude Codeがまさに大いに役立つ場面だからです。完了とする前に、次のチェックリストを実行しましょう。

• コントラスト4.5:1以上を通常テキストに（大きいテキストは3:1）。WCAG 2.1 AAに準拠。
• フォーカスの可視化：キーボードでタブ移動したとき、すべてのインタラクティブ要素（リンク、ボタン、入力）に明確なフォーカスリングが表示される。
• タッチターゲット44x44px以上をモバイルで確保し、タップを外さないようにする。
• 横スクロールなしを主要なブレークポイント（360px、768px、1024px）で。
• prefers-reduced-motionを尊重：動きに敏感なユーザーのために、アニメーションをオフにするか減らす。
• セマンティックHTML + alt：正しい見出しレベル、alt付き画像、ラベル付きフォーム。

そのまま任せることもできます。「ページ全体をCLAUDE.mdのアクセシビリティチェックリストに照らして監査し、違反をコード行とともにリストアップして修正して」といった具合です。これはルールベースの作業なので、Claude Codeは速く、ミスも少なくこなします。

UI/UXデザインにおけるClaude Codeの本当の限界

適切な期待値を持つために、ほとんどのガイドが避けている部分をお伝えします。

• 複雑な視覚的推論はまだ弱い。スクリーンショットをそれなりにうまく「読み取り」ますが、視覚的なバランスやレイアウトのリズムに関する微妙な判断は、まだデザイナーのレベルには達していません。
• ピクセルパーフェクトではない。Figmaとのピクセル単位の一致は期待しないでください。正確な設計図ではなく、デザインの精神に従います。
• テキストのルールは画像の代わりにはならない。「プレミアム」を言葉で説明することはできますが、ビジュアルリファレンスの方が常にはるかに効果的です。
• 繊細なマイクロインタラクションとアニメーション。タイミング、イージング、滑らかなトランジション。この部分は通常、手作業での調整が必要です。
• 依然として人間のレビューが必要。大幅にスピードアップしてくれますが、最終的な審美的判断と感情的な体験は、やはりあなたのものです。

それでも本物のデザイナーが必要になるのはいつでしょうか。新しいブランドアイデンティティをゼロから構築するときや、複雑なマルチプロダクトのデザインシステムが必要なときです。Claude Codeは「速く一貫した作り手の腕」であって、デザイン思考の代わりではありません。

スピードアップ：AgentKitの既製UI/UXスキル

ステップ1（デザインシステムの生成）は、スキルを自分で作る場合、最も手間のかかる部分です。ここで既製スキルが大幅に時間を節約してくれます。ak-ui-ux-pro-maxは、161のパレット、57のフォントの組み合わせ、99のUXガイドライン、25のチャートタイプ、10のスタックを備えたフルバージョンで、AgentKitに付属しています。UIの作業をするとき、Claude Codeがこのスキルを自動的に呼び出すため、プロジェクトごとにデザインルールをゼロから書き直す必要はありません。

混同を避けるために一言。ここでのAgentKitはClaude Code向けのキット（agentkit.best、ak CLIを使用）であり、OpenAIのAgentKit（Agent Builder／ChatKit）とは別物です。開発キットそのものが気になる方は、Engineer Kitの中身をご覧ください。Engineer Kitは現在$99（サイトに継続課金の記載はありません）で、ページの情報によれば「返金保証」と「生涯アップデート」が付いています。

デザインシステムを手作業で構築するのを省きたいですか？ AgentKitのUI/UXスキルセットにはak-ui-ux-pro-maxが付属しており、Claude Codeが最初から堅実なパレット、フォント、UXガイドラインを手に入れられます。

よくある質問（FAQ）

Claude CodeはClaude Design（Web版）とどう違うのか？

Claude Codeはターミナル上で動作するエージェント型CLIで、UIコードをリポジトリに直接書き込み、そこですぐに実行できます。Claude Design（Web版）はブラウザ内でのワイヤーフレーム → ビジュアルモックアップに寄っています。実際のReact/Nextプロジェクトを構築しているなら、出力がコードベース内に存在するClaude Codeの方が適しています。

Claude Codeが生成するUIは「プロダクション」品質になり得るか？

はい、フルワークフローを適用すればなり得ます。デザインシステム + CLAUDE.mdの制約 + 適切なコンポーネント（shadcn）+ 改善ループ + アクセシビリティチェックです。これらのステップを飛ばすと、UIは簡単にありきたりになります。マイクロインタラクションや繊細な審美性は、やはり手作業でレビューすべきです。

Figmaを知っている必要はあるか？

必須ではありません。テキストによる説明と1枚のリファレンス画像だけで、すべての作業を進められます。ただし、Figmaのモックアップがあれば、それをビジュアルリファレンスとして使うことで、Claude Codeがより上手に審美性に従えるようになります。

有料スキルは必要か？

必ずしも必要ではありません。デザインルールは無料でCLAUDE.mdに書き込めます。ak-ui-ux-pro-maxのような既製スキルは、デザインシステムの構築を省けるだけです。多くのプロジェクトにまたがって作業し一貫性を求める場合には便利ですが、必須ではありません。

UIデザインにはどのMCPサーバーを接続すべきか？

最も価値のある2つ：shadcn MCP（適切でアクセシブルなコンポーネントを組み立てるため）と、Playwright MCP（Claude CodeがレンダリングされたUIのスクリーンショットを撮り、リファレンスと比較し、ループで改善できるようにするため）です。

UIをありきたりでなくするには？

制約を与えることです。CLAUDE.mdでデフォルトのフォントや色を禁止し、具体的なビジュアルリファレンスを与え、モデルに推測させる代わりに独自のデザインシステムを使い、スクリーンショット → 比較 → 修正のループを少なくとも2回回します。

まとめ + 次のステップ

要するに、Claude Codeは十分な制約を与えれば、UI/UXをうまくデザインします。デザインシステムを生成し、審美的なルールをCLAUDE.mdに固定し、shadcn + PlaywrightをMCP経由で接続し、ビジュアルリファレンスを与え、改善ループを回し、最後にトークンを固定してアクセシビリティを確認します。ピクセルパーフェクトは期待せず、速く一貫した作り手の腕として使い、センスに関する判断は自分のために残しておきましょう。

次のステップ：インターフェースコードをさらに深く知るためにClaude CodeでReactフロントエンドを構築するをお読みください。そして、デザインシステムを手作業で構築するのを省きたい場合は、AgentKitに付属するak-ui-ux-pro-maxスキルを検討してみてください（下のボックスを参照）。