なぜデザインシステムが必要なのか？ #nijibox

NIJIBOX | BUSINESS & CREATIVE online vol.11 成長フェーズのデザインシステムを 支えるために必要なマインドセットと対話力 Sugu Mizuno 2022.5.31

自己紹介 同志社大学経済学部卒。在学時に2年休学し、クリエイティブスタジオ、IT スタートアップの2社でデザインを担当した後、2020年にヤフーに新卒入 社。データ分析のSaasプロダクトのUIデザイン、及びデザインシステムの開 発を主に担当。 対話と自己実現の領域に関心があり、プライベートでは、副業でライフコー チングを実践中。 Twitter : https://twitter.com/mimizunosuguru 水野 直 Sugu Mizuno ヤフー株式会社 データソリューション部プロダクトデザイン DATA SOLUTION

問い「もしデザインシステムをやり直すなら？」 Masato @masato_io もしデザイン・システムをやり直すなら、どんな違っ た事をするか？という問いから始まるスレッドが示唆 深いのでシェア。個人的には、コミニケーションやマ ネジメントの側面について触れている意見が多く、組 織としてデザイン・システムに取り組む難しさについ て議論されているのが印象的でした。 Jan Toman @ #FutureOfDS @HonzaTmn 3月29日 If you could start your design system over, with all the knowledge of the organization, people, design language, requirements, constraints, ... What would you do differently? Where would you spend more time? What would you didn't do this time at all? 引用元 : https://twitter.com/masato_io/status/1511196505469689863

問い「もしデザインシステムをやり直すなら？」 V I N C E @1stfloor 返信先: @HonzaTmnさん I would have included senior managers more in the process/communicatiion, to really get them on board. Designers, Product Owners understand the advantages of a DS and that it's a product that serves products. But (in my case) Management saw it as a 'project' that had an end date Google による英語からの翻訳 上級管理職を巻き込むために、プロセス/コミュニケー ションに彼らを招くでしょう。デザイナー、プロダク トオーナーは、DSの利点と、DSがプロダクトを支える 製品であることを理解できます。しかし(私の(場合) 経営陣は、終了日が設定された「プロジェクト」と見 なしていました。 mayank sagar @noobydoobydooo 返信先: @HonzaTmnさん I would have more training for our product designers on using and maintaining the DLS directly, rather than having a dedicated DLS team doing that, for the products. The DLS team would focus on evolution while the maintenance and adoption would be done by products themselves Google による英語からの翻訳 DLS専門チームではなく、プロダクトデザイナーがDSL を直接使い、メンテナンスするようにトレーニングを 増やします。メンテナンスと適応をプロダクトサイド にやってもらうことで、DLSチームは、進化すること に焦点を置きます。

問い「もしデザインシステムをやり直すなら？」 Jono @chsweb 返信先: @HonzaTmnさん I'd hire at least 4 more of me. ツイートを翻訳 午前1:17 2022年3月30日 Twitter for iPhone 1件のいいね Jan Toman @HonzaTmn 3月30日 返信先: @chswebさん GIF ALT

問い「もしデザインシステムをやり直すなら？」 Jono @chsweb I'd hire at least 4 more of me. デザインシステムの構築自体より 組織への浸透・説得 / コミュニケーションに 課題感があることが伺える Jan Toman @HonzaTmn 3月30日 返信先: @chswebさん GIF ALT

問い「もしデザインシステムをやり直すなら？」 Yahoo! JAPAN Tech Blog Feedly RSS Blog トップ 全記事一覧 テクノロジー 2021.04.21 シェア 50 ツイート B! 4 Pocket LINEで送る 0 in Share カオスなデザインシステムを生き返らせるためにやったこと カオスなデザインシステムを 生き返らせるために やったこと https://techblog.yahoo.co.jp/entry/2021042130133404/

アジェンダ 1. カオスなデザインシステムを立て直すためにやったこと 2. 1年振り返って今思う、3つの大切な学び

データソリューションについて

AIテックカンパニーを目指すヤフーCDOのミッション Data for All Data for Good 詳細「Yahoo! JAPAN Tech Conference 2022 Day1 Keynote」

