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
Yudai Yokoyama
November 25, 2015
Design
0
77
エンジニアとデザイナーのあいだ
2015/11/25 iOS 9 週連続 Boot Camp! 9 週目 発表資料
Yudai Yokoyama
November 25, 2015
Tweet
Share
More Decks by Yudai Yokoyama
See All by Yudai Yokoyama
スマホアプリデザインの心得 - Developers.IO 2016
udaiadu
0
5.9k
望みを叶えるUIデザイン
udaiadu
0
1.4k
Other Decks in Design
See All in Design
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
240
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
3D空間を扱うUI表現とユーザビリティ
akinen
0
450
PRDがデザインプロセスを高速化した話
tooomo
1
320
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.9k
Product-Writing
aguringo
6
2.8k
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
940
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
530
文化に寄りそうデザイン
recruitengineers
PRO
4
920
他人事じゃないWebアクセシビリティ入門
arihiro17
0
220
Wolf and the seven goatkids
_limex_
PRO
0
450
Installing and Running decksh/pdfdeck
ajstarks
1
490
Featured
See All Featured
Designing for Performance
lara
601
67k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Become a Pro
speakerdeck
PRO
11
4.5k
Building Your Own Lightsaber
phodgson
99
5.7k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Scaling GitHub
holman
457
140k
Ruby is Unlike a Banana
tanoku
96
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Gamification - CAS2011
davidbonilla
76
4.6k
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