デザインシステムとエンジニアの新しい役割

Transcript

1. デザインシステムと エンジニアの新しい役割 AI時代に求められる価値創造 XP祭り｜松田 知也 Copyright dip.inc All Rights Reserved.
2. 自己紹介 松田 知也（まつだ ともや） 所属：ディップ株式会社 職種：フロントエンドエンジニア 好きなもの：ガジェット、ボードゲーム #25新卒　#カンファレンス初登壇 Copyright dip.inc All Rights Reserved. 2 / 25
3. 目次 デザインはデザイナーだけのものじゃない 1 プロダクトの本質的な価値とは？ 2 AIとデザインシステムの役割 3 AI時代のエンジニアのあるべき姿 4 Copyright dip.inc All Rights Reserved. 3 / 25
4. 1. デザインは デザイナーだけのものじゃない
5. デザイン＝「見た目を整えること」 「かっこいいビジュアルを作ること」 だと思っていませんか？ でもそれはデザインのほんの一部にすぎない 問題の本質を見つけ、それを解決するための計画を立てること → だから、エンジニアも含めて、プロダクトに関わる全員に関係がある デザインって何だろう？ 本来のデザインとは Copyright dip.inc All Rights Reserved. 5 / 25
6. 「社員のモチベーションを上げたいから、ロゴを作り直してほしい」 → 本質を捉えずに見た目だけ変えても成果につながらない 本質を見極める クライアントからの依頼 手段はひとつじゃない 社員食堂のメニュー改善 社内ネットワーク10Gbps化 Copyright dip.inc All Rights Reserved. 6 / 25
7. 2. プロダクトの本質的な 価値とは？
8. クライアント「シフト調整が大変だから楽になるサービスを作って」 ユーザーインタビューと観察 本質的な価値を見つけるには どうやって本質を見つける？ 現場で実際に何が起きているか観察 店長やスタッフの生の声を聞く 日々の困りごとを深掘りする Copyright dip.inc All Rights Reserved. 8 / 25
9. 単にシフト生成機能を作るだけでは解決できない、 潜在的な課題に目を向けることが大事です。 本当に価値があるサービス 現場の店長が本当に困っているのは… スタッフが突然休みを取ったときの急な人手不足 店長同士で「誰が代われるか」を連絡し合うやり取りの手間 Copyright dip.inc All Rights Reserved. 9 / 25
10. 3. AIとデザインシステムの役割
11. 人間が本当に考えるべきところに時間を戻してくれる存在 今まで時間を取られていたこと → AIが肩代わり → 本質的な価値に集中できる AIがもたらす変化 AIは単に仕事を楽にする道具ではない UIの細かな調整 ドキュメント作成 コードの繰り返し作業 Copyright dip.inc All Rights Reserved. 11 / 25
12. 単なる「見た目のルール」や「部品集」ではない デザインシステムとは 良いプロダクトを誰もが迷わず作れるようにする 共通言語・仕組みの体系 “ Copyright dip.inc All Rights Reserved. 12 / 25
13. → ルール ・ ツールがセットになってデザインシステム それぞれの意味と、デザインシステムとの違い デザインガイドライン デザイン指針などの原則から、色やタイポグラフィといった具体的なルール UIコンポーネント ボタン、テキストフィールド、ナビゲーションバーなどの再利用可能な部品の集合体 Copyright dip.inc All Rights Reserved. 13 / 25
14. この三つが相互に連携し合ってデザインシステムが作られます。 デザインシステムの3要素 デザイン原則 「誰に、どんな体験を届けたいか」を定義する上位概念。 例： 「シンプルで直感的に使える体験を提供する」など。 デザイントークン・UIコンポーネント Copyright dip.inc All Rights Reserved. 14 / 25
15. 制限の例 一見すると自由度を奪うように見える が... なぜ？ AIの出力が無秩序にならない 人間同士も「この青？あの青？」と迷わ ない 共通の言語でやりとりできる 結果：スピードも品質も両立できる デザイントークンの価値 あえて選択肢を狭める 色はこのセットだけ 余白はこの数値だけ フォントサイズは5段階のみ 実は制限が価値を生む Copyright dip.inc All Rights Reserved. 15 / 25
16. 人の役割 原則や価値を考える AIの役割 トークンに基づいた画面を作成 → デザイントークンが橋渡し = AI時代のデザインの土台 デザイントークンの本質 人とAIが協力するための最小単位 Copyright dip.inc All Rights Reserved. 16 / 25
17. Figma → JSON → CSS変数など デザイントークンの作り方 Tokens Studio Style Dictionary Copyright dip.inc All Rights Reserved. 17 / 25
18. 効果 ユーザーがどのページを訪れても同じ操作感・同じ見た目 → 「このサービスの中にいる」という安心感 UIコンポーネント デザイントークンのルールを具現化 Copyright dip.inc All Rights Reserved. 18 / 25
19. サービスへの価値 開発への価値 UIコンポーネント = サービスの価値そのものを担保する存在 UIコンポーネントの真の価値 単なる便利ツールではない 一貫性のあるUI → ユーザーの信頼感 見やすさ・使いやすさ → 競合との差別化 再利用可能な実装 → 開発効率の劇的向上 品質の担保 → バグの削減 Copyright dip.inc All Rights Reserved. 19 / 25
20. UIコンポーネントの作り方 Storybook Storybookを活用 UIをカタログ化して整理 誰が見ても「意味」がわかる AIにも学習させやすい 実装のスピードが上がる Copyright dip.inc All Rights Reserved. 20 / 25
21. 4. AI時代の エンジニアのあるべき姿
22. デザインシステムは、エンジニアにとってもすごく身近なもの エンジニアとデザインシステム コンポーネントやトークンはコードに直結する 「仕組みとしてのデザイン」に関わることは自然なこと そのきっかけから、チームとして一緒に本質的な価値を考えることに踏み込んでいけ る Copyright dip.inc All Rights Reserved. 22 / 25
23. A. 「価値を共に設計する人」 へと役割を広げていく必要があるんです。 「何を実現すべきか」 「どうすればより良い体験を作れるか」を考える部分は人間 AI時代に求められるエンジニア像 エンジニアの価値はどこにあるのか？ 価値を共に設計するチームメンバーとして活躍 “ Copyright dip.inc All Rights Reserved. 23 / 25
24. まとめ デザインは問題解決の計画であり、全員に関係がある 潜在的な課題の発見により本質的な価値を作ることが可能 デザインシステムは、原則・ルール・ツールの階層構造 エンジニアも価値を共に設計する役割を担う時代 Copyright dip.inc All Rights Reserved. 24 / 25
25. ありがとうございました 一緒に価値を創造していきましょう Copyright dip.inc All Rights Reserved.