デザイナーとエンジニアの境界線

AbemaTV Developer Conference 2016にて
松本がデザイナーとエンジニアのコミュニケーションの話を、
内田がデザイナーがコードを書いて見た話をしました

Transcript

1. σβΠφʔͱΤϯδχΞͷڥքઢ 2016/10/15
2. ࣗݾ঺հ দຊ
   ढ़հ
   6*σβΠφʔ 
   $ZCFS"HFOUೖࣾ
   
   "CFNB57഑ଐ
    ݱࡏ
   J04 "OESPJEΞϓϦ6*σβΠϯ୲౰
3. "CFNB57ͷ6*͸
   Ͳ͏΍ͬͯͰ͖ͨͷ
4. 
   ݱࡏͷ6* ͪͳΈʹ
5. ࣾ௕ 'BDFCPPLͷ
   ΠϯϑΟʔυ࠶ੜΈ͍ͨͳ6* ςϨϏͷβοϐϯάࢹௌ ड͚਎ͰͩΒͩΒ
7. ༦ձͰຖ೔ϞοΫΛڞ༗
8. ΤϯδχΞ σΟϨΫλʔ σβΠφʔ
9. βοϐϯά
10. ൪૊දɾৄࡉը໘
11. ΤϯδχΞ σΟϨΫλʔ σβΠφʔ ࣮૷πϥΠͬ͢ 6*Πέͯͳ͘ͳ͍ʁ ελΠϦογϡ͚ͩͲ
    Ϣʔβʔʹ༏͘͠ͳ͘Ͷ ࢖͍΍ͦ͢͏͚ͩͲ
    ςϨϏͬΆ͘ͳ͍ΑͶ ̋̋ͩͬͨΒ͍͍Μ͡Όͳ͍ʁ 6*Πέͯͳ͘ͳ͍ʁ 6*Πέͯͳ͘ͳ͍ʁ 6*Πέͯͳ͘ͳ͍ʁ 6*Πέͯͳ͘ͳ͍ʁ
12. ͓L
13. ͔݄ɺຖ೔ϞοΫΛ࡞Γଓ͚Δ
14. ࡞ͬͨϞοΫͷ਺ݸ
15. ͳΜ΍͔Μ΍Ͱೲಘ͍͘6*͕ੜ·Εͨ
16. ౰ͨΓલ͕ͩ
    ΈΜͳͰᎍΜͩ੒Ռ෺͸
    ೲಘײ͕͍͢͝
17. ࢓༷
    ˣ
    σβΠϯ
    ˣ
    ࣮ݱੑ
    ˣ
    ࣮͊͞૷ σβΠφʔ σβΠφʔ σβΠφʔ σβΠφʔ ΤϯδχΞ ΤϯδχΞ ΤϯδχΞ ΤϯδχΞ
18. ։ൃॳظ͸ಛʹ
    ٕज़ऀͷ࿈ܞ͕ೱ͘
    ΫΦϦςΟͷߴ͍ϓϩμΫτΛ
    ࡞Γ্͛ΒΕΔ؀ڥͰͨ͠
19. ͪΐͬͱ۩ମతʹݴ͏ͱʜ
20. 4UBUVT#BS͸
    ͋ͬͨํ͕͍͍͔΋
21. ͦΕͧΕͷཁૉ͕Կͳͷ͔
    ύοͱݟͰΘ͔Βͳ͍
22. ࢹௌ਺͕ݟͮΒ͍
    ൪૊දϘλϯ͕Α͘Θ͔ΒΜ
23. ͜ΕͰϦϦʔε
24. ͪΐͬͱमਖ਼ͯ͠ݱঢ়
25. 4LFUDIͱ1JYBUFΛΤϯδχΞʹ౉͢ 4LFUDI
26. ΤϯδχΞ͕4LFUDIΛݟ࣮ͯ૷
27. ৭͸DPNQPOFOUTϑΝΠϧΛ࡞Γ؅ཧ
28. ΞΠίϯ౳ͷॻ͖ग़͠ 4LFUDIϑΝΠϧ͔Β ΤΫεϙʔτΛ࣮ߦ͠ɺ 1/(ͷ࠷దԽΛߦ͏ J04
    6* make ios "OESPJE
    6* make android
29. ͜͏͍͏ͷΛσβΠφʔ͕
    ༻ҙ͠ͳͯ͘΋੒ཱͨ͠ ༻ҙͨ͠ํ͕਌੾ͩΖ͏͚Ͳʜ
    ΤϯδχΞ͞Μ͋Γ͕ͱ͏
30. 1JYBUFΛ౉ͯ͠
    ཧ૝ͷΞχϝʔγϣϯΛ࣮૷ͯ͠΋Β͏ ൪૊දΛ։͘
    Ξχϝʔγϣϯ easeOutCubic 0.3s ˞1JYBUFͰ͢
31. 1JYBUFͰࡉ෦·Ͱ࡞ͬͨͷͰ
    σβΠφʔͱΤϯδχΞͷζϨ͕΄΅ແ͔ͬͨ ˞1JYBUFͰ͢
32. ·ͱΊ
33. ͱʹ͔͘νʔϜશһͰᎍΉ
    ϑΝΠϧͷ΍ΓऔΓ΍ॻ͖ग़͠͸ࣗಈԽ
    ΞχϝʔγϣϯΛܾΊ͔ͯΒΤϯδχΞʹ౉͢
34. ʜଓ͖͸ςΫχΧϧΫϦΤΠλʔ ͋Γ͕ͱ͏͍͟͝·ͨ͠
35. ʙ
    σβΠφʔ͕ίʔυΛ৮ͬͯΈͯײͨ͜͡ͱ
    ʙ
36. ࣗݾ঺հ
37. ಺ా
    ୡ໵ 6*σβΠφʔ ೥
    ໊ݹ԰ࢢཱେֶେֶӃ
    ܳज़޻ֶݚڀՊଔ
    ೥
    αΠόʔΤʔδΣϯτೖࣾ
    ೥
    ͍ΖΜͳαʔϏεͷάϥϑΟοΫ6*σβΠϯ
    ೥
    "CFNB57Ͱ6*σβΠϯ
38. ݴ༿ਤؑ 1&/
    %3&". 1FO`T
    "EWFOUVSF
40. Ͳ͏΍ͬͯ࠷ॳͷҰาΛ౿Έग़ͨ͠ͷ͔
    ʢࣗ෼ͷ৔߹ʣ
41. 
    ࣗ෼͕ΞϓϦΛ࡞ͬͯΔ͜ͱΛ೏ΘͤΔ 
    ςΫχΧϧΫϦΤΠλʔͱ͍͏ࣾ಺ͷ෩ 
    ϦΞϧͳϓϩμΫτΛॏࢹ͢ΔྲྀΕ
42. ςΫχΧϧΫϦΤΠλʔ
43. 6*Ξχϝʔγϣϯ΍ΤϯδχΞϦϯάʹ΋௕͚͍ͯΔʮσβΠφʔʯ
    ඒతηϯε΍σβΠϯࢥߟɺ6*Ξχϝʔγϣϯʹ΋௕͚͍ͯΔʮΤϯδχΞʯ
    ࠷ऴతͳΞ΢τϓοτΛΫΦϦςΟߴ͘ɺ͔ͭࣗݾ׬݁Ͱߦ͑Δਓ
    ৗʹτϨϯυΛड͚ೖΕͯԠ༻͠ɺٕज़ͷ֞ࠜͳ͘෯޿͍Ξ΢τϓοτΛग़ͤΔਓ ςΫχΧϧΫϦΤΠλʔ
    
    ʠҰਓଟ࠽ͳΫϦΤΠλʔʡ
44. σβΠφʔ޲͚Swiftݚम
45. ΤϯδχΞ޲͚σβΠϯݚम
46. IUUQTEFWFMPQFSTDZCFSBHFOUDPKQCMPHBSDIJWFT
47. "CFNBͰ΋৮ͬͯݟ͍ͨͳʙ
48. ίʔυ৮Γ͍ͨͰ͢ʂ ࣗ༝ʹ΍͍͍ͬͯΑ "OESPJEͷ͍͢͝ਓ
49. "OESPJE
    4UVEJPͰ
    9.-Λ͍͡Δ Before After
50. 9DPEFʹΑΔ
    ಈ͖ͷඍमਖ਼
51. 4VCMJNF
    5FYUͰ
    ϨΠΞ΢τௐ੔
52. "UPNJD
    %FTJHOͰ
    ίϯϙʔωϯτ؅ཧ
53. (JU)VCΛ࢖͏
54. ίϐʔͯ͠࡞ۀ ίϐʔͯ͠࡞ۀ ݟ ͯ ΋ Β ͬͯ ্ ॻ ͖ OK! ݟͯ΋Β্ͬͯॻ͖ OK! ϓϩάϥϜ
    WFS ϓϩάϥϜ
    WFS ϓϩάϥϜ
    WFS
    
    ػೳ" ϓϩάϥϜ
    WFS
    
    ػೳ#
55. ͜͜·ͰσβΠφʔ͕
    ϓϩμΫτΛमਖ਼ͨ͠࿩
56. ࠷ۙϞοΫΛ࡞ͬͨ
58. ΍ͬͯΈͨײ૝
59. Α͔ͬͨ͜ͱ ΞϓϦͷษڧʹͳΔ ΤϯδχΞ͞ΜʹཔΉ৺͕ۤ͠͞ͳ͍ ΫΦϦςΟͷվળαΠΫϧ͕ૣ͍
60. վળ఺ λεΫͱ͖ͯͪ͠Μͱ࣌ؒΛͱΔ΂͖
61. ·ͱΊ
62. ָ͍͠ ʂ
63. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
64. 4LFUDIϓϥάΠϯ
    'POU
    'JOEFS