Claude Code時代の「職能越境」を支える、環境構築とワークフロー設計 「150件のUIフィードバックをぜんぶデザイナーで直すことにし た」の裏側で、エンジニアは何をしていたのか 技術本部 Data Intelligence Engineering Unit 茂木 慎之舗 

茂木 慎之舗 Sansan株式会社 技術本部 Data Intelligence Engineering Unit Sansan Data Intelligence のプロダクト開発エンジニア フロントエンド〜バックエンド領域を担当 同期のプロダクトデザイナーの来住と非エンジニアが自走できる環境の 整備もしている 

https://note.com/sansan_cpo/n/nd19651274fe8 

Q. 裏側でエンジニアは何をしていたのか？ 

A. 何もしていない 

越境のコストは、本人の努力ではなく、 環境が引き受ける 

なぜ150件も溜まったのか？ 

当時の開発環境に必要だったもの 

バックエンドを物理的に消す Before: フロントエンド → バックエンド（Go）→ Spannerエミュレータ After: フロントエンド → モックトランスポート （バックエンドは存在しない） モックトランスポート 

舗装する - 所要時間 30〜60分 - すべてコピペで完走 - つまずきポイント先回りの トラブルシュート付き > この手順書をClaude Codeにそのまま投 げても動く 

新しく作ったものは、ほぼない（流用する） - - 新しく作ったもの - mock mode - 手順書 既にあったもの - CLAUDE.md / コーディング規約 - ADR - PR自動レビュー（claude code action） - デザイントークン / デザインシステム > AIも新規メンバーも「コンテキストを持たないでやってくる」点で同じ 

教えたのは Shell/Gitだけ - 人間が教えたこと 以上 

自走の軌跡 初期のcommit 3ヶ月後のcommit 

安全も、環境が引き受ける デザイナーが安全に修正できるのは、ガードレールが敷いてあるから ①そもそも触れない 物理的なデータ隔離とモックトランスポート 手元に実データなし ②壊れたら機械的に気付く VRT: 人間がUIを壊したら、 人間よりも先に機械が気付く CI: Build / Lint / UT / Playwright / VRT ③危険を持ち込ませない 脆弱性と依存関係の自動ガード Trivy スキャン / pre-commit ④二重レビュー AI+人間のレビュー AI自動レビュー 人間のレビュー AI+人間のレビュー 

環境が引き受けられないもの - 線を引いたもの - レビュー：デザイナーのPRでも特別扱いしない。 AI自動レビュー＋エンジニアのレビュー（通常のPRと同じ基準） - 領域：バックエンドが絡む変更、複雑なドメイン（検索条件周りなど）は デザイナーの領域にしない - 線は今も引き直し続けている 

越境して起こった変化 ー 個人が得たもの ① a11yの意識 ー 見た目だけではなく、使う人全体を意識した判断が可能になった ② アーキテクチャの意識 ー 実装の背景を踏まえた上で、あるべき形を考える ③ エンジニアとの対話 ー 共通言語ができ、一方的な依頼ではなく対話ができるように 

越境して起こった変化 ー 組織が得たもの ① 詰まりの解消 ー デザイナーの修正がエンジニアを経由しない ② 横展開 ー デザイナーが教える側になり、環境をセットアップするデザイナーが増えた ③ ユーザー体験の向上 ー 技術的制約やアクセシビリティなどを会話しながら進められる ④ デザインシステムの開発が、デザイナー主導で始まった 

まとめ - デザイナーに教えたのは、Gitの基礎だけ - 越境のコストは、本人の努力ではなく、環境が引き受ける - 越境の結果、UX向上・職種間の円滑なコミュニケーションが可能に 

No content