iOSDC2021

歴史のある大規模アプリにDesign System を導入して開発をスケールさせる

Transcript

1. 歴史のある⼤規模アプリに
   Design System を導⼊して
   開発をスケールさせる
   佐々⽊ (@omuomugin)
   中村 (@valmet)
   

   View Slide

2. 佐々⽊ (@omuomugin)
   

   アプリ基盤チーム リード
   

   iOS/Android インフラ周りの実装や
   

   全体のアーキテクチャのリードしてます。
   中村 (@valmet)
   Design System プロジェクトリード
   

   機能開発チームのリーダーやりながら、
   

   Design System の推進もやってます。
   

   View Slide

3. 佐々⽊ (@omuomugin)
   

   アプリ基盤チーム リード
   

   iOS/Android インフラ周りの実装や
   

   全体のアーキテクチャのリードしてます。
   中村 (@valmet)
   Design System プロジェクトリード
   

   機能開発チームのリーダーやりながら、
   

   Design System の推進もやってます。
   

   View Slide

4. リクルートは多数のサービスを運営しています
   1
   選択・意思決定を⽀援する情報サービスを提供し、
   「まだ、ここにない、出会い。より速く、シンプルに、もっと近くに」を実現する
   メディア＆ソリューションSBU HRテクノロジーSBU ⼈材派遣SBU
   販促領域 ⼈材領域 国内派遣 海外派遣
   etc...
   

   View Slide

5. View Slide

6. ゼクシィの開発の歴史
   外部の開発会社
   開発体制共存期間
   社内での開発
   2011年
   2019年
   2021年
   ~
   最初のリリース
   開発⼈数 : 約20名
   

   Lines of Code : 約20万⾏
   結婚観などの変化を受け
   

   開発のアジリティ向上や
   

   技術的な負債の返済を⽬的に
   

   社内のエンジニアが開発に参画
   2013年
   

   View Slide

7. アプリ基盤チーム
   - Design System の推進
   - インフラ層のオーナーシップ
   - 全体のアーキテクチャの推進
   - 「機能開発チーム」の技術的な問題解決を⽀援
   機能開発チーム
   - プロダクト全体で追ってる KPI などに紐づくような機能開発を担当
   - 基本的には、iOS/Android どちらも開発するマルチファンクショナルチーム
   

   View Slide

8. そんなゼクシィで起きていたこと
   TODO Swiftで書く
   `#f59cae` がそこら中に宣⾔されている 右向きのアローアイコンが 6個(以上)
   

   View Slide

9. フォントサイズへのこだわり
   • System Font では 和⽂フォントが欧⽂
   フォントの San Francisco に合わせて
   若⼲⼩さめに修正される
   

   e.g. system font で 13.6 が およそ 13.0 になる
   • ゼクシィでは⽇本語を中⼼にデザイン
   していて困るので都度、調整していた
   ※ 同じフォントサイズのときのヒラギノを明⽰的に
   

   指定した場合とsystem fontを指定した場合
   

   View Slide

10. Design System という１つの解決策
    • 「プロダクト全体で⼀貫性のあるデザインを担保するための仕組み」
    

    ※ Design System ⾃体は様々な定義がある
    • 海外だと Net
    fl
    ix や Lyft
    

    国内だと メルカリ や SmartHR の取り組みが有名
    

    Net
    fl
    ix: https://net
    fl
    ixtechblog.com/hawkins-diving-into-the-reasoning-behind-our-design-system-964a7357547
    

    Lyft: https://medium.com/tap-to-dismiss/a-design-systems-impact-159f4ad3c230
    

    メルカリ: https://engineering.mercari.com/blog/entry/2019-08-26-090000/
    

    SmartHR: https://smarthr.invisionapp.com/console/share/ADUDJ8BW74C/403704083
    • ゼクシィでの Design System の定義は以下3つを包括
    

    ① Figma 上で整理された「デザインマスター」
    

    ② iOSアプリ向けのライブラリ (Andorid は今後提供予定)
    

    ③ デザインシステムの実装⼀覧を⾒ることができる「カタログアプリ」
    

    View Slide

11. Design System 導⼊”前”のワークフロー
    デザイナー 機能開発チーム
    フォントサイズをもう少し
    

    ⼤きく調整したいです
    これくらいで
    

    どうでしょう？
    もう少しだけ
    

    ⼩さくしたいです
    これくらいで
    

    どうでしょう？
    

    View Slide

