掲載済み (2026-05-23号)
158 156文字 • 1分

気付けば、Figmaで画面を作らなくなっていた。デザイナーがバイブコーディングでプロトタイプを作った話

日本語

掲載情報

概要

Figmaでの画面制作から脱却し、Claude Codeを用いた「バイブコーディング」により、高機能なプロトタイプを爆速で構築・検証したデザイナーの実践記録。

詳細内容

Figmaによる「紙芝居的」なプロトタイプ制作の限界を打破するため、AIツール「Claude Code」を用いたコードベースのプロトタイピングへ転換した事例の紹介です。著者はFigmaで画面を量産する代わりに、デザインシステムから抽出したCSSやSVG情報をAIに与えることで、現実のアプリに近い動的なプロトタイプ(カメラ連動、検索フィルタ、状態保持など)を数日で構築。この手法により、制作スピードが従来の半分以下に短縮されただけでなく、ユーザー検証の現場でリアルタイムに改善を反映できるなど、デザインプロセスの質が劇的に向上しました。デザイナーの役割が「描く」ことから「AIとの対話で意図を形にする」ことへ進化しつつある現状を、具体的な手法(DESIGN.mdの活用や自作配信ツールなど)を交えて解説しています。