Design system for Client Work

UX MILK ALL Night | デジタルなUXに関わるすべての人のためのUXデザインフェス において発表した内容です。

- - -

プロダクトにおいては既にスタンダードになっているデザインシステム。しかし、「汎用的なデザインシステム」というのは以外にも知見があまり共有されていません。地方のWebサイト受託制作をメインとして会社において、組織としてデザインシステムを導入する上での苦悩、知見、そして学びについて共有します。

Transcript

1. 受託制作におけるデザインシステム GrowGroup 株式会社 / ⽯原 隆志
2. ⾃⼰紹介 ⽯原 隆志 / ishihara takashi ・GrowGroup株式会社 / 名古屋 / 熊本県天草出⾝ ・Web歴 10年 ・エンジニア 〜 ディレクター 〜 業務設計 ・縁あってWordPressの本を執筆しました Twitter : @1shiharaT
3. 今⽇の話 受託制作における 汎⽤的なデザインシステム 20⼈規模の地⽅Web制作会社が、 社内の⽣産性向上、品質の向上のために、 受託制作のWebサイトにおいて汎⽤的に利⽤できる デザインシステムの構築・運⽤に四苦⼋苦した話
4. 前提 GrowGroup株式会社 ・社員数: 18⼈ / デザイナー 6⼈、エンジニア 7⼈ ・同時並⾏でプロジェクトが30~40件ほど ・⼀つのプロジェクトのリードタイムは3ヶ⽉〜4ヶ⽉ ・10P〜40P規模のコーポレートサイト、サービスサイトが主
5. ・2019年1⽉~4⽉にかけて6名採⽤ 0 2 4 6 8 10 12 14 16 18 20 2015年 2016年 2017年 2018年 2019年 2020年 合計⼈数 ⼊社⼈数
6. ・理念体系を抜本的に変更
7. ・理念体系を抜本的に変更 時間をつくることが急務 理念体系の変更 事業規模拡⼤による⼈員増加
8. 課題の抽出 1. 各作業者がそれぞれの経験から作業している 2. ⾞輪の再発明 3. コンポーネントの単位や理解度が違う 4. 認識の相違
9. 課題の抽出 1. 各作業者がそれぞれの経験から作業している 2. ⾞輪の再発明 3. コンポーネントの単位や理解度が違う 4. 認識の相違 共通認識となる旗が必要だ！
10. ・そこでデザインシステム デジタルプロダクトの⽬的を達成するために ⾸尾⼀貫したルールで編成された、 お互いに関連づけられたパターンと その実践⽅法 - デジタルプロダクトのためのデザインシステム実践ガイド アラ・コルマトヴァ
11. ・そもそもデザインシステムって？ https://polaris.shopify.com/ https://atlassian.design/ プロダクトに対して利⽤される パターンが多い
12. そもそも デザインシステムって？ 知ってる知ってる プロダクトで 導⼊してる 経験ある
13. そもそも デザインシステムって？ 知ってる知ってる プロダクトで 導⼊してる 経験ある 弊社の場合は
14. ・今回⽬指すもの プロジェクトによって、⽬的、⽬標も違えば ターゲット、シナリオ、戦略も違う
15. デザインシステムって？ … … … ( 受託のWebサイト制作で )
16. ・今回⽬指すもの デジタルプロダクトの⽬的を達成するために⾸尾⼀貫したルールで編成された、お互いに関連づけ られたパターンとその実践⽅法 プロダクト ブランド ビジョン デザイン原則 パターンライブラリ デザインシステム
17. ・今回⽬指すもの 受託したプロジェクトの⽬的を達成するために汎⽤性を持たせつつ⼀貫したルールで編成され 、お互いに関連づけられたパターンとその実践 デザイン原則 パターンライブラリ デザインシステム 事業の⽬的 受託したプロジェクトの⽬的の達成 クライアントの成⻑ GGのデザインシステム プロジェクトA プロジェクトB プロジェクトC
18. ・今回⽬指すもの 組織としてのデザインの基準、原則の策定と浸透 プロジェクトの ⽬的、⽬標の達成 よし！いくぞう！
19. ・今回⽬指すもの 組織としてのデザインの基準、原則の策定と浸透 プロジェクトの ⽬的、⽬標の達成 選択と集中 しかし、そんなに⽢くはなかった
20. とりあえず制作を進める 1. メンバー選定 2. キックオフ 3. 設計 4. デザイン 5. コーディング
22. その他導⼊において決めたこと ・プロジェクトにどうやって導⼊するか - シナリオからページごとの最適化がより重要となるページ - ルールなし。デザインシステム使わずにOK - 特に重要でないページ - コーポレートであれば会社概要やアクセス、よくあるご質問など パターンライブラリ 原則 管理ツール
24. よくわからないとの声多数 ・課題 - 実際の案件に導⼊するイメージが共有しにくかった - コンポーネントはどこまで変化を持たせて良いのかわからない
25. 課題への取り組み デザインシステムに関する勉強会、ミーティングの実施 全員から質問をあつめ、回答、ベストプラクティスを探す
26. 課題への取り組み デザイナーのコーディングスキルの習得 - コンポーネント⾃体の基礎知識を深める
27. クロージング ミーティングの 開催 案件終了後に振り返り、全体的 な振り返りとデザインシステム へのフィードバック 課題への取り組み
29. 課題への取り組み ツールの拡充 - XDのプラグインの導⼊ - SVGを利⽤するように - 簡単にアクセスできるようにアプリの作成
30. 課題への取り組み ドキュメントの拡充
31. 結論 ・当然、通常のデザインシステムよりハードルは⾼かった 合意コスト 教育コスト 運⽤コスト
32. 結論 ・その分リターンも⼤きかった ⽣産性向上 品質の向上 ⼯程をまたいだ 知⾒の共有
33. ・選択と集中によるリソースの最適化 結論
34. Fin. ご静聴ありがとうございました。