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
エンジニアとデザイナーのあいだ
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Yudai Yokoyama
November 25, 2015
Design
96
0
Share
エンジニアとデザイナーのあいだ
2015/11/25 iOS 9 週連続 Boot Camp! 9 週目 発表資料
Yudai Yokoyama
November 25, 2015
More Decks by Yudai Yokoyama
See All by Yudai Yokoyama
スマホアプリデザインの心得 - Developers.IO 2016
udaiadu
0
6.1k
望みを叶えるUIデザイン
udaiadu
0
1.5k
Other Decks in Design
See All in Design
デザイナーが主導権を握る、AI協業の本音と実践
satosio
7
3.3k
20251217リビングラボ・トークin尼崎(尼崎おせっかい会議&オトナテラコヤ)
a2k
0
120
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
nttcom
0
650
Crisp Code inc.|ブランドガイドライン - Brand guidelines
so_kotani
1
370
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
nbkouhou
2
350
図面資産×AI 眠れる資産を起こす挑戦
aonomasahiro
0
130
【優秀賞+特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
shoko_seven11
0
170
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
abokadotyann
3
830
Frontier
rwang05
0
140
デザインの文脈を理解する:エンジニアがデザインカンファレンスに参加して得た学びと気づき
hypebeans
0
190
はじめての演奏会フライヤーデザイン
chorkaichan
1
300
AIスライドデザインを生成する仕組みを社内共有する
kenichiota0711
7
5.5k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.9k
For a Future-Friendly Web
brad_frost
183
10k
Being A Developer After 40
akosma
91
590k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
25k
First, design no harm
axbom
PRO
2
1.2k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
150
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Marketing to machines
jonoalderson
1
5.3k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
340
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.5k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
240
Transcript
None
ࣗݾհ Α͜· Ώ͏͍ͩ @udaiadu ΞϓϦέʔγϣϯΤϯδχΞ / σβΠφʔ 2013/12 ೖࣾ ࠷ۙεϓϥτΡʔϯʹΨνϋϚΓ
લ৬ͭುళ ւಓ ۴࿏ࢢ ग़ ͜Ε·ͰʹݐஙࢪཧΛܦݧ
ࣗݾհ Α͜· @udaiadu ΞϓϦέʔγϣϯΤϯδχΞ / σβΠφʔ 2013/12 ೖࣾ ࠷ۙεϓϥτΡʔϯʹΨνϋϚΓ લ৬ͭುళ
ւಓ ۴࿏ࢢ ग़ ͜Ε·ͰʹݐஙࢪཧΛܦݧ
࣭ Are you ΤϯδχΞ ? 唐突に!
࣭ Are you σβΠφʔ ? 唐突に!!
࣭ Are you Ͳͬͪ ? 唐突に!!!
ϞόΠϧΞϓϦαʔϏε෦ 10% 10% 10% 70% Ϋϥεϝιου ΤϯδχΞ σβΠφʔ Ͳͬͪ PMɾPL
͓Θ͔Γ͍͚ͨͩͨͩΖ͏͔ʜ
デザイナー募集中!!
None
ΤϯδχΞ͔ͭσβΠφʔͱͯ͠
ΤϯδχΞ͔ͭσβΠφʔͱͯ͠ ࣗͰσβΠϯͯࣗ͠Ͱ࣮ σβΠϯͯ͠࠷ޙʹ UI ௐ CustomView ৬ਓ icon ͷૉࡐϦϙδτϦʹ Push
ΑΓΑ͍ΞϓϦΛಧ͚ΔͨΊʹ
ΑΓΑ͍ΞϓϦΛಧ͚ΔͨΊʹ ͋Δ͋Δࣄྫ ͳʹ͕ʁ ղܾҊ
͋Δ͋Δࣄྫ ϨΠΞτͷόϥϯε͕Α͘ͳ͍ エンジニア編
ࣗݾհ @udaiadu ΞϓϦέʔγϣϯΤϯδχΞ / σβΠφʔ 2013/12 ೖࣾ ࠷ۙεϓϥτΡʔϯʹΨνϋϚΓ લ৬ͭುళ ւಓ
۴࿏ࢢ ग़ ͜Ε·ͰʹݐஙࢪཧΛܦݧ Α͜· Ώ͏͍ͩ
ࣗݾհ Α͜· Ώ͏͍ͩ @udaiadu ΞϓϦέʔγϣϯΤϯδχΞ / σβΠφʔ 2013/12 ೖࣾ ࠷ۙεϓϥτΡʔϯʹΨνϋϚΓ
લ৬ͭುళ ւಓ ۴࿏ࢢ ग़ ͜Ε·ͰʹݐஙࢪཧΛܦݧ Α͜· Ώ͏͍ͩ @udaiadu ΞϓϦέʔγϣϯΤϯδχΞ / σβΠφʔ 2013/12 ೖࣾ ࠷ۙεϓϥτΡʔϯʹΨνϋϚΓ લ৬ͭುళ ւಓ ۴࿏ࢢ ग़ ͜Ε·ͰʹݐஙࢪཧΛܦݧ
ͳʹ͕ʁ ࡉ͔͍σβΠϯमਖ਼͕ൃੜ͢Δ मਖ਼Օॴ͕ଟ͗ͯͦ͢ͷ··ϦϦʔε ϓϩͬΆ͘ͳ͍
ղܾҊ ϨΠΞτͷجૅΛֶͿ
ࣗݾհ Α͜· Ώ͏͍ͩ @udaiadu ΞϓϦέʔγϣϯΤϯδχΞ / σβΠφʔ 2013/12 ೖࣾ ࠷ۙεϓϥτΡʔϯʹΨνϋϚΓ
લ৬ͭುళ ւಓ ۴࿏ࢢ ग़ ͜Ε·ͰʹݐஙࢪཧΛܦݧ ࣗݾհ Α͜· Ώ͏͍ͩ @udaiadu ΞϓϦέʔγϣϯΤϯδχΞ / σβΠφʔ 2013/12 ೖࣾ ࠷ۙεϓϥτΡʔϯʹΨνϋϚΓ લ৬ͭುళ ւಓ ۴࿏ࢢ ग़ ͜Ε·ͰʹݐஙࢪཧΛܦݧ
ࣗݾհ Α͜· Ώ͏͍ͩ @udaiadu ΞϓϦέʔγϣϯΤϯδχΞ / σβΠφʔ 2013/12 ೖࣾ ࠷ۙεϓϥτΡʔϯʹΨνϋϚΓ
લ৬ͭುళ ւಓ ۴࿏ࢢ ग़ ͜Ε·ͰʹݐஙࢪཧΛܦݧ
ࣗݾհ @udaiadu ΞϓϦέʔγϣϯΤϯδχΞ / σβΠφʔ 2013/12 ೖࣾ ࠷ۙεϓϥτΡʔϯʹΨνϋϚΓ લ৬ͭುళ ւಓ
۴࿏ࢢ ग़ ͜Ε·ͰʹݐஙࢪཧΛܦݧ Α͜· Ώ͏͍ͩ
ࣗݾհ Α͜· Ώ͏͍ͩ @udaiadu ΞϓϦέʔγϣϯΤϯδχΞ / σβΠφʔ 2013/12 ೖࣾ ࠷ۙεϓϥτΡʔϯʹΨνϋϚΓ
લ৬ͭುళ ւಓ ۴࿏ࢢ ग़ ͜Ε·ͰʹݐஙࢪཧΛܦݧ Α͜· Ώ͏͍ͩ @udaiadu ΞϓϦέʔγϣϯΤϯδχΞ / σβΠφʔ 2013/12 ೖࣾ ࠷ۙεϓϥτΡʔϯʹΨνϋϚΓ લ৬ͭುళ ւಓ ۴࿏ࢢ ग़ ͜Ε·ͰʹݐஙࢪཧΛܦݧ
ʻॻ੶հʼ ͳΔ΄ͲσβΠϯ
͋Δ͋Δࣄྫ AutoLayout ͕ۤख エンジニア編
None
Add Missing Constraints μϝɺθολΠɻ
ͳʹ͕ʁ UIͷ࣮ʹͨΒͱ͕͔͔࣌ؒΔ ʹΑͬͯϨΠΞτ่͕յ͢Δ ؆୯ͳϨΠΞτ͔͠࡞Εͳ͍
ղܾҊ AutoLayout ͔Βಀ͛ͳ͍
ಀ͛ͨ͘ͳΔΘ͚
͓͚ා͍ཧ ਓؒͩΕ͠ະͷͷʹڪා͢Δ ਖ਼ମ͕Θ͔Εා͘ͳ͍
AutoLayout ΛΔ
Δؾ QU QU
Δؾ
IUUQXXXTMJEFTIBSFOFULBLFHBXBBUTVTIJEFWJPBVUPMBZPVU
͋Δ͋Δࣄྫ icon ͷαΠζখͯ͘͞͠ エンジニア編
icon খͯ͘͞͠ αΠζʁ @2x ͕̋̋pxͰɺ @3x ͕̋̋pxͰΑΖ
ͳʹ͕ʁ ࣗͰͰ͖ͳ͍ ಛผͳιϑτ͕ඞཁͩͱࢥ͍ͬͯΔ σβΠφʔͱͷΓͱΓͷํ͕͔͔࣌ؒΔ
ղܾҊ ؆୯ͳը૾ฤूεΩϧΛʹ͚ͭΔ
None
Preview ͰͰ͖Δ͜ͱ ը૾ΛݟΔ
͚ͩ͡Όͳ͍ʂ
Preview ͰͰ͖Δ͜ͱ ը૾ΛݟΔ αΠζͷௐ Χϥʔͷௐ ઢɺจࣈɺਤܗͷॻ͖ࠐΈ ͳͲͳͲ
ϚʔΫΞοϓπʔϧόʔදࣔ
ϚʔΫΞοϓπʔϧόʔ
αΠζΛௐ
None
ΧϥʔΛௐ
None
None
͋Δ͋Δࣄྫ σβΠϯఏҊ࣌ʹཧ༝Λฉ͔Εͯ٧Ή デザイナー編
None
ͳʹ͕ʁ આಘྗ͕ͳ͍ ҙݟΛަΘ͢͜ͱ͕Ͱ͖ͳ͍ σβΠϯεΩϧ͕͑ΒΕͳ͍
ղܾҊ UI ͱձ͢Δ
ͳͥͦ͜ʹ͍Δͷʁ ը໘ΛΓସ͑Δ ͨΊͩΑ #VUUPO
͋Δ͋Δࣄྫ WEBσβΠϯͬΆ͍ デザイナー編
≠
ͳʹ͕ʁ UIίϯϙʔωϯτͷಛੑ͕ߟྀ͞Ε͍ͯͳ͍ ը໘ભҠ͕ෳࡶͰ໎ࢠʹͳΔ ̍ͭͷը໘ʹใ͕ଟ͗͢Δ
ղܾҊ ΞϓϦʹΞϓϦͷσβΠϯ
ਓͷҙݟΛฉ͍ͯΈΔ
ਓͷҙݟΛฉ͍ͯΈΔ σβΠϯதʹ৭ʑͳਓʹݟͯΒ͏ ಈ͘ͷ͕Ͱ͖ͨΒ࣮ࡍʹͬͯΒ͏
͋Δ͋Δࣄྫ ࣗͰमਖ਼ͯ͠PRͪΐ͏͍ͩ ʢஊʣ デザイナー編
ͳʹ͕ʁ গ͠ͷमਖ਼Ͱେ͖ͳίϛϡχέʔγϣϯ ίετ͕͔͔Δ ࡞ۀͷ߹ؒʹमਖ਼ґཔͯ͠·ͨमਖ਼ґཔ ͱ͔ؾ͕ͻ͚Δ
ղܾҊ IB ΛϚελʔ͢Δ
None
None
IUUQXXXTMJEFTIBSFOFULBLFHBXBBUTVTIJEFWJPBVUPMBZPVU
·ͱΊ
ΤϯδχΞ ϨΠΞτͷجૅΛֶͿ AutoLayout ͔Βಀ͛ͳ͍ ؆୯ͳը૾ฤूεΩϧΛʹ͚ͭΔ
σβΠφʔ σβΠϯʹ໌֬ͳࠜڌΛ࣋ͭ ΞϓϦσβΠϯ ≠ WEBσβΠϯ IB ΛϚελʔ͢Δ
Ͳͬͪ ৭ʑͳΞϓϦΛݟΔ σβΠϯΨΠυϥΠϯΛݟΔ
ʻॻ੶հʼ ϞόΠϧσβΠϯ ύλʔϯ
B C D E F
B C Designer E F
B C Designer E F ngineer
ΤϯδχΞͱσβΠφʔͷ͍͋ͩʹ
अຐ͢ΔͷԿͳ͍ʂ
͍͍ͷͭ͘Γ·ͤΜ͔ʁ
None