20260320登壇資料

https://aiagentsoftware.connpass.com/event/384544/
イベントにご招待いただいた際にお話しさせていただいた資料です。
1人で複数のAIエージェントを部下につけ並行でプロジェクトを遂行するプロセスをかみ砕いたものになります。
エンジニアの方以外でも、自社特有の見積もりのテンプレートを使って議事録や要件定義・現場確認のヒアリングシートかたAIが見積もりを作ってくれるプロセスやユーザーマニュアルをAIに作成させる手法などが活かせると思います。

Transcript

1. AIネイティブ時代の プロジェクトマネジメント ソフトウェア・エンジニアリング pharct
2. 自己紹介 松井遼(マツイハルカ) 写真 ソフトウェア・エンジニアリング pharct SIerで大規模DB基盤構築やクラウドリフト、AIでのDB性能診断自 動化で2年ほど働いた後、フリーランスをしながら非ITのエンドユ ーザー様や団体様の社内システムやプラットフォーム開発を行う 。 例）建設業の勤怠・資材管理・日報作成の一元管理アプリ開発、医療職のコ ネクション向上プラットフォーム作成 など 都内・横浜でNPO法人の一員として空きスペースで寺子屋運営、 個人として中高や児童福祉施設にITリテラシー教育も行う。
3. いまの参画先 pipon株式会社 患者さんとの診察中に録音を開始して、 終了ボタンを押すだけで電子カルテが作成 カルテ自動化AI VOICE CHART 事業内容：AIを用いたデータ分析、システム 開発 設立：2019年9月 従業員数：10名 ★絶賛募集中
4. 仕事の取り方 01 経営者交流会などに 行きまくる 02 無料で相談に 乗りまくる 03 自分でAIについての 勉強会を開く
5. 思想 大手は大手と仕事すればいいじゃん。 自分はお客様の生々しい悩みを聞きたい。
6. AIを用いた開発サイクル プロマネ知見 Project Management ドキュメント Documents 見積もり提案 Estimation AI 知見をそのままAIに流し込む
7. AI開発サイクル ─ 調査〜提案 初回ヒアリング お客様との初回ヒアリングを実施 市場調査 Gemini Deep Research・有識者・同 業界のお客様に要件を満たすサー ビスがないか調査 調査書作成 既存ツールが要件を満たせず自分 たちで作るべきという調査書を作 成 要件定義書_v1 Notionで文字起こしした議事録と ヒアリングシートをClaudeに食わせ 要件定義書_v1を作成 超概算見積もり 要件定義書_v1と独自の見積もりテ ンプレ（各工程の見積方法とバッ ファの取り方を書いたドキュメン ト）をClaudeに食わせ作成 提案書化 要件定義書_v1・調査書・超概算見 積もりをClaudeに食わせ提案書を作 成 → Goであれば詳細な要件定義へ
8. AI開発サイクル ─ 設計〜デプロイ 詳細設計書作成 詳細な要件定義書を自分で書き、 アーキテクチャと方式を決め、 詳細設計書を作成 AIレビュー・見積明細作成 詳細設計書をClaudeがレビュー 再度見積もりテンプレと詳細設計 書をClaudeが見て見積もり明細書を 発行 ワイヤーフレーム Figmaでシステムの代表的なページ だけワイヤーフレームを作成し、 お客様と合意を取る Codex実装 詳細設計書とワイヤーフレーム画 像を見ながらCodexが実装 環境構築・修正 環境構築と修正 モックデータを実データ・テスト 環境のDBやバケットに置き換え セキュリティ 権限周り・暗号化方式は自分でチ ェック リポジトリのセキュリティチェッ クはClaude・Codex両方に実施
9. このサイクルの良いところ 圧倒的スピード感 AIがドキュメント作成・レビュー・ 実装を高速に支援することで、 従来の開発サイクルを大幅に短縮 AIと自分の 責任の境界が明確 AIにまかせるところは全てまかせた方 が結果的に後追いしやすい
10. デザインについて AGENTS.md Figmaで合意をもらったら、その画像をもとに Codexが実装する。 AGENTS.mdに「UIは必ずDESIGN.mdに従うこと 」と記述しておく。 DESIGN.md Figmaをもとに実装したページデザインの ・フォントやカラー、余白に従うこと ・コンポーネントを再利用すること ・ホバー時のエフェクトなど画像から わからないルール → 合意が取れたUIそのままになる
11. デザインについて #DESIGN.md デザイン仕様書 ##デザイン原則## | 原則 | 指針 | |---|---| | **信頼と安心** | 清潔感のあるカラーパレット。 剰な装飾を排し、情報の明瞭さを最優先 | | **簡潔と直感** | 3タップ以内で目的に到達。迷わ ないUI、ラベルとアイコンの併用 | | **一貫性** | 全ページ・全コンポーネントでデザ ントークンを厳守。例外を作らない | ##インタラクション必須ルール## **1. カーソルポインター** ユーザーがクリック/タップ可能な要素には **必ず `cursor-pointer`** を適用すること。 **2. ホバー時の視覚フィードバック（色変化）** クリック可能な全要素には **必ず `hover:` による色 化**（背景色またはテキスト色の変化）を設定する と。加えて `transition-colors duration-200` で色変化を 滑らかにすること。 Figmaからペライチでエクスポートした画像でも Codexはわずかな余白や影、角丸の度合いや フォントの種類、カラーコードまで精度高く 読み取ってくれます → Figmaのファイルと、DESIGN.mdを外部設計書として扱う @Wirefraame – 1.pngを参照してランディングページを作成、ランディ ングページで実装したコンポーネントやデザイントークンを基本とし て、@phase1_詳細設計書.docxの内容の通りに未実装のファイルを全 てコーディングしてください。
12. ユーザーマニュアルやサイトマップもAIで作成 1 Claudeでマニュアル生成 成果物のリポジトリ内容をClaudeに読んでもらい、マ ニュアルの目次から各セクションのタイトル・内容を 全て書いたテキストを出力 2 Playwright MCPでスクショ取得 Playwright MCPでシステムを操作し、各画面でスクリ ーンショットを自動取得 3 手動操作はGeminiでテキスト化 ヘッドレスCMSなど、D&DなどPlaywrightで出来ない 操作は画面録画しながら自分で操作し、Geminiにテキ スト化してもらう 4 マニュアル＋スクショをマージ Claudeが出したマニュアルとPlaywrightが撮ったスク ショの適切なものを選びマージして完成
13. 宣伝 表情分析AI合コン 表情分析にAIを使い、相性を判定して席替えしてマッチング率を上げる合コン 技術構成 Webカメラでストリーミング撮影 → ラズベリーパイ5(16GB)に乗ったAIが表情をリアルタイム分析 表情パラメータのポジティブ比率・同調度・勾配類似から全参加者1:1の相性スコアを算出（10vs10なら100通り） 席替え時にグループ内合計スコアが最大となる組み合わせを計算 実績 & お知らせ 1回目の開催は男性9人・女性11人が集まり、超盛り上がりました！ 毎月1回は開催していますので、ご興味ある方はぜひこの後話しかけてください
14. ご清聴ありがとう ございました haruka.matsui@pharct.net ソフトウェア・エンジニアリング pharct