1. はじめに
こんにちは。ATOM事業部フロントエンドテックリード兼デザイナーの河原です。
私はフロントエンドの開発だけでなく、要件定義や設計、デザインも担当していますが、最近では多くの作業を生成AIに頼るようになりました。
フロントエンドの開発では、小規模なタスクであれば90%以上、中〜大規模なタスクでも40〜70%の作業をAIが担ってます。
今回は、複数のAIツールをどのように利用しているかをご紹介します。
2. ツール紹介
開発プロセスのフェーズごとに私が使っているAIツールをまとめました。
| フェーズ | 作業内容 | 利用ツール |
|---|---|---|
| 要件定義 | 要件検討の補助 | ChatGPT |
| ワイヤーフレーム作成 | v0 | |
| 設計 | デザイン作成 | v0 |
| 画像素材の作成 | ChatGPT Napkin AI | |
| API定義設計 | Codex | |
| ライティング支援 | ChatGPT | |
| リバースエンジニアリング（実装から仕様書作成） | Claude Code | |
| 実装・テスト | 小規模タスクのコーディング | Codex |
| 中〜大規模タスクのコーディング | Claude Code | |
| 細かいコーディング補助 | Github Copilot | |
| 簡易レビュー | Github Copilot |
ChatGPT
OpenAIが開発した大規模な自然言語処理AI。文章生成や文章の理解など、様々なタスクに対応。
今更、説明不要と思いますので詳細は割愛。
v0
Next.jsの開発元のVercel社が提供するAIコーディング支援ツール。 デザイン性の高いUIを生成することが可能。Figmaをインプットに指定可能。
私は主に、ワイヤーフレームやデザインの作成に利用しています。
活用例: v0でデザイン作成
例えば、ログイン画面を作成したい場合、次のようなプロンプトを入力すると。
ログイン画面を作成して - Glassmorphism - グラデーション背景（青系） - ダークテーマ
※Glassmorphismは半透明のすりガラスのような質感を表現するデザイン手法です
要望通りのスタイリッシュな画面を生成してくれます。
Magic PatternsというChrome拡張 & Figmaプラグインを使うと、Figma にデザインとしてインポートすることができます。必要に応じて手修正し完成品とします。
※Magic Patternsはv0とは直接関係ありません。任意のHTMLをFigmaにデザインとして取り込むことができます。
Napkin AI
テキストを入力するだけで、図解やグラフを生成してくれるツール。
プレゼンテーション資料などにも有用。
Codex
OpenAIが提供するエージェント型AIコーディングツール。ChatGPT のサイドバーから利用可能。 クラウドサンドボックス環境で動作し、複数のタスクを同時に処理。 開発者はブラウザからプロンプトを入力。ローカルに開発環境を用意する必要がないため、スケール（並行開発）が容易。
私は表示メッセージの変更とか、バリデーションルールの変更といった細かい修正はすべて Codex に丸投げしています。 Git 管理下のドキュメント（例: API 定義書など）の更新も任せてます。
活用例: 表示メッセージの改善
右上のボタンよりGithubのPull Request(以下、PR）の作成が可能です。 ATOMではVRT（ビジュアルリグレッションテスト）を導入しており、 PRから修正前後の画面の差分を確認することができます。VRTはAI駆動開発ととても相性が良いです。
※VRTの詳細は過去記事をご参照ください:
Cypress + reg-suitを使ったビジュアルリグレッションテスト
Claude Code
Anthropicが提供するエージェント型AIコーディングツール。
ターミナルで動作するため、あらゆるIDEと組み合わせて利用することができます。
私は中規模以上のタスクはClaude Codeにまず作成してもらい、その後自身でブラッシュアップする形で開発しています。
MCPサーバで万能に
MCPサーバーと接続することで、様々なサービスやデータソースと接続することができます。
私がフロントエンド開発で特にお世話になっているMCPはこちら。
| MCPサーバ | 説明 |
|---|---|
| Figma MCP | Figma のデザインデータにアクセス。FigmaのデザインをもとにUIを実装できるようになる。 |
| GitHub MCP | GitHubのIssueなどを参照したり、Pull Requestを作成することが可能。 |
| Notion MCP | Notionページの読み書きが可能 |
| Playwright MCP | Webページでテストさせることが可能に。テスト結果のスナップショット画像を証跡として残すことも可能。 |
MCPサーバは下記などから探すことができます。
活用例: Notionの仕様とFigmaのデザインから画面作成
要件または仕様を明記したNotionページと、デザインをFigmaに用意します。
Planモードに切り替えて、次のようなプロンプトを入力します。
ログイン画面を実装して。 OAuth関連の機能は一旦不要（後で対応）。 パス: /src/app/auth/login 仕様: https://www.notion.so/xxxx デザイン: https://www.figma.com/design/xxxx
詳細な計画を立ててくれるので、必要に応じてフィードバックをします。
満足のいく計画が作成できたら、実際に実装してもらいます。
実装が完了したら、じっくりコードレビューを行います。
必要に応じてフィードバックまたは、直接コードを修正します。
Figmaのデザイン通りかつ、Notionの仕様通りの画面が作成できました。
3. AI共創のベストプラクティス
AIと相性の良いライブラリ選定
Tailwind CSS や shadcn/ui など、構造が明示的で宣言的なライブラリは LLM が理解しやすく、生成コードの一貫性と保守性を高めます。
独自ルール、暗黙ルールを減らす
標準的な設計・記述パターンを優先し、やむを得ず独自実装を行う場合は必ずプロジェクトガイドなどに明記しましょう。 AIにとって「明文化されていない慣習」は障害になります。
プロジェクトガイドを継続的に育てる
AIツールが知っておくべき知識や守るべきルールを文書化します。
※Claude Codeの場合は「CLAUDE.md」、Codexの場合は「AGENTS.md」。
ガイドは都度追記・更新し続けることが重要です。これによりAIとの連携精度が格段に洗練されていきます。 ガイドの作成や追記もAIツールに任せると良いでしょう。
静的チェック＆自動テストの充実
AI生成コードの品質を担保するために、静的チェックや自動テストをCIに統合して運用します。 人間によるレビューやテストの工数削減に繋がります。
フロントエンドでは、特にVRT（ビジュアルリグレッションテスト）の導入をおすすめします。
※VRTの詳細は過去記事をご参照ください:
Cypress + reg-suitを使ったビジュアルリグレッションテスト
大きいタスクは分割する
大きいタスクは小さく分割し、AI へのインプットを一定のサイズに収めることで精度とレビュースピードを向上させます。
“共創”の割り切り
AIとの開発は「まずAIに任せて、人間が仕上げる」ことを前提にすることで、スピードと品質を両立できます。
4. まとめ
今回は、フロントエンド開発や要件定義、設計、デザインで利用している生成AIツールを紹介しました。 複数のAIツールを適材適所で使い分けることで、生産性が2〜3倍に向上しました。
生成AIの進化は凄まじく、エンジニアの採用にも影響が出始めています。
AnthropicのCEOアモデイ氏は
「AIによってホワイトカラーのエントリーレベルの半分が消え、今後1～5年で失業率が10～20％に急上昇する可能性がある」と恐ろしいことを言いました。
Microsoftは大量のレイオフを行い、残った社員にAIを活用するスキルを磨くよう促しました。
アメリカの失業率を見ると近年は大卒者の失業率が高まっており、AIの影響が一因と考えられてます（AI以外の要因もある）。
残念ながら、狭義の「コーディングスキル」の市場価値は低下しました。
一方で、要件定義などの設計能力、レビュー・テストといった品質保証に関わるスキルの重要性は相対的に高まり、
AIを従え高品質・高生産性を実現するエンジニアは、今後も重宝されるでしょう。
AIが生成したコードも含め、最終的な品質に責任を持てるエンジニアは不可欠な存在です。
AI時代のベストプラクティスの多くが従来からベストプラクティスだったものです。 必要なスキルがガラッと変わったわけではありません。 新しい概念を取り入れながらも、これまで培った技術もさらに研鑽していきたいと思います。
