STORES 株式会社 2022/10/20 デザインシステムを利用したSwiftUIによ るアプリ開発事情

2 @neko 2022.03〜 STORES株式会社 STORES 予約 モバイルアプリエンジニア

3 現在の状況 ● モバイルアプリエンジニア3名 ○ チームにはその他、BEエンジニア、デザイナー、PdMが各1名ずつ ● モバイルアプリエンジニア3名 ○ 店舗のオーナーさん向けiOS/Androidアプリ ○ 予約するユーザーさん向けiOS/Androidアプリ ● リニューアルに伴い、利用技術を見直し ○ iOS：Swift / SwiftUI ○ Android：Kotlin / Jetpack Compose

4 デザインシステム導入の背景 1 ● 宣言的UIとデザインシステムとの相性が良い ○ 宣言的UIではコードのネストが深くなりがちだが、ネストが深くなりす ぎると、可読性が落ちていく ○ 上記を避けるため、ビューの構成要素を分割していくが、どの単位で分 割するのか、エンジニア間で合意が必要 ○ デザイナー組織を中心に全社的なデザインシステム導入の動きがあり、 実装側もそれにあわせることがスムーズと考えた

5 デザインシステム導入の背景 2 ● デザイン <-> 開発コストの抑制 ○ デザイナー側に、プラットフォームごとのコンポーネント表現の差、OS バージョンごとの仕様の差などを逐一把握してもらうことが難しい ○ デザインシステムを双方で導入することにより、それが共通言語として の役割を果たしてくれる期待 ○ それにより、お互いの認識齟齬を防ぎ、運用の蓄積によってデザイン・ 開発コストが抑制されていくのではないか

6 実装の進め方 ● Foundation ○ Color、Typographyなどを定義 ● Component、Pattern ○ Button、TextField、SegmentedControl、Dialog、TabViewなどを実装 ● ライブラリとして開発 ○ 各プロダクトにインポートして利用することを想定し、独立したライブ ラリとして開発

Color定義 サンプルコード 7 ※コードは公開用に編集してあり、実際のコードとは異なります

Typography定義 サンプルコード 8 ※コードは公開用に編集してあり、実際のコードとは異なります

Button定義 サンプルコード 9 ※コードは公開用に編集してあり、実際のコードとは異なります

10 チーム内での共有 ● 実装したライブラリの内容を一覧できるアプリ ○ ライブラリの内容が確認できるカタログアプリを開発 ● デザイナーやPdMが実際の端末で確認できる ○ 実際の端末での見え方や操作感を体験してもらえる ● iOS/Androidそれぞれのアプリを実装 ○ プラットフォームやバージョンごとの差異が分かる

No content

12 ここまでの課題 ● バリエーションの実装方針が難しい ○ 似ているが少し違うパターンをどのように実装するか ○ 引数によって分岐させるか、別々のコンポーネントにするか ● 想定外のパターンへの対応が難しい ○ 実際の画面要件として想定外のパターンが出てきた場合、都度対応が必 要になってくる ○ 事前にある程度、方向性を決めておくことが必要

13 開発スピードは向上 ● 実際の画面を実装する際、事前に準備してあるコンポーネントを呼び出すだ けなのがかなり楽 ● デザイナーとのコミュニケーションがスムーズになり、お互いのコスト削減 に役立っている実感がある

14 ありがとうございました