iOSDC2021

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

Transcript

1. 歴史のある⼤規模アプリに Design System を導⼊して 開発をスケールさせる 佐々⽊ (@omuomugin) 中村 (@valmet)
2. 佐々⽊ (@omuomugin) 
 アプリ基盤チーム リード 
 iOS/Android インフラ周りの実装や 
 全体のアーキテクチャのリードしてます。 中村 (@valmet) Design System プロジェクトリード 
 機能開発チームのリーダーやりながら、 
 Design System の推進もやってます。
3. 佐々⽊ (@omuomugin) 
 アプリ基盤チーム リード 
 iOS/Android インフラ周りの実装や 
 全体のアーキテクチャのリードしてます。 中村 (@valmet) Design System プロジェクトリード 
 機能開発チームのリーダーやりながら、 
 Design System の推進もやってます。
4. リクルートは多数のサービスを運営しています 1 選択・意思決定を⽀援する情報サービスを提供し、 「まだ、ここにない、出会い。より速く、シンプルに、もっと近くに」を実現する メディア＆ソリューションSBU HRテクノロジーSBU ⼈材派遣SBU 販促領域 ⼈材領域 国内派遣 海外派遣 etc...
6. ゼクシィの開発の歴史 外部の開発会社 開発体制共存期間 社内での開発 2011年 2019年 2021年 ~ 最初のリリース 開発⼈数 : 約20名 
 Lines of Code : 約20万⾏ 結婚観などの変化を受け 
 開発のアジリティ向上や 
 技術的な負債の返済を⽬的に 
 社内のエンジニアが開発に参画 2013年
7. アプリ基盤チーム - Design System の推進 - インフラ層のオーナーシップ - 全体のアーキテクチャの推進 - 「機能開発チーム」の技術的な問題解決を⽀援 機能開発チーム - プロダクト全体で追ってる KPI などに紐づくような機能開発を担当 - 基本的には、iOS/Android どちらも開発するマルチファンクショナルチーム
8. そんなゼクシィで起きていたこと TODO Swiftで書く `#f59cae` がそこら中に宣⾔されている 右向きのアローアイコンが 6個(以上)
9. フォントサイズへのこだわり • System Font では 和⽂フォントが欧⽂ フォントの San Francisco に合わせて 若⼲⼩さめに修正される 
 e.g. system font で 13.6 が およそ 13.0 になる • ゼクシィでは⽇本語を中⼼にデザイン していて困るので都度、調整していた ※ 同じフォントサイズのときのヒラギノを明⽰的に 
 指定した場合とsystem fontを指定した場合
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 は今後提供予定) 
 ③ デザインシステムの実装⼀覧を⾒ることができる「カタログアプリ」
11. Design System 導⼊”前”のワークフロー デザイナー 機能開発チーム フォントサイズをもう少し 
 ⼤きく調整したいです これくらいで 
 どうでしょう？ もう少しだけ 
 ⼩さくしたいです これくらいで 
 どうでしょう？
12. Design System 導⼊”後”のワークフロー デザイナー 機能開発チーム フォントは、”Caption” の 
 “Regular” でお願いします 承知です！ (ライブラリにある CaptionRegular を指定する)
13. 佐々⽊ (@omuomugin) 
 アプリ基盤チーム リード 
 iOS/Android インフラ周りの実装や 
 全体のアーキテクチャのリードしてます。 中村 (@valmet) Design System プロジェクトリード 
 機能開発チームのリーダーやりながら、 
 Design System の推進もやってます。
14. Color Text Component Icon ZexyUI App Dynamic Framework Zexy ZexyCatalog 全体構成 ※ ZexyCatalog = カタログアプリ (発表の後半で紹介)
15. マルチモジュール導⼊の3つの理由🤟 1. ソフトウェアの変更の容易性 • 責務を分け変更の影響範囲を抑えることができる • モジュールのオーナーシップを明確に 2. ビルド速度の改善 • 差分ビルドが効きやすくなる 3. コードの共有 • 各ターゲットでコード共有ができるようになり重複が排除できる
16. Text Component Icon ZexyUI App Dynamic Framework Zexy ZexyCatalog Color Color
17. 実現したこと • デザインマスター上で Color 名を定義 
 e.g. ZexyPink • Color 名をコード上で利⽤可能にする 
 e.g. UIColor.ZexyPink Color
18. 実装 • Asset Catalog に定義された Color を追加 • UIColorを拡張する Color
19. 利⽤⽅法 Interface Builder Code Color
20. Color Component Icon ZexyUI App Dynamic Framework Zexy ZexyCatalog Text Text
21. 実現したこと • デザインマスター上でテキストスタイルを 定義 
 e.g. Heading1 • 定義されたテキストスタイルをコード上で 利⽤可能にする 
 ※コード上での利⽤⽅法は後述 Text
22. 設計 • UILabel をラップしたクラスを実装 
 → UILabel への変更を制限する • クラス名をデザインマスターと合わせる 
 e.g. CaptionRegularBaseDeep 
 - テキストスタイル : Caption 
 - font weight : Regular 
 - Color : BaseDeep Text
23. 設計 : UILabel への変更を制限する 変更できない🙅 • フォント（サイズ・カラーなど） • ⾏間の⼤きさ • カーニング（⽂字同⼠の感覚） • ベースラインの位置 変更できる🙆 • 表⽰するテキスト • テキストボックスの幅 • ⾏数 Text
24. 実装 • テキストスタイルの定義を Enum としてまとめる • テキストスタイルごとに値を設定 
 textSize : 10px → 10.7px 
 ※⽇本語フォントが調整されてしまうため 
 lineHeight, baselineO ff set なども設定 Text
25. 実装 : テキストボックスのサイズ • テキストボックスの⾼さをデザインマスターと⼀致さ せる • clipToBounds を設定して heightForMask 分だけマス キングして実装してる UILabel UIView Text
26. 利⽤⽅法 Interface Builder Code Text ※プレビューへの反映の⼯夫次スライド
27. 実装 : Interface Builder でプレビューに反映させる • IBDesignable を利⽤して Interface Builder でリアルタイム反映できるようにする • IBInspectable を利⽤して Interface Builder で値を設定できるようにする 
 - text 
 - lines Text
28. Color Text Icon ZexyUI App Dynamic Framework Zexy ZexyCatalog Component Component
29. Component と課題感 • 繰り返し出てくる View パターン • SliderM (右図の⾚枠) の実装が4つも存 在している 
 → 実装・デザイナーによるデザインチ ェックの負荷が⾼い😢 • デザイナーと密に連携しないとよく使 うパターンかどうかが判断がつかない Component
30. 実現したこと・進め⽅ • デザインマスター上でコンポーネントを定義 • 定義されたコンポーネントをコード上で利⽤ 可能にする • 実装するコンポーネントについての詳細をデ ザイナーと決める 
 - 何をどの単位でコンポーネント化するか 
 - 実装するコンポーネントの優先度 
 - コンポーネントが持つべき機能 SliderM Component
31. Color Text Component ZexyUI App Dynamic Framework Zexy ZexyCatalog Icon Icon
32. Icon について • デザイナーにインタビューした結果「機能 的アイコン」と「装飾的アイコン」を分け て管理していることがわかった • 機能的アイコンは、意味のあるアイコンと してデザインマスター上に定義されたもの 
 → デザインシステムの対象にする • 装飾的アイコンは、特定の機能開発で⼀時 的に利⽤するようなアイコン 
 → デザインシステムの対象には含めない ゼクシィのデザインマスターに定義される「機能的アイコン」⼀覧 Icon
33. 実現したこと • デザインマスター上で Icon 名を定義 
 e.g. wedding • Icon 名をコード上で利⽤可能にする 
 e.g. UIImage.Wedding e.g. “wedding” アイコン Icon
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
35. 佐々⽊ (@omuomugin) 
 アプリ基盤チーム リード 
 iOS/Android インフラ周りの実装や 
 全体のアーキテクチャのリードしてます。 中村 (@valmet) Design System プロジェクトリード 
 機能開発チームのリーダーやりながら、 
 Design System の推進もやってます。
36. カタログアプリ • 実際のアプリ上で Design System に実装さ れている挙動をチーム全体に⾒てもらいたい • 本体のアプリとは異なり数秒でビルドできる • 社内アプリなので⽐較的⾃由な技術選定をし て最新技術を試す場としても有効 
 (iOS14以上をターゲットにしてる) 
 e.g. Compositional Layout, Swift Combine, SwiftUI, etc …
37. 少なくともゼクシィで Design System がうまく⾏ってるコツ • デザイナーのメンタルモデルと業務フローをとにかくインタビューを通して 
 理解した上で Design System 全体の設計を⾏う 
 → デザイナーが意図していない誤った共通化を避ける • 利⽤する開発者に対するコミュニケーションを重視する 
 → Design System 全体の README.md や各構成要素の使い⽅や制限事項などの README.md を⽤意している Design System 導⼊の効果は絶⼤だが、運営するのはとても⼤変なので 
 「Design Systemチーム」を組むなど体制の整理もするほうが良い (と考えている)
38. ★選考・採⽤イベント ご応募⽅法★ リクルートは仲間を積極募集中です︕︕︕ このページをご覧の⽅限定の特設応募サイトよりご登録ください 2 ＜採⽤イベント＞ ＜カジュアル⾯談＞ まずは気軽に カジュアルに 話をしてみたい ＜選考受験＞ スピーディーに選考で これまでの経験が いかせるか確認したい