Claude Code 時代、UI デザイナーの仕事は軽くならない — 「整える仕事」の自動化と評価軸シフト

アオキタカユキ氏（@dorisukeone）が「やれることがどんどん拡張していく」とコメントを添えて、自身の note 記事を紹介しています。

Claude Code時代、UIデザイナーの仕事は軽くならない

タイトルだけ見ると逆説的ですが、主張はシンプルです。AI が「整える仕事」を代替するぶん、デザイナーにはもっと上流の思考が求められるようになる。仕事は減るのではなく、質が変わるというのが記事の核心です。

「整える仕事」とは何か

アオキ氏が自動化されると指摘する「整える仕事」は、UI デザイナーの日常業務の大部分を占めてきた作業です。

整える仕事具体例
デザインシステム準拠コンポーネントの使い分け、間隔・サイズの統一
ブランドトーン維持カラー、タイポグラフィ、トーン&マナーの一貫性
アクセシビリティ対応コントラスト比、フォーカス順序、ARIA ラベル
制作スピード仕様に沿った画面を短時間で量産する能力

これらは再現性が高く、ルールが明文化されているため、AI による自動化と相性が良い領域です。Claude Code は CLAUDE.md にデザインシステムの仕様を記述しておくだけで、コンポーネント選定からアクセシビリティ対応まで一貫して処理できます。

なぜ「軽くならない」のか

「整える仕事」が自動化されるなら、仕事は楽になるはずです。しかしアオキ氏の指摘は、評価軸そのものがシフトするという点にあります。

従来の UI デザイナーの評価は「速く、整った画面を作れること」でした。これが AI で代替可能になると、その能力では差がつかなくなる。代わりに求められるのは「思考のズレを言語化する力」、つまり以下のような上流工程のスキルです。

  • 問題定義: 「何を作るか」の前に「なぜ作るのか」を問う力
  • 意思決定の言語化: 「このボタンを右に置く」ではなく「なぜ右なのか」を説明する力
  • ビジネスゴールとの接続: UI の判断をプロダクト戦略に紐づける力

仕事が軽くなるのではなく、より認知負荷の高い仕事にシフトする。だから「軽くならない」のです。

Claude Code × Figma が実現した双方向ワークフロー

この評価軸シフトを加速させているのが、2026年2月に発表された Code to Canvas です。Figma と Anthropic が共同で開発したこの機能は、Claude Code で生成したコードを編集可能な Figma フレームとして取り込めます。

従来のワークフロー

デザイナーが Figma で設計
    ↓
エンジニアがコードに変換
    ↓
デザイナーが実装を確認
    ↓
「ここ違う」→ 修正依頼の往復

Code to Canvas 後のワークフロー

エンジニアが Claude Code で UI プロトタイプを生成
    ↓
「Send this to Figma」で即座に Figma に転送
    ↓
デザイナーが Figma 上で直接編集・フィードバック
    ↓
変更を Claude Code に反映

逆方向も可能です。Figma MCP サーバーを使えば、Figma のデザイントークン、コンポーネント構造、Auto Layout ルールを Claude Code が直接読み取り、デザインシステムに準拠したコードを自動生成します。

これにより「デザイン → コード」と「コード → デザイン」の双方向ワークフローが成立しました。

セットアップ

1
2

# Figma MCP サーバーを Claude Code に追加
claude mcp add --transport http figma https://mcp.figma.com/mcp

リモート MCP サーバーを使うため、Figma デスクトップアプリは不要で、無料プランでも基本機能が利用可能です。

バイブデザイン — デザイナーが「作らずに作る」時代

Code to Canvas と並行して広がっているのが バイブデザイン（Vibe Design）という手法です。バイブコーディングのデザイン版で、自然言語で AI エージェントに指示しながら UI を構築します。

坪田朋氏は「Claude Code で『バイブデザイン』を始めよう」という記事で、以下の変化を報告しています。

  • デザイナーの守備範囲が拡大: KPI ツリーからデザイン要件を導出、ユーザーインタビューからペルソナ生成まで一気通貫で実行可能に
  • プロダクトマネジメント領域への進出: プロジェクト方針の策定からプロトタイプまでデザイナー 1 人でカバー
  • 1 時間でページデザイン: 記事詳細ページを Claude Code とのバイブデザインで 1 時間で完成

