-- Views
April 28, 26
スライド概要
【Qiita Bash】エンジニアリングとデザインをつなぐAI活用
https://increments.connpass.com/event/387592/
X
https://twitter.com/__sakito__
エンジニアリングとデザイン をつなぐ共通言語への投資と 取り組み sakito(@__saloto__) 【Qiita Bash】エンジニアリングとデザインをつなぐAI活用 #QiitaBash 2026年4月28日 資料はこちら
自己紹介 sakito(@__sakito__) サイボウズ株式会社 プロダクトデザイン部 マネージャー プロダクトエンジニア マネージャー みんなのデザイン室リーダー さいきんは開発組織のAI推進もやってます! デザインとエンジニアリングの狭間にいます
エンジニアとデザイナーの間にある「翻訳コスト」 AIの前からある課題 デザイナー 「実装と違うのはなぜ?」 「意図が伝わってない…」 「どう伝えるのが良いのだろうか?」 翻訳コスト 認識のズレ / 手戻り 伝わらない意図 エンジニア 「これ、どこのコンポーネント?」 「仕様書に書いてないよ…」 「デザイン変わった? 通知来てない」
デザインのフェーズを分割する 分解する Structured Design Freeform Structured 定義 / 収束 Engineering Design Design Freeform Design 実装 探索 / 発散 探索/発散 定義/収束
デザインのフェーズを分割する 分解する Structured Design Freeform Structured 定義 / 収束 Engineering Design Design Freeform Design 実装 探索 / 発散 探索/発散 定義/収束 それぞれのフェーズでAIの手段が違う(下記は例) claude design Chat AIで壁打ち Figma MCP DESIGN.md claude code skills コーディングエージェント
とくにこの境目は認識されていない、こぼれる 分解する Structured Design Freeform Structured 定義 / 収束 Engineering Design Design Freeform Design 実装 探索 / 発散 探索/発散 定義/収束 それぞれのフェーズでAIの手段が違う(下記は例) claude design Chat AIで壁打ち Figma MCP DESIGN.md claude code skills コーディングエージェント
誰がこの境目の責任を担う? 分解する Structured Design Freeform Structured 定義 / 収束 Engineering Design Design Freeform Design 実装 探索 / 発散 探索/発散 定義/収束 ! 専門領域として責任を設ける必要がある 誰がskillsやDESGIN.mdを育てる?
AIの前から課題は変わっていない デザインシステムがメンテされない、デザインの資産が古くなっている...。 skillsやDESIGN.md....
AI の前から課題は変わっていない AI以前からある課題と似たパターンが繰り返される可能性 個人が作る skills / design.md 手元にある便利なプロンプト → 広がらない その場限り 他職能に届かない → 作り直す / 腐る デザインシステムであった課題... 似たことが起きそう 立ち止まって考えたい4つのこと Q1 誰が運用するか 責任者/チーム/組織 Q2 何のために作るか チームのためになっているか? Q3 誰が判断するか 推進する人 Q4 どう組織に広げるか 組織の課題もキャッチする
作るより、続けるほうが難しい 気づき 0 → 1 はそんなに難しくない 運用していく 0→1 作れる 古びる / 使われ続ける ・トークンの定義はできる ・初版のガイドラインは書ける ・コンポーネントは作れる ・プロダクトの変化に追随し続ける ・片手間では品質が保てない ・使われなければ、存在しないのと同じ N→∞ 長く使い続けるためには、作るだけじゃなく育て続ける仕組みが必要
デザインシステムに責任を持つチームを設けた 私たちの答え デザイナー 設計する kintone Design System チーム(8人) 共通言語を管理・進化させる ・両者の中間に立つ ・継続的にアップデートする ・運用責任を担う この領域に明確に人やチームを設けて 投資する必要があるという意思決定 (評価・マネージメント・採用もセット) エンジニア 実装する
↓ AIを使うだけじゃなく、育てるループを作る ループを回す 使う 育てる AI が共通資産を参照して デザイン・実装を進める 責任者が資産をメンテし AI に食わせ続けられる状態に保つ ↓ ↓ デザインのための資産 トークン / ガイドライン / コンポーネント / etc.. デザインとエンジニアリングに必要なものを育て続ける 使えるように啓発する ↓ AIに使えるように工夫をするだけ skills・MCP・ DESIGN.mdなどAIに必要なものが変わっても対応しやすい
資産からAIのための武器を生み出す ループを回す 元々持っていた膨大な資産からAIが使いやすいように変換した例。 デザインのための資産を数年溜めていたものが武器になった デザインシステムを丸ごと Skills にする https://zenn.dev/cybozu_frontend/articles/design-system-skills
デザインの資産をどう育てますか? 作って終わりになっていませんか? AIを使うことだけ考えるとそんなに難しいことではない。 デザインの資産をどう育てるか、AIという手段だけでは難しい。 組織とツールの活用の両方を揃えていく必要がある。
他にもいろんな事例があります ループを回す kintone Design Magazine https://note.com/cybozu_design/m/mdc4ac766dcfc
Fin