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
デザインシステムを利用したSwiftUIによるアプリ開発事情
Search
spycwolf
October 24, 2022
Programming
1
750
デザインシステムを利用したSwiftUIによるアプリ開発事情
spycwolf
October 24, 2022
Tweet
Share
More Decks by spycwolf
See All by spycwolf
アプリエンジニアのためのGraphQL入門.pdf
spycwolf
0
260
Other Decks in Programming
See All in Programming
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
120
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.5k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
AIともっと楽するE2Eテスト
myohei
6
2.6k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
A Modern Web Designer's Workflow
chriscoyier
695
190k
A better future with KSS
kneath
238
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Become a Pro
speakerdeck
PRO
29
5.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Transcript
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それぞれのアプリを実装 ◦ プラットフォームやバージョンごとの差異が分かる
None
12 ここまでの課題 • バリエーションの実装方針が難しい ◦ 似ているが少し違うパターンをどのように実装するか ◦ 引数によって分岐させるか、別々のコンポーネントにするか • 想定外のパターンへの対応が難しい
◦ 実際の画面要件として想定外のパターンが出てきた場合、都度対応が必 要になってくる ◦ 事前にある程度、方向性を決めておくことが必要
13 開発スピードは向上 • 実際の画面を実装する際、事前に準備してあるコンポーネントを呼び出すだ けなのがかなり楽 • デザイナーとのコミュニケーションがスムーズになり、お互いのコスト削減 に役立っている実感がある
14 ありがとうございました