Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザインシステム×マルチプラットフォームアプリ開発 / abceed_Tech_Night
Search
Recruit
PRO
April 21, 2022
Technology
0
980
デザインシステム×マルチプラットフォームアプリ開発 / abceed_Tech_Night
2022/04/20_abceed Tech Night「大人気教育アプリ 3社のモバイルアプリ開発秘話」での、石田智宏・ロークニヨム チャッチャイの講演資料になります
Recruit
PRO
April 21, 2022
Tweet
Share
More Decks by Recruit
See All by Recruit
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
RECRUIT TECH CONFERENCE 2025 プレイベント【関田】
recruitengineers
PRO
0
21
RECRUIT TECH CONFERENCE 2025 プレイベント【高橋】
recruitengineers
PRO
0
85
RECRUIT TECH CONFERENCE 2025 プレイベント【岡本】
recruitengineers
PRO
2
28
RECRUIT TECH CONFERENCE 2025 プレイベント【恒川】
recruitengineers
PRO
0
23
20250130_『SUUMO』の裏側!第2弾 ~機械学習エンジニアリング編
recruitengineers
PRO
1
950
Asset Centric な データ変換パイプラインの攻略法
recruitengineers
PRO
1
140
Kotlin Multiplatformのポテンシャル
recruitengineers
PRO
2
210
デザイン初め新年会2025_川端_PdM Days2025
recruitengineers
PRO
1
69
Other Decks in Technology
See All in Technology
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
RSNA2024振り返り
nanachi
0
500
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
Featured
See All Featured
Producing Creativity
orderedlist
PRO
343
39k
A Philosophy of Restraint
colly
203
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Speed Design
sergeychernyshev
25
780
The Language of Interfaces
destraynor
156
24k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Scaling GitHub
holman
459
140k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Being A Developer After 40
akosma
89
590k
Transcript
デザインシステム × マルチプラットフォームアプリ開発 @chuymaster @geckour EdTech Night
Agenda | 01 02 03 04 05 発表者紹介 デザインシステム導入の背景 iOS
の実装紹介 Android の実装紹介 まとめ
発表者紹介 01
@chuymaster / チャイ - iOS アプリエンジニア - 「スタディサプリ 中学講座」開発担当 @geckour
/ 石田 智宏 - Android アプリ開発者 - 「スタディサプリ 中学講座」開発担当
リクルートグループでの位置づけ メディア& ソリューション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
国内向けサービス 小学生から受験生や大人まで、学習したい全ての人が学べる月額制のオンライン学習サービス。 約4万本の録画授業動画が見られるベーシックプランのほか、オンラインコーチングプランや生配信で授業を受けられるライブプ ランなど、一人一人が自由に学習できるよう、様々なプランを展開しています。 先生方が生徒個々人のレベルに合った最適な学習を提供できる校内インフラサービス。クラス全員に特定の講義や確認テスト、 宿題を配信することができるほか、アクティブラーニングに使える教材も提供。 生徒が夢中になって学び、希望する進路を実現することを支援しています。 隙間時間に3分で学習できる英語サービス。リスニングと発話を鍛えられる「新日常英会話コース」、短期間でのスコアアップを 狙う「TOEIC®L&R TEST対策コース」、「ビジネス英語コース」があり、業界初オンライン完結型コーチングも提供しています。
サービスラインナップ 様々なサービスラインナップにて事業展開をしています スタディサプリ 対象学年 小・中学校 高校 大学・社会人 オンラインビデオ (B to
C) オンラインビデオ& アセスメント (B to B to C) オンラインコーチング パーソナルコーチプラン
サービス会員推移 47万人 74万人 26万人 8万人 4万人 国外 国内 2014 2015
2016 2017 2018 2013 97万人 194 22 127万人 2019 2020 216万人 サービス開始から 7 年、有料会員数は国内外で累計 216 万人となりました (2020 年度単体)
デザインシステム導入の背景 02
デザインシステムとは グッドパッチエンジニアが選ぶ、推しデザインシステム 10 選|Goodpatch Blog グッドパッチブログ より 「 デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの 原則や指針と、それらを実現するための仕組みの集合体です。
(中略) 一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トー ンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイン トークンなどが含まれます。 」
デザインシステムを導入した背景 • アプリ全体のデザインを統一したい • 再利用可能コンポーネントを作って、コミュニケーションコスト・実装コストを減 らしたい
デザインシステムの紹介 • Atomic Design を改修した設計を採用 ◦ Tokens を追加し、Atoms、Components まで定義 ◦
デザイン工数削減・実装がルールに縛られすぎないメリット COMPONENTS
• Atomic Design を改修した設計を採用 ◦ Tokens を追加し、Atoms、Components まで定義 ◦ デザイン工数削減・実装がルールに縛られすぎないメリット
COMPONENTS デザインシステムの紹介 🐟 🍣 🍱
• 🐟 Tokens デザインシステムの紹介
デザインシステムの紹介 • 🍣 Atoms
デザインシステムの紹介 • 🍱 Components
iOS の実装紹介 03
SwiftUI とデザインシステムは 相性がいい
SwiftUI とデザインシステム • 一つのファイルで View の記述が 完結するので、UI の部品として管 理しやすい •
Previews が便利
SwiftUI とデザインシステム • 一つのファイルで View の記述が 完結するので、UI の部品として管 理しやすい •
Previews が便利
enum と Extension で Tokens を実装 • enum で Tokens
を定義し、View の Extension に関数を追加することで、 馴染みやすい実装に
enum と Extension で Tokens を実装 • Sizing
enum と Extension で Tokens を実装 • Sizing
enum と Extension で Tokens を実装 • Sizing
enum と Extension で Tokens を実装 • Typography
enum と Extension で Tokens を実装 • Typography
enum と Extension で Tokens を実装 • Typography
enum と Extension で Tokens を実装 • Typography
enum と Extension で Tokens を実装 • Typography
Previewsで開発が爆速に
Previews でカタログ化 • Previews 機能で Tokens のカタログを 作って、視覚的に確認できる
Previews でカタログ化 • UI のパターンを網羅でき て、不具合を防ぐことがで きる 🍣MainButton の Previews
カタログ
• SnapshotTesting というライブラリーで Visual Regression Test をしている ◦ https://github.com/pointfreeco/swift-snapshot-testing SnapshotTesting
と Previews でテストを自動化
SnapshotTesting と Previews でテストを自動化 • コード自動生成ツール「Sourcery」を使って、自動でテストコードを生成して いる ◦ 詳しくはメルカリさんの記事をご覧ください ◦
https://engineering.mercari.com/blog/entry/20201204-1f94b9dc a2/
Android の実装紹介 04
Jetpack Compose とデザインシステム 詳細はコチラ: Jetpack Compose と GraphQL Fragment でつくるデザインシステム実装
(blog.studysapuri.jp) • Jetpack Compose: 宣言的 UI • デザインシステム: デザインコンポーネントの関連付け • コンポーネントの実装と宣言的 UI は相性が良い
• Atomic Design を改修した設計を採用 ◦ Tokens を追加し、Atoms、Components まで定義 ◦ デザイン工数削減・実装がルールに縛られすぎないメリット
COMPONENTS デザインシステムの紹介 🐟 🍣 🍱
Components Lesson
Components Lesson
• Atomic Design を改修した設計を採用 ◦ Tokens を追加し、Atoms、Components まで定義 ◦ デザイン工数削減・実装がルールに縛られすぎないメリット
COMPONENTS デザインシステムの紹介 🐟 🍣 🍱
Atoms Chips
Atoms Chips
• Atomic Design を改修した設計を採用 ◦ Tokens を追加し、Atoms、Components まで定義 ◦ デザイン工数削減・実装がルールに縛られすぎないメリット
COMPONENTS デザインシステムの紹介 🐟 🍣 🍱
Tokens Typography
Tokens Typography (XML)
コンポーネントの内包関係を スッキリ表現できる
Jetpack Compose (宣言的 UI) ならね
ついでに得られた 副次的なメリットいろいろ
デザインカタログの生成 • Showkase を利用
コンポーネントの Visual Regression Testing • Showkase + reg-suit を利用
コンポーネントの Visual Regression Testing
コンポーネントの Visual Regression Testing
コンポーネントの Visual Regression Testing
コンポーネントの Visual Regression Testing
コンポーネントの Visual Regression Testing
まとめ 05
• SwiftUI & Jetpack Compose とデザインシステムは相性が良い ◦ コンポーネントの表現がしやすくなり、コードの見通しがよくなった ◦ カタログ化で、コンポーネントの認知負荷が減った
◦ UI 部品のテストの自動化で、画面レベルではコンポーネントの状態を気に しなくて良くなった デザインシステムを取り入れてよかった!
一緒に事業拡大を目指す仲間を お待ちしています!
ご清聴ありがとうございました