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
960
デザインシステム×マルチプラットフォームアプリ開発 / 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
Azure Functions HTTPトリガーにおけるタイムアウトでハマったこと
recruitengineers
PRO
2
180
実務につなげる数理最適化
recruitengineers
PRO
7
740
うちにも入れたいDatadog
recruitengineers
PRO
2
600
リクルートのデータ基盤 Crois 年3倍成長!1日40,000コンテナの実行を支える AWS 活用とプラットフォームエンジニアリング
recruitengineers
PRO
2
350
Splunk Enterpriseで S3のデータを直接検索してみた!
recruitengineers
PRO
2
160
Looker APIを使い倒す ユーザーフィードバックを基にした継続的改善サイクル
recruitengineers
PRO
3
58
Kaggleふりかえり会〜LLM 20 Questions & ISIC 2024
recruitengineers
PRO
2
240
Balancing Revenue Goals and Off-Policy Evaluation Performance in Coupon Allocation
recruitengineers
PRO
2
52
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
400
Other Decks in Technology
See All in Technology
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.4k
ずっと昔に Star をつけたはずの思い出せない GitHub リポジトリを見つけたい!
rokuosan
0
160
.NET 9 のパフォーマンス改善
nenonaninu
0
1.3k
[JAWS-UG新潟#20] re:Invent2024 -CloudOperationsアップデートについて-
shintaro_fukatsu
0
120
能動的ドメイン名ライフサイクル管理のすゝめ / Practice on Active Domain Name Lifecycle Management
nttcom
0
250
エンジニアカフェ忘年会2024「今年やらかしてしまったこと!」
keropiyo
0
100
[トレノケ雲の会 mod.13] 3回目のre:Inventで気づいたこと -CloudOperationsを添えて-
shintaro_fukatsu
0
110
podman_update_2024-12
orimanabu
1
290
なぜCodeceptJSを選んだか
goataka
0
180
私なりのAIのご紹介 [2024年版]
qt_luigi
1
120
Microsoft Azure全冠になってみた ~アレを使い倒した者が試験を制す!?~/Obtained all Microsoft Azure certifications Those who use "that" to the full will win the exam! ?
yuj1osm
2
120
マイクロサービスにおける容易なトランザクション管理に向けて
scalar
0
190
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
530
KATA
mclloyd
29
14k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Testing 201, or: Great Expectations
jmmastey
41
7.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Music & Morning Musume
bryan
46
6.2k
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 部品のテストの自動化で、画面レベルではコンポーネントの状態を気に しなくて良くなった デザインシステムを取り入れてよかった!
一緒に事業拡大を目指す仲間を お待ちしています!
ご清聴ありがとうございました