エンジニアリングとデザインをつなぐ共通言語への投資と取り組み

-- Views

April 28, 26

スライド概要

【Qiita Bash】エンジニアリングとデザインをつなぐAI活用
https://increments.connpass.com/event/387592/

X
https://twitter.com/__sakito__

profile-image

Twitter https://twitter.com/__sakito__

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

デザインのフェーズを分割する 分解する Structured Design Freeform 
 Structured 
定義 / 収束 Engineering

 Design

 Design

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

5.

デザインのフェーズを分割する 分解する Structured Design Freeform 
 Structured 
定義 / 収束 Engineering

 Design

 Design

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

6.

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

 Design

 Design

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

7.

誰がこの境目の責任を担う? 分解する Structured Design Freeform 
 Structured 
定義 / 収束 Engineering

 Design

 Design

 Freeform Design 実装 探索 / 発散 探索/発散 定義/収束 ! 専門領域として責任を設ける必要がある
 誰がskillsやDESGIN.mdを育てる?

8.

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

9.

AI の前から課題は変わっていない AI以前からある課題と似たパターンが繰り返される可能性 個人が作る skills / design.md
 手元にある便利なプロンプト → 広がらない その場限り
 他職能に届かない → 作り直す / 腐る デザインシステムであった課題...
 似たことが起きそう 立ち止まって考えたい4つのこと Q1 誰が運用するか 責任者/チーム/組織 Q2 何のために作るか チームのためになっているか? Q3 誰が判断するか 推進する人 Q4 どう組織に広げるか 組織の課題もキャッチする

10.

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

11.

デザインシステムに責任を持つチームを設けた 私たちの答え デザイナー 設計する kintone Design System チーム(8人) 共通言語を管理・進化させる ・両者の中間に立つ ・継続的にアップデートする ・運用責任を担う この領域に明確に人やチームを設けて
 投資する必要があるという意思決定
 (評価・マネージメント・採用もセット) エンジニア 実装する

12.

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

13.

資産からAIのための武器を生み出す ループを回す 元々持っていた膨大な資産からAIが使いやすいように変換した例。
 デザインのための資産を数年溜めていたものが武器になった デザインシステムを丸ごと Skills にする
 https://zenn.dev/cybozu_frontend/articles/design-system-skills

14.

デザインの資産をどう育てますか?
 作って終わりになっていませんか? AIを使うことだけ考えるとそんなに難しいことではない。
 デザインの資産をどう育てるか、AIという手段だけでは難しい。 組織とツールの活用の両方を揃えていく必要がある。

15.

他にもいろんな事例があります ループを回す kintone Design Magazine
 https://note.com/cybozu_design/m/mdc4ac766dcfc

16.

Fin