---
title: エンジニアリングとデザインをつなぐ共通言語への投資と取り組み
tags: 
author: [sakito](https://image.docswell.com/user/sakito)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/Y79PPXL8E3.jpg?width=480
description: 【Qiita Bash】エンジニアリングとデザインをつなぐAI活用 https://increments.connpass.com/event/387592/  X https://twitter.com/__sakito__
published: April 28, 26
canonical: https://image.docswell.com/s/sakito/Z8NVXW-design-and-engineer
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/Y79PPXL8E3.jpg)

エンジニアリングとデザイン
をつなぐ共通言語への投資と
取り組み
sakito(@__saloto__)
【Qiita Bash】エンジニアリングとデザインをつなぐAI活用 #QiitaBash
2026年4月28日
資料はこちら


# Page. 2

![Page Image](https://bcdn.docswell.com/page/G78DD2XZ7D.jpg)

自己紹介
sakito(@__sakito__)
サイボウズ株式会社
プロダクトデザイン部 マネージャー
プロダクトエンジニア マネージャー
みんなのデザイン室リーダー
さいきんは開発組織のAI推進もやってます！
デザインとエンジニアリングの狭間にいます


# Page. 3

![Page Image](https://bcdn.docswell.com/page/L7LMM281JR.jpg)

エンジニアとデザイナーの間にある「翻訳コスト」
AIの前からある課題
デザイナー
「実装と違うのはなぜ?」
「意図が伝わってない…」
「どう伝えるのが良いのだろうか？」
翻訳コスト
認識のズレ / 手戻り
伝わらない意図
エンジニア
「これ、どこのコンポーネント?」
「仕様書に書いてないよ…」
「デザイン変わった? 通知来てない」


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4EMYY865EW.jpg)

デザインのフェーズを分割する
分解する
Structured Design
Freeform 

Structured 
定義 / 収束 Engineering


Design


Design


Freeform Design
実装
探索
/
発散
探索/発散
定義/収束


# Page. 5

![Page Image](https://bcdn.docswell.com/page/PER995PZJ9.jpg)

デザインのフェーズを分割する
分解する
Structured Design
Freeform 

Structured 
定義 / 収束 Engineering


Design


Design


Freeform Design
実装
探索
/
発散
探索/発散
定義/収束
それぞれのフェーズでAIの手段が違う(下記は例)
claude design
Chat AIで壁打ち
Figma MCP
DESIGN.md
claude code
skills
コーディングエージェント


# Page. 6

![Page Image](https://bcdn.docswell.com/page/P7XQQK31EX.jpg)

とくにこの境目は認識されていない、こぼれる
分解する
Structured Design
Freeform 

Structured 
定義 / 収束 Engineering


Design


Design


Freeform Design
実装
探索
/
発散
探索/発散
定義/収束
それぞれのフェーズでAIの手段が違う(下記は例)
claude design
Chat AIで壁打ち
Figma MCP
DESIGN.md
claude code
skills
コーディングエージェント


# Page. 7

![Page Image](https://bcdn.docswell.com/page/37K995YM7D.jpg)

誰がこの境目の責任を担う？
分解する
Structured Design
Freeform 

Structured 
定義 / 収束 Engineering


Design


Design


Freeform Design
実装
探索
/
発散
探索/発散
定義/収束
！
専門領域として責任を設ける必要がある

誰がskillsやDESGIN.mdを育てる？


# Page. 8

![Page Image](https://bcdn.docswell.com/page/LJ3WWK92J5.jpg)

AIの前から課題は変わっていない
デザインシステムがメンテされない、デザインの資産が古くなっている...。
skillsやDESIGN.md....


# Page. 9

![Page Image](https://bcdn.docswell.com/page/8JDKK3G6EG.jpg)

AI の前から課題は変わっていない
AI以前からある課題と似たパターンが繰り返される可能性
個人が作る
skills / design.md

手元にある便利なプロンプト
→
広がらない
その場限り

他職能に届かない
→
作り直す / 腐る
デザインシステムであった課題...

似たことが起きそう
立ち止まって考えたい4つのこと
Q1
誰が運用するか
責任者/チーム/組織
Q2
何のために作るか
チームのためになっているか？
Q3
誰が判断するか
推進する人
Q4
どう組織に広げるか
組織の課題もキャッチする


# Page. 10

![Page Image](https://bcdn.docswell.com/page/VEPKK48Z78.jpg)

作るより、続けるほうが難しい
気づき
0 → 1 はそんなに難しくない
運用していく
0→1
作れる
古びる / 使われ続ける
・トークンの定義はできる
・初版のガイドラインは書ける
・コンポーネントは作れる
・プロダクトの変化に追随し続ける
・片手間では品質が保てない
・使われなければ、存在しないのと同じ
N→∞
長く使い続けるためには、作るだけじゃなく育て続ける仕組みが必要


# Page. 11

![Page Image](https://bcdn.docswell.com/page/27VVVXNM7Q.jpg)

デザインシステムに責任を持つチームを設けた
私たちの答え
デザイナー
設計する
kintone Design System チーム(8人)
共通言語を管理・進化させる
・両者の中間に立つ
・継続的にアップデートする
・運用責任を担う
この領域に明確に人やチームを設けて

投資する必要があるという意思決定

(評価・マネージメント・採用もセット)
エンジニア
実装する


# Page. 12

![Page Image](https://bcdn.docswell.com/page/5JGLLVKX7L.jpg)

↓
AIを使うだけじゃなく、育てるループを作る
ループを回す
使う
育てる
AI が共通資産を参照して デザイン・実装を進める
責任者が資産をメンテし AI に食わせ続けられる状態に保つ
↓
↓
デザインのための資産
トークン / ガイドライン / コンポーネント / etc..
デザインとエンジニアリングに必要なものを育て続ける
使えるように啓発する
↓
AIに使えるように工夫をするだけ
skills・MCP・ DESIGN.mdなどAIに必要なものが変わっても対応しやすい


# Page. 13

![Page Image](https://bcdn.docswell.com/page/47QYY6N5EP.jpg)

資産からAIのための武器を生み出す
ループを回す
元々持っていた膨大な資産からAIが使いやすいように変換した例。

デザインのための資産を数年溜めていたものが武器になった
デザインシステムを丸ごと Skills にする

https://zenn.dev/cybozu_frontend/articles/design-system-skills


# Page. 14

![Page Image](https://bcdn.docswell.com/page/KE4WW4GVJ1.jpg)

デザインの資産をどう育てますか？

作って終わりになっていませんか？
AIを使うことだけ考えるとそんなに難しいことではない。

デザインの資産をどう育てるか、AIという手段だけでは難しい。
組織とツールの活用の両方を揃えていく必要がある。


# Page. 15

![Page Image](https://bcdn.docswell.com/page/L71YY4D4JG.jpg)

他にもいろんな事例があります
ループを回す
kintone Design Magazine

https://note.com/cybozu_design/m/mdc4ac766dcfc


# Page. 16

![Page Image](https://bcdn.docswell.com/page/G7WGGXYZE2.jpg)

Fin