デザインシステム×マルチプラットフォームアプリ開発 / abceed_Tech_Night

2022/04/20_abceed Tech Night「大人気教育アプリ 3社のモバイルアプリ開発秘話」での、石田智宏・ロークニヨム チャッチャイの講演資料になります

Transcript

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