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.3k
再利用可能なUI Componentsを利用したアプリ開発
Yu Tawata
August 30, 2018
Tweet
Share
More Decks by Yu Tawata
See All by Yu Tawata
SwiftUIを導入したアプリ設計
yuta24
4
2.8k
try! Serverless App with Swift
yuta24
2
550
Wantedly Peopleの連絡先一覧について
yuta24
1
5.6k
Wantedly Peopleがたどり着いたアーキテクチャ
yuta24
1
5.1k
Other Decks in Technology
See All in Technology
kintone開発組織のDevOpsへの移り変わりと実践
ueokande
1
280
AIとSREの未来 / AI and SRE
ymotongpoo
2
1.8k
Spring for GraphQLって実際どうなの?〜小規模スタートアップの事例紹介〜
kogayushi
0
160
Go Connectへの想い
chiroruxx
0
150
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
38k
Two-Tower モデルで実現する 検索リランキング / Shibuya_AI_2
visional_engineering_and_design
2
130
セキュリティSaaS企業が実践するCursor運用ルールと知見 / How a Security SaaS Company Runs Cursor: Rules & Insights
tetsuzawa
1
3k
AWS Lambdaでサーバレス設計を学ぼう_ベンダーロックインの懸念を超えて-サーバレスの真価を探る
fukuchiiinu
4
940
Introduction to Bill One Development Engineer
sansan33
PRO
0
240
うちの会社の評判は?SNSの投稿分析にAIを使ってみた
doumae
0
620
Data Hubグループ 紹介資料
sansan33
PRO
0
1.8k
バクラクのモノレポにおける AI Coding のための環境整備と {Roo,Claude} Code活用事例 / AI Coding in Bakuraku's Monorepo: Environment Setup & Case Studies with {Roo, Claude} Code
upamune
7
2.8k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Music & Morning Musume
bryan
47
6.6k
How GitHub (no longer) Works
holman
314
140k
Typedesign – Prime Four
hannesfritz
42
2.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Rails Girls Zürich Keynote
gr2m
94
13k
We Have a Design System, Now What?
morganepeng
52
7.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How to Ace a Technical Interview
jacobian
276
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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ΤϯδχΞ • αʔόΤϯδχΞ ΤϯδχΞืूத
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