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

by FLEXY

Embed

Start on current slide

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Copyright © CIRCULATION Co.,LTD. All Rights Reserved. Speaker紹介 ▶Twitterページ：　https://twitter.com/kgsi 小木曽槙一氏株式会社SmartHR プロダクトデザイナー受託制作会社でデザイナー・エンジニアとして勤務後、事業会社のデザインエンジニアとしてプロダクト開発に従事。 2020年より株式会社SmartHRに入社し、基本機能や従業員サーベイ機能の開発設計に携わる。デザインシステムや UIコンポーネントの開発など、社内横断プロジェクトにも参画。パラレルキャリアを標榜し、副業でエンジニア・デザイナー・アドバイザーとして活動中。

Slide 7

Slide 7 text

Copyright © CIRCULATION Co.,LTD. All Rights Reserved. Speaker紹介 ▶Twitterページ：　https://twitter.com/uknmr 金森悠氏株式会社SmartHR プロダクトデザイナー 2020年SmartHR入社。ウェブデザイナーとして 10代の頃から個人で活動を始め、大学でインダストリアルデザインを学ぶ。中小SIerに就職し主にJavaエンジニアとして働く。その後ウェブ系のフロントエンドエンジニアを経て、情報設計やデザインへの熱情を思い出した頃、現職へ。インターネット大好き。特にウェブ界隈を作り上げている思想とその人々が好き。

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Copyright © CIRCULATION Co.,LTD. All Rights Reserved. Speaker紹介 ▶Twitterページ：　https://twitter.com/__sakito__ sakito 氏サイボウズ株式会社 Design Technologist 2015年に営業として人材派遣会社に入社し半年で転職。ベンチャー企業にてさまざまな業務を経験した後に、 2017年にヤフー株式会社にてフロントエンドエンジニアになる。 2019年に現職のサイボウズに中途入社しフロントエンドエキスパートチームに所属、2022年にデザインシステムチームを立ち上げ、 2023年から自社製品である kintoneのデザイン責任者とデザイン室のリーダーになる。プロダクトと全社のデザイン組織づくりやプロセスの改善がいまのお仕事。犬が好き。

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Copyright © CIRCULATION Co.,LTD. All Rights Reserved. UIガイドラインコンポーネント集やパターンライブラリなど UIパーツやコードスニペットが含まれるブランドガイドラインビジュアルアイデンティティだけでなく CI(企業理念やビジョン)も含まれる運用ガイドラインプロダクトやインフラとしてのデザインシステムを運用し続けるために必要なものコンテンツガイドライン表記ルールやライティングパターンなど文章を書く全ての人を対象にしたもの一般的に「スタイルガイド」と呼ばれるドキュメントのまとまりで形成されるデザインシステムの構成要素

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Copyright © CIRCULATION Co.,LTD. All Rights Reserved. デザインシステムの完成以前にデザインシステムが使われている状態の実現を目指す Step.2 Step.3 Step.4 便利なコンテンツから作る課題発見/解決のｻｲｸﾙを回す原則を言語化する Step.1 ｼｽﾃﾑ構築目的を明確にするデザインシステムの立ち上げ方デザインシステムをはじめるための4ステップ

Slide 17

Slide 17 text

Copyright © CIRCULATION Co.,LTD. All Rights Reserved. 今回はStep.1・Step.2にフォーカスして「システム作りのことはじめ」に迫ります Step.2 Step.3 Step.4 便利なコンテンツから作る課題発見/解決のｻｲｸﾙを回す原則を言語化する Step.1 ｼｽﾃﾑ構築目的を明確にするデザインシステムの立ち上げ方デザインシステムを「ちいさく」はじめるために重要な2ステップ

Slide 18

Slide 18 text

Copyright © CIRCULATION Co.,LTD. All Rights Reserved. SmartHR サイボウズデザインシステムの立ち上げ方 [Step.1]デザインシステムを構築する目的/解決したい課題を明確にする Step.2 便利なコンテンツから作る Step.1 システム構築目的を明確にする・デザインを言語化するチームを立ち上げ・過去ではなく、これからデザインを変えていく部分で利用できる形からデザインの言語化からコンポーネントの用意・デザインの意思決定の歴史が継承できていない・デザイナーじゃないとデザインに触れることができないコミュニケーションデザイングループと共有しつつ、デザインシステムの構築を有志で開始ことはじめ課題・UIのバラツキ・設計手法の属人化・デザイナー外への伝達コスト増大

Slide 19

Slide 19 text

Copyright © CIRCULATION Co.,LTD. All Rights Reserved. ・Buttonのデザインと実装から言語化したドキュメントを用意・1つ1つのコンポーネントからリリース・デザインの意思決定を行うフローから過去の情報までガイドラインを用意・デザインを言語化するチームとコミュニケーションチャンネルを多数用意（Issueやslackなど）具体アクション・誰でも更新・構築できるデザインシステムの「箱」を構築・デザイントークンの定義・コンポーネントライブラリの使い方を定義・パターンの抽出やパターンの命名 Step.2 便利なコンテンツから作る Step.1 システム構築目的を明確にするデザインシステムの立ち上げ方 [Step.2]ユーザーにとって便利なコンテンツから作る SmartHR サイボウズ

Slide 20

Slide 20 text

Copyright © CIRCULATION Co.,LTD. All Rights Reserved. デザインシステムの立ち上げ方まとめ：便利なコンテンツとは何か？ Step.2 便利なコンテンツから作る Step.1 システム構築目的を明確にする「便利なコンテンツ」と呼べる3つのポイント使おうとしたときの学習や導入コストが低い使うと分かりやすい成果が得られるデザインシステムの最初の利用者になって欲しい人たちが実際に使いたいと思える

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Copyright © CIRCULATION Co.,LTD. All Rights Reserved. 今回はStep.1にフォーカスして「泥臭いことの具体って何？」に迫ります Step.1 Step.2 Step.3 最初は地道な草の根活動課題発見に“ちいさく “協力してもらうコンテンツの作者になってもらうデザインシステムをみんなが使えるようになるために便利なものの存在を知ってもらうために行う地道な活動

Slide 24

Slide 24 text

Copyright © CIRCULATION Co.,LTD. All Rights Reserved. SmartHR サイボウズデザインシステムを使ってもらうために行う地道な草の根活動の具体とは？組織浸透において抱えていた課題課題 1 デザインシステムがデザイナーのものだけになっている課題 2 課題 3 デザインシステムの更新が（デザイナーにとって）難しいデザインシステムの構築自体に時間が取られてしまうデザインシステムに投資する効果や意味を伝えるコミュニケーションデザインシステムが機能デザインや開発の足を引っ張ってしまう恐れデザインシステムが浸透するにつれやらないといけないことが激増するシステム構築だけでなく、取り組む意義/目的の理解を得るためのコストもかかる

Slide 25

Slide 25 text

Copyright © CIRCULATION Co.,LTD. All Rights Reserved. 必要となりそうなﾃﾞｻﾞｲﾝやｺﾝﾎﾟｰﾈﾝﾄを開発ﾁｰﾑとの定期的なｺﾐｭﾆｹｰｼｮﾝから察知し、協力しながら進める中央集権的なチームから分散的なチームへ移行 SmartHR サイボウズデザインシステムを使ってもらうために行う地道な草の根活動の具体とは？課題に対するアクションｱｸｼｮﾝ 1 エンジニアや開発チームに直接デザインシステムをレクチャーする会や告知機会を創出ｱｸｼｮﾝ 2 ｱｸｼｮﾝ 3 ガイド作成、更新フローや PR方法のレクチャーシステムの構築自体は外部会社に途中から引き継ぎ、依頼した 1つ1つのコンポーネントをデザインシステムに依存させる開発チームなど「ユーザー」となる社内メンバーとコミュニケーションを取り続ける