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
560
Wantedly Peopleの連絡先一覧について
yuta24
1
5.7k
Wantedly Peopleがたどり着いたアーキテクチャ
yuta24
1
5.2k
Other Decks in Technology
See All in Technology
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
440
Digitization部 紹介資料
sansan33
PRO
1
5.6k
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
130
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
350
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
900
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.6k
このままAIが発展するだけでAGI達成可能な理由
frievea
0
120
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
180
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2k
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
440
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
10
5k
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Mobile First: as difficult as doing things right
swwweet
225
10k
A Tale of Four Properties
chriscoyier
161
23k
Six Lessons from altMBA
skipperchong
29
4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Statistics for Hackers
jakevdp
799
220k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Documentation Writing (for coders)
carmenintech
75
5.1k
Optimizing for Happiness
mojombo
379
70k
Raft: Consensus for Rubyists
vanstee
140
7.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
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ΤϯδχΞ • αʔόΤϯδχΞ ΤϯδχΞืूத
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