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
多野優介
tanoyusuke
1
200
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
460
stupid jj tricks
indirect
0
7.8k
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
300
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
140
Findy Team+のSOC2取得までの道のり
rvirus0817
0
300
PythonとLLMで挑む、 4コマ漫画の構造化データ化
esuji5
1
130
VCC 2025 Write-up
bata_24
0
170
SOC2取得の全体像
shonansurvivors
1
350
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
330
データエンジニアがこの先生きのこるには...?
10xinc
0
440
GopherCon Tour 概略
logica0419
2
170
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Optimizing for Happiness
mojombo
379
70k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Scaling GitHub
holman
463
140k
Typedesign – Prime Four
hannesfritz
42
2.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Unsuck your backbone
ammeep
671
58k
A Modern Web Designer's Workflow
chriscoyier
697
190k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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ΤϯδχΞ • αʔόΤϯδχΞ ΤϯδχΞืूத
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