デザインシステムからはじめない、デザインシステムの考え方 -FLEXY meetup登壇資料-

2023年7月19日に「デザインシステム」のテーマで開催したFLEXY meetupの登壇資料。

こちらのURLでイベントレポートの確認もできるようになります。
https://flxy.jp/media/article/27022

Transcript

2. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. ❏ Speaker紹介 ❏ セッション - デザインシステムとは何か？ - デザインシステムの立ち上げ方 - デザインシステムをみんなが使えるようになるために ❏ 質疑応答 ❏ アンケート記入と次回予告 Agenda
3. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. ❏ Speaker紹介 ❏ セッション - デザインシステムとは何か？ - デザインシステムの立ち上げ方 - デザインシステムをみんなが使えるようになるために ❏ 質疑応答 ❏ アンケート記入と次回予告 Agenda
4. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. Speaker紹介 小木曽 槙一 氏 × 株式会社SmartHR プロダクトデザイナー Today’s Speakers × 金森 悠 氏 株式会社SmartHR プロダクトデザイナー sakito 氏 サイボウズ株式会社 Design Technologist
5. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. ❏ Speaker紹介 ❏ セッション - デザインシステムとは何か？ - デザインシステムの立ち上げ方 - デザインシステムをみんなが使えるようになるために ❏ 質疑応答 ❏ アンケート記入と次回予告 Agenda
6. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. Speaker紹介 ▶Twitterページ： 　https://twitter.com/kgsi 小木曽 槙一 氏 株式会社SmartHR プロダクトデザイナー 受託制作会社でデザイナー・エンジニアとして勤務後、事業会社の デザインエンジニアとしてプロダクト開発に従事。 2020年より株式会社SmartHRに入社し、基本機能や従業員サー ベイ機能の開発設計に携わる。デザインシステムや UIコンポーネン トの開発など、社内横断プロジェクトにも参画。 パラレルキャリアを標榜し、副業でエンジニア・デザイナー・アドバイ ザーとして活動中。
7. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. Speaker紹介 ▶Twitterページ： 　https://twitter.com/uknmr 金森 悠 氏 株式会社SmartHR プロダクトデザイナー 2020年SmartHR入社。 ウェブデザイナーとして 10代の頃から個人で活動を始め、大学でイ ンダストリアルデザインを学ぶ。 中小SIerに就職し主にJavaエンジニアとして働く。その後ウェブ系 のフロントエンドエンジニアを経て、情報設計やデザインへの熱情を 思い出した頃、現職へ。 インターネット大好き。特にウェブ界隈を作り上げている思想とその 人々が好き。
8. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. サービス紹介：SmartHR社 SmartHRプロダクトデザイングループでは ⼀緒に働く仲間を探しています。 中途採用情報 あなたの力を活かせる環境がここにあります。 新卒採用情報 新卒採用0期生（2025年新卒）採用を始めました。
9. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. Speaker紹介 ▶Twitterページ： 　https://twitter.com/__sakito__ sakito 氏 サイボウズ株式会社 Design Technologist 2015年に営 業として人 材 派 遣 会 社に入 社し半 年で転 職。ベン チャー企業にてさまざまな業務を経験した後に、 2017年にヤフー株 式会社にてフロントエンドエンジニアになる。 2019年に現職のサイボウズに中途入社しフロントエンドエキスパー トチームに所 属、2022年にデザインシステムチームを立ち上げ、 2023年から自社製品である kintoneのデザイン責任者とデザイン 室のリーダーになる。プロダクトと全社のデザイン組織づくりやプロ セスの改善がいまのお仕事。犬が好き。
10. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. サービス紹介：サイボウズ社 サイボウズのデザインの取り組みはこちら！ kintone Design Magazine Cybozu Designers&Researchers
11. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. サービス紹介：サイボウズ社 サイボウズ採⽤情報
12. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. ❏ Speaker紹介 ❏ セッション - デザインシステムとは何か？ - デザインシステムの立ち上げ方 - デザインシステムをみんなが使えるようになるために ❏ 質疑応答 ❏ アンケート記入と次回予告 Agenda
13. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. デザインの再現性を高めて一貫した製品体験を効率よく表現すること、を目的に導入 デザインに関する情報や ガイドラインが まとまっているもの ありがちな誤解 「デザイン」という何らかの 目的を達成するための 仕組みとして機能するもの 本来あるべき姿 デザインシステムとは何か？
14. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. UIガイドライン コンポーネント集やパターンライブラリなど UIパーツやコードスニペットが含まれる ブランドガイドライン ビジュアルアイデンティティだけでなく CI(企業理念やビジョン)も含まれる 運用ガイドライン プロダクトやインフラとしてのデザインシステムを運用 し続けるために必要なもの コンテンツガイドライン 表記ルールやライティングパターンなど 文章を書く全ての人を対象にしたもの 一般的に「スタイルガイド」と呼ばれるドキュメントのまとまりで形成される デザインシステムの構成要素
15. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. ❏ Speaker紹介 ❏ セッション - デザインシステムとは何か？ - デザインシステムの立ち上げ方 - デザインシステムをみんなが使えるようになるために ❏ 質疑応答 ❏ アンケート記入と次回予告 Agenda
16. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. デザインシステムの完成以前にデザインシステムが使われている状態の実現を目指す Step.2 Step.3 Step.4 便利なコンテン ツから作る 課題発見/解決 のｻｲｸﾙを回す 原則を 言語化する Step.1 ｼｽﾃﾑ構築目 的を明確にす る デザインシステムの立ち上げ方 デザインシステムをはじめるための4ステップ
17. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. 今回はStep.1・Step.2にフォーカスして「システム作りのことはじめ」に迫ります Step.2 Step.3 Step.4 便利なコンテン ツから作る 課題発見/解決 のｻｲｸﾙを回す 原則を 言語化する Step.1 ｼｽﾃﾑ構築目 的を明確にす る デザインシステムの立ち上げ方 デザインシステムを「ちいさく」はじめるために重要な2ステップ
18. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. SmartHR サイボウズ デザインシステムの立ち上げ方 [Step.1]デザインシステムを構築する目的/解決したい課題を明確にする Step.2 便利なコンテンツから作る Step.1 システム構築目的を明確にする ・デザインを言語化するチームを立ち上げ ・過去ではなく、これからデザインを変えてい く部分で利用できる形からデザインの言語化 からコンポーネントの用意 ・デザインの意思決定の歴史が 継承できていない ・デザイナーじゃないとデザインに 触れることができない コミュニケーションデザイングループと 共有しつつ、デザインシステムの 構築を有志で開始 こ と は じ め 課 題 ・UIのバラツキ ・設計手法の属人化 ・デザイナー外への伝達コスト増大
19. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. ・Buttonのデザインと実装から言語化したド キュメントを用意 ・1つ1つのコンポーネントからリリース ・デザインの意思決定を行うフローから過去 の情報までガイドラインを用意 ・デザインを言語化するチームと コミュニケーションチャンネルを多数用意 （Issueやslackなど） 具 体 ア ク シ ョ ン ・誰でも更新・構築できる デザインシステムの「箱」を構築 ・デザイントークンの定義 ・コンポーネントライブラリの 使い方を定義 ・パターンの抽出やパターンの命名 Step.2 便利なコンテンツから作る Step.1 システム構築目的を明確にする デザインシステムの立ち上げ方 [Step.2]ユーザーにとって便利なコンテンツから作る SmartHR サイボウズ
20. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. デザインシステムの立ち上げ方 まとめ：便利なコンテンツとは何か？ Step.2 便利なコンテンツから作る Step.1 システム構築目的を明確にする 「便利なコンテンツ」と呼べる3つのポイント 使おうとしたときの学習や導入コストが低い 使うと分かりやすい成果が得られる デザインシステムの最初の利用者になって欲しい人たちが 実際に使いたいと思える
21. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. ❏ Speaker紹介 ❏ セッション - デザインシステムとは何か？ - デザインシステムの立ち上げ方 - デザインシステムをみんなが使えるようになるために ❏ 質疑応答 ❏ アンケート記入と次回予告 Agenda
22. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. 組織全体で活用して初めて「システム」として機能する Step.1 Step.2 Step.3 最初は地道な 草の根活動 課題発見に“ちいさく “協力してもらう コンテンツの作者に なってもらう デザインシステムをみんなが使えるようになるために 「みんなのもの」にするための3ステップ
23. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. 今回はStep.1にフォーカスして「泥臭いことの具体って何？」に迫ります Step.1 Step.2 Step.3 最初は地道な 草の根活動 課題発見に“ちいさく “協力してもらう コンテンツの作者に なってもらう デザインシステムをみんなが使えるようになるために 便利なものの存在を知ってもらうために行う地道な活動
24. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. SmartHR サイボウズ デザインシステムを使ってもらうために行う地道な草の根活動の具体とは？ 組織浸透において抱えていた課題 課 題 1 デザインシステムがデザイナーの ものだけになっている 課 題 2 課 題 3 デザインシステムの更新が （デザイナーにとって）難しい デザインシステムの構築自体に 時間が取られてしまう デザインシステムに投資する効果や 意味を伝えるコミュニケーション デザインシステムが機能デザインや 開発の足を引っ張ってしまう恐れ デザインシステムが浸透するにつれ やらないといけないことが激増する システム構築だけでなく、取り組む意義/目的の理解を得るためのコストもかかる
25. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. 必要となりそうなﾃﾞｻﾞｲﾝやｺﾝﾎﾟｰﾈﾝﾄを開 発ﾁｰﾑとの定期的なｺﾐｭﾆｹｰｼｮﾝから 察知し、協力しながら進める 中央集権的なチームから 分散的なチームへ移行 SmartHR サイボウズ デザインシステムを使ってもらうために行う地道な草の根活動の具体とは？ 課題に対するアクション ｱｸ ｼｮ ﾝ 1 エンジニアや開発チームに直接デザインシ ステムをレクチャーする会や 告知機会を創出 ｱｸ ｼｮ ﾝ 2 ｱｸ ｼｮ ﾝ 3 ガイド作成、更新フローや PR方法のレクチャー システムの構築自体は外部会社に 途中から引き継ぎ、依頼した 1つ1つのコンポーネントを デザインシステムに依存させる 開発チームなど「ユーザー」となる社内メンバーとコミュニケーションを取り続ける
26. Copyright © CIRCULATION Co.,LTD. All Rights Reserved. 「デザインシステム」を作りにいかない / 使う意識を １ デザイナーだけで作らない ２ 曖昧な言葉の定義・認識合わせをしっかりと行う ３ 登壇者が伝えたい 3つのポイント 本日のまとめ