Tweet
Tweet

Slide 1

Slide 1 text

デザインシステムと エンジニアの新しい役割 AI時代に求められる価値創造 XP祭り｜松田 知也 Copyright dip.inc All Rights Reserved.

Slide 2

Slide 2 text

自己紹介 松田 知也（まつだ ともや） 所属：ディップ株式会社 職種：フロントエンドエンジニア 好きなもの：ガジェット、ボードゲーム #25新卒　#カンファレンス初登壇 Copyright dip.inc All Rights Reserved. 2 / 25

Slide 3

Slide 3 text

目次 デザインはデザイナーだけのものじゃない 1 プロダクトの本質的な価値とは？ 2 AIとデザインシステムの役割 3 AI時代のエンジニアのあるべき姿 4 Copyright dip.inc All Rights Reserved. 3 / 25

Slide 4

Slide 4 text

1. デザインは デザイナーだけのものじゃない

Slide 5

Slide 5 text

デザイン＝「見た目を整えること」 「かっこいいビジュアルを作ること」 だと思っていませんか？ でもそれはデザインのほんの一部にすぎない 問題の本質を見つけ、それを解決するための計画を立てること → だから、エンジニアも含めて、プロダクトに関わる全員に関係がある デザインって何だろう？ 本来のデザインとは Copyright dip.inc All Rights Reserved. 5 / 25

Slide 6

Slide 6 text

「社員のモチベーションを上げたいから、ロゴを作り直してほしい」 → 本質を捉えずに見た目だけ変えても成果につながらない 本質を見極める クライアントからの依頼 手段はひとつじゃない 社員食堂のメニュー改善 社内ネットワーク10Gbps化 Copyright dip.inc All Rights Reserved. 6 / 25

Slide 7

Slide 7 text

2. プロダクトの本質的な 価値とは？

Slide 8

Slide 8 text

クライアント「シフト調整が大変だから楽になるサービスを作って」 ユーザーインタビューと観察 本質的な価値を見つけるには どうやって本質を見つける？ 現場で実際に何が起きているか観察 店長やスタッフの生の声を聞く 日々の困りごとを深掘りする Copyright dip.inc All Rights Reserved. 8 / 25

Slide 9

Slide 9 text

単にシフト生成機能を作るだけでは解決できない、 潜在的な課題に目を向けることが大事です。 本当に価値があるサービス 現場の店長が本当に困っているのは… スタッフが突然休みを取ったときの急な人手不足 店長同士で「誰が代われるか」を連絡し合うやり取りの手間 Copyright dip.inc All Rights Reserved. 9 / 25

Slide 10

Slide 10 text

3. AIとデザインシステムの役割

Slide 11

Slide 11 text

人間が本当に考えるべきところに時間を戻してくれる存在 今まで時間を取られていたこと → AIが肩代わり → 本質的な価値に集中できる AIがもたらす変化 AIは単に仕事を楽にする道具ではない UIの細かな調整 ドキュメント作成 コードの繰り返し作業 Copyright dip.inc All Rights Reserved. 11 / 25

Slide 12

Slide 12 text

単なる「見た目のルール」や「部品集」ではない デザインシステムとは 良いプロダクトを誰もが迷わず作れるようにする 共通言語・仕組みの体系 “ Copyright dip.inc All Rights Reserved. 12 / 25

Slide 13

Slide 13 text

→ ルール ・ ツールがセットになってデザインシステム それぞれの意味と、デザインシステムとの違い デザインガイドライン デザイン指針などの原則から、色やタイポグラフィといった具体的なルール UIコンポーネント ボタン、テキストフィールド、ナビゲーションバーなどの再利用可能な部品の集合体 Copyright dip.inc All Rights Reserved. 13 / 25

Slide 14

Slide 14 text

この三つが相互に連携し合ってデザインシステムが作られます。 デザインシステムの3要素 デザイン原則 「誰に、どんな体験を届けたいか」を定義する上位概念。 例： 「シンプルで直感的に使える体験を提供する」など。 デザイントークン・UIコンポーネント Copyright dip.inc All Rights Reserved. 14 / 25

Slide 15

Slide 15 text

制限の例 一見すると自由度を奪うように見える が... なぜ？ AIの出力が無秩序にならない 人間同士も「この青？あの青？」と迷わ ない 共通の言語でやりとりできる 結果：スピードも品質も両立できる デザイントークンの価値 あえて選択肢を狭める 色はこのセットだけ 余白はこの数値だけ フォントサイズは5段階のみ 実は制限が価値を生む Copyright dip.inc All Rights Reserved. 15 / 25

Slide 16

Slide 16 text

人の役割 原則や価値を考える AIの役割 トークンに基づいた画面を作成 → デザイントークンが橋渡し = AI時代のデザインの土台 デザイントークンの本質 人とAIが協力するための最小単位 Copyright dip.inc All Rights Reserved. 16 / 25

Slide 17

Slide 17 text

Figma → JSON → CSS変数など デザイントークンの作り方 Tokens Studio Style Dictionary Copyright dip.inc All Rights Reserved. 17 / 25

Slide 18

Slide 18 text

効果 ユーザーがどのページを訪れても同じ操作感・同じ見た目 → 「このサービスの中にいる」という安心感 UIコンポーネント デザイントークンのルールを具現化 Copyright dip.inc All Rights Reserved. 18 / 25

Slide 19

Slide 19 text

サービスへの価値 開発への価値 UIコンポーネント = サービスの価値そのものを担保する存在 UIコンポーネントの真の価値 単なる便利ツールではない 一貫性のあるUI → ユーザーの信頼感 見やすさ・使いやすさ → 競合との差別化 再利用可能な実装 → 開発効率の劇的向上 品質の担保 → バグの削減 Copyright dip.inc All Rights Reserved. 19 / 25

Slide 20

Slide 20 text

UIコンポーネントの作り方 Storybook Storybookを活用 UIをカタログ化して整理 誰が見ても「意味」がわかる AIにも学習させやすい 実装のスピードが上がる Copyright dip.inc All Rights Reserved. 20 / 25

Slide 21

Slide 21 text

4. AI時代の エンジニアのあるべき姿

Slide 22

Slide 22 text

デザインシステムは、エンジニアにとってもすごく身近なもの エンジニアとデザインシステム コンポーネントやトークンはコードに直結する 「仕組みとしてのデザイン」に関わることは自然なこと そのきっかけから、チームとして一緒に本質的な価値を考えることに踏み込んでいけ る Copyright dip.inc All Rights Reserved. 22 / 25

Slide 23

Slide 23 text

A. 「価値を共に設計する人」 へと役割を広げていく必要があるんです。 「何を実現すべきか」 「どうすればより良い体験を作れるか」を考える部分は人間 AI時代に求められるエンジニア像 エンジニアの価値はどこにあるのか？ 価値を共に設計するチームメンバーとして活躍 “ Copyright dip.inc All Rights Reserved. 23 / 25

Slide 24

Slide 24 text

まとめ デザインは問題解決の計画であり、全員に関係がある 潜在的な課題の発見により本質的な価値を作ることが可能 デザインシステムは、原則・ルール・ツールの階層構造 エンジニアも価値を共に設計する役割を担う時代 Copyright dip.inc All Rights Reserved. 24 / 25

Slide 25

Slide 25 text

ありがとうございました 一緒に価値を創造していきましょう Copyright dip.inc All Rights Reserved.