12. Design System 導⼊”後”のワークフロー
    デザイナー 機能開発チーム
    フォントは、”Caption” の
    

    “Regular” でお願いします
    承知です！
    (ライブラリにある CaptionRegular を指定する)
    

    View Slide

13. 佐々⽊ (@omuomugin)
    

    アプリ基盤チーム リード
    

    iOS/Android インフラ周りの実装や
    

    全体のアーキテクチャのリードしてます。
    中村 (@valmet)
    Design System プロジェクトリード
    

    機能開発チームのリーダーやりながら、
    

    Design System の推進もやってます。
    

    View Slide

14. Color
    Text
    Component
    Icon
    ZexyUI
    App
    Dynamic
    Framework
    Zexy ZexyCatalog
    全体構成
    ※ ZexyCatalog = カタログアプリ (発表の後半で紹介)
    

    View Slide

15. マルチモジュール導⼊の3つの理由🤟
    1. ソフトウェアの変更の容易性
    • 責務を分け変更の影響範囲を抑えることができる
    • モジュールのオーナーシップを明確に
    2. ビルド速度の改善
    • 差分ビルドが効きやすくなる
    3. コードの共有
    • 各ターゲットでコード共有ができるようになり重複が排除できる
    

    View Slide

16. Text
    Component
    Icon
    ZexyUI
    App
    Dynamic
    Framework
    Zexy ZexyCatalog
    Color
    Color
    

    View Slide

17. 実現したこと
    • デザインマスター上で Color 名を定義
    

    e.g. ZexyPink
    • Color 名をコード上で利⽤可能にする
    

    e.g. UIColor.ZexyPink
    Color
    

    View Slide

18. 実装
    • Asset Catalog に定義された Color を追加
    • UIColorを拡張する
    Color
    

    View Slide

19. 利⽤⽅法
    Interface Builder
    Code
    Color
    

    View Slide

20. Color
    Component
    Icon
    ZexyUI
    App
    Dynamic
    Framework
    Zexy ZexyCatalog
    Text
    Text
    

    View Slide

21. 実現したこと
    • デザインマスター上でテキストスタイルを
    定義
    

    e.g. Heading1
    • 定義されたテキストスタイルをコード上で
    利⽤可能にする
    

    ※コード上での利⽤⽅法は後述
    Text
    

    View Slide

22. 設計
    • UILabel をラップしたクラスを実装
    

    → UILabel への変更を制限する
    • クラス名をデザインマスターと合わせる
    

    e.g. CaptionRegularBaseDeep
    

    - テキストスタイル : Caption
    

    - font weight : Regular
    

    - Color : BaseDeep
    Text
    

    View Slide

23. 設計 : UILabel への変更を制限する
    変更できない🙅
    • フォント（サイズ・カラーなど）
    • ⾏間の⼤きさ
    • カーニング（⽂字同⼠の感覚）
    • ベースラインの位置
    変更できる🙆
    • 表⽰するテキスト
    • テキストボックスの幅
    • ⾏数
    Text
    

    View Slide

24. 実装
    • テキストスタイルの定義を Enum としてまとめる
    • テキストスタイルごとに値を設定
    

    textSize : 10px → 10.7px
    

    ※⽇本語フォントが調整されてしまうため
    

    lineHeight, baselineO
    ff
    set なども設定
    Text
    

    View Slide

25. 実装 : テキストボックスのサイズ
    • テキストボックスの⾼さをデザインマスターと⼀致さ
    せる
    • clipToBounds を設定して heightForMask 分だけマス
    キングして実装してる
    UILabel
    UIView
    Text
    

    View Slide

26. 利⽤⽅法
    Interface Builder
    Code
    Text
    ※プレビューへの反映の⼯夫次スライド
    

    View Slide

27. 実装 : Interface Builder でプレビューに反映させる
    • IBDesignable を利⽤して Interface Builder でリアルタイム反映できるようにする
    • IBInspectable を利⽤して Interface Builder で値を設定できるようにする
    

    - text
    

    - lines
    Text
    

    View Slide

28. Color
    Text
    Icon
    ZexyUI
    App
    Dynamic
    Framework
    Zexy ZexyCatalog
    Component
    Component
    

    View Slide

