$30 off During Our Annual Pro Sale. View Details »

iOSDC2021

omuomugin
September 18, 2021

 iOSDC2021

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

omuomugin

September 18, 2021
Tweet

More Decks by omuomugin

Other Decks in Technology

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 という1つの解決策
    • 「プロダクト全体で⼀貫性のあるデザインを担保するための仕組み」

    ※ 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