AIファーストな開発チームに向けた_職能横断での取り組み.pdf

2025/06/26　Loglass AI TALK 登壇資料

Transcript

1. AIファーストな開発チームに向けた 職能横断での取り組み Masaya Murakami
2. 2 Copyright © 2015 every, Inc. All rights reserved. 自己紹介 株式会社エブリー デリッシュキッチン開発部 部長 村上 将也（Murakami Masaya） 2019年　エブリーにバックエンドエンジニアで入社 2024年　デリッシュキッチン開発部 部長就任
3. 3 Copyright © 2015 every, Inc. All rights reserved. 『デリッシュキッチン』について レシピ提案 / レシピ検索 / 
 献立機能 
 買い物リスト / チラシ / 
 店頭ビーコン連動 
 調理手順動画/キッチンモード / 
 作った・レビュー / お気に入り 
 菅原千遥　
 デリッシュキッチン
 カンパニー長
 料理研究家
 斎藤 香織
 副編集長
 管理栄養士
 • 30名以上の食のプロが、蓄積 データに基づきオリジナル 
 レシピを日々考案 
 • 月間1,500本以上の動画配信 
 サービス・機能 
 レシピ検討 
 買い物
 料理中・料理後 
 専門家によるレシピ考案・監修 
 ▪ 日本最大級のレシピ動画サービス 
 ▪ 「誰でも簡単においしく作れるレシピ動画」毎日配信 
 ▪ 全レシピ、管理栄養士が監修！蓄積データによるオリジナルレシピを考案 
 ▪ SNS/APP/WEBを通じて延べ50,000本以上のレシピ動画を提供 

4. 4 Copyright © 2015 every, Inc. All rights reserved. 『AI料理アシスタント』への進化 これまでの「レシピ動画アプリ」からあなただけの管理栄養士が スマホにいるような「AI料理アシスタント」に大きくアップデートし ていく。 CEOからのメッセージ 開発生産性 10倍 AIファーストな新しい働き方をプロダクトチームで模索し、より早く 高品質なサービスを提供していく。そのためのAIツールも積極投 資する。 AI ファースト・カンパニーを目指す プロダクト 組織
5. 5 Copyright © 2015 every, Inc. All rights reserved. エンジニアの取り組み事例 AI開発効率化勉強会 Issue駆動の並列開発 ドキュメント整備 社内で定期的に他チームの AIの取り組みや最新ト レンドについて学ぶ勉強会を開催。ハンズオンを 通じて知識共有やスキルアップを促進しています。 タスクやリファクタを Cursorからタスク分解して、 githubのissueに登録。Devinを用いた並列開発を 行い、効率化を行っています。 ドキュメント不足でAIの能力を引き出せない課題に 対して、ドキュメントや Cursorルール自体にAIを活 用しながら積極的に整備を行っています。
6. 6 Copyright © 2015 every, Inc. All rights reserved. 一方でエンジニアに閉じていては AIファーストなチームとは言えない
7. 7 Copyright © 2015 every, Inc. All rights reserved. 注力していきたいこと AIを活用して、今までにないスピードでプロダクトの改善サイクルを回したい そのためには今後はより職種間で協働した AI活用の模索が必要になってくる 企画
 デザイン
 設計
 開発
 デリバリー 
 分析

8. 8 Copyright © 2015 every, Inc. All rights reserved. エブリーでの取り組み Figmaの画面デザイン ローカル環境 コード 生成 Dev Mode MCP Puppeteer MCP スクショ撮影 AIがFigmaと画像比較 差分を修正 デザイナーと協働での Figmaデザインからのコード生成 デザイナーと協働して、どうすればうまく AIにデザインを再現させつつ、品質の高いコードを生み出せるかを検証中。 現状ではCursorルール整備と視覚的な差分チェックを組み合わせるやり方が一番安定する。
9. 9 Copyright © 2015 every, Inc. All rights reserved. エブリーでの取り組み Figmaの画面デザイン 生成された画面 フッター要素は開発プラグインなので関係なし シンプルな画面だと 1回で再現度は高い シンプルな画面なら画面ごと指定してもデザインシステムを参照して、適切な UIコンポーネントを選択して実装を進 めてくれる。修正がほぼ必要ないレベルのマークアップでコード化される。
10. 10 Copyright © 2015 every, Inc. All rights reserved. エブリーでの取り組み Figmaの画面デザイン 生成された画面 フッター要素は開発プラグインなので関係なし 要素が多い画面だと 1回では精度がかなり低い 要素が多いとMCPから渡される情報量も多く、やらないといけないタスクも増えるのでコンテキストオーバーになり、 AI自体のアウトプットや差分確認の精度が落ちる。
11. 11 Copyright © 2015 every, Inc. All rights reserved. エブリーでの取り組み Figmaのフレーム単位に分解して、コード生成フローを繰り返す 全体レイアウトを組み nodeIdごとに実装
12. 12 Copyright © 2015 every, Inc. All rights reserved. エブリーでの取り組み Figmaの画面デザイン 生成された画面 フッター要素は開発プラグインなので関係なし タスクを分解できれば、複雑な画面も精度が上がってくる 小さい要素情報の取得と比較を繰り返すと細部まで差分や実装を考えられるので、結果的に全体のコード生成の精 度が向上していく
13. 13 Copyright © 2015 every, Inc. All rights reserved. その他にもいろいろと試行錯誤してます ... デザイン実装計画書 実装計画書 Cursorルール例 storybook
14. 14 Copyright © 2015 every, Inc. All rights reserved. エブリーでの取り組み デザイナーと協働して進めていること • デザインシステムを整備して、継続的にメンテナンスしていく ◦ デザイナーと開発者がスタイリングにおいて同じ用語を用いることができるレベルで、コンポーネントや トークンを整備する ◦ エンジニアはデザインシステムとの整合性を重視する ◦ → AIが出力するベースのデザインクオリティを担保できる • コード生成されることを意識した Figmaでのデザイン構築 ◦ Figmaの情報はAIへの意図伝達の手段にもなってきてる ◦ Auto Layout機能を使って絶対値でのレイアウト解釈をさせない ◦ フレームや各要素の命名もセマンティックに意味を持たせる ◦ マークアップを想定したフレームの階層構造を可能な限り作る ▪ 例 ) Tab要素とそのコンテンツ要素を並列にするとHTML構造として矛盾が生まれる ◦ → Figmaの作りが生成されるコードの品質に繋がる
15. 15 Copyright © 2015 every, Inc. All rights reserved. まとめ • プロダクト価値を最大化していくためには職能横断で AI活用を考えるのも大切 • エブリーもまだまだできていないが、ここを推進していきたい • AI時代はそれぞれの職能がより互いの領域に染み出していく姿勢が大切 • エンジニアはどんなFigmaの作り方や仕様書ならAIがいい設計やコードを生むのか探索しつつ、そ の過程でデザイナーやPdMはどんなことを考えているのかを知った上で対話する • PdMやデザイナーがコードを生成してみながら、エンジニアが話していることを肌感覚で理解する こともコラボレーションの役に立つ • チームでの AI活用は短期的には模索で時間かかるが、大切な投資期間 • デザインからコード化も書いた方が早そうっていう場面はありつつ、仕組みができればその投資し た時間はこれからの開発でいくらでも回収できる