戦略的手抜きをするためのデザインシステム運用

株式会社JMDCでは健康年齢を維持・改善するためのアプリ、Pep Up (ペップアップ) をReact Nativeで開発しており、緩やかにデザインシステムを導入しています。
他の開発タスクがある中でのデザインシステム導入プロジェクトの優先度の決め方や、コンポーネントの管理方法、デザイナーとエンジニアのコミュニケーションの改善、デザインシステム導入の効果についてお話します。

https://reactnative-matsuri.com/speakers/6beh94wjmGDKZtBycEeO

Transcript

1. 戦略的手抜きをするためのデザインシステム運用 React Native Matsuri 2021 Kazushi Hara @haranicle
2. Kazushi Hara haranicle 所属 JMDC Inc. 略歴 Engineer (iOS) > Co-founder > PdM 資格 健康リズムカウンセラー 趣味 ゲーム、登山
3. この発表で伝えたいこと デザインシステムの構築は開発チーム一丸となっ て推進することで設計と実装の “手抜き” ができるよ うになり生産性が向上する デザインシステムの役割を明確にし 割り切りラインをしっかり決めておくべき
4. 健保 と 加入者 をつなぐアプリ • 健康診断結果や医療費の閲覧 • ウェアラブルデバイスで 運動や生活習慣の記録 • 記録に応じて様々な商品と 交換できるできるポイント
5. 導入健保 130以上 発行ID数 300万人 突破 2021年9月16日時点
6. 2021年 2月 お薬手帳機能 リリース 調剤薬局で処方されたお薬が自動で取り込まれるお薬手帳
7. 新型コロナウイルスの接種済証を電子化 2021年 5月 ワクチン接種記録機能 リリース Apple Walletに 接種済証を登録できる
8. Pep Upアプリ版のフェーズ Web版に対して機能が少なく、まずは追いつくことが目標 機能 品質 ユーザビリティ
9. 機能が増える 画面が増える 考慮しないといけないことが増える
10. 考慮しないといけないことが増える どのUIコンポーネント使う んだっけ? iOS / Android で デザイン変える？ 文字数が多いときは どうするの？
11. 考慮しないといけないことが増える どのUIコンポーネント使う んだっけ? どんな状態があるんだっ け？ 通信中やエラーは どんな表示？ 文字数が多いときは どうするの？ iOS / Android で デザイン変える？ ユーザーにアクセス権がな い機能は 非表示？エラー？
12. デザインに一貫性をもたせて再利用しよう 手抜きをするためのデザインシステム構築
13. デザインシステム構築の割り切りライン アプリ内の全画面への適用 はやらない 新しい画面から順次デザインシステ ムを取り入れていく 重要な画面はあえて準拠せず体験 やビジネス価値最大化を目指す WebとアプリのUI統一は やらない 関係者が増えすぎる 体験が分断されているので別 UIに なることを許容する アプリ内WebViewで表示されてい るものはあきらめる
14. デザ イン デザインシステム構築の流れ 基本 原則 実装 方針 運用 方法 実装 抽象的 具体的 タイムライン 幅広い抽象度について意思決定が必要 開発チームで一丸となって取り組んでいく必要がある
15. 基本原則 ビジョン達成のために提供する体験やふるまいを言語化 プロダクト立ち上げ時のロゴデザイン発注資料をベースに決定 親しみやすい 堅苦しく無く 気軽に始められる みんなの生活に寄り添う 楽しい ヘルスケアは生活習慣を 維持することが肝 継続できる楽しさを提供 安心感 医療情報をあずけても 大丈夫だと思ってもらえる クリーンな印象
16. どうやって実装していくのかをチームですり合わせていく 最大の論点はiOSとAndroidのUIの差違をどうするか 実装方針 iOSとAndroid 全く同じデザイン iOSとAndroid それぞれのお作法に 完全準拠 このあたりを目指す Material DesignをベースにiOSとAndroidを作り分け
17. Material Design Google によって作られたAndroid, iOS, Flutter, Webのため のデザインシステム iOSのお作法に準拠するためのガイドラインも提供されてい る (Cross-platform adaptation) Pep Upでは基本的にiOS版もAndroid版と同じデザイン 違和感が大きいところ とユーザビリティに影響する部分 のみ 作り分けている
18. デザインファイルと実装が合致していることが信用できないと 画面デザイン時に毎回確認作業が必要になる デザインファイルと実装を紐付けて管理することで デザインファイルと実装の両方がマスターとなるようにした 運用方法
19. デザイナー エンジニア デザイン 実装 デザインレビュー 完成 実装依頼 レビュー依頼 OK!
20. デザイナー エンジニア デザイン 実装 デザインレビュー 完成 実装依頼 レビュー依頼 OK! ブラウザ上で動く デザインツール デザインと実装の 紐付けをドキュメント化
21. Storybookのプラグインで Figmaタブを追加 デザインと実装を 同時に確認できる Storybookでデザインファイルと実装を紐付けでドキュメント化 Figmaのデザインファイルを Storybook内に表示 これをやるためにXDから乗り換えた
22. Figmaファイル内にUIコンポー ネントの説明を記載 デザインと実装を 同時に確認できる Storybookでデザインファイルと実装を紐付けでドキュメント化 デザイナーがUIコンポーネントの実 装ステータスを管理 ・デザイン中 ・実装待ち ・レビュー済み Storybookのプラグインで Figmaタブを追加
23. スマホでデザインレビュー ビルド済みのStorybookをFirebase App Distributionで配信 スマホで確認できるので開発環境がなくてもOK UIコンポーネントと 紐付いているFigmaのURL スマホのブラウザでFigmaを見 ることもできる
24. Googleが公開しているFigmaファイル Material Baseline Design Kit を元に Pep Upの基本原則に合うように改変 デザイン
25. React Native Paper を利用 RNでMaterial Designが実装されているUIライブラリ テーマの一括変更ができる デモアプリがアプリストアで配信されている 実装
26. デザインシステム導入の効果 設計のスピードが上がった デザインファイルと実装の同期が担保されるようになった 正常系以外の細かいパターンをいちいち指示しなくてもよくなった 実装→デザインレビューのサイクルが早くなった UIコンポーネント単位でレビューできるようになった エッジケースの挙動やアニメーションを簡単に確認できるようになった
27. 戦略的手抜きをするためのデザインシステム運用 デザインシステムの構築は開発チーム一丸となっ て推進することで設計と実装の “手抜き” ができるよ うになり生産性が向上する デザインシステムの役割を明確にし 割り切りラインをしっかり決めておくべき
28. WE ARE HIRING プロダクト マネージャー https://hrmos.co/pages/jmdc/jobs /0000220 ネイティブアプリ エンジニア https://www.wantedly.com/ projects/705996 その他の ポジション https://hrmos.co/pages/jmdc/jobs 全方位で積極採用中 リモートでカジュアル面談もしているのでお気軽にご連絡ください