hdknr blog
戻る

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

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

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

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

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

「整える仕事」とは何か

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

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

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

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

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

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

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

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 が直接読み取り、デザインシステムに準拠したコードを自動生成します。

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

セットアップ

# 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 で『バイブデザイン』を始めよう」という記事で、以下の変化を報告しています。

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

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

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 が毎回のコード生成でそれを参照します。

# デザインシステム
- カラー: 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 ツリーの策定、ユーザーインタビューの設計、プロダクト戦略への提言まで「デザイナーの仕事」として引き受ける。「整える仕事」を手放すぶん、「決める仕事」を獲得するのが生存戦略です。

まとめ

参考

前の記事
GitNexus × ゼロサーバーコード知能 --- ナレッジグラフで影響範囲を可視化する新しいコードリーディング
次の記事
NotebookLM 2026年完全ガイド — 9つのStudio機能とハルシネーションを構造的に防ぐ設計