この「守備範囲の拡大」こそが、アオキ氏の言う「仕事は軽くならない」の実態です。「整える仕事」が自動化されたぶん、考える仕事の守備範囲が広がっているのです。

上流・下流で見る「何が残り、何が消えるか」

UI デザインの工程を上流と下流に分けると、AI による代替可能性が明確になります。

下流（自動化される領域）

工程AI の対応
UI コンポーネント配置Claude Code がデザインシステムに準拠して自動生成
画面遷移パターン一般的なフローは AI が提案
プロトタイプ作成バイブデザインで自然言語から生成
デザイン一貫性チェックAI Consistency Checker で自動検出
ドキュメント整備JSDoc、Storybook 解説文の自動生成

上流（人間が担い続ける領域）

工程なぜ AI に代替されにくいか
問題定義ビジネスコンテキストの理解が必要
ユーザーリサーチの解釈データから「何が重要か」の判断は文脈依存
意思決定のフレーミングステークホルダー間の「思考のズレ」を調整する対人スキル
デザイン原則の策定組織の価値観を反映した判断基準の設計
「なぜこの UI か」の説明論理的ストーリーテリングと政治的判断の両立

2026年の note 記事では「UX デザイナーの半分が代替可能になる」という予測も出ています。ただし代替されるのは下流工程に特化したジュニア〜ミドル層であり、上流工程を担える人材の需要はむしろ増加しています。

デザイナーが今すぐ始められること

1. Claude Code × CLAUDE.md でデザインシステムを自動適用

プロジェクトの CLAUDE.md にデザインシステムの仕様を記述しておけば、Claude Code が毎回のコード生成でそれを参照します。

1
2
3
4
5

# デザインシステム
- カラー: Primary #1A73E8, Secondary #5F6368
- フォント: Noto Sans JP, 本文 16px/1.75
- 間隔: 8px グリッド（8, 16, 24, 32, 48）
- コンポーネント: shadcn/ui ベース

2. Figma MCP で双方向フィードバックを実践

Code to Canvas を使って、AI 生成のプロトタイプを Figma に取り込み、レイヤー単位で編集してフィードバックするワークフローを構築します。

3. 「なぜ」を説明する習慣をつける

UI レビューの場で「ここを右に」ではなく「ユーザーの視線導線を考えると、CTA は右配置が適切。理由は F パターンの終着点に合致するから」と説明する。この意思決定の言語化が、AI 時代のデザイナーの最大の差別化要因です。

4. 守備範囲を上流に広げる

バイブデザインの実践を通じて、KPI ツリーの策定、ユーザーインタビューの設計、プロダクト戦略への提言まで「デザイナーの仕事」として引き受ける。「整える仕事」を手放すぶん、「決める仕事」を獲得するのが生存戦略です。

まとめ

  • 「整える仕事」は自動化される: デザインシステム準拠、ブランドトーン維持、アクセシビリティ対応といったルールベースの作業は Claude Code が高精度で処理できます
  • 評価軸が「速さ」から「思考力」にシフトする: 制作スピードで差がつかなくなり、「なぜその UI か」を言語化する能力が新たな評価基準になります
  • Code to Canvas で双方向ワークフローが成立: Figma MCP により「デザイン → コード」と「コード → デザイン」の両方向が AI で接続され、デザイナーとエンジニアの境界が溶けつつあります
  • バイブデザインでデザイナーの守備範囲が拡大: 自然言語で UI を構築できるようになり、KPI 策定からプロトタイプまで一気通貫で実行可能になっています
  • 下流は代替、上流は需要増: ジュニア〜ミドル層の「画面を作る」仕事は AI に代替されますが、問題定義・意思決定・ステークホルダー調整などの上流スキルの需要はむしろ増加しています
  • 生存戦略は「整える」から「決める」への移行: 「整える仕事」を手放し、「決める仕事」を獲得することが、AI 時代の UI デザイナーの最大の差別化です

参考