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

SaaS Design Conference 2023 にて「デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること」という題で発表した際に使用した資料です。
https://saasdesign-conf.uzabase.com/

Transcript

1. サイボウズ株式会社 デザインに関わる全ての⼈たちで エベレスト登頂を⽬指すために取り組んでいること Design Technologist ⽩⿃亜美
2. 2 自己紹介 ⽩⿃亜美 Design Technologist 2020೥ʹαΠϘ΢ζʹ8FCΤϯδχΞͱͯ͠৽ଔೖ ࣾ͠ɺkintone։ൃνʔϜʹॴଐɻ2021೥ʹσβΠϯ γεςϜνʔϜͷ্ཱͪ͛ʹࢀըɻ2023೥͔ΒσβΠ ϯγεςϜνʔϜͷϦʔμʔʹͳΔɻ ࠓ͸σβΠϯͱΤϯδχΞϦϯάΛߦ͖དྷ͢ΔσβΠ ϯςΫϊϩδετͱͯ͠׆ಈΛ͍ͯ͠Δɻ
3. 3 セッション概要 最初から完璧なデザインシステムは作れません。時間をかけて作ったものでも、 実際にそれが利⽤者にとって有⽤で求めていたものとはかぎりません。 いきなりエベレスト踏破を意気込んで失敗するようなものです。 私はこの活動だけに投資をして2年が経ちました。 私たちのデザインシステムは、利⽤者と⼀緒に成⻑し、開発チームで⼀緒に育て ていくものです。 ⼀緒に成⻑するために、チームや職種を超えて越境し協⼒しあう活動や⼯夫につ いてお話しします。
4. 4 アジェンダ • kintone, kintone開発チームについて • kintone Design Systemについて • kintone Design System運営理念 • 開発チームで協⼒するためにした活動・⼯夫 1. デザインシステムの利⽤実績をつくる 2. 「開発チーム全体で育てる」⽂化を形成する • まとめ
5. 5 kintoneについて • ノーコード/ローコードで業務のシステム化や効率化を実現するアプリがつく れる「業務改善プラットフォーム」のクラウドサービス • 国内プライム上場企業の3社に1社が kintone を利⽤中 • 全体では27,500社が kintone を利⽤中 ※2022年12⽉時点
6. 6 kintone開発チームについて • 様々な職能の⼈がチームに分かれて活動している • 127⼈ • PM約10名 • Webエンジニア約30名 • モバイルエンジニア約10名 • フロントエンドエンジニア約10名 • QAエンジニア約20名 …etc
7. 7 kintone Design Teamについて • 23⼈ • デザイナー9 名 • リサーチャー3 名 • デザインテクノロジスト5 名 • UXライター4 名 • ローカライズ2名 • 新機能開発、デザインシステム構築・運⽤
8. 8 kintone Design Systemについて • 2021年12⽉にチーム結成 • 正規メンバー5名（デザインテクノロジスト4名、デザイナー1名）、業務委託・ヘルプ2名 • 提供しているもの • ドキュメント、コンポーネントライブラリ、Figmaライブラリ、デザイントークン
9. 9 kintone Design Systemについて • PM、エンジニアも価値を理解 • 開発効率やスケーリングに期待 • 年に1度のサイボウズ最⼤のイベント 「サイボウズデイズ」のキーノートで紹介 • ブース出展パートナー企業100社以上 • 来場者6000⼈以上
10. 10 デザインシステム構築・運用難しいですよね、、
11. 11 デザインシステム構築・運用難しいですよね、、 • 有志が集まってつくりはじめたけど、、 • 利⽤が広がらない • 「理想のデザインシステム」を追い求めて頓挫 • 体験談：Buttonのドキュメントを書くのに2ヶ⽉、、
12. 12 最初から理想のデザインシステムは作れない
13. 13 いきなりエベレスト踏破を意気込んで失敗するようなもの
14. 14 ⼩規模の⼭から少しずつステップアップしていく
15. 15 kintone Design System 運営理念
17. 17 kintone Design Systemは、利⽤者と⼀緒に成⻑し、 kintone開発全員で⼀緒に育てていくデザインシステムです。 ⼀緒に成⻑するために、チームや職種を超えて越境し 協⼒しながら、オープンで活発な活動を⽬指します。
18. 18 チームや職種を超えて協⼒し、フィードバックしあいながら、⼩ さい改善を繰り返し、徐々により良いものを作りましょう。 ⼩さなPDCAサイクルを回すことで、より求めていたすばらしい デザインシステムを、素早く柔軟に作れます。 そのためには、皆さまのコントリビュート（貢献）がとても重要 です。どんな⼩さなことでも⽴派な貢献です。
19. 19 理想論に聞こえますが、、
20. 20 kintone Design Systemを育てているひとたち • 正規メンバー5名（デザインテクノロジスト4名、デザイナー1名） • 業務委託、ヘルプメンバー2名（フロントエンドエンジニア） • 他チームからコントリビューター30名以上 • デザイナー、UXライター、フロントエンドエンジニア、Webエンジニアなど • 去年まではチームメンバーの6⼈だけでがんばっていた
21. 21 Centralized Model Federated Model Team Models for Scaling a Design System, Nathan Curtis
22. 22 開発チームで協⼒するためにした活動・⼯夫
23. 23 フォーカスしたこと 1. デザインシステムの利⽤実績をつくる 2. 「開発チーム全体で育てる」⽂化を形成する
24. 24 1.デザインシステムの利用実績をつくる
25. 25 理想を追求した ガイドラインやコンポーネント、デザイントークン 作るのに時間がかかる 利用側もすぐには適用できない
26. 26 「今」使えるものを提供する 利用が始まってから理想に近づけていく
27. 27 「今」使えるものを提供する • ドキュメント • 現時点でのエンジニア、デザイナー、UXライターの解像度をそのまま⾔語化するだけ • コンポーネント • 既に実装されていた共通コンポーネントを別レポジトリに切り出してそのまま提供 • デザイントークン • もともとあったカラーパレットをそのままデザインシステムチームの管理下に移動して提供
28. 28 大切にしたこと • 今すぐに使えるものを提供して置き換え • 利⽤者：コンポーネントの運⽤・開発を任せられる • デザインシステムチーム：すぐに利⽤実績ができる • 利⽤実績ができてから改善していくマインドセットを揃える • 「今使えるもの」は常に更新される • 合わせて改善をいれていく • デザインシステムチームは常に「どうなっていきたいか」を⾒据えている • 全体像を⾒えている⼈がいないと必要ないものを作ってしまったり、⽅針がぶれて⼿戻り 参考：SmartHRさんが執筆した本「ちいさくはじめるデザインシステム」
29. 29 最小でできることから始める
30. 30 実績 • 利⽤チーム • エンジニア4チーム • デザインチーム • PMがデザインシステムによる効率化を理解、期待してくれている • プロダクトロードマップに記載 • 年に1度のサイボウズ最⼤のイベントでユーザー、パートナー企業に向けて紹介
31. 31 「開発チーム全体で育てる」文化を形成する
32. 32 「開発チーム全体で育てる」文化を形成する • デザインチーム内ワーキンググループ • 利⽤チームのエンジニアにPRを出してもらう
33. 33 デザインチーム内ワーキンググループ • デザインチームのメンバーがテーマごとに集まり、議論しながらkintone Design Systemを成⻑させる有志の会 • デザイン、アクセシビリティー、UXライティング Dior 「Two teams One Dior」- Figma Config 2022（YouTubeで公開）
35. 35 デザインチーム内ワーキンググループ • ⽬的 •知⾒を再現性のある形にして共有する •議論を通して職能間、個⼈間のズレを認識し、それをできるだけ減らす •チームとしてデザインする上でのより良いプラクティス、ガイドライン、ナレッジを追求す る •成果物は主にガイドラインドキュメント
36. 36 デザインチーム内ワーキンググループ • Voice&Tone ガイドライン • ⽂⾔ガイドライン • ⽇本語の記号の⽤法と英語⽂⾔での扱い⽅ • ⽤語集 • アクセシビリティデザインガイドライン • カーソルの種類の使い分け • キーボード操作、ホバー操作のガイドライン • リンクの使い分けガイドライン（同じタブと新しいタブ） • 拡⼤時にも情報が正しく伝わるための画⾯設計 • アイコン辞典、使い分け • モバイル • 要素の重ね合わせ … etc.
37. 37 デザインチーム内ワーキンググループ • 「アクセシビリティーワーキングループがあったおかげで、デザインする時に 意識するポイントを覚えてレビューでの指摘が減った」 • 「ワーキングループで議論した結果、必要なことだけに集中できるようになり 悩む時間が減った」
38. 38 • デザインシステムチームに知⾒・⼯数が⾜りていなかったアイコン の整理ができた
39. 39 専門領域は専門家に頼る デザインシステムチームはビジョンと場所を提供
40. 40 利用チームのエンジニアにPRを出してもらう • 機能開発で必要になった追加機能・コンポーネントはPRを出してもらう • パフォーマンス改善などより得意なメンバーにお願いする • 技術的な学習のために利⽤してもらう
41. 41 大切にしたこと • 初期の⼿厚いサポート • 勉強会、ペア作業 • マインドセットを揃える • なぜkintone design systemをつくるのか • なぜチームや職種を超えて⼀緒に作ることが重要なのか • Noteで公開：「『私たちがデザインシステムを作っている理由』のドキュメントを公開」
42. 42 実績 • 1週間あたりのコミット数、PR数 • 2倍 • コントリビューター数 • 10名→30名以上 • ガイドラインドキュメント数 • 2ページ→55ページ
43. 43 利用者と目線を揃えて仲間を増やす
44. 44 仲間を増やしながらすこしずつ高い山にチャレンジしていく
45. 45 デザインシステムチームはルート調査と先導
46. 46 デザインに関わるすべてのひとで 協力しながらエベレスト登頂をめざす
47. 47 ⼀緒にエベレスト登頂を⽬指してくれる パーティーメンバーを募集しています！