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

by エブリー

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Slide 3

Slide 3 text

3 Copyright © 2015 every, Inc. All rights reserved. 『デリッシュキッチン』についてレシピ提案 / レシピ検索 /   献立機能   買い物リスト / チラシ /   店頭ビーコン連動   調理手順動画/キッチンモード /   作った・レビュー / お気に入り   菅原千遥　  デリッシュキッチン  カンパニー長  料理研究家  斎藤香織  副編集長  管理栄養士  • 30名以上の食のプロが、蓄積データに基づきオリジナル   レシピを日々考案   • 月間1,500本以上の動画配信   サービス・機能   レシピ検討   買い物  料理中・料理後   専門家によるレシピ考案・監修   ■ 日本最大級のレシピ動画サービス   ■ 「誰でも簡単においしく作れるレシピ動画」毎日配信   ■ 全レシピ、管理栄養士が監修！蓄積データによるオリジナルレシピを考案   ■ SNS/APP/WEBを通じて延べ50,000本以上のレシピ動画を提供  

Slide 4

Slide 4 text

4 Copyright © 2015 every, Inc. All rights reserved. 『AI料理アシスタント』への進化これまでの「レシピ動画アプリ」からあなただけの管理栄養士がスマホにいるような「AI料理アシスタント」に大きくアップデートしていく。 CEOからのメッセージ開発生産性 10倍 AIファーストな新しい働き方をプロダクトチームで模索し、より早く高品質なサービスを提供していく。そのためのAIツールも積極投資する。 AI ファースト・カンパニーを目指すプロダクト組織

Slide 5

Slide 5 text

5 Copyright © 2015 every, Inc. All rights reserved. エンジニアの取り組み事例 AI開発効率化勉強会 Issue駆動の並列開発ドキュメント整備社内で定期的に他チームの AIの取り組みや最新トレンドについて学ぶ勉強会を開催。ハンズオンを通じて知識共有やスキルアップを促進しています。タスクやリファクタを Cursorからタスク分解して、 githubのissueに登録。Devinを用いた並列開発を行い、効率化を行っています。ドキュメント不足でAIの能力を引き出せない課題に対して、ドキュメントや Cursorルール自体にAIを活用しながら積極的に整備を行っています。

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

8 Copyright © 2015 every, Inc. All rights reserved. エブリーでの取り組み Figmaの画面デザインローカル環境コード生成 Dev Mode MCP Puppeteer MCP スクショ撮影 AIがFigmaと画像比較差分を修正デザイナーと協働での Figmaデザインからのコード生成デザイナーと協働して、どうすればうまく AIにデザインを再現させつつ、品質の高いコードを生み出せるかを検証中。現状ではCursorルール整備と視覚的な差分チェックを組み合わせるやり方が一番安定する。

Slide 9

Slide 9 text

9 Copyright © 2015 every, Inc. All rights reserved. エブリーでの取り組み Figmaの画面デザイン生成された画面フッター要素は開発プラグインなので関係なしシンプルな画面だと 1回で再現度は高いシンプルな画面なら画面ごと指定してもデザインシステムを参照して、適切な UIコンポーネントを選択して実装を進めてくれる。修正がほぼ必要ないレベルのマークアップでコード化される。

Slide 10

Slide 10 text

10 Copyright © 2015 every, Inc. All rights reserved. エブリーでの取り組み Figmaの画面デザイン生成された画面フッター要素は開発プラグインなので関係なし要素が多い画面だと 1回では精度がかなり低い要素が多いとMCPから渡される情報量も多く、やらないといけないタスクも増えるのでコンテキストオーバーになり、 AI自体のアウトプットや差分確認の精度が落ちる。

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

14 Copyright © 2015 every, Inc. All rights reserved. エブリーでの取り組みデザイナーと協働して進めていること ● デザインシステムを整備して、継続的にメンテナンスしていく ○ デザイナーと開発者がスタイリングにおいて同じ用語を用いることができるレベルで、コンポーネントやトークンを整備する ○ エンジニアはデザインシステムとの整合性を重視する ○ → AIが出力するベースのデザインクオリティを担保できる ● コード生成されることを意識した Figmaでのデザイン構築 ○ Figmaの情報はAIへの意図伝達の手段にもなってきてる ○ Auto Layout機能を使って絶対値でのレイアウト解釈をさせない ○ フレームや各要素の命名もセマンティックに意味を持たせる ○ マークアップを想定したフレームの階層構造を可能な限り作る ■ 例 ) Tab要素とそのコンテンツ要素を並列にするとHTML構造として矛盾が生まれる ○ → Figmaの作りが生成されるコードの品質に繋がる

Slide 15

Slide 15 text

15 Copyright © 2015 every, Inc. All rights reserved. まとめ • プロダクト価値を最大化していくためには職能横断で AI活用を考えるのも大切 • エブリーもまだまだできていないが、ここを推進していきたい • AI時代はそれぞれの職能がより互いの領域に染み出していく姿勢が大切 • エンジニアはどんなFigmaの作り方や仕様書ならAIがいい設計やコードを生むのか探索しつつ、その過程でデザイナーやPdMはどんなことを考えているのかを知った上で対話する • PdMやデザイナーがコードを生成してみながら、エンジニアが話していることを肌感覚で理解することもコラボレーションの役に立つ • チームでの AI活用は短期的には模索で時間かかるが、大切な投資期間 • デザインからコード化も書いた方が早そうっていう場面はありつつ、仕組みができればその投資した時間はこれからの開発でいくらでも回収できる

Slide 16

Slide 16 text

No content