Tweet
Tweet

Slide 1

Slide 1 text

受託制作におけるデザインシステム GrowGroup 株式会社 / ⽯原 隆志

Slide 2

Slide 2 text

⾃⼰紹介 ⽯原 隆志 / ishihara takashi ・GrowGroup株式会社 / 名古屋 / 熊本県天草出⾝ ・Web歴 10年 ・エンジニア 〜 ディレクター 〜 業務設計 ・縁あってWordPressの本を執筆しました Twitter : @1shiharaT

Slide 3

Slide 3 text

今⽇の話 受託制作における 汎⽤的なデザインシステム 20⼈規模の地⽅Web制作会社が、 社内の⽣産性向上、品質の向上のために、 受託制作のWebサイトにおいて汎⽤的に利⽤できる デザインシステムの構築・運⽤に四苦⼋苦した話

Slide 4

Slide 4 text

前提 GrowGroup株式会社 ・社員数: 18⼈ / デザイナー 6⼈、エンジニア 7⼈ ・同時並⾏でプロジェクトが30~40件ほど ・⼀つのプロジェクトのリードタイムは3ヶ⽉〜4ヶ⽉ ・10P〜40P規模のコーポレートサイト、サービスサイトが主

Slide 5

Slide 5 text

・2019年1⽉~4⽉にかけて6名採⽤ 0 2 4 6 8 10 12 14 16 18 20 2015年 2016年 2017年 2018年 2019年 2020年 合計⼈数 ⼊社⼈数

Slide 6

Slide 6 text

・理念体系を抜本的に変更

Slide 7

Slide 7 text

・理念体系を抜本的に変更 時間をつくることが急務 理念体系の変更 事業規模拡⼤による⼈員増加

Slide 8

Slide 8 text

課題の抽出 1. 各作業者がそれぞれの経験から作業している 2. ⾞輪の再発明 3. コンポーネントの単位や理解度が違う 4. 認識の相違

Slide 9

Slide 9 text

課題の抽出 1. 各作業者がそれぞれの経験から作業している 2. ⾞輪の再発明 3. コンポーネントの単位や理解度が違う 4. 認識の相違 共通認識となる旗が必要だ！

Slide 10

Slide 10 text

・そこでデザインシステム デジタルプロダクトの⽬的を達成するために ⾸尾⼀貫したルールで編成された、 お互いに関連づけられたパターンと その実践⽅法 - デジタルプロダクトのためのデザインシステム実践ガイド アラ・コルマトヴァ

Slide 11

Slide 11 text

・そもそもデザインシステムって？ https://polaris.shopify.com/ https://atlassian.design/ プロダクトに対して利⽤される パターンが多い

Slide 12

Slide 12 text

そもそも デザインシステムって？ 知ってる知ってる プロダクトで 導⼊してる 経験ある

Slide 13

Slide 13 text

そもそも デザインシステムって？ 知ってる知ってる プロダクトで 導⼊してる 経験ある 弊社の場合は

Slide 14

Slide 14 text

・今回⽬指すもの プロジェクトによって、⽬的、⽬標も違えば ターゲット、シナリオ、戦略も違う

Slide 15

Slide 15 text

デザインシステムって？ … … … ( 受託のWebサイト制作で )

Slide 16

Slide 16 text

・今回⽬指すもの デジタルプロダクトの⽬的を達成するために⾸尾⼀貫したルールで編成された、お互いに関連づけ られたパターンとその実践⽅法 プロダクト ブランド ビジョン デザイン原則 パターンライブラリ デザインシステム

Slide 17

Slide 17 text

・今回⽬指すもの 受託したプロジェクトの⽬的を達成するために汎⽤性を持たせつつ⼀貫したルールで編成され 、お互いに関連づけられたパターンとその実践 デザイン原則 パターンライブラリ デザインシステム 事業の⽬的 受託したプロジェクトの⽬的の達成 クライアントの成⻑ GGのデザインシステム プロジェクトA プロジェクトB プロジェクトC

Slide 18

Slide 18 text

・今回⽬指すもの 組織としてのデザインの基準、原則の策定と浸透 プロジェクトの ⽬的、⽬標の達成 よし！いくぞう！

Slide 19

Slide 19 text

・今回⽬指すもの 組織としてのデザインの基準、原則の策定と浸透 プロジェクトの ⽬的、⽬標の達成 選択と集中 しかし、そんなに⽢くはなかった

Slide 20

Slide 20 text

とりあえず制作を進める 1. メンバー選定 2. キックオフ 3. 設計 4. デザイン 5. コーディング

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

その他導⼊において決めたこと ・プロジェクトにどうやって導⼊するか - シナリオからページごとの最適化がより重要となるページ - ルールなし。デザインシステム使わずにOK - 特に重要でないページ - コーポレートであれば会社概要やアクセス、よくあるご質問など パターンライブラリ 原則 管理ツール

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

よくわからないとの声多数 ・課題 - 実際の案件に導⼊するイメージが共有しにくかった - コンポーネントはどこまで変化を持たせて良いのかわからない

Slide 25

Slide 25 text

課題への取り組み デザインシステムに関する勉強会、ミーティングの実施 全員から質問をあつめ、回答、ベストプラクティスを探す

Slide 26

Slide 26 text

課題への取り組み デザイナーのコーディングスキルの習得 - コンポーネント⾃体の基礎知識を深める

Slide 27

Slide 27 text

クロージング ミーティングの 開催 案件終了後に振り返り、全体的 な振り返りとデザインシステム へのフィードバック 課題への取り組み

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

課題への取り組み ツールの拡充 - XDのプラグインの導⼊ - SVGを利⽤するように - 簡単にアクセスできるようにアプリの作成

Slide 30

Slide 30 text

課題への取り組み ドキュメントの拡充

Slide 31

Slide 31 text

結論 ・当然、通常のデザインシステムよりハードルは⾼かった 合意コスト 教育コスト 運⽤コスト

Slide 32

Slide 32 text

結論 ・その分リターンも⼤きかった ⽣産性向上 品質の向上 ⼯程をまたいだ 知⾒の共有

Slide 33

Slide 33 text

・選択と集中によるリソースの最適化 結論

Slide 34

Slide 34 text

Fin. ご静聴ありがとうございました。