29. Component と課題感
    • 繰り返し出てくる View パターン
    • SliderM (右図の⾚枠) の実装が4つも存
    在している
    

    → 実装・デザイナーによるデザインチ
    ェックの負荷が⾼い😢
    • デザイナーと密に連携しないとよく使
    うパターンかどうかが判断がつかない
    Component
    

    View Slide

30. 実現したこと・進め⽅
    • デザインマスター上でコンポーネントを定義
    • 定義されたコンポーネントをコード上で利⽤
    可能にする
    • 実装するコンポーネントについての詳細をデ
    ザイナーと決める
    

    - 何をどの単位でコンポーネント化するか
    

    - 実装するコンポーネントの優先度
    

    - コンポーネントが持つべき機能
    SliderM
    Component
    

    View Slide

31. Color
    Text
    Component
    ZexyUI
    App
    Dynamic
    Framework
    Zexy ZexyCatalog
    Icon
    Icon
    

    View Slide

32. Icon について
    • デザイナーにインタビューした結果「機能
    的アイコン」と「装飾的アイコン」を分け
    て管理していることがわかった
    • 機能的アイコンは、意味のあるアイコンと
    してデザインマスター上に定義されたもの
    

    → デザインシステムの対象にする
    • 装飾的アイコンは、特定の機能開発で⼀時
    的に利⽤するようなアイコン
    

    → デザインシステムの対象には含めない ゼクシィのデザインマスターに定義される「機能的アイコン」⼀覧
    Icon
    

    View Slide

33. 実現したこと
    • デザインマスター上で Icon 名を定義
    

    e.g. wedding
    • Icon 名をコード上で利⽤可能にする
    

    e.g. UIImage.Wedding
    e.g. “wedding” アイコン
    Icon
    

    View Slide

34. 実装の課題 : SVGの利⽤
    • デザイナーの負担軽減のためにも SVG を利⽤したい
    • > Added support for Scalable Vector Graphic (SVG) image assets. These
    preserve their vector representation with deployment targets of macOS
    10.15 or later, iOS 13 or later, and iPadOS 13 or later. (18389814)
    

    ref: https://developer.apple.com/documentation/xcode-release-notes/xcode-12-release-notes
    • ゼクシィは、iOS12までをサポートしているので iOS12のサポート終了のタ
    イミングで ZexyUI に Icon の実装をする予定
    Icon
    

    View Slide

35. 佐々⽊ (@omuomugin)
    

    アプリ基盤チーム リード
    

    iOS/Android インフラ周りの実装や
    

    全体のアーキテクチャのリードしてます。
    中村 (@valmet)
    Design System プロジェクトリード
    

    機能開発チームのリーダーやりながら、
    

    Design System の推進もやってます。
    

    View Slide

36. カタログアプリ
    • 実際のアプリ上で Design System に実装さ
    れている挙動をチーム全体に⾒てもらいたい
    • 本体のアプリとは異なり数秒でビルドできる
    • 社内アプリなので⽐較的⾃由な技術選定をし
    て最新技術を試す場としても有効
    

    (iOS14以上をターゲットにしてる)
    

    e.g. Compositional Layout, Swift Combine,
    SwiftUI, etc
    …
    

    View Slide

37. 少なくともゼクシィで Design System がうまく⾏ってるコツ
    • デザイナーのメンタルモデルと業務フローをとにかくインタビューを通して
    

    理解した上で Design System 全体の設計を⾏う
    

    → デザイナーが意図していない誤った共通化を避ける
    • 利⽤する開発者に対するコミュニケーションを重視する
    

    → Design System 全体の README.md や各構成要素の使い⽅や制限事項などの
    README.md を⽤意している
    Design System 導⼊の効果は絶⼤だが、運営するのはとても⼤変なので
    

    「Design Systemチーム」を組むなど体制の整理もするほうが良い (と考えている)
    

    View Slide

38. ★選考・採⽤イベント ご応募⽅法★
    リクルートは仲間を積極募集中です︕︕︕
    このページをご覧の⽅限定の特設応募サイトよりご登録ください
    2
    ＜採⽤イベント＞
    ＜カジュアル⾯談＞
    まずは気軽に
    カジュアルに
    話をしてみたい
    ＜選考受験＞
    スピーディーに選考で
    これまでの経験が
    いかせるか確認したい
    

    View Slide