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
再利用可能なUI Componentsを利用したアプリ開発
Search
Yu Tawata
August 30, 2018
Technology
12
3.4k
再利用可能なUI Componentsを利用したアプリ開発
Yu Tawata
August 30, 2018
Tweet
Share
More Decks by Yu Tawata
See All by Yu Tawata
SwiftUIを導入したアプリ設計
yuta24
4
2.9k
try! Serverless App with Swift
yuta24
2
550
Wantedly Peopleの連絡先一覧について
yuta24
1
5.7k
Wantedly Peopleがたどり着いたアーキテクチャ
yuta24
1
5.1k
Other Decks in Technology
See All in Technology
プロダクトエンジニアリングで開発の楽しさを拡張する話
barometrica
0
210
オブザーバビリティ文化を組織に浸透させるには / install observability culture
mackerelio
0
350
Engineering Failure-Resilient Systems
infraplumber0
0
130
事業特性から逆算したインフラ設計
upsider_tech
0
240
はじめての転職講座/The Guide of First Career Change
kwappa
5
4.4k
Backlog AI アシスタントが切り開く未来
vvatanabe
1
170
JAWS-UG のイベントで使うハンズオンシナリオを Amazon Q Developer for CLI で作ってみた話
kazzpapa3
0
120
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
150
メルカリIBIS:AIが拓く次世代インシデント対応
0gm
2
460
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
150
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
780
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
k6s4i53rx
0
160
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing for humans not robots
tammielis
253
25k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Invisible Side of Design
smashingmag
301
51k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Balancing Empowerment & Direction
lara
2
570
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Transcript
࠶ར༻ՄೳͳUIίϯϙʔω ϯτΛར༻ͨ͠ΞϓϦ։ൃ iOSDC 2018 ଟాɹါ
• ଟాɹါ • ΣϧεφϏגࣜձࣾ • Twitterɿ@yuta24 ࣗݾհ
None
ٕज़తͳ՝ • ΞϓϦج൫ͷվम • ωοτϫʔΫ • σʔλ • ΞʔΩςΫνϟͷཧ •
UXվળͷରԠ
• ίϯϙʔωϯτԽͷഎܠ • ίϯϙʔωϯτԽͷઓུ • ελΠϧ࣮ • ίϯϙʔωϯτ࣮ ΞδΣϯμ
ίϯϙʔωϯτԽͷഎܠ
• ։ൃதͷ༷มߋ • ػೳվળ • ϦχϡʔΞϧ ΞϓϦͷUI
՝ • ςΩετͷSize͕ࢦఆͱҟͳΔ • StoryboardͰ৭ࢦఆ͞Ε͍ͯΔՕॴͷมߋ࿙Ε • ෳͷը໘Ͱಉ͡Α͏ͳUI࣮
σβΠφʔͷΞϓϩʔν • σβΠϯγεςϜ • ελΠϧΨΠυΛఆٛ • ΧϥʔεΩʔϚɺςΩετελΠϧ • UIίϯϙʔωϯτΛఆٛ ͷϥΠϒϥϦػೳΛ׆༻ʂ
None
None
ϩάΠϯը໘ͷ߹ • มߋͰ͖Δ߲ • ςΩετͷ৭ • ϓϨʔεϗϧμʔςΩετ • ΞϯμʔϥΠϯͷ৭ •
όοΫάϥϯυͷ৭ • มߋͰ͖Δ߲ • શମͷ৭
σβΠφʔ͞Μɺɺɺ ΩϨΠʹ࡞ۀ͠ͱΔ
SketchͷγϯϘϧͷΑ͏ʹ ελΠϧUIίϯϙʔωϯτΛ ར༻ͯ͠UIΛ࡞Εޮྑͦ͞͏
ίϯϙʔωϯτԽͷઓུ
Atomic Design ʢhttp://bradfrost.com/blog/post/style-guide-best-practices-at-beyond-tellerrand/ʣ • UIσβΠϯͷͨΊͷϑϨʔϜϫʔΫ • ίϯϙʔωϯτΛఆٛ͢Δ • 5ͭͷεςʔδͰ͚Δ •
ݪࢠɺࢠɺ༗ػମɺςϯϓϨʔτɺϖʔδ
Atomic DesignͰݱঢ়ཧ εςʔδ σβΠϯγεςϜ ʢSketchʣ ݪࢠ γϯϘϧఆٛ ࢠ γϯϘϧఆٛ ༗ػମ
ͳ͠ ςϯϓϨʔτ ը໘ఆٛ ϖʔδ ͳ͠
σβΠφͱܾΊͨ͜ͱ • ݪࢠͱࢠͱ͍͏2Ͱߟ͑Δ • ࠶ར༻͞ΕΔͷ͚ͩίϯϙʔωϯτԽ͢Δ • InVision/ZeplinͰͷσβΠϯڞ༗ͷഇࢭ • InVision/ZeplinͩͱελΠϧใɺγϯϘϧใ͕ܽམ ͢Δ
ελΠϧ࣮ • ཁ݅ • Sizeݻఆ • Weightมߋ͞ΕΔ͜ͱ͕͋Δ • ํ •
EnumͰఆٛ͢Δͷ͕ྑͦ͞͏ • StoryboardͰελΠϧࢦఆ͢Δͷ߇͑Δ • IBInspectable enum αϙʔτର֎ • ྫ֎ΛϏϧυͰݕͰ͖ͳ͍
ελΠϧ࣮ • ཁ݅ • Sizeݻఆ • Weightมߋ͞ΕΔ͜ͱ͕͋Δ • ํ •
EnumͰఆٛ͢Δͷ͕ྑͦ͞͏ • StoryboardͰελΠϧࢦఆ͢Δͷ߇͑Δ • IBInspectable enum αϙʔτର֎ • ྫ֎ΛϏϧυͰݕͰ͖ͳ͍
• σϑΥϧτΛࢦఆ͢ΔͨΊɺؔͰ࣮ • WeightAlignmentݸผͷՕॴͰมߋ͢Δ͜ͱͰ͖Δ • ͜ͷؔΛϏϡʔʹద༻͢Δ ελΠϧ࣮
Before After
ίϯϙʔωϯτ࣮ʢϘλϯͷ߹ʣ • Ϙλϯ2छྨʢlineɺfillʣ • ܾ·͍ͬͯΔ͜ͱ • αΠζ • ؙ֯ͷܾ·Δ •
Ϙʔμʔͷଠ͞ • จࣈͷελΠϧ • Disableঢ়ଶͷελΠϧ • จࣈ৭ͱϘʔμʔͷ৭ಉ͡
None
None
PlaygroundͰಈ࡞֬ೝ
Before After
·ͱΊ • σβΠφʔͷ࡞ۀϓϩηεΛΈΔ͜ͱͰΤϯδχΞͷ࡞ۀվળʹͭͳ͕ͬͨ • σβΠϯγεςϜ্ͷγϯϘϧΛ࣮ͨ͠ • ελΠϧఆٛ • UIίϯϙʔωϯτఆٛ •
֤ίϯϙʔωϯτͷཁ݅Λ֬ೝͭͭ͠ਐΊͨ • StoryboardͰͷελΠϧࢦఆΛΊͨ • ελΠϧͷ౷ҰੑΛ্ͤ͞ΔͨΊ • StoryboardͰ࣮ࡍͷը໘ͷงғؾΛ͔ͭΈʹ͘͘ͳͬͨ • PlaygroundͰίϯϙʔωϯτͷελΠϧɺڍಈͷೝࣝ߹Θͤ
• iOSΤϯδχΞ • AndroidΤϯδχΞ • αʔόΤϯδχΞ ΤϯδχΞืूத
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