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
750
デザインシステム×マルチプラットフォームアプリ開発 / 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
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
240
Datadog による 自己完結的アプリケーションモニタリング
recruitengineers
PRO
4
250
プロデザ! BY リクルートvol.17_『じゃらんnet』公式アプリの高速リニューアル事例を大公開
recruitengineers
PRO
6
190
自己完結な開発者組織を支える プラットフォーム作り
recruitengineers
PRO
3
290
検索エンジニアが考える、 生成AI時代の人間の付加価値とは
recruitengineers
PRO
3
110
エンジニア思考で解決! 家事育児を劇的に進化させる開発プロセス応用術
recruitengineers
PRO
3
100
GraphQL「良さ」・「難しさ」再探訪 〜スタディサプリにおける実例〜 / StudySapuri with GraphQL
recruitengineers
PRO
22
4.7k
プロデザ番外編_リクルートのデザイン組織のご紹介
recruitengineers
PRO
3
190
プロダクトプラットフォーム開発におけるフィー ドバックループの回し方
recruitengineers
PRO
5
570
Other Decks in Technology
See All in Technology
オブザーバビリティの Primary Signals
onk
PRO
0
540
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
170
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
14
35k
Amplify Gen2を 拡張してみよう JAWS-UG北陸新幹線 ( 福井開催 ) 2024-04-06/Let's extend Amplify Gen2
fossamagna
0
280
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
300
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
Databricks におけるデータエンジニアリング
databricksjapan
0
370
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
3
210
入社後初めてのタスクでk8sアップグレードした話.pdf
kkato1
1
380
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
3
750
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
150
Tebiki株式会社 エンジニア採用資料
tebiki
0
4.1k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
98
5.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
76
41k
In The Pink: A Labor of Love
frogandcode
138
21k
A Philosophy of Restraint
colly
196
16k
Raft: Consensus for Rubyists
vanstee
132
6.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
GitHub's CSS Performance
jonrohan
1023
450k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
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 部品のテストの自動化で、画面レベルではコンポーネントの状態を気に しなくて良くなった デザインシステムを取り入れてよかった!
一緒に事業拡大を目指す仲間を お待ちしています!
ご清聴ありがとうございました