概要
https://developer.so-tech.co.jp/entry/2025/07/28/113000
詳細内容
## 人とAIの共創で進化するフロントエンド開発(Claude/Codex/v0)
https://developer.so-tech.co.jp/entry/2025/07/28/113000
SO Technologiesのテックリードは、Claude CodeやCodex、v0などのAIツールを要件定義からコーディングまで活用し、フロントエンド開発の生産性を2〜3倍に高める共創ワークフローを具体的に紹介します。
**Content Type**: ⚙️ Tools
**Scores**: Signal:4/5 | Depth:4/5 | Unique:3/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 81/100 | **Annex Potential**: 77/100 | **Overall**: 80/100
**Topics**: [[生成AI, フロントエンド開発, AI共創, 開発プロセス最適化, コーディング支援ツール]]
SO Technologiesのフロントエンドテックリードである河原氏が、フロントエンド開発全般におけるAIツールの活用事例を具体的に解説します。同氏のチームでは、生成AIの導入により生産性が2〜3倍に向上したと報告されており、AI共創開発がもたらす実際の効果を示しています。
本記事は、開発プロセスの各フェーズで最適なAIツールを使い分ける実践的なアプローチを紹介しています。要件定義の補助やライティングにはChatGPT、洗練されたUIのワイヤーフレームやデザイン作成にはVercelの「v0」を活用し、Figmaへのインポート連携も行います。また、図解生成には「Napkin AI」を使うことで、ドキュメント作成の効率化を図っています。
コーディングフェーズでは、OpenAIの「Codex」を軽微な修正やAPI定義書の更新、GitHubのPR作成に活用し、ビジュアルリグレッションテスト（VRT）との相性の良さを強調しています。中〜大規模なタスクにはAnthropicの「Claude Code」を用い、ターミナルベースで様々なIDEと連携可能である点、さらにFigma、Notion、GitHubなどと接続できる「MCPサーバー」を活用することで、デザインデータや仕様書、Issueを基にした画面実装を自動化できる点が特筆されます。これにより、AIが初期実装を行い、人間がそれをレビュー・洗練させる「AIファースト、人間が仕上げる」という共創スタイルを確立しています。
AIとの共創を成功させるためのベストプラクティスも示されており、AIが理解しやすい宣言的なライブラリ選定（Tailwind CSS、shadcn/ui）、暗黙のルールの排除、AI向けのプロジェクトガイド（CLAUDE.md等）の継続的な育成、そして静的チェックや自動テスト（特にVRT）の充実が挙げられています。
この記事は、単なるAIツールの紹介に留まらず、AI時代のエンジニアの役割変化とその重要性を示唆しています。狭義のコーディングスキルの価値が相対的に低下する一方で、要件定義、設計、レビュー、テストといった上流工程や品質保証に関するスキルの重要性が高まり、生成AIが作成したコードの最終的な品質に責任を持てるエンジニアこそが不可欠な存在となると強調されています。AI活用は従来のベストプラティクスを再確認し、生産性と品質を両立させる新たな開発スタイルを築く上で「なぜ今注目すべきか」を具体的に提示しています。