Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

佐々⽊ (@omuomugin) 
 アプリ基盤チーム リード 
 iOS/Android インフラ周りの実装や 
 全体のアーキテクチャのリードしてます。 中村 (@valmet) Design System プロジェクトリード 
 機能開発チームのリーダーやりながら、 
 Design System の推進もやってます。

Slide 3

Slide 3 text

佐々⽊ (@omuomugin) 
 アプリ基盤チーム リード 
 iOS/Android インフラ周りの実装や 
 全体のアーキテクチャのリードしてます。 中村 (@valmet) Design System プロジェクトリード 
 機能開発チームのリーダーやりながら、 
 Design System の推進もやってます。

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

ゼクシィの開発の歴史 外部の開発会社 開発体制共存期間 社内での開発 2011年 2019年 2021年 ~ 最初のリリース 開発⼈数 : 約20名 
 Lines of Code : 約20万⾏ 結婚観などの変化を受け 
 開発のアジリティ向上や 
 技術的な負債の返済を⽬的に 
 社内のエンジニアが開発に参画 2013年

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

フォントサイズへのこだわり • System Font では 和⽂フォントが欧⽂ フォントの San Francisco に合わせて 若⼲⼩さめに修正される 
 e.g. system font で 13.6 が およそ 13.0 になる • ゼクシィでは⽇本語を中⼼にデザイン していて困るので都度、調整していた ※ 同じフォントサイズのときのヒラギノを明⽰的に 
 指定した場合とsystem fontを指定した場合

Slide 10

Slide 10 text

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 は今後提供予定) 
 ③ デザインシステムの実装⼀覧を⾒ることができる「カタログアプリ」

Slide 11

Slide 11 text

Design System 導⼊”前”のワークフロー デザイナー 機能開発チーム フォントサイズをもう少し 
 ⼤きく調整したいです これくらいで 
 どうでしょう? もう少しだけ 
 ⼩さくしたいです これくらいで 
 どうでしょう?

Slide 12

Slide 12 text

Design System 導⼊”後”のワークフロー デザイナー 機能開発チーム フォントは、”Caption” の 
 “Regular” でお願いします 承知です! (ライブラリにある CaptionRegular を指定する)

Slide 13

Slide 13 text

佐々⽊ (@omuomugin) 
 アプリ基盤チーム リード 
 iOS/Android インフラ周りの実装や 
 全体のアーキテクチャのリードしてます。 中村 (@valmet) Design System プロジェクトリード 
 機能開発チームのリーダーやりながら、 
 Design System の推進もやってます。

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Text Component Icon ZexyUI App Dynamic Framework Zexy ZexyCatalog Color Color

Slide 17

Slide 17 text

実現したこと • デザインマスター上で Color 名を定義 
 e.g. ZexyPink • Color 名をコード上で利⽤可能にする 
 e.g. UIColor.ZexyPink Color

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

利⽤⽅法 Interface Builder Code Color

Slide 20

Slide 20 text

Color Component Icon ZexyUI App Dynamic Framework Zexy ZexyCatalog Text Text

Slide 21

Slide 21 text

実現したこと • デザインマスター上でテキストスタイルを 定義 
 e.g. Heading1 • 定義されたテキストスタイルをコード上で 利⽤可能にする 
 ※コード上での利⽤⽅法は後述 Text

Slide 22

Slide 22 text

設計 • UILabel をラップしたクラスを実装 
 → UILabel への変更を制限する • クラス名をデザインマスターと合わせる 
 e.g. CaptionRegularBaseDeep 
 - テキストスタイル : Caption 
 - font weight : Regular 
 - Color : BaseDeep Text

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

実装 • テキストスタイルの定義を Enum としてまとめる • テキストスタイルごとに値を設定 
 textSize : 10px → 10.7px 
 ※⽇本語フォントが調整されてしまうため 
 lineHeight, baselineO ff set なども設定 Text

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Color Text Icon ZexyUI App Dynamic Framework Zexy ZexyCatalog Component Component

Slide 29

Slide 29 text

Component と課題感 • 繰り返し出てくる View パターン • SliderM (右図の⾚枠) の実装が4つも存 在している 
 → 実装・デザイナーによるデザインチ ェックの負荷が⾼い😢 • デザイナーと密に連携しないとよく使 うパターンかどうかが判断がつかない Component

Slide 30

Slide 30 text

実現したこと・進め⽅ • デザインマスター上でコンポーネントを定義 • 定義されたコンポーネントをコード上で利⽤ 可能にする • 実装するコンポーネントについての詳細をデ ザイナーと決める 
 - 何をどの単位でコンポーネント化するか 
 - 実装するコンポーネントの優先度 
 - コンポーネントが持つべき機能 SliderM Component

Slide 31

Slide 31 text

Color Text Component ZexyUI App Dynamic Framework Zexy ZexyCatalog Icon Icon

Slide 32

Slide 32 text

Icon について • デザイナーにインタビューした結果「機能 的アイコン」と「装飾的アイコン」を分け て管理していることがわかった • 機能的アイコンは、意味のあるアイコンと してデザインマスター上に定義されたもの 
 → デザインシステムの対象にする • 装飾的アイコンは、特定の機能開発で⼀時 的に利⽤するようなアイコン 
 → デザインシステムの対象には含めない ゼクシィのデザインマスターに定義される「機能的アイコン」⼀覧 Icon

Slide 33

Slide 33 text

実現したこと • デザインマスター上で Icon 名を定義 
 e.g. wedding • Icon 名をコード上で利⽤可能にする 
 e.g. UIImage.Wedding e.g. “wedding” アイコン Icon

Slide 34

Slide 34 text

実装の課題 : 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

Slide 35

Slide 35 text

佐々⽊ (@omuomugin) 
 アプリ基盤チーム リード 
 iOS/Android インフラ周りの実装や 
 全体のアーキテクチャのリードしてます。 中村 (@valmet) Design System プロジェクトリード 
 機能開発チームのリーダーやりながら、 
 Design System の推進もやってます。

Slide 36

Slide 36 text

カタログアプリ • 実際のアプリ上で Design System に実装さ れている挙動をチーム全体に⾒てもらいたい • 本体のアプリとは異なり数秒でビルドできる • 社内アプリなので⽐較的⾃由な技術選定をし て最新技術を試す場としても有効 
 (iOS14以上をターゲットにしてる) 
 e.g. Compositional Layout, Swift Combine, SwiftUI, etc …

Slide 37

Slide 37 text

少なくともゼクシィで Design System がうまく⾏ってるコツ • デザイナーのメンタルモデルと業務フローをとにかくインタビューを通して 
 理解した上で Design System 全体の設計を⾏う 
 → デザイナーが意図していない誤った共通化を避ける • 利⽤する開発者に対するコミュニケーションを重視する 
 → Design System 全体の README.md や各構成要素の使い⽅や制限事項などの README.md を⽤意している Design System 導⼊の効果は絶⼤だが、運営するのはとても⼤変なので 
 「Design Systemチーム」を組むなど体制の整理もするほうが良い (と考えている)

Slide 38

Slide 38 text

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