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

11be42612fb329e1e3f514a09ff72d74?s=47 Tatsuya Uchida
October 15, 2016

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

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

11be42612fb329e1e3f514a09ff72d74?s=128

Tatsuya Uchida

October 15, 2016
Tweet

Transcript

  1. σβΠφʔͱΤϯδχΞͷڥքઢ 2016/10/15

  2. ࣗݾ঺հ দຊढ़հ 6*σβΠφʔ $ZCFS"HFOUೖࣾ "CFNB57഑ଐ  ݱࡏ  J04 "OESPJEΞϓϦ6*σβΠϯ୲౰

  3. "CFNB57ͷ6*͸ Ͳ͏΍ͬͯͰ͖ͨͷ

  4. ݱࡏͷ6* ͪͳΈʹ

  5. ࣾ௕ 'BDFCPPLͷ ΠϯϑΟʔυ࠶ੜΈ͍ͨͳ6* ςϨϏͷβοϐϯάࢹௌ ड͚਎ͰͩΒͩΒ

  6. None
  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/(ͷ࠷దԽΛߦ͏ J046* make ios "OESPJE6* 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

  39. None
  40. Ͳ͏΍ͬͯ࠷ॳͷҰาΛ౿Έग़ͨ͠ͷ͔ ʢࣗ෼ͷ৔߹ʣ

  41. ࣗ෼͕ΞϓϦΛ࡞ͬͯΔ͜ͱΛ೏ΘͤΔ ςΫχΧϧΫϦΤΠλʔͱ͍͏ࣾ಺ͷ෩ ϦΞϧͳϓϩμΫτΛॏࢹ͢ΔྲྀΕ

  42. ςΫχΧϧΫϦΤΠλʔ

  43. 6*Ξχϝʔγϣϯ΍ΤϯδχΞϦϯάʹ΋௕͚͍ͯΔʮσβΠφʔʯ ඒతηϯε΍σβΠϯࢥߟɺ6*Ξχϝʔγϣϯʹ΋௕͚͍ͯΔʮΤϯδχΞʯ ࠷ऴతͳΞ΢τϓοτΛΫΦϦςΟߴ͘ɺ͔ͭࣗݾ׬݁Ͱߦ͑Δਓ ৗʹτϨϯυΛड͚ೖΕͯԠ༻͠ɺٕज़ͷ֞ࠜͳ͘෯޿͍Ξ΢τϓοτΛग़ͤΔਓ ςΫχΧϧΫϦΤΠλʔʠҰਓଟ࠽ͳΫϦΤΠλʔʡ

  44. σβΠφʔ޲͚Swiftݚम

  45. ΤϯδχΞ޲͚σβΠϯݚम

  46. IUUQTEFWFMPQFSTDZCFSBHFOUDPKQCMPHBSDIJWFT

  47. "CFNBͰ΋৮ͬͯݟ͍ͨͳʙ

  48. ίʔυ৮Γ͍ͨͰ͢ʂ ࣗ༝ʹ΍͍͍ͬͯΑ "OESPJEͷ͍͢͝ਓ

  49. "OESPJE4UVEJPͰ 9.-Λ͍͡Δ Before After

  50. 9DPEFʹΑΔ ಈ͖ͷඍमਖ਼

  51. 4VCMJNF5FYUͰ ϨΠΞ΢τௐ੔

  52. "UPNJD%FTJHOͰ ίϯϙʔωϯτ؅ཧ

  53. (JU)VCΛ࢖͏

  54. ίϐʔͯ͠࡞ۀ ίϐʔͯ͠࡞ۀ ݟ ͯ ΋ Β ͬͯ ্ ॻ ͖

    OK! ݟͯ΋Β্ͬͯॻ͖ OK! ϓϩάϥϜWFS ϓϩάϥϜWFS ϓϩάϥϜWFS ػೳ" ϓϩάϥϜWFS ػೳ#
  55. ͜͜·ͰσβΠφʔ͕ ϓϩμΫτΛमਖ਼ͨ͠࿩

  56. ࠷ۙϞοΫΛ࡞ͬͨ

  57. None
  58. ΍ͬͯΈͨײ૝

  59. Α͔ͬͨ͜ͱ ΞϓϦͷษڧʹͳΔ ΤϯδχΞ͞ΜʹཔΉ৺͕ۤ͠͞ͳ͍ ΫΦϦςΟͷվળαΠΫϧ͕ૣ͍

  60. վળ఺ λεΫͱ͖ͯͪ͠Μͱ࣌ؒΛͱΔ΂͖

  61. ·ͱΊ

  62. ָ͍͠ ʂ

  63. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

  64. 4LFUDIϓϥάΠϯ 'POU'JOEFS