概要
https://zenn.dev/aishift/articles/3e211e67e3dc14
詳細内容
## Figmaやめて、AIとコードでUIを作り始めた話
https://zenn.dev/aishift/articles/3e211e67e3dc14
Figmaを用いた手作業のUIデザインを廃止し、Claude Code等のAIを活用してコードで直接UIを構築することで、デザインと実装の境界を解消し、デザイナーがUXリサーチや戦略立案に集中できるワークフローを構築する。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:5/5 | Depth:4/5 | Unique:4/5 | Practical:4/5 | Anti-Hype:4/5
**Main Journal**: 83/100 | **Annex Potential**: 83/100 | **Overall**: 84/100
**Topics**: [[UI/UXデザイン, Claude Code, プロンプトエンジニアリング, 開発プロセス効率化, コード生成AI]]
AI ShiftのUI/UXデザイナーである著者が、AIによる開発速度の向上に伴いデザイナーがチームのボトルネックとなった課題を解決するため、Figmaによる手作業のUIデザインを一時停止し、AI（Claude CodeやCursor）とコードを用いてUIを直接構築する試みについて報告しています。筆者は、従来のデザイン（Figma）と実装（コード）の分断が、フロントエンド実装の工数を削減できない根本的な構造問題であると指摘。これらを統合することで「形にする」コストを最小化し、デザイナーの時間を「考える（UXリサーチや価値探索）」という高付加価値なタスクに全振りできる体制を目指しています。
具体的な手法として、著者はAIに丸投げするのではなく、AIと人間が迷わないための「地図」となるドキュメント構造（`docs/`以下への集約）を定義しています。これには、UXリサーチに基づく価値マップやペルソナ、UX原則を「北極星」として共有し、TypeScriptの型定義まで明記した詳細なプロンプトテンプレート、Storybookを活用したコンポーネント生成フローが含まれます。このワークフローへの移行により、UIを手作業で作る時間はほぼゼロになり、多様なパターンのUIを検証する試行錯誤（トライアンドエラー）の回数が劇的に増加したと述べています。
一方で、AI活用における失敗談と課題も詳述されています。AI（特にコーディングエージェント）が設計の議論をスキップして即座に実装を始めてしまう特性や、ユーザーの前後関係（ジャーニー）を無視した局所的な画面設計に陥りやすい点などが挙げられています。筆者は、AIは「局所最適」に強いものの、プロダクト全体の整合性を保つ「全体最適」は人間が担保すべき役割であると、AIとの協働における役割分担を定義しています。
著者は、この取り組みの核心を単なるツールの変更ではなく「デザインと実装の境界をなくしたこと」にあると主張しています。UIデザインが「議論の題材」として機能すれば、必ずしもFigmaである必要はなく、AIを増幅器として活用することで、デザイナーが本来注力すべき課題解決や価値探索に専念できる可能性を示唆しています。本記事は、デザインツール依存からの脱却と、AI時代のエンジニアリングに近いデザイナーの職能変化を具体的に示す実践的なドキュメントとなっています。