Devinで始める デザインルール運用/cm-fukuoka-study-lmi

リンクアンドモチベーション登壇資料（2026/02/12）

#クラメソふくおかIT勉強会 #リンモチ

===========================================
【イベント情報】
■イベントページ
https://classmethod.connpass.com/event/381672/

【株式会社リンクアンドモチベーション】
■お問合せ先
　engineer_pr@lmi.ne.jp
■テックブログ
　https://link-and-motivation.hatenablog.com/
■開発組織の公式X
　https://x.com/LinkandM_dev
=============================================

Transcript

1. © Link and Motivation Group 株式会社リンクアンドモチベーション エンゲージメントプロダクトユニット 中上 裕基 Devinで始める デザインルール運用
2. 2 © Link and Motivation Group 中上 裕基（なかがみ ゆうき） @nakagam3 株式会社リンクアンドモチベーション フロントエンドエンジニア • モチベーションクラウドエンゲージメントの開発に従事 • AIエージェント × デザインシステム = 開発生産性向上 が現在の担当テーマ 自己紹介
3. 3 © Link and Motivation Group 会社紹介 創業年月日｜2000年4月7日 上場市 ｜東京証券取引所 プライム市場 従業員数 ｜約1,500名 (グループ全体) 売上 ｜374億 (グループ全体) ※2024年12月期 事業内容 ｜組織改善クラウドの開発・提供
4. 4 © Link and Motivation Group 分かりやすく まとめなきゃ どのファイル だっけ？ 仕事も 忙しいし... 課題：デザインルールの運用って大変
5. 5 © Link and Motivation Group 事例：Devinを使ってデザインルールの運用を楽ちんに！ デザインルール参照 1. 質問する 2. 議論する 3. ナレッジを育てる
6. 6 © Link and Motivation Group できること① 質問する コードベースを調査したところ、エラーに はToastとBannerが使用されています。 こんな画面デザインを考えてるんだけど、 エラーの表示ってどんなデザインにする と良さそうですか？ デザインルールによると Toastは一時的な通知に、Bannerは情報を 強調する用途で使用されます。
7. 7 © Link and Motivation Group できること① 質問する モーダルを使ったデザインを考えてるんで すね。とても良いデザインです。 コードベースを調査したところ、エラーに はToastとBannerが使用されています。 こんな画面デザインを考えてるんだけど、 エラーの表示ってどんなデザインにする と良さそうですか？ デザインルールによると Toastは一時的な通知に、Bannerは情報を 強調する用途で使用されます。
8. 8 © Link and Motivation Group できること② 議論する ・一時的な通信エラーならすぐに消えるToast ・エラー内容をユーザーに伝えたいときはBanner という使い分けをすると良さそうってこと？ Toastは3秒で消えてしまうため、登録エラー はBannerの方が確実に伝えるために適切です いくつかエラーのパターンがあるんだけど 全てToastで統一してもいいかな？ 天才です
9. 9 © Link and Motivation Group できること③ ナレッジを育てる 回答に価値を感じたらナレッジを貯めま しょう。このナレッジを保存しますか？ よろしく！ エラーの使い分けに関するナレッジをまと めました！PRはこちらです。
10. 10 © Link and Motivation Group まとめ • Devinを使えばInteractiveな運用フローを簡単に構築できるのでおすすめ ◦ ※ 大きいタスクは難しいので、小さいタスクの組み合わせに設計することが大事 • 導入したばかりなので継続的に使ってもらい「生きたルール」を育てたい • AIと連携させて開発生産性を上げていきたい ◦ 例）Figma Makeでルールに乗っ取ったデザインを自動で作らせる ◦ 例）デザイン作成もせずに仕様書だけで画面実装ができる
11. デザインとコードの境界を融かし 誰もが最適な体験を より早く届けられる世界へ
12. 12 © Link and Motivation Group 1つだけ告知を…！ • リンモチ、採用・広報頑張ってます！ • もしよければ、「技術広報公式X」のフォローをお願いします！ • AI活用に興味のある皆さんと、ご縁を深めていきたいです！