Slide 1
Slide 1 text
デザインシステム ×
マルチプラットフォームアプリ開発
@chuymaster @geckour
EdTech Night
Slide 2
Slide 2 text
Agenda | 01
02
03
04
05
発表者紹介
デザインシステム導入の背景
iOS の実装紹介
Android の実装紹介
まとめ
Slide 3
Slide 3 text
発表者紹介
01
Slide 4
Slide 4 text
@chuymaster / チャイ
- iOS アプリエンジニア
- 「スタディサプリ 中学講座」開発担当
@geckour / 石田 智宏
- Android アプリ開発者
- 「スタディサプリ 中学講座」開発担当
Slide 5
Slide 5 text
リクルートグループでの位置づけ
メディア＆
ソリューションSBU
人材派遣SBU
HRテクノロジーSBU
創業
本社
連結売上収益
グループ企業数
グループ従業員数
創業 1960年
設立 1963年
東京
22,693億円
(2020年4月1日～2021年3月31日）
連結子会社 351社 関連会社8社
（2021年3月31日時点）
46,800名（2021年3月31日時点）
OUR MISSION
Slide 6
Slide 6 text
国内向けサービス
小学生から受験生や大人まで、学習したい全ての人が学べる月額制のオンライン学習サービス。
約4万本の録画授業動画が見られるベーシックプランのほか、オンラインコーチングプランや生配信で授業を受けられるライブプ
ランなど、一人一人が自由に学習できるよう、様々なプランを展開しています。
先生方が生徒個々人のレベルに合った最適な学習を提供できる校内インフラサービス。クラス全員に特定の講義や確認テスト、
宿題を配信することができるほか、アクティブラーニングに使える教材も提供。
生徒が夢中になって学び、希望する進路を実現することを支援しています。
隙間時間に3分で学習できる英語サービス。リスニングと発話を鍛えられる「新日常英会話コース」、短期間でのスコアアップを
狙う「TOEIC®L&R TEST対策コース」、「ビジネス英語コース」があり、業界初オンライン完結型コーチングも提供しています。
Slide 7
Slide 7 text
サービスラインナップ
様々なサービスラインナップにて事業展開をしています
スタディサプリ
対象学年 小・中学校 高校 大学・社会人
オンラインビデオ
(B to C)
オンラインビデオ&
アセスメント
(B to B to C)
オンラインコーチング
パーソナルコーチプラン
Slide 8
Slide 8 text
サービス会員推移
47万人
74万人
26万人
8万人
4万人
国外
国内
2014 2015 2016 2017 2018
2013
97万人 194
22
127万人
2019 2020
216万人
サービス開始から 7 年、有料会員数は国内外で累計 216 万人となりました (2020 年度単体)
Slide 9
Slide 9 text
デザインシステム導入の背景
02
Slide 10
Slide 10 text
デザインシステムとは
グッドパッチエンジニアが選ぶ、推しデザインシステム 10
選｜Goodpatch Blog グッドパッチブログ より
「 デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの
原則や指針と、それらを実現するための仕組みの集合体です。
(中略)
一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トー
ンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイン
トークンなどが含まれます。
」
Slide 11
Slide 11 text
デザインシステムを導入した背景
● アプリ全体のデザインを統一したい
● 再利用可能コンポーネントを作って、コミュニケーションコスト・実装コストを減
らしたい
Slide 12
Slide 12 text
デザインシステムの紹介
● Atomic Design を改修した設計を採用
○ Tokens を追加し、Atoms、Components まで定義
○ デザイン工数削減・実装がルールに縛られすぎないメリット
COMPONENTS
Slide 13
Slide 13 text
● Atomic Design を改修した設計を採用
○ Tokens を追加し、Atoms、Components まで定義
○ デザイン工数削減・実装がルールに縛られすぎないメリット
COMPONENTS
デザインシステムの紹介
🐟 🍣 🍱
Slide 14
Slide 14 text
● 🐟 Tokens
デザインシステムの紹介
Slide 15
Slide 15 text
デザインシステムの紹介
● 🍣 Atoms
Slide 16
Slide 16 text
デザインシステムの紹介
● 🍱 Components
Slide 17
Slide 17 text
iOS の実装紹介
03
Slide 18
Slide 18 text
SwiftUI とデザインシステムは
相性がいい
Slide 19
Slide 19 text
SwiftUI とデザインシステム
● 一つのファイルで View の記述が
完結するので、UI の部品として管
理しやすい
● Previews が便利
Slide 20
Slide 20 text
SwiftUI とデザインシステム
● 一つのファイルで View の記述が
完結するので、UI の部品として管
理しやすい
● Previews が便利
Slide 21
Slide 21 text
enum と Extension で Tokens を実装
● enum で Tokens を定義し、View の Extension に関数を追加することで、
馴染みやすい実装に
Slide 22
Slide 22 text
enum と Extension で Tokens を実装
● Sizing
Slide 23
Slide 23 text
enum と Extension で Tokens を実装
● Sizing
Slide 24
Slide 24 text
enum と Extension で Tokens を実装
● Sizing
Slide 25
Slide 25 text
enum と Extension で Tokens を実装
● Typography
Slide 26
Slide 26 text
enum と Extension で Tokens を実装
● Typography
Slide 27
Slide 27 text
enum と Extension で Tokens を実装
● Typography
Slide 28
Slide 28 text
enum と Extension で Tokens を実装
● Typography
Slide 29
Slide 29 text
enum と Extension で Tokens を実装
● Typography
Slide 30
Slide 30 text
Previewsで開発が爆速に
Slide 31
Slide 31 text
Previews でカタログ化
● Previews 機能で Tokens のカタログを
作って、視覚的に確認できる
Slide 32
Slide 32 text
Previews でカタログ化
● UI のパターンを網羅でき
て、不具合を防ぐことがで
きる
🍣MainButton の Previews カタログ
Slide 33
Slide 33 text
● SnapshotTesting というライブラリーで Visual Regression Test をしている
○ https://github.com/pointfreeco/swift-snapshot-testing
SnapshotTesting と Previews でテストを自動化
Slide 34
Slide 34 text
SnapshotTesting と Previews でテストを自動化
● コード自動生成ツール「Sourcery」を使って、自動でテストコードを生成して
いる
○ 詳しくはメルカリさんの記事をご覧ください
○ https://engineering.mercari.com/blog/entry/20201204-1f94b9dc
a2/
Slide 35
Slide 35 text
Android の実装紹介
04
Slide 36
Slide 36 text
Jetpack Compose とデザインシステム
詳細はコチラ: Jetpack Compose と GraphQL Fragment でつくるデザインシステム実装 (blog.studysapuri.jp)
● Jetpack Compose: 宣言的 UI
● デザインシステム: デザインコンポーネントの関連付け
● コンポーネントの実装と宣言的 UI は相性が良い
Slide 37
Slide 37 text
● Atomic Design を改修した設計を採用
○ Tokens を追加し、Atoms、Components まで定義
○ デザイン工数削減・実装がルールに縛られすぎないメリット
COMPONENTS
デザインシステムの紹介
🐟 🍣 🍱
Slide 38
Slide 38 text
Components
Lesson
Slide 39
Slide 39 text
Components
Lesson
Slide 40
Slide 40 text
● Atomic Design を改修した設計を採用
○ Tokens を追加し、Atoms、Components まで定義
○ デザイン工数削減・実装がルールに縛られすぎないメリット
COMPONENTS
デザインシステムの紹介
🐟 🍣 🍱
Slide 41
Slide 41 text
Atoms
Chips
Slide 42
Slide 42 text
Atoms
Chips
Slide 43
Slide 43 text
● Atomic Design を改修した設計を採用
○ Tokens を追加し、Atoms、Components まで定義
○ デザイン工数削減・実装がルールに縛られすぎないメリット
COMPONENTS
デザインシステムの紹介
🐟 🍣 🍱
Slide 44
Slide 44 text
Tokens
Typography
Slide 45
Slide 45 text
Tokens
Typography (XML)
Slide 46
Slide 46 text
コンポーネントの内包関係を
スッキリ表現できる
Slide 47
Slide 47 text
Jetpack Compose (宣言的 UI)
ならね
Slide 48
Slide 48 text
ついでに得られた
副次的なメリットいろいろ
Slide 49
Slide 49 text
デザインカタログの生成
● Showkase を利用
Slide 50
Slide 50 text
コンポーネントの Visual Regression Testing
● Showkase + reg-suit を利用
Slide 51
Slide 51 text
コンポーネントの Visual Regression Testing
Slide 52
Slide 52 text
コンポーネントの Visual Regression Testing
Slide 53
Slide 53 text
コンポーネントの Visual Regression Testing
Slide 54
Slide 54 text
コンポーネントの Visual Regression Testing
Slide 55
Slide 55 text
コンポーネントの Visual Regression Testing
Slide 56
Slide 56 text
まとめ
05
Slide 57
Slide 57 text
● SwiftUI & Jetpack Compose とデザインシステムは相性が良い
○ コンポーネントの表現がしやすくなり、コードの見通しがよくなった
○ カタログ化で、コンポーネントの認知負荷が減った
○ UI 部品のテストの自動化で、画面レベルではコンポーネントの状態を気に
しなくて良くなった
デザインシステムを取り入れてよかった！
Slide 58
Slide 58 text
一緒に事業拡大を目指す仲間を
お待ちしています！
Slide 59
Slide 59 text
ご清聴ありがとうございました