テクニカルクリエイターが担う、サービス開発のUIモックの現場/Technical Creator for the App Design.

Technical Creator for the App Design.

Transcript

1. @sugaarɹ2016/04/14ɹUI Crunch Technical Creator App Design. at CyberAgent for the
2. ࣗݾ঺հ ࠤ౻
   ༸հ
   ʢ͞ͱ͏Α͏͚͢ʣ
   "NFCBࣄۀຊ෦ɹΫϦΤΠςΟϒ౷ׅࣨɹࣨ௕
   νʔϑɾΫϦΤΠςΟϒσΟϨΫλʔ !TVHBBS
3. 
   ʵ
   
   େ೔ຊҹ࡮ɹ%/1
   8FCσβΠφʔ
   
   ΞʔτσΟϨΫλʔ 
   ʵ
   αΠόʔΤʔδΣϯτ
   νʔϑɾΫϦΤΠςΟϒσΟϨΫλʔ
4. Technical Creator ςΫχΧϧΫϦΤΠλʔ
5. άϥϑΟοΫ αʔϏε։ൃ 69
   σβΠϯ ΠϯλϥΫγϣϯ 4LFUDI ৭࠼ɾ഑৭ 4XJGU 6*Ξχϝʔγϣϯ λΠϙάϥϑΟ (JU)VC 1JYBUF "GUFS
   &⒎FDUT 6*σβΠϯ "OESPJE
   4UVEJP ΨΠυϥΠϯ
6. ωΠςΟϒΞϓϦࢢ৔Ͱ͸
   ΑΓߴ౓ͳදݱ͕࠷ॏཁ Point 1 σβΠφʔ͕੩తͳσβΠϯ͚ͩΛߦ͏΋ͷͰ͸ͳ͘ͳ͖ͬͯͨ
   ΤϯδχΞ͕6*Ξχϝʔγϣϯ΍69Λ୲͏ඞཁ͕ग़͖ͯͨ
7. ৺஍Α͍Ϣʔβʔମݧ͕
   ڝ߹༏ҐੑͱͳΔ Point 2 ߴ͍ΫΦϦςΟͱॊೈͳΞ΢τϓοτ͕ॏཁ
   ೔ຊͷΫΦϦςΟϨϕϧ͸·ͩ·ͩ௿͘ɺඈͼൈ͚Δνϟϯε͕͋Δ
8. σβΠϯͱΤϯδχΞϦϯάͷ தؒΛ୲͏πʔϧ͕੔͖ͬͯͨ Point 3 'MBTIͷΑ͏ͳπʔϧ͕ωΠςΟϒΞϓϦ޲͚ʹ੔͖ͬͯͨ
   6*Ξχϝʔγϣϯ΍6*σβΠϯɺΤϯδχΞϦϯά΁ͷෑډ͕௿͘ͳ͖ͬͯͨ
9. テクニカルクリエイター 【一人多才なクリエイター】 - いっと たさいな くりえいたー [概要] 表現の幅が広く、デザイン・プログラム言語・アニメーションを 　　　自在にあつかえるクリエイター
10. ①　技術の垣根を越えて「テクニカル」に「クリエイティブ」できる人材 ②　一人で領域広くカバーしてハイクオリティなアウトプットができる人材 ③　業界のトレンドに敏感で常に新技術を追える人材 定義
11. Field of Development $"ͷαʔϏε։ൃͷݱ৔
12. Designer Engineer Design Tool Animation Tool Mock Up Tool Programming Tool
13. Designer Engineer Design Tool Animation Tool Mock Up Tool Programming Tool ͦΕͧΕͷ֞ࠜΛӽ͑Δ࣌୅
14. ࠓճ͸ʮϞοΫΞοϓʯʹ
    ϑΥʔΧε͠·͢
15. https://abema.tv ΠϯλʔωοτςϨϏہ
16. ςϨϏΛεϚϗͰݟΔ࣌୅͕དྷΔͷͰ͸ʁ
    ͱʹ͔͘εϚϗͰշదʹݟ͍ͨ
    ൪૊੍࡞͸ςϨϏே೔ͱ࿈ܞ Concept
