フロントエンド開発にAIを“仕組みで”組み込む方法

本資料は、AIが当たり前に開発現場へ入り始めた2025年現在、
フロントエンド開発にAIをどのように組み込み、継続的に成果を出すか をまとめたものです。

- AIは魔法ではない
- 得意な領域と不得意な領域が明確にある
- “仕組み”でAIの成果を安定させるべき

という前提に立ち、以下を中心に紹介します。

- AIに向いている作業／向かない作業の切り分け
- UIとロジックの責務分離によるAI活用の安定化
- カスタムHookやClaude.mdを用いた運用の型化
- 仕様検討段階からプロトタイプ生成にAIを活かす方法
- Biz／デザイナー／エンジニアの共通言語としてのAI

「使える時は使う」ではなく
“再現性をもってAIを活かす”ための実践知 をスライドにまとめています。

Transcript

1. どろんこになった結果、フロントエン ド開発でAIをどう活かしているか PeopleX / 芹澤和也
2. ⾃⼰紹介 株式会社 PeopleX PeopleX AI⾯接 エンジニア Goodpatchをはじめ複数のスタートアップ企業でモバイルアプリや SaaSプロダクトの開発に従事。 2024年よりPeopleXでAIプロダクトのフロントエンドリード。 @2025 PeopleX Inc. 芹澤 和也 KAZUYA SERIZAWA ❤ ランチ、ボードゲーム、お喋り @seriseri_55 2
3. Agenda 1 Production CodeにおけるAIの活⽤ 2 プロトタイピングツールとしてのAIの活⽤ © PeopleX Inc. 3
4. © PeopleX Inc. 4 AIについて学んだことが⼀つ あります。
5. © PeopleX Inc. 5 AIは...
6. © PeopleX Inc. 6 魔法のツールではない
7. © PeopleX Inc. 7 AIにも当然得意不得意がある
8. 2025年現在のAIの得意不得意 © PeopleX Inc. 8 ロジック UI 実装例　有 ◦　😆 △　😢 実装例　無 △　😏 ×　😭
9. Production CodeにおけるAIの活⽤ © PeopleX Inc. 9 AIにはAIが得意なことをやっ てもらおう！
10. AIの得意不得意 © PeopleX Inc. 10 ロジック UI 実装例　有 ◦　😆 △　😢 実装例　無 △　😏 ×　😭
11. 01 1. Production CodeにおけるAIの活⽤ © PeopleX Inc. 11
12. Production CodeにおけるAIの活⽤ © PeopleX Inc. 12 AIを使って うまくいった もっと使おう あれ？期待し てたほどじゃ ないな
13. Production CodeにおけるAIの活⽤ © PeopleX Inc. 13 AIを使って うまくいった もっと使おう あれ？期待し てたほどじゃ ないな AIの活⽤に波ができてしまう...
14. Production CodeにおけるAIの活⽤ © PeopleX Inc. 14 AI活⽤の波を無くすためにどうするか... 😭 ↓ AIにはAIの得意な部分をやってもらう ↓ ロジックとUIの責務の分離 • プレゼンテーションコンポーネントとカ スタムhookにロジックを分離
15. Production CodeにおけるAIの活⽤ © PeopleX Inc. 15 AI活⽤の波を無くすためにどうするか... 😭 ↓ AIにはAIの得意な部分をやってもらう ↓ ロジックとUIの責務の分離 • プレゼンテーションコンポーネントとカ スタムhookにロジックを分離 カスタムhook部分はAIに書かせることを 徹底することで、AI活⽤の波を減らす
16. Production CodeにおけるAIの活⽤ © PeopleX Inc. 16 • Claude.md や .cursor/rules に都度ルールを追加 • 「~ を参考に実装して」などの指⽰を明確にする
17. Production CodeにおけるAIの活⽤ © PeopleX Inc. 17 • Claude.md や .cursor/rules に都度ルールを追加 • 「~ を参考に実装して」などの指⽰を明確にする Projectやチーム固有のルール 例）定数はローカルに定義せず hoge/constants.ts　か らexport して使用して
18. Production CodeにおけるAIの活⽤ © PeopleX Inc. 18 • Claude.md や .cursor/rules に都度ルールを追加 • 「~ を参考に実装して」などの指⽰を明確にする 実装のバラツキを抑える （認知負荷、レビューコストの軽減）
19. 02 2. プロトタイピングツールとしてのAIの活⽤ © PeopleX Inc. 19
20. Production CodeにおけるAIの活⽤ © PeopleX Inc. 20
21. Production CodeにおけるAIの活⽤ © PeopleX Inc. 21
22. プロトタイピングツールとしてのAIの活⽤ © PeopleX Inc. 22 • 仕様決めの段階で、Biz、デザイナー、エンジニ アの共通⾔語として使う • 静的な（動かない）デザインだと動きが想像しづ らい場合への対処法
23. Demo デモ © PeopleX Inc. 23
24. プロトタイピングツールとしてのAIの活⽤ © PeopleX Inc. 24 • この仕様を⽂字起こしすると... 😇
25. Summary まとめ © PeopleX Inc. 25
26. まとめ © PeopleX Inc. 26 • AIにはAIが得意なことをやってもらう ◦ 仕組みでカバー ◦ ロジック部分をカスタムHookに分けることを 徹底 → 仕組みでAI活⽤の波を減らす • プロトタイピング作成も強み
27. We are hiring!! @2025 PeopleX Inc. 6 https://engineer-entrance.peoplex.jp/
28. PeopleX AI⾯接 24時間365⽇対応の労働⼒ 柔軟な対話AIが⼈に代わり業務 個社に合わせた業務設定 ・24時間365日対応可能な労働力 ・夜間、土日での対応可能 ・マネジメント不要 ・全て録画と文字起こしで事後確認可 ・営業、接客など顧客接点の職種も可 ・24時間365日で顧客対応でリード、商談対応 ・グローバル対応可能（多言語対応） ・受付、接客など会社の顔として振る舞い ・個社の需要に沿った質問カスタマイズ ・複数のAIワーカーを簡単に作成可 28