Design Talk#1 ノンデザイナーに読んでほしいデザイン話

Design Talk#1 @AnyPay, Inc.
"What Designers Think and How to Embody Ideas"

２箇所ほど動画が動きませんがご勘弁を。

Links in Slides:
1. iOS Human Interface Guidelines
https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

2. Material Design Guidelines
https://material.io/guidelines/

Transcript

1. What Designers Think & How to Embody Ideas#1 @ikutani41 2018/1/17
2. Appendix. Objective ▸ Objective ▸ Non-Designers޲͚ʹσβΠφʔͷ͜ͱΛ஌ͬͯ΋Β͍ͨ ͍ ▸ ࣾ಺ͷίϥϘϨʔγϣϯΛଅਐ͍ͨ͠ ▸ σβΠϯʹڵຯ͕͋ΔํͷνϟϨϯδαϙʔτ ▸ For me ▸ ࠓ೥͸ൃ৴૿΍ͧ͢
3. Index ▸ iOS/AndroidσβΠϯͰ࢖͏୯Ґʢpt, dpʣ ▸ ϨΠΞ΢τ௒֓࿦ ▸ OSಛੑ ▸ ΞΠίϯ ▸ εϥΠεͱ͸ ▸ Symbolsͱ͸
4. Index ▸ iOS/AndroidσβΠϯͰ࢖͏୯Ґʢpt, dpʣ ▸ ϨΠΞ΢τ௒֓࿦ ▸ OSಛੑ ▸ ΞΠίϯ ▸ εϥΠεͱ͸ ▸ Symbolsͱ͸
5. ୯Ґʢpt, dpʣ - 1/3 ▸ What For? ▸ Size: (width, height) ▸ Position: (x, y, z) ▸ iOS: pt, Android: dp ▸ ϑΥϯταΠζ ▸ iOS: pt, Android: sp ▸ Webͱಉ͡਺஋Λࢦఆ͢Ε͹ݟͨ໨ಉ͡ ͦΕͧΕઐ༻୯Ґ͕͋Γ·͢
6. ୯Ґʢpt, dpʣ - 2/3 Ͱ͖Δ͚ͩখͯ͘͞ؾͷར͍ͨ਺ࣈΛ࢖͏ ▸ খ͍͞਺ࣈͰ࡞ͬͯɺඞཁʹԠ֦ͯ͡େͯ͠Export͢Δ ▸ ը࣭ྼԽ͠ͳ͍ϕΫλܗࣜ ▸ ࣗવ਺Ͱࢦఆ͢Δ ▸ جຊతʹ͸ۮ਺ ▸ iOSͷҰ෦ͷϨΠϠʔ͸ح਺ ▸ தԝἧ͑ɾதԝ෼ׂͯ͠΋ࣗવ਺ʹͳΔΑ͏ʹ
7. ୯Ґʢpt, dpʣ - 3/3 ੍࡞ˠΤΫεϙʔτͷखॱ͸͜ΕͰܾ·Γ 1x 1.5x 2x 3x 4x iOS ੍࡞ (375x667) - SE 6ܥ, 7ܥ Plusܥ 8ܥ, X - Android ੍࡞ mdpi (360x640) hdpi xhdpi xxhdpi xxxhdpi * ΞΠίϯ౳ͷΞηοτ͸্هͰOK͕ͩɺσόΠεαΠζ͸༷ʑͳͷͰϨΠΞ΢τ֬ೝ͸ผ్ඞཁ
8. Index ▸ iOS/AndroidσβΠϯͰ࢖͏୯Ґʢpt, dpʣ ▸ ϨΠΞ΢τ௒֓࿦ ▸ OSಛੑ ▸ ΞΠίϯ ▸ εϥΠεͱ͸ ▸ Symbolsͱ͸
9. ϨΠΞ΢τ௒֓࿦ 1/3 OSΒ͠͞Λେ੾ʹ͢Δ ▸ OSΒ͠͞Λ࢘Δࢥ૝΍࡞๏͸ఆٛ͞Ε͍ͯΔ ▸ iOS: Human Interface Guidelines ▸ Android: Material Design Guidelines ▸ ਖ਼͍͠ඪ४UIύʔπΛબͿ ▸ ComponentsͱݺͿ ▸ ໾ׂɾεϖοΫɾޮՌΛཧղ͢Δ
10. ϨΠΞ΢τ௒֓࿦ 2/3 ίϯϙʔωϯτબఆ͸ΤϯδχΞҙݟ΋େࣄ ▸ ʮͲͷComponents͕ద੾͔ʯ͸ɺ·ͣσβΠφʔ͕ߟ͑Δ ▸ OSඇඪ४ͷ΋ͷΛʮҙਤͤͣʯબ୒ͯ͠͠·͏έʔε ▸ ϛεͳͷͰɺݟ׳Εͳ͍΋ͷ͸ಥͬࠐΜͰ͋͛ͯ΄͍͠ ▸ ඇඪ४Λԡ͠௨͍ͨ͠σβΠφʔ͸͍ͳ͍ͷͰੵۃతʹ ▸ OSඪ४ͷStandard Design͕࣮͸࣮૷ϋʔυϧߴ͍᠘΋ ▸ ͜ͷέʔε͸ຊ౰ʹ஌Βͤͯ΄͍͠ ▸ σβΠφʔʹ͸ࣄલݕ஌೉͍͠ͷͰɺ͓ॿ͚͓ͳ͠Ό͢
11. ϨΠΞ΢τ௒֓࿦ 3/3 ʮΨΠυΛҾ͘ʯˠʮἧ͑Δʯ ▸ Guideʹ͸ҙຯͱ໾ׂ͕͋Δ ▸ IAʹैͬͯἧ͑Δ ▸ ἧͬͯͳ͍ ʹ ಛผͳҙຯΛ࣋ͭ ▸ VIΛ༏ઌ͢Δέʔε΋ҰԠ͋Δ ▸ σβΠφʔ͸ը໘ΛݟΔͱࣗવʹGuide͕ݟ͑Δ͆ ▸ Android͸։ൃऀ޲͚ΦϓγϣϯͰνΣοΫͰ͖Δ
12. Appendix. ϨΠΞ΢τ௒֓࿦ ex.1 ҹ৅౷Ұ͸ͱͯ΋େ੾ ▸ ྨࣅੑͷ࣋ͭޮՌ͸େ͖͍ ▸ ϢʔβͷཧղΛଅਐ͢Δ ▸ ౷Ұײ͸҆৺ײΛੜΉ ▸ ಉ͡Α͏ͳҙຯΛ࣋ͭComponents͸ಉελΠϧ͕جຊ ▸ ҙຯΛߟ͑ͣʹ౷Ұ͢Δͷ͸όΧܯ࡯ ▸ OSඪ४ͷGuideline͕ͳ͍ͳΒࣗ෼Ͱߟܾ͑ͯΊΔ ▸ OSඪ४ͷGuideline͕͋ͬͯ΋ࣗ෼Ͱߟܾ͑ͯΊΔ
13. Appendix. ϨΠΞ΢τ௒֓࿦ ex.2 ςΩετͷσβΠϯεϖοΫ͸৴༻͠ͳ͍Ͱ ▸ Sketch͸ςΩετϨΠϠʔΛ͏·͘ѻ͑ͳ͍ ▸ ϨΠΞ΢τʹӨڹ͢Δجຊ֓೦Λ཈͓͑ͯ͘ͱྑ͍ʢ࣍ड़ʣ ▸ ༨ന͸OSಛੑʹ߹Θͤͯௐ੔ʢ8x+4͘Β͍ʣ ▸ AndroidͰ Noto Sans CJK ࢖͏ͱ͖͸ݶք͋Γ ▸ ࣮͸ػछʹΠϯετʔϧ͞Εͯͳ͍ʢ௒ॏ͍͠ʣ ▸ ػछ͝ͱʹωΠςΟϒϑΥϯτҟͳΔͷͰ౷੍ෆՄ
14. Appendix. ϨΠΞ΢τ௒֓࿦ ex.3 ςΩετͷϨΠΞ΢τʹӨڹ͢Δجຊ֓೦ ▸ Baseline ▸ Line height ▸ Layer.height ▸ Layer.centerY ▸ Line spacing ▸ ࣮ମ
15. Index ▸ iOS/AndroidσβΠϯͰ࢖͏୯Ґʢpt, dpʣ ▸ ϨΠΞ΢τ௒֓࿦ ▸ OSಛੑ ▸ ΞΠίϯ ▸ εϥΠεͱ͸ ▸ Symbolsͱ͸
16. OSಛੑ ϨΠΞ΢τͷج४ͱͳΔ਺஋Λ஌͓ͬͯ͘ ▸ Android ▸ ༨ന͸8x ▸ Keyline͸16x, 40x͋ͨΓ ▸ iOS ▸ جຊతʹ͸Androidͱಉ͡ͱߟ͍͍͑ͯ ▸ ྫ֎ɿେ͖ΊΞΠίϯ͸44x ▸ ΞΠίϯ͸boundsΑΓ࣮ମΛج४ʹϨΠΞ΢τ͞ΕΔҹ৅
17. Index ▸ iOS/AndroidσβΠϯͰ࢖͏୯Ґʢpt, dpʣ ▸ ϨΠΞ΢τ௒֓࿦ ▸ OSಛੑ ▸ ΞΠίϯ ▸ Sliceͱ͸ ▸ Symbolsͱ͸
18. ΞΠίϯʹ͍ͭͯ ▸ Bounds@white ▸ For Easy Layout ▸ αΠζΛنఆ͢Δಁ໌ͳϨΠϠʔ ▸ Content area@red ▸ For the Sense of Unity ▸ ઐ༗໘ੵͷେ͖͞ʢ༨നͷൺ཰ʣͰҹ৅͕େ͖͘ҧ͏ ▸ ԁܗɺ࢛֯ɺॎ௕ɺԣ௕ͰͦΕͧΕఆٛ͢Δ ▸ Entity@gray ▸ ΞΠίϯͷ࣮ମ
19. λονλʔήοτ ▸ ৮ΕΔྖҬ ▸ ࣮ࡍͷΞΠίϯαΠζΑΓ΋େ͖͘ ▸ OS͝ͱʹ࠷௿αΠζ͕ܾ·ͬͯΔ ▸ iOS: 44 x 44 pt ▸ Android: 48 x 48 dp ▸ ঁੑ޲͚αʔϏεͳΒ΋͏গ͠޿ͯ͘΋͍͍ ▸ ޿͛ΔͳΒԼʹ޿͛Δ
20. Index ▸ iOS/AndroidσβΠϯͰ࢖͏୯Ґʢpt, dpʣ ▸ ϨΠΞ΢τ௒֓࿦ ▸ OSಛੑ ▸ ΞΠίϯ ▸ εϥΠεͱ͸ ▸ Symbolsͱ͸
21. εϥΠεͱ͸ Ξηοτͱͯ͠ॻ͖ग़͢ઃఆ͕͞Εͨ෦඼ ▸ Sketch, Photoshop, Illustrator͔Β… ▸ Layer΍GroupsΛεϥΠεԽ ▸ ಛఆͷΤϦΞΛεϥΠεԽ, etc. ▸ ແବͳ΋ͷʢഎܠ৭ͱ͔ʣ͕ೖΒͳ͍Α͏ʹઃఆ ▸ ඞཁͳαΠζόϦΤʔγϣϯΛࢦఆ ▸ ʢZeplinʣεϥΠεઃఆ͞ΕͨΞηοτ͕DownloadՄೳ
22. ૢ࡞खॱʢ؆୯wʣ εϥΠεઃఆʹ͔͔࣌ؒͬͯͨͷ͸աڈͷ࿩
23. Index ▸ iOS/AndroidσβΠϯͰ࢖͏୯Ґʢpt, dpʣ ▸ ϨΠΞ΢τ௒֓࿦ ▸ OSಛੑ ▸ ΞΠίϯ ▸ εϥΠεͱ͸ ▸ Symbolsͱ͸
24. Symbolsͷޫͱҋ - 1/2 ʢޫʣເͷΑ͏ͳػೳͰ͋Δ ▸ ܁Γฦ͠࢖͏෦඼ΛSymbolԽ͓͍ͯͯ͠࢖͍ճͤΔ ▸ Ϋϥε࡞ͬͯɺ֤ArtboardsͰΠϯελϯε࡞ΔΠϝʔδ ▸ Symbols͸ɺΠϯελϯεଆͰࡉ͔͍ઃఆΛࢦఆͰ͖ΔʢOverrideػೳʣ ▸ ςΩετ౳ͷEditable infoΛࣗ༝ʹࢦఆ ▸ ཁૉ͝ͱʹShow/HideΛࢦఆ ▸ SymbolsΛฤू͢Ε͹ɺطଘͷΠϯελϯεʹ΋ߋ৽͕ద༻͞ΕΔ ▸ Πϯελϯε͸Detach͢Δ͜ͱͰ਌ࢠؔ܎Λ੾ͬͯΧελϚΠζͰ͖Δ
25. SymbolsΛ࢖͏ͱૣ͍
26. Symbolsͷޫͱҋ - 2/2 ʢҋʣ࢖͍ํΛޡΔͱటপԽ͠΍͍͢ ▸ ͲΜͳϨϕϧײͰSymbol࢖͏͔͕೉͍͠ ▸ ຖճSymbolԽͱ࢖͍ճ͠Λҙࣝ͠ͳ͕ΒσβΠϯͯ͠Δͱ༨ܭͳ޻ ਺͕͔͔Δ ▸ ͍ΖΜͳ৔໘Ͱ࢖͑ΔศརSymbol͸มߋʹऑ͘ɺอक͕ͱͯ΋େม ▸ ݁ہɺͦͦ͜͜ࡉཻ͔͍౓ͰSymbolsΛ࡞Δ͜ͱʹͳΔ ▸ ٯʹγϯϓϧ͗͢ΔSymbol͸ɺ৔໘͝ͱʹDetachͯ͠ΧελϚΠζ ͪ͠Ό͏ͷͰҰॠͷ࣌୹͕Ͱ͖ͯ໾໨ऴྃ ▸ σβΠϯΛ࡞ΓࠐΉ࢓ࣄͱྑ͍SymbolΛ࡞Δ࢓ࣄ͕ڝ߹͕ͪ͠
27. Symbols·ͱΊ ศར͕ͩҋ΋͋Δɻҙࣝͤͣ΍ͬͪΌͬͯ ▸ ্ख͘࢖͑Ε͹εϐʔυ͸ग़Δ ▸ టপʹϋϚͬͯແବʹ޻਺͕๲ΕΔ͜ͱ΋ ▸ ༏ઌॱҐͷҙ͕ࣝେࣄ ▸ εϐʔυʁσβΠϯ࡞ΓࠐΈʁ൚༻ੑͷߴ͍Symbol࡞ Γʁ ▸ ͬ͘͞ͱऴΘΒ͍ͤͨͱ͖͸ɺؾʹͤͣDetachͯ͠ݸผσ βΠϯͰ΍ͬͪΌ͍ͬͯͩ͘͞
28. @ikutani41 2018/1/17 Thank you! What Designers Think & How to Embody Ideas#1
29. Twitter & note @ikutani41 ྑ͔ͬͨΒಡΜͰͶ