17. w ։ൃ౰ॳ͸J1BEΞϓϦΛ૝ఆ͍ͯͨͨ͠ΊɺࢴࣳډͷϥϑϞοΫΛ࡞੒ Rough Mock Up ࢖༻πʔϧ https://abema.tv ˞ಈըͰ͢ɻ
18. w ੩తσβΠϯͱಉ࣌ʹɺ'MBTIͰΞχϝʔγϣϯԽͯ͠αʔϏεͷશମϧʔϓ Λ࡞੒͠ɺʮ৺஍Α͍ࢹௌମݧʯʹʮβοϐϯάʯʹϑΥʔΧεɻ Concept Mock Up ࢖༻πʔϧ https://abema.tv ˞ಈըͰ͢ɻ
19. w 1JYBUFͰৄࡉʹͭ͘ΓࠐΉ Detail Mock Up ࢖༻πʔϧ https://abema.tv ˞ಈըͰ͢ɻ
20. w ϞοΫͰΠϯλϥΫγϣϯͷΠϝʔδΛ໌֬ʹ͠ɺਖ਼ࣜϓϩμΫτʹ૊ΈࠐΉ Product Version ࢖༻πʔϧ https://abema.tv ˞ಈըͰ͢ɻ
21. https://awa-official.themedia.jp
22. ʮԻָͱͷग़ձ͍ʯʹϑΥʔΧε
    ͱʹ͔͓͘ᔬམͰଞਓʹનΊͨ͘ͳΔ6*
    Ұݟւ֎͔ΒདྷͨΞϓϦͷΑ͏ͳੈք؍ Concept
23. w ΠϯλϥΫγϣϯઐ༻ΞϓϦͷ։ൃ
    w ετΞ൛ΞϓϦͱ͸ผʹɺΠϯλϥ Ϋγϣϯઐ༻ͷΞϓϦʮ"8"*Y%
    ʯ ΛฒߦͰ࡞੒͠ɺ֬ೝ͕औΕͨ΋ͷ ΛετΞ൛ʹঃʑʹϚʔδ
    w ҙຯͷ͋ΔΞχϝʔγϣϯ͕લఏ Interaction ࢖༻πʔϧ https://awa-official.themedia.jp
24. Interaction ࢖༻πʔϧ w ݱ࣮ੈքͷಈ͖ͱΞχϝʔγϣϯͷ ؒʹΪϟοϓΛ࡞Βͳ͍
    w Ϣʔβʔͷ࿈ଓతͳಈ࡞ͱΞχϝʔ γϣϯͷؒʹΪϟοϓΛ࡞Βͳ͍ https://awa-official.themedia.jp ˞ಈըͰ͢ɻ
25. Interaction ࢖༻πʔϧ w ઐ༻ΞϓϦʮ"8"*Y%ʯ
    w ԣεΫϩʔϧ࣌ʹɺ௨ৗͷ࣮૷Λ͢ ΔͱࠨͷΑ͏ʹϊοϖϦͱͨ͠ը໘ ʹͳΔ͕ɺͦ͜ʹύϥϥοΫεΤϑΣ ΫτΛՃ͑Δ͜ͱͰԞߦ͖Λ࣋ͨͤɺ ΑΓഎܠͰ͋Δ͜ͱΛ௚ײతʹཧղ ͢Δखॿ͚Λ͍ͯ͠Δɻ ύϥϥοΫεͳ͠ ύϥϥοΫε͋Γ https://awa-official.themedia.jp ˞ಈըͰ͢ɻ
26. http://pecolly.jp
27. w ̏ͭͷϝΠϯϑΟʔυ΁ͷԣϑϦο ΫͰͷભҠΛৄࡉʹ࠶ݱɻ
    w ϝΠϯΠϝʔδͷߴ͞Λଗ͑ͭͭɺ ҹ৅తʹݟ͑ΔΑ͏ͳࣸਅͷαΠζ
    w ό΢ϯεޮՌͰεΫϩʔϧϦϛοτ ͷෛՙΛܰݮ Mock Up ࢖༻πʔϧ http://pecolly.jp ˞ಈըͰ͢ɻ
28. CyberAgent Quality ΫΦϦςΟʹର͢Δ$"ͷऔΓ૊Έ
29. Qual ity 3Q
30. Interaction Quality Design Quality Planning Quality 3Q
31. Design Quality 6*ɾάϥϑΟοΫ
    ΨΠυϥΠϯɺ଄ܗඒ͕อ͍ͯͯΔ͔
    ࢖͍΍͘͢ɺ෼͔Γ΍͍͔͢
    ಠࣗੑ
    PS
    ৽نੑ͕͋Δ͔
32. ໿
    αʔϏεΛ
    ݄$IFDL
33. σβΠφʔ
    ϓϩσϡʔαʔ
    ΁ͷ'#
34. શମͰͷ
    σβΠϯ'#
35. Interaction Quality ભҠɾτϥϯδγϣϯ
    ֊૚͕෼͔Γ΍͘͢ɺࣗવ͔
    ա৒ͳԋग़Λ࡟͗མͱ͍ͤͯΔ͔
    ಈ͖͕εϜʔζɺετϨεϑϧ͔
36. ωΠςΟϒ
    ༦ձ
37. Engineer Engineer Designer Designer Engineer Engineer Engineer
38. σβΠφʔͱΤϯδχΞ͕ϖΞͰࢀՃ͠ɺ
    αʔϏεຖͷ5JQT΍ɺ࣮૷ΞΠσΞͷڞ༗ͷ৔ͱͯ͠ Mock up
39. σβΠφʔ޲͚
    4XJGUݚम ΤϯδχΞ޲͚
    σβΠϯݚम
40. http://ameblo.jp/ca-1pixel/theme2-10039396608.html ˞ಈըͰ͢ɻ UIΞχϝʔγϣϯݚम՝୊
41. Planning Quality αʔϏεϧʔϓ
    ϓϩμΫτϏδϣϯ͕ඳ͚͍ͯΔ͔
    ϥϕϦϯά͸෼͔Γ΍͍͔͢
    Ϣʔβʔ͕ϋϚΔ޻෉͕͋Δ͔
42. ϞοΫ
    ϨϏϡʔ Chief Producer Chief Product Officer General Produce Chief Designer
43. Engineer Designer
44. ͜Ε͸ͨͩͷث༻ශ๡ Engineer Designer
45. े෼ͳ
    ϕʔεεΩϧ͕ඞཁ -WҎ্ͳ͚Ε͹ɺμʔϚͷਆ఼Ͱ༐ऀʹస৬͕Ͱ͖ͳ͍Α͏ʹɺ
    σβΠϯɺΤϯδχΞϦϯάͷे෼ͳϕʔεεΩϧ͕ͳ͚Ε͹ͨͩͷث༻ශ๡ɻ What is Technical Creator ?
46. αοΧʔͷ%'Ͱ͍͏ͱ
    ϦϕϩΈ͍ͨͳ΋ͷ ଍ͷ଎͍σΟϑΣϯμʔ͕ʮϦϕϩʯͱݴΘΕ͍ͯΔΑ͏ʹɺ
    σβΠφʔɺΤϯδχΞͷʮ৽͍͠໾ׂʯͰ͋Δɻ What is Technical Creator ?
47. ࣗ෼ͷڧΈΛཧղ͠
    ٕज़Λ޼ΈʹԠ༻͢Δ σβΠϯɾϓϩάϥϜݴޠɾΞχϝʔγϣϯͳͲɺ
    શͯʹ௕͚͍ͯΔඞཁ͸ͳ͘ɺ࠷దͳΞ΢τϓοτͷͨΊͷԠ༻ྗ͕ॏཁ What is Technical Creator ?
48. テクニカルクリエイター 【一人多才なクリエイター】 - いっと たさいな くりえいたー [概要] 表現の幅が広く、デザイン・プログラム言語・アニメーションを 　　　自在にあつかえるクリエイター
49. ٕज़ͷ࣠଍Λஔ্͍ͨͰ
    ྖҬΛ޿͛Δ Engineer Designer
50. https://www.cyberagent.co.jp/recruit/special/techcareer/ αΠόʔΤʔδΣϯτͰ͸ɺ
 ੈքج४ͷαʔϏεΛҰॹʹͭ͘Δ஥ؒΛืू͍ͯ͠·͢ɻ Recruit
51. @sugaarɹ2016/04/14ɹUI Crunch Thank you