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
91
エンジニアとデザイナーのあいだ
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
6k
望みを叶えるUIデザイン
udaiadu
0
1.5k
Other Decks in Design
See All in Design
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.7k
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
260
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.5k
Starry | Storyboards | Scene 1-21
giofortuna_story
0
280
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
3.9k
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
600
今日から意識できるアクセシビリティ
fumiko
0
240
株式会社バクタム 会社説明資料
bactum
0
240
AI時代に淘汰されないデザインのしごと
akinen
1
130
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.1k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
150
Cards | Storyboards
giofortuna_story
0
280
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
BBQ
matthewcrist
89
9.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
KATA
mclloyd
30
14k
Code Review Best Practice
trishagee
68
18k
Building Adaptive Systems
keathley
43
2.6k
What's in a price? How to price your products and services
michaelherold
246
12k
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