概要
https://note.com/dev_onecareer/n/na8f9497cab15
詳細内容
## デザイナーも実装する〜FigmaMCPを活用した「デザインシステム開発」と「UI実装仕組みの導入」〜
https://note.com/dev_onecareer/n/na8f9497cab15
ONE CAREERは、FigmaMCPとAI（Claude Code）を活用し、デザイナーによるコンポーネント実装とAIを活用したUI自動生成によって、フロントエンド開発の効率と品質を劇的に向上させました。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:5/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 89/100 | **Annex Potential**: 87/100 | **Overall**: 88/100
**Topics**: [[FigmaMCP, デザインシステム, AIによるコード生成, フロントエンド開発, デザイナー・エンジニア連携]]
ワンキャリア社は、組織拡大に伴うフロントエンド開発において、類似コンポーネントの乱立、UIの一貫性の欠如、Figmaデザインと実装の乖離、そしてそれに伴う高いレビュー・コミュニケーションコストという課題に直面していました。
これらの課題を解決するため、同社はデザイナー主導のコンポーネント実装とAIを活用したUI実装の仕組みを導入しました。具体的には、以下の二つの取り組みを進めました。
第一に、実装経験のないプロダクトデザイナーが、FigmaMCPとClaude Codeを組み合わせ、Figmaのデザインデータから直接React/CSSコンポーネントコードを生成し、デザインシステムのレポジトリにコミットする仕組みを構築しました。AIへの指示出しにおいては、「FigmaMCPに接続されているか確認」→「情報取得」→「実装」という段階的なプロンプト設計や、プロンプトのドキュメント化を通じて品質の均一化を図りました。
第二に、整備されたUIライブラリをAIに認識させ、画面単位のUI実装を自動化する仕組みを構築しました。エンジニアがFigmaのリンクをClaude Codeに渡すと、AIはあらかじめ学習させたデザインシステムのドキュメントと利用規約を厳格に守りながら、画面全体のUIコードを生成します。特に重要なのは、AIが標準的なコンポーネントを勝手に再実装しないよう、「必ず整備されたUIライブラリのコンポーネントを使用すること」「色やサイズ指定には必ずデザイントークンを使用すること」といった「ガードレール」をプロンプトに厳格に組み込んだ点です。
これらの取り組みにより、開発プロセスに劇的な変化が生まれました。最も大きな成果は、筆者によると数日かかっていたフロントエンドのUI実装が約15分に短縮されたことです。エンジニアはHTML/CSSの詳細な調整から解放され、ビジネスロジックの実装やアーキテクチャの検討、コードレビューといった本質的な業務に集中できるようになりました。また、デザイナー側でコンポーネントの実装や修正を巻き取れるようになったことで、より迅速な品質確認と修正が可能になり、コミュニケーションコストが大幅に削減されたと筆者は述べています。Figmaと実装の間の「間違い探し」のような手戻りがほぼなくなり、エンジニア、デザイナー、PdMは仕様やUXといった建設的な議論に集中できるようになったと感じているとのことです。
今後は、このAIによるUI実装やデザイナーのコンポーネント実装の仕組みを他のプロダクトチームにも展開し、さらなる開発効率化を目指していく方針です。