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.6k
Wantedly Peopleがたどり着いたアーキテクチャ
yuta24
1
5.1k
Other Decks in Technology
See All in Technology
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
340
地域コミュニティへの「感謝」と「恩返し」 / 20250726jawsug-tochigi
kasacchiful
0
110
Datasets for Critical Operations by Dataform
kimujun
0
120
Kiro Hookを Terraformで検証
ao_inoue
0
140
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
2
220
Wasmで社内ツールを作って配布しよう
askua
0
160
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
900
サイバー攻撃のシミュレーション:攻撃者の視点からみる防御のむずかしさ!AWSで試してみよう / 20250423 Kumiko Hemmi
shift_evolve
PRO
1
170
人と生成AIの協調意思決定/Co‑decision making by people and generative AI
moriyuya
0
200
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
400
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
2
830
Step Functions First - サーバーレスアーキテクチャの新しいパラダイム
taikis
1
280
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
A designer walks into a library…
pauljervisheath
207
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Language of Interfaces
destraynor
158
25k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
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ΤϯδχΞ • αʔόΤϯδχΞ ΤϯδχΞืूத
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