データソリューションとは？ Yahoo! JAPANでは、検索やメディア・ECなど多岐にわたる事業を通じて蓄積してきた ビッグデータをAI技術で分析し、自社サービスの改善に活用。 ヤフーのデータ活用の経験を生かし、企業や自治体のあらゆる事業活動を支援するサービス。 2019年10月にリリース。 DATA SOLUTION

提供サービス紹介 DS.INSIGHT ヤフーの検索、位置情報データを 分析できるデスクリサーチツール DS.ANALYSIS ヤフーのマルチビッグデータを オーダーメイドに分析/レポート/提言 DS.API 位置情報、 地図情報サービス 社内システム DS.API BIツール データ マイニング SAAS ヤフーの検索データを 自社システムに直接連携

DS.INSIGHTについて DS.INSIGHT GOOD DESIGN AWARD 2021 https://ds.yahoo.co.jp/service/insight/

DS.INSIGHTについて 2019年にサービスリリースし、毎年アップデート・新機能追加リリース DS.INSIGHT People 検索データを元に、生活者の興味関心を可視化 Place 位置情報を元に、特定のエリアにおける 人口動態や特徴検索などを可視化 Persona ビッグデータから、ターゲットの詳細な人物像を可視化

DS.INSIGHTを支えるのが、DS.DESIGN SYSTEM DS.INSIGHT People Place Persona 管理画面 DS.DESIGN SYSTEM

カオスなデザインシステムを 立て直すためにやったこと

DS.DESIGN SYSTEMの役割 1. Vueコンポーネントライブラリー 2. CSSコードスニペット 3. スタイルガイド 4. ブランドアセット（ロゴ / アイコン） 5. マーケティングアセット（PowerPoint・Excelテンプレート / HTMLメール作成ツール）

入社当初 2020年入社時 リリースして2年目のプロダクトにデザインシステムが導入されているすごい！

入社当初 2020年入社時 リリースして2年目のプロダクトにデザインシステムが導入されているすごい！ ~ 2、3ヶ月後 おっと、、、いろいろ課題がありそうだぞ...

リリース2年目のプロダクトを支えるデザインシステムが抱えていた課題 課題 1. プロダクトに関わるメンバー全員にデザインシステムが十分に認知されていない 2. コンポーネント数が肥大化し、使われていないものが生じている 3. 開発側からの依頼ベースで、コンポーネント入れ放題状態 4. スタイルガイドと実装が一致しない

リリース2年目のプロダクトを支えるデザインシステムが抱えていた課題 課題 1. プロダクトに関わるメンバー全員にデザインシステムが十分に認知されていない 2. コンポーネント数が肥大化し、使われていないものが生じている 3. 開発側からの依頼ベースで、コンポーネント導入可否の議論ができていない 4. ガイドラインとスタイルが一致しない デザインシステム大規模改修PJを実施

デザインシステムの大規模改修プロジェクトを実施 1. プロダクトに関わるメンバー全員にデザインシステムが十分に認知されていない → トップページを刷新 2. コンポーネント数が肥大化し、使われていないものが生じている → コンポーネント導入可否のルール策定 3. 開発側からの依頼ベースで、コンポーネント導入可否の議論ができていない → コンポーネント作成フローの構築 4. ガイドラインとスタイルが一致しない → DesignTokenの導入

改修1：トップページを刷新 DS.DESIGN SYSTEM DATA SOLUTION DESIGN SYSTEM データソリューションの全てが集まるデザインシステム Usage Contribute DS.DESIGN SYTYEMは、DS事業のあらゆるリソースが集まるデザインシステムです。 開発、ビジネス、マーケティングのそれぞれで一貫したデザイン品質を担保し、運用工数を削減します。 ※推奨閲覧環境はPCのChromeです。（スマートフォンは対象外） Component 開発向けのコンポーネント一覧です。 一覧を見る > Style Guide コンポーネントを作るベースとなるスタイルガイドです。 一覧を見る > Brand ブランドに関わるアイコンやロゴなどのアセット一覧です。 一覧を見る > Marketing マーケティングに関わるテンプレートやツール一覧です。 一覧を見る >

改修2：コンポーネント導入可否のルール策定 Product管理 Component DS.DESIGN SYSTEM Basic 世の中で一般的な汎用性の 高いUIパーツ Advance Basicに当てはまらないが、 2プロダクト以上で使われている Basicに当てはまらず、1プロダダ クトでしか使われてないもの Other

改修2：コンポーネント導入可否のルール策定 before after DS.DESIGN SYSTEM Components 外部プロダクトからimportして、そのまま利用できるコンポーネントの一覧です。 作成されたComponentは最終ページに格納されます。（利用状況一覧を見る） Alert ArrowButton Autocomplete Breadcrumbs Button ButtonGroup Card CardHeader CardGroup CategorySelect Checkbox Chip Combobox DataDownload DatePicker Dialog DsError DsFrame DsError DsFrame DsHero EMG EmptyState ErrorBlock500 Expand FaqDialog Footer FullPageError Header Hero Icon IntlUnsupportedBrowser LeftSidebar LigenBrand LinkList Loading MainMenu ModalSheet ModalSelect MultipleSelect OutsideCombobox Pagination PartialError PopupWrapper PulldownList PulldownSelect Radio RichCombobox RightSidebar ScrollButton Select SingleModalCard Slider StackedBarChart StarRate Step Suggest Table TableCell DS.DESIGN SYSTEM Components 外部プロダクトからimportして、そのまま利用できるコンポーネントの一覧です。 作成されたComponentは最終ページに格納されます。（利用状況一覧を見る） Alert Animation Badge Breadcrumb Button ButtonDownload ButtonFaq ButtonGroup ButtonSolid ButtonZoom Card Checkbox Chip ComboboxInside ComboboxOutside Datepicker Dialog EMG ErrorFullpage ErrorPartial Expand Footer Frame FrameError Header Heading Icon Label Link List Loading MenuCard Notification PaginationNumber PaginationSlider Progress PulldownBox PulldownMenu PulldownMenuMultiple Radio Sidebar Slider StackedBarChart Tab Table TextField Textarea Toggle Tooltip

改修3：コンポーネント作成フローの構築 3月8日(月) Jira Bot アプリ 9:54 has created a Task DSBIZDEVTECHDE-6853: [新規]DsBadge ステータス: Open 担当者:水野直 優先度:高 +2 44件の返信 最終返信: 12日前 Jira Bot アプリ 17:05 s created a Task DSBIZDEVTECHDE-6866: [修正]ErrorPartial_タイトルを入れ込めるよう にする ステータス: Open 担当者:水野直 優先度:中 6件の返信 最終返信: 18日前 Jira Bot アプリ 17:57 s created a Task DSBIZDEVTECHDE-6871: Checkboxデザイン調整_WD ステータス: Open 担当者:水野直 優先度:中 1件の返信 18日前 3月9日(火) Jira Bot アプリ 12:32 has created a Task DSBIZDEVTECHDE-6879: [相談]pulldownmenumultiple_4階層まで対 応 ステータス: Open 担当者:水野直 優先度:中 6件の返信 17日前 Jira Bot アプリ 3月8日 17:05 has created a Task DSBIZDEVTECHDE-6866: [修 正]ErrorPartial_タイトルを入れ込めるよう にする ステータス: Open 担当者:水野直 優 先度:中 19日前 DsErrorPartialの修正タスク作成しまし た。 さんと議論済みです。デザイン/エ ンジニアリングの観点で問題なければ、実装依 頼に進みたいです。レビューお願い... 19日前 ありがとうございます！ こちらテキストの方が汎用的ですし私は問題な いと思います。 18日前 VD拝見したのですが、これは ErrorPartialではなく、ErrorFullpageでは？ このVDの通りタイトルを入れ込めるようにし たとして、既存の「403 Forbidden」のようなSVG はどうするのでしょうか。ファイルごと消す？タ イトルを入れなかった場合のみ表示する？ 18日前 ErrorFullpageでしたmm変更します 既存の「403 Forbidden」のようなSVGはどう するのでしょう。ファイルごと消す？タイト ルを入れなかった場合のみ表示する？ 削除の方針で、タイトルはデフォルトで「403 Frbidden」をテキストで入れ、Propsで入れ替え 可能と言うイメージでいかがでしょう？

改修4：Design Tokenの導入 Color Palate BaseColor Role Color Background Text Object Border Overlay Hover（要再設計） Chart concept

改修4：Design Tokenの導入 Figma Code _backgroundcolor.scss packages > styles > global > designtoken > _backgroundcolor.scss > ... // ========================================== // background $ds-color-background: #fafafa; // ========================================== // surface $ds-color-surface-primary: #40cbb6; $ds-color-surface-primary-dark: #32b7a3; $ds-color-surface-secondary: #3f3f4f; $ds-color-surface-secondary-dark: #30303c; $ds-color-surface-grey: #efeff2; $ds-color-surface-white: #fff; $ds-color-surface-disable: #efeff2; $ds-color-surface-alert: #ff3959; $ds-color-surface-blue: #537ff5; $ds-color-surface-yellow: #ffc822; // ========================================== // object $ds-color-object-primary: #40cbb6; $ds-color-object-primary-dark: #32b7a3; $ds-color-object-grey-light: #7e7e98;

改修4：Design Tokenの導入 DesignToken ガイドライン: https://cptl.corp.yahoo.co.jp/x/iaDiIg FontSize FontWeight Headline BorderRadius IconSize BoxShadow Spacing Alias Color BaseColor

結果どうだったか？

結果どうだったか？（めちゃくちゃよかった） 1. デザインで迷ったらデザインシステムに立ち返る場が生まれた 2. ルールを策定することで、建設的な議論ができるように 3. 議論の場を仕組み化することで、全員が当事者意識を持ち、横断的にサービス を考え納得感を得られるように 4. 色から始めることで、デザイナー、エンジニアがデザインシステムを有用性を 体感した 詳細「カオスなデザインシステムを生き返らせるためにやったこと（Yahoo! JAPAN Tech Blog）」

1年振り返って今思う、3つの学び

1年振り返って今思う、3つの学び ① 組織のフェーズを理解し、今必要なデザインシステムの形を見つけよう ② デザインシステムはプロダクトであり、コミュニケーションツールであり、開発プロセスである ③ ステークホルダーの声を聞き、対話しよう。

1. 組織のフェーズを理解し、 今必要なデザインシステムの形を見つけよう

Lightning Design System Create the World's Best Enterprise App Experiences Carbon Design System Carbon is IBM's open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system ATLASSIAN Design System Design, develop, deliver Use Atlassian's end-to-end design language to create simple, intuitive and beautiful experiences. Spectrum Meet Spectrum, Adobe's design system Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe's applications more cohesive.

手段と目的

今のフェーズでデザインシステムが担う役割を定義 1. Component化により、プロトタイピングができる 2. DesignTokenにより、一貫したユーザー体験を提供できる 3. Coding Rulegに基づいた開発で、デザイン / 機能の変更による改修スピードが早い 4. DesignSystemを開発基盤とし、大規模リファクタリングを起こさない

タックマンモデル ステージ1 | 形成期（Forming） ステージ2 | 混乱期（Storming） ← DataSolutionのフェーズ ステージ3 | 統一期（Norming） ステージ4 | 機能期（Performing） ステージ5 | 散会期（Adjourning） ← 世にあるデザインシステムのフェーズ 参考「ユーザー中心組織論」

5年目のDataSolutionのフェーズ 2019年リリース時 DS.INSIGHT People Place 現在 DS.INSIGHT People Place Persona DS.API DS.LIBRARY DS.DATASET

どこに目を向けていくか？ 1つのプロダクトにはたくさんの人の思いや努力、時間が詰め込まれている。 デザインシステムは、それを次の世代に渡すような存在。 完璧なシステムを作ることが目的ではない。 デザインシステムを通じて何を成すか？これに何度も立ち返る必要がある。

2. デザインシステムはプロダクトであり、 コミュニケーションツールであり、開発プロセスである

デザインシステムの改修を完了した際に、プロダクトサイドのPMから言われたこと 「何も変わってないじゃないか...！」

多くの人が考えるデザインシステムの存在 一般的にはこう プロダクト DS.INSIGHT PJ 企画1 企画2 デザインシステム

多くの人が考えるデザインシステムの存在 実際はこう プロダクト DS.INSIGHT DS.DESIGN SYSTEM PJ 企画1 企画2 企画1 企画2

多くの人が考えるデザインシステムの存在 もっと言えばこう DS.INSIGHT People Place Persona 管理画面 DS.DESIGN SYSTEM

多くの人が考えるデザインシステムの存在 さらに言えばこう プロダクト DS.INSIGHT DS.LIBRARY DS.API DS.DESIGN SYSTEM

コンウェイの法則 システムを設計する組織は、 その構造をそっくりまねた構造の設計を生み出してしまう 参考「エンジニアリング組織論への招待」

ここから得る学びは？ デザインシステムを作ることは 開発プロセスを支援することに直結しない。 デザインシステムは開発プロセスに組み込み、 そこからコミュニケーションを展開して、初めて機能すると言える。

3. ステークホルダーの声を聞き、対話しよう。

デインシステム改修の激論で驚いたこと2つのパターン 1. 自分が必ずこれがいいと思っていることが、他のメンバーに簡単に 伝わらない 2. 「めんどくさいと思われないかな？」という改修の提案が、意外 にも賛成された

対話とは何か？

映画「スティーブ・ジョブズ」のあるシーン フォントは後回しに... 映画「スティーブ・ジョブズ」予告編 11月1日（金）全国公開 フォントは後回しに... 映画「スティーブ・ジョブズ」予告編 11月1日（金）全国公開 引用元：「映画「スティーブ・ジョブズ」/ギャガ公式チャンネル

映画「スティーブ・ジョブズ」のあるシーン クビだ 映画「スティーブ・ジョブズ」予告編 11月1日（金）全国公開 引用元：「映画「スティーブ・ジョブズ」/ギャガ公式チャンネル

コミュニケーションの種類 4つのコミュニケーションの違い 1. 討論 どの主張が正しいかを決めるもの 2. 議論 意思決定などの着地を決めるもの 3. 対話 お互いの前提や意見の違いをわかり合おうとするもの 4. 雑談 お互いの印象を良くするもの 「誤解されがちな議論と対話の違い | CULTIBASE Radio | Management #6」より

対話とは何か？ 対話とは我慢である 「対話とは、我慢である。共感のバッドパターンとは | CULTIBASE Radio | Management #90」

対話とは何か？ 1. 自分が必ずこれがいいと思っていることが、他のメンバーに簡単に 伝わらない 2. 「めんどくさいと思われないかな？」という改修の提案が、意外 にも賛成された → 正義を押し付けず、我慢して相手の意見を聞き、信念を持って伝え続ける → 相手を信じて提案し、違う視点/アイデア、助けをもらう

前提として、人にはたくさんの価値観があり、 全てを分かり合うことはできない。 しかし、対話によって分かりあえなさを分かり合い、 一人では成しえない課題を、超えていくことができる。 一人では見ることができない景色を、見ることができる。 そこにチームで取り組むことのインパクトがある

対話しようぜ！

1年振り返って今思う、3つの学び ① 組織のフェーズを理解し、今必要なデザインシステムの形を見つけよう ② デザインシステムはプロダクトであり、コミュニケーションツールであり、開発プロセスである ③ ステークホルダーの声を聞き、対話しよう。

DATA SOLUTION デザイナー（オープンポジション） https://about.yahoo.co.jp/hr/job-info/role/1101/ エンジニア（データソリューション） https://about.yahoo.co.jp/hr/job-info/role/1419/ https://about.yahoo.co.jp/hr/job-info/role/1490/ https://about.yahoo.co.jp/hr/job-info/role/1500/