関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
1.2M
各ページのテキスト
AI駆動開発勉強会 名古屋支部#2 2026.10.09 AIが入って、 チーム開発はどう変わったか 〜エンジニア以外もPRを作る、AI駆動開発の実践〜 青木大地 株式会社コラボスタイル シニアフロントエンドエンジニア 𝕏 @aozame_dev
AI駆動開発勉強会 名古屋支部#2 青木大地 株式会社コラボスタイル @aozame_dev シニアフロントエンドエンジニア 東京オフィスに出勤 横浜出身。最近、木更津市に引っ越し 個人開発：音声会話AIエージェント 最近ハマってること：CQRS + ES で、設計・開発 𝕏 𝕏 @aozame_dev
AIの精度が上がった今、みなさんに聞かせてください プログラム、どうやって作っていますか？ ✋ 2 そのコードを、AIに書いてもらっている ✋ 自分では1行も書いていない 3 コードは100% AIが書いている 🙌 1 プログラムを作っている
コードを書くのは、 必ずしも担当者でなくていいのでは？
コラボスタイルのフロントエンドは、 デザイナーも PRを出せるようにしました
今日話すこと 1 デザイナーもPRを出せるようになって、どうだったか 2 デザイナーもPRを出せるようにした3つの基盤 6
修正の流れが、こう変わった 導入前 導入後 🎨 → 💻 → 💻 → 🎨 デザイナー エンジニア エンジニア デザイナー から依頼 が実装 がレビュー から事前相談 が実装 がレビュー 🎨 🎨 💻 デザイナー → デザイナー → エンジニア が確認 7
実際に来たPR 月 5〜6本 デザイナーが作成したPR （2名） スクロールバーやホバーなど、細かい見た目の調整 バッジ・アイコン・文言を、デザインの決まりに揃える メニューの並びや、入力欄の幅の変更 UIパーツのカタログを整え、自動チェックを増やす 5本に1本ぐらいは修正が必要。作り替えや、バトンタッチで対応 8
エンジニアにとって、よかったこと 🧭 諦めていた使いやすさに、手が入る 🤝 引き継ぎの時間が消えた 📦 依頼されるより、PRレビューの方が楽 🎯 修正内容が、具体的に分かる エンジニアは機能の実現と安定稼働が優先。 使いやすさは、デザイナーが直してくれる 簡単な修正でも、タスクだと管理コストに。 PRならレビューするだけ 依頼内容を聞き取る時間が不要に。 事前相談はさっと済む 言葉やカンプより、 PRのほうが「何をどう直すか」がはっきりする 他職種がプロダクトを触れる基盤を作るのも、エンジニアリング 9
デザイナーにとって、よかったこと 😮💨 遠慮が消えた 🖼️ 既存画面の改善に、手を出せる 「こんな小さい修正を、今お願いしていいのか」 と迷わなくなった エンジニアのロードマップを待たずに、 自分たちの視点で手入れできる 🤝 やり取りが減った 🎬 動きまで触れる 説明や、説明のための整理、 実装修正後の確認などの工数が減った Figma だと、動きを作るのはコストがかかる。 アニメーションや操作感にも手を入れられる 10
でも、デザイナーがPRを出すとなると… 🎨 デザイナー側 💻 エンジニア側 2 開発環境やプロダクトを、 壊してしまわないか？ 要修正のPRが増えて、 2 自分たちの負担が増えない？ git や GitHub、その他ツールを 1 ルール通りに使いこなせる？ 本当に修正できる？ 3 ソースコードを、 何度も聞いて、負担にならない？ 1 デザイナーの負担が増えて、 本来の業務に支障が出ない？ 採用できるPRが 3 そもそも、 作成されるのか？ 11
デザイナーもPRを出せるようにした3つの基盤 1 2 3 🤖 🏗️ AI以前からある 🤝 ルールづくり・ AIが開発手順を 辿れるようにした ローカルで動かせる プレビューデプロイ PRの段階で一定の品質 見るのは、動きだけ。 迷ったら、聞ける AI活用の基盤 開発基盤 サポート体制
基盤 ① AI活用の基盤 開発の工程ごとにスキルを整備し、プラグインとしてチームに設定 🛠️ 📝 💾 課題作成 → チケットから → 実装 コミット /fe:create-issue /fe:auto-issue /fe:commit /fe:auto-issue → 🔀 PR作成 /fe:create-pr 🔍 → レビュー /fe:review-code チケット番号を渡すだけで、実装からPR作成まで 一気に デザイナーが知っておくことは最低限。やり方はAIが知っている 13
基盤 ② AI以前からある開発基盤 誰でも簡単にローカルで動かせる セットアップの簡略化で、つまずく人ゼロへ ガイドと mise の1コマンドで、OSに関わらずミドルウェアのバージョンが揃う 重いバックエンドなしで、フロントの全機能を開発できる モックで動かせる。共通バックエンドにつないで、実データでの確認もできる これがなければ、デザイナーは実装に参加できなかった 14
基盤 ② AI以前からある開発基盤 PRごとにプレビューデプロイされる PRごとにプレビュー環境 URLを開くだけで、ブラウザで確認できる PRごとに Storybook UIパーツ単位でも確認できる AIで増えるPRを、ローカルで起動せずに確認できる 15
基盤 ② AI以前からある開発基盤 PRの段階で一定以上の品質になる 💾 コミット時 型チェック・lint・format lint・build・test build・Storybook build E2E /fe:commit が pnpm check を実行 🔀 PR時 GitHub Actions ／ Vitest 壊れていればコミットできない プレビュー環境に Playwright Vitest pnpm audit test 脆弱性監査 AIが最後まで修正を回すから、PRの時点で品質が揃う 16
基盤 ③ ルールづくり・サポート体制 コードは見なくていい 📏 ルール 確認するのは、期待した動きになっているか ワークショップ 🙌 サポート体制 環境構築からチケット・実装・PRまで全員が一通り 実装の問題はエンジニアが直す いつでも聞いてOK PRの説明文はAIに任せる 週1回のAI勉強会 要修正は5件につき1件ぐらい。無理ならバトンタッチ 分かりづらければエンジニアが直す PRで迷ったら、すぐ聞ける 2025年9月から毎週水曜、30回超 デザイナーはデザインの修正だけに集中。実装はPRの段階でエンジニアが管理する 17
持ち帰ってほしいこと AIをチームで活用すれば、職種の境界を溶かせる 境界が溶けると、効率化と、専門性が届く場所が増える 効果的・持続的に運用するには、地道な基盤づくりが不可欠 1 AIが知っていて、 動ける環境 2 誰でも入れる環境 ご清聴ありがとうございました 𝕏 @aozame_dev 3 専門性に注力できる ルールづくり 18