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
730
デザインシステム×マルチプラットフォームアプリ開発 / 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
Datadog による 自己完結的アプリケーションモニタリング
recruitengineers
PRO
3
170
プロデザ! BY リクルートvol.17_『じゃらんnet』公式アプリの高速リニューアル事例を大公開
recruitengineers
PRO
5
130
自己完結な開発者組織を支える プラットフォーム作り
recruitengineers
PRO
2
260
検索エンジニアが考える、 生成AI時代の人間の付加価値とは
recruitengineers
PRO
2
55
エンジニア思考で解決! 家事育児を劇的に進化させる開発プロセス応用術
recruitengineers
PRO
2
78
GraphQL「良さ」・「難しさ」再探訪 〜スタディサプリにおける実例〜 / StudySapuri with GraphQL
recruitengineers
PRO
21
4.3k
プロデザ番外編_リクルートのデザイン組織のご紹介
recruitengineers
PRO
2
150
プロダクトプラットフォーム開発におけるフィー ドバックループの回し方
recruitengineers
PRO
4
490
リクルートにおける Platform Engineering / SRE の事例共有
recruitengineers
PRO
6
1.9k
Other Decks in Technology
See All in Technology
LLM + RAG を使った SORACOM Support Bot の裏側の歴史
soracom
PRO
1
640
任意コード実行の原理
ffri
0
170
なんで私に登壇依頼が?! ~頼られるエンジニアになるためには~ /
mixi_engineers
PRO
2
200
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
210
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2.1k
Getting started with controlling LEGO using Swift
hcrane
0
130
Tohoku.Tech #1 「EC-CUBE/AWSの構築をChatGPTに相談してみました」by テンダ
jun2882
0
140
.NETの非同期戦略とUnityとの相互運用
neuecc
2
2.4k
継続的テストモデルを実現するためにスリーアミーゴスを用いた10Xでのシフトレフトの事例
nihonbuson
3
160
20240321_生成AI時代のDevOps
kzkmaeda
2
610
KubeCon EU 2024 : Knative Maintainers Session
salaboy
0
370
社内共通ルールを値オブジェクトにして社内ライブラリとして運用してみた話
leveragestech
2
1.1k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
RailsConf 2023
tenderlove
0
510
Designing for Performance
lara
601
67k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
For a Future-Friendly Web
brad_frost
170
8.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Scaling GitHub
holman
456
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
Why Our Code Smells
bkeepers
PRO
330
56k
Rails Girls Zürich Keynote
gr2m
91
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Adopting Sorbet at Scale
ufuk
66
8.5k
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 部品のテストの自動化で、画面レベルではコンポーネントの状態を気に しなくて良くなった デザインシステムを取り入れてよかった!
一緒に事業拡大を目指す仲間を お待ちしています!
ご清聴ありがとうございました