デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること

by Ami Shiratori

Slide 1

Slide 1 text

サイボウズ株式会社デザインに関わる全ての⼈たちでエベレスト登頂を⽬指すために取り組んでいること Design Technologist ⽩⿃亜美

Slide 2

Slide 2 text

2 自己紹介⽩⿃亜美 Design Technologist 2020೥ʹαΠϘ΢ζʹ8FCΤϯδχΞͱͯ͠৽ଔೖ ࣾ͠ɺkintone։ൃνʔϜʹॴଐɻ2021೥ʹσβΠϯ γεςϜνʔϜͷ্ཱͪ͛ʹࢀըɻ2023೥͔ΒσβΠ ϯγεςϜνʔϜͷϦʔμʔʹͳΔɻ ࠓ͸σβΠϯͱΤϯδχΞϦϯάΛߦ͖དྷ͢ΔσβΠ ϯςΫϊϩδετͱͯ͠׆ಈΛ͍ͯ͠Δɻ

Slide 3

Slide 3 text

3 セッション概要最初から完璧なデザインシステムは作れません。時間をかけて作ったものでも、実際にそれが利⽤者にとって有⽤で求めていたものとはかぎりません。いきなりエベレスト踏破を意気込んで失敗するようなものです。私はこの活動だけに投資をして2年が経ちました。私たちのデザインシステムは、利⽤者と⼀緒に成⻑し、開発チームで⼀緒に育てていくものです。⼀緒に成⻑するために、チームや職種を超えて越境し協⼒しあう活動や⼯夫についてお話しします。

Slide 4

Slide 4 text

4 アジェンダ • kintone, kintone開発チームについて • kintone Design Systemについて • kintone Design System運営理念 • 開発チームで協⼒するためにした活動・⼯夫 1. デザインシステムの利⽤実績をつくる 2. 「開発チーム全体で育てる」⽂化を形成する • まとめ

Slide 5

Slide 5 text

5 kintoneについて • ノーコード/ローコードで業務のシステム化や効率化を実現するアプリがつくれる「業務改善プラットフォーム」のクラウドサービス • 国内プライム上場企業の3社に1社が kintone を利⽤中 • 全体では27,500社が kintone を利⽤中 ※2022年12⽉時点

Slide 6

Slide 6 text

6 kintone開発チームについて • 様々な職能の⼈がチームに分かれて活動している • 127⼈ • PM約10名 • Webエンジニア約30名 • モバイルエンジニア約10名 • フロントエンドエンジニア約10名 • QAエンジニア約20名 …etc

Slide 7

Slide 7 text

7 kintone Design Teamについて • 23⼈ • デザイナー9 名 • リサーチャー3 名 • デザインテクノロジスト5 名 • UXライター4 名 • ローカライズ2名 • 新機能開発、デザインシステム構築・運⽤

Slide 8

Slide 8 text

8 kintone Design Systemについて • 2021年12⽉にチーム結成 • 正規メンバー5名（デザインテクノロジスト4名、デザイナー1名）、業務委託・ヘルプ2名 • 提供しているもの • ドキュメント、コンポーネントライブラリ、Figmaライブラリ、デザイントークン

Slide 9

Slide 9 text

9 kintone Design Systemについて • PM、エンジニアも価値を理解 • 開発効率やスケーリングに期待 • 年に1度のサイボウズ最⼤のイベント「サイボウズデイズ」のキーノートで紹介 • ブース出展パートナー企業100社以上 • 来場者6000⼈以上

Slide 10

Slide 10 text

10 デザインシステム構築・運用難しいですよね、、

Slide 11

Slide 11 text

11 デザインシステム構築・運用難しいですよね、、 • 有志が集まってつくりはじめたけど、、 • 利⽤が広がらない • 「理想のデザインシステム」を追い求めて頓挫 • 体験談：Buttonのドキュメントを書くのに2ヶ⽉、、

Slide 12

Slide 12 text

12 最初から理想のデザインシステムは作れない

Slide 13

Slide 13 text

13 いきなりエベレスト踏破を意気込んで失敗するようなもの

Slide 14

Slide 14 text

14 ⼩規模の⼭から少しずつステップアップしていく

Slide 15

Slide 15 text

15 kintone Design System 運営理念

Slide 16

Slide 16 text

Slide 17

Slide 17 text

17 kintone Design Systemは、利⽤者と⼀緒に成⻑し、 kintone開発全員で⼀緒に育てていくデザインシステムです。⼀緒に成⻑するために、チームや職種を超えて越境し協⼒しながら、オープンで活発な活動を⽬指します。

Slide 18

Slide 18 text

18 チームや職種を超えて協⼒し、フィードバックしあいながら、⼩さい改善を繰り返し、徐々により良いものを作りましょう。⼩さなPDCAサイクルを回すことで、より求めていたすばらしいデザインシステムを、素早く柔軟に作れます。そのためには、皆さまのコントリビュート（貢献）がとても重要です。どんな⼩さなことでも⽴派な貢献です。

Slide 19

Slide 19 text

19 理想論に聞こえますが、、

Slide 20

Slide 20 text

20 kintone Design Systemを育てているひとたち • 正規メンバー5名（デザインテクノロジスト4名、デザイナー1名） • 業務委託、ヘルプメンバー2名（フロントエンドエンジニア） • 他チームからコントリビューター30名以上 • デザイナー、UXライター、フロントエンドエンジニア、Webエンジニアなど • 去年まではチームメンバーの6⼈だけでがんばっていた

Slide 21

Slide 21 text

21 Centralized Model Federated Model Team Models for Scaling a Design System, Nathan Curtis

Slide 22

Slide 22 text

22 開発チームで協⼒するためにした活動・⼯夫

Slide 23

Slide 23 text

23 フォーカスしたこと 1. デザインシステムの利⽤実績をつくる 2. 「開発チーム全体で育てる」⽂化を形成する

Slide 24

Slide 24 text

24 1.デザインシステムの利用実績をつくる

Slide 25

Slide 25 text

25 理想を追求したガイドラインやコンポーネント、デザイントークン作るのに時間がかかる利用側もすぐには適用できない

Slide 26

Slide 26 text

26 「今」使えるものを提供する利用が始まってから理想に近づけていく

Slide 27

Slide 27 text

27 「今」使えるものを提供する • ドキュメント • 現時点でのエンジニア、デザイナー、UXライターの解像度をそのまま⾔語化するだけ • コンポーネント • 既に実装されていた共通コンポーネントを別レポジトリに切り出してそのまま提供 • デザイントークン • もともとあったカラーパレットをそのままデザインシステムチームの管理下に移動して提供

Slide 28

Slide 28 text

28 大切にしたこと • 今すぐに使えるものを提供して置き換え • 利⽤者：コンポーネントの運⽤・開発を任せられる • デザインシステムチーム：すぐに利⽤実績ができる • 利⽤実績ができてから改善していくマインドセットを揃える • 「今使えるもの」は常に更新される • 合わせて改善をいれていく • デザインシステムチームは常に「どうなっていきたいか」を⾒据えている • 全体像を⾒えている⼈がいないと必要ないものを作ってしまったり、⽅針がぶれて⼿戻り参考：SmartHRさんが執筆した本「ちいさくはじめるデザインシステム」

Slide 29

Slide 29 text

29 最小でできることから始める

Slide 30

Slide 30 text

30 実績 • 利⽤チーム • エンジニア4チーム • デザインチーム • PMがデザインシステムによる効率化を理解、期待してくれている • プロダクトロードマップに記載 • 年に1度のサイボウズ最⼤のイベントでユーザー、パートナー企業に向けて紹介

Slide 31

Slide 31 text

31 「開発チーム全体で育てる」文化を形成する

Slide 32

Slide 32 text

32 「開発チーム全体で育てる」文化を形成する • デザインチーム内ワーキンググループ • 利⽤チームのエンジニアにPRを出してもらう

Slide 33

Slide 33 text

33 デザインチーム内ワーキンググループ • デザインチームのメンバーがテーマごとに集まり、議論しながらkintone Design Systemを成⻑させる有志の会 • デザイン、アクセシビリティー、UXライティング Dior 「Two teams One Dior」- Figma Config 2022（YouTubeで公開）

Slide 34

Slide 34 text

Slide 35

Slide 35 text

35 デザインチーム内ワーキンググループ • ⽬的 •知⾒を再現性のある形にして共有する •議論を通して職能間、個⼈間のズレを認識し、それをできるだけ減らす •チームとしてデザインする上でのより良いプラクティス、ガイドライン、ナレッジを追求する •成果物は主にガイドラインドキュメント

Slide 36

Slide 36 text

36 デザインチーム内ワーキンググループ • Voice&Tone ガイドライン • ⽂⾔ガイドライン • ⽇本語の記号の⽤法と英語⽂⾔での扱い⽅ • ⽤語集 • アクセシビリティデザインガイドライン • カーソルの種類の使い分け • キーボード操作、ホバー操作のガイドライン • リンクの使い分けガイドライン（同じタブと新しいタブ） • 拡⼤時にも情報が正しく伝わるための画⾯設計 • アイコン辞典、使い分け • モバイル • 要素の重ね合わせ … etc.

Slide 37

Slide 37 text

37 デザインチーム内ワーキンググループ • 「アクセシビリティーワーキングループがあったおかげで、デザインする時に意識するポイントを覚えてレビューでの指摘が減った」 • 「ワーキングループで議論した結果、必要なことだけに集中できるようになり悩む時間が減った」

Slide 38

Slide 38 text

38 • デザインシステムチームに知⾒・⼯数が⾜りていなかったアイコンの整理ができた

Slide 39

Slide 39 text

39 専門領域は専門家に頼るデザインシステムチームはビジョンと場所を提供

Slide 40

Slide 40 text

40 利用チームのエンジニアにPRを出してもらう • 機能開発で必要になった追加機能・コンポーネントはPRを出してもらう • パフォーマンス改善などより得意なメンバーにお願いする • 技術的な学習のために利⽤してもらう

Slide 41

Slide 41 text

41 大切にしたこと • 初期の⼿厚いサポート • 勉強会、ペア作業 • マインドセットを揃える • なぜkintone design systemをつくるのか • なぜチームや職種を超えて⼀緒に作ることが重要なのか • Noteで公開：「『私たちがデザインシステムを作っている理由』のドキュメントを公開」

Slide 42

Slide 42 text

42 実績 • 1週間あたりのコミット数、PR数 • 2倍 • コントリビューター数 • 10名→30名以上 • ガイドラインドキュメント数 • 2ページ→55ページ

Slide 43

Slide 43 text

43 利用者と目線を揃えて仲間を増やす

Slide 44

Slide 44 text

44 仲間を増やしながらすこしずつ高い山にチャレンジしていく

Slide 45

Slide 45 text

45 デザインシステムチームはルート調査と先導

Slide 46

Slide 46 text

46 デザインに関わるすべてのひとで協力しながらエベレスト登頂をめざす

Slide 47

Slide 47 text

47 ⼀緒にエベレスト登頂を⽬指してくれるパーティーメンバーを募集しています！