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

Slide 1

Slide 1 text

@sugaarɹ2016/04/14ɹUI Crunch Technical Creator App Design. at CyberAgent for the

Slide 2

Slide 2 text

ࣗݾ঺հ ࠤ౻༸հ ʢ͞ͱ͏Α͏͚͢ʣ "NFCBࣄۀຊ෦ɹΫϦΤΠςΟϒ౷ׅࣨɹࣨ௕ νʔϑɾΫϦΤΠςΟϒσΟϨΫλʔ !TVHBBS

Slide 3

Slide 3 text

ʵ େ೔ຊҹ࡮ɹ%/1 8FCσβΠφʔΞʔτσΟϨΫλʔ ʵ αΠόʔΤʔδΣϯτ νʔϑɾΫϦΤΠςΟϒσΟϨΫλʔ

Slide 4

Slide 4 text

Technical Creator ςΫχΧϧΫϦΤΠλʔ

Slide 5

Slide 5 text

άϥϑΟοΫ αʔϏε։ൃ 69σβΠϯ ΠϯλϥΫγϣϯ 4LFUDI ৭࠼ɾ഑৭ 4XJGU 6*Ξχϝʔγϣϯ λΠϙάϥϑΟ (JU)VC 1JYBUF "GUFS&⒎FDUT 6*σβΠϯ "OESPJE4UVEJP ΨΠυϥΠϯ

Slide 6

Slide 6 text

ωΠςΟϒΞϓϦࢢ৔Ͱ͸ ΑΓߴ౓ͳදݱ͕࠷ॏཁ Point 1 σβΠφʔ͕੩తͳσβΠϯ͚ͩΛߦ͏΋ͷͰ͸ͳ͘ͳ͖ͬͯͨ ΤϯδχΞ͕6*Ξχϝʔγϣϯ΍69Λ୲͏ඞཁ͕ग़͖ͯͨ

Slide 7

Slide 7 text

৺஍Α͍Ϣʔβʔମݧ͕ ڝ߹༏ҐੑͱͳΔ Point 2 ߴ͍ΫΦϦςΟͱॊೈͳΞ΢τϓοτ͕ॏཁ ೔ຊͷΫΦϦςΟϨϕϧ͸·ͩ·ͩ௿͘ɺඈͼൈ͚Δνϟϯε͕͋Δ

Slide 8

Slide 8 text

σβΠϯͱΤϯδχΞϦϯάͷ தؒΛ୲͏πʔϧ͕੔͖ͬͯͨ Point 3 'MBTIͷΑ͏ͳπʔϧ͕ωΠςΟϒΞϓϦ޲͚ʹ੔͖ͬͯͨ 6*Ξχϝʔγϣϯ΍6*σβΠϯɺΤϯδχΞϦϯά΁ͷෑډ͕௿͘ͳ͖ͬͯͨ

Slide 9

Slide 9 text

テクニカルクリエイター【一人多才なクリエイター】 - いっとたさいなくりえいたー [概要] 表現の幅が広く、デザイン・プログラム言語・アニメーションを　　　自在にあつかえるクリエイター

Slide 10

Slide 10 text

①　技術の垣根を越えて「テクニカル」に「クリエイティブ」できる人材 ②　一人で領域広くカバーしてハイクオリティなアウトプットができる人材 ③　業界のトレンドに敏感で常に新技術を追える人材定義

Slide 11

Slide 11 text

Field of Development $"ͷαʔϏε։ൃͷݱ৔

Slide 12

Slide 12 text

Designer Engineer Design Tool Animation Tool Mock Up Tool Programming Tool

Slide 13

Slide 13 text

Designer Engineer Design Tool Animation Tool Mock Up Tool Programming Tool ͦΕͧΕͷ֞ࠜΛӽ͑Δ࣌୅

Slide 14

Slide 14 text

ࠓճ͸ʮϞοΫΞοϓʯʹ ϑΥʔΧε͠·͢

Slide 15

Slide 15 text

https://abema.tv ΠϯλʔωοτςϨϏہ

Slide 16

Slide 16 text

ςϨϏΛεϚϗͰݟΔ࣌୅͕དྷΔͷͰ͸ʁ ͱʹ͔͘εϚϗͰշదʹݟ͍ͨ ൪૊੍࡞͸ςϨϏே೔ͱ࿈ܞ Concept

Slide 17

Slide 17 text

w ։ൃ౰ॳ͸J1BEΞϓϦΛ૝ఆ͍ͯͨͨ͠ΊɺࢴࣳډͷϥϑϞοΫΛ࡞੒ Rough Mock Up ࢖༻πʔϧ https://abema.tv ˞ಈըͰ͢ɻ

Slide 18

Slide 18 text

w ੩తσβΠϯͱಉ࣌ʹɺ'MBTIͰΞχϝʔγϣϯԽͯ͠αʔϏεͷશମϧʔϓ Λ࡞੒͠ɺʮ৺஍Α͍ࢹௌମݧʯʹʮβοϐϯάʯʹϑΥʔΧεɻ Concept Mock Up ࢖༻πʔϧ https://abema.tv ˞ಈըͰ͢ɻ

Slide 19

Slide 19 text

w 1JYBUFͰৄࡉʹͭ͘ΓࠐΉ Detail Mock Up ࢖༻πʔϧ https://abema.tv ˞ಈըͰ͢ɻ

Slide 20

Slide 20 text

w ϞοΫͰΠϯλϥΫγϣϯͷΠϝʔδΛ໌֬ʹ͠ɺਖ਼ࣜϓϩμΫτʹ૊ΈࠐΉ Product Version ࢖༻πʔϧ https://abema.tv ˞ಈըͰ͢ɻ

Slide 21

Slide 21 text

https://awa-official.themedia.jp

Slide 22

Slide 22 text

ʮԻָͱͷग़ձ͍ʯʹϑΥʔΧε ͱʹ͔͓͘ᔬམͰଞਓʹનΊͨ͘ͳΔ6* Ұݟւ֎͔ΒདྷͨΞϓϦͷΑ͏ͳੈք؍ Concept

Slide 23

Slide 23 text

w ΠϯλϥΫγϣϯઐ༻ΞϓϦͷ։ൃ w ετΞ൛ΞϓϦͱ͸ผʹɺΠϯλϥ Ϋγϣϯઐ༻ͷΞϓϦʮ"8"*Y%ʯ ΛฒߦͰ࡞੒͠ɺ֬ೝ͕औΕͨ΋ͷ ΛετΞ൛ʹঃʑʹϚʔδ w ҙຯͷ͋ΔΞχϝʔγϣϯ͕લఏ Interaction ࢖༻πʔϧ https://awa-official.themedia.jp

Slide 24

Slide 24 text

Interaction ࢖༻πʔϧ w ݱ࣮ੈքͷಈ͖ͱΞχϝʔγϣϯͷ ؒʹΪϟοϓΛ࡞Βͳ͍ w Ϣʔβʔͷ࿈ଓతͳಈ࡞ͱΞχϝʔ γϣϯͷؒʹΪϟοϓΛ࡞Βͳ͍ https://awa-official.themedia.jp ˞ಈըͰ͢ɻ

Slide 25

Slide 25 text

Interaction ࢖༻πʔϧ w ઐ༻ΞϓϦʮ"8"*Y%ʯ w ԣεΫϩʔϧ࣌ʹɺ௨ৗͷ࣮૷Λ͢ ΔͱࠨͷΑ͏ʹϊοϖϦͱͨ͠ը໘ ʹͳΔ͕ɺͦ͜ʹύϥϥοΫεΤϑΣ ΫτΛՃ͑Δ͜ͱͰԞߦ͖Λ࣋ͨͤɺ ΑΓഎܠͰ͋Δ͜ͱΛ௚ײతʹཧղ ͢Δखॿ͚Λ͍ͯ͠Δɻ ύϥϥοΫεͳ͠ ύϥϥοΫε͋Γ https://awa-official.themedia.jp ˞ಈըͰ͢ɻ

Slide 26

Slide 26 text

http://pecolly.jp

Slide 27

Slide 27 text

w ̏ͭͷϝΠϯϑΟʔυ΁ͷԣϑϦο ΫͰͷભҠΛৄࡉʹ࠶ݱɻ w ϝΠϯΠϝʔδͷߴ͞Λଗ͑ͭͭɺ ҹ৅తʹݟ͑ΔΑ͏ͳࣸਅͷαΠζ w ό΢ϯεޮՌͰεΫϩʔϧϦϛοτ ͷෛՙΛܰݮ Mock Up ࢖༻πʔϧ http://pecolly.jp ˞ಈըͰ͢ɻ

Slide 28

Slide 28 text

CyberAgent Quality ΫΦϦςΟʹର͢Δ$"ͷऔΓ૊Έ

Slide 29

Slide 29 text

Qual ity 3Q

Slide 30

Slide 30 text

Interaction Quality Design Quality Planning Quality 3Q

Slide 31

Slide 31 text

Design Quality 6*ɾάϥϑΟοΫ ΨΠυϥΠϯɺ଄ܗඒ͕อ͍ͯͯΔ͔ ࢖͍΍͘͢ɺ෼͔Γ΍͍͔͢ ಠࣗੑPS৽نੑ͕͋Δ͔

Slide 32

Slide 32 text

໿ αʔϏεΛ ݄$IFDL

Slide 33

Slide 33 text

σβΠφʔ ϓϩσϡʔαʔ ΁ͷ'#

Slide 34

Slide 34 text

શମͰͷ σβΠϯ'#

Slide 35

Slide 35 text

Interaction Quality ભҠɾτϥϯδγϣϯ ֊૚͕෼͔Γ΍͘͢ɺࣗવ͔ ա৒ͳԋग़Λ࡟͗མͱ͍ͤͯΔ͔ ಈ͖͕εϜʔζɺετϨεϑϧ͔

Slide 36

Slide 36 text

ωΠςΟϒ ༦ձ

Slide 37

Slide 37 text

Engineer Engineer Designer Designer Engineer Engineer Engineer

Slide 38

Slide 38 text

σβΠφʔͱΤϯδχΞ͕ϖΞͰࢀՃ͠ɺ αʔϏεຖͷ5JQT΍ɺ࣮૷ΞΠσΞͷڞ༗ͷ৔ͱͯ͠ Mock up

Slide 39

Slide 39 text

σβΠφʔ޲͚ 4XJGUݚम ΤϯδχΞ޲͚ σβΠϯݚम

Slide 40

Slide 40 text

http://ameblo.jp/ca-1pixel/theme2-10039396608.html ˞ಈըͰ͢ɻ UIΞχϝʔγϣϯݚम՝୊

Slide 41

Slide 41 text

Planning Quality αʔϏεϧʔϓ ϓϩμΫτϏδϣϯ͕ඳ͚͍ͯΔ͔ ϥϕϦϯά͸෼͔Γ΍͍͔͢ Ϣʔβʔ͕ϋϚΔ޻෉͕͋Δ͔

Slide 42

Slide 42 text

ϞοΫ ϨϏϡʔ Chief Producer Chief Product Ofﬁcer General Produce Chief Designer

Slide 43

Slide 43 text

Engineer Designer

Slide 44

Slide 44 text

͜Ε͸ͨͩͷث༻ශ๡ Engineer Designer

Slide 45

Slide 45 text

े෼ͳ ϕʔεεΩϧ͕ඞཁ -WҎ্ͳ͚Ε͹ɺμʔϚͷਆ఼Ͱ༐ऀʹస৬͕Ͱ͖ͳ͍Α͏ʹɺ σβΠϯɺΤϯδχΞϦϯάͷे෼ͳϕʔεεΩϧ͕ͳ͚Ε͹ͨͩͷث༻ශ๡ɻ What is Technical Creator ?

Slide 46

Slide 46 text

αοΧʔͷ%'Ͱ͍͏ͱ ϦϕϩΈ͍ͨͳ΋ͷ ଍ͷ଎͍σΟϑΣϯμʔ͕ʮϦϕϩʯͱݴΘΕ͍ͯΔΑ͏ʹɺ σβΠφʔɺΤϯδχΞͷʮ৽͍͠໾ׂʯͰ͋Δɻ What is Technical Creator ?

Slide 47

Slide 47 text

ࣗ෼ͷڧΈΛཧղ͠ ٕज़Λ޼ΈʹԠ༻͢Δ σβΠϯɾϓϩάϥϜݴޠɾΞχϝʔγϣϯͳͲɺ શͯʹ௕͚͍ͯΔඞཁ͸ͳ͘ɺ࠷దͳΞ΢τϓοτͷͨΊͷԠ༻ྗ͕ॏཁ What is Technical Creator ?

Slide 48

Slide 48 text

Slide 49

Slide 49 text

ٕज़ͷ࣠଍Λஔ্͍ͨͰ ྖҬΛ޿͛Δ Engineer Designer

Slide 50

Slide 50 text

https://www.cyberagent.co.jp/recruit/special/techcareer/ αΠόʔΤʔδΣϯτͰ͸ɺ  ੈքج४ͷαʔϏεΛҰॹʹͭ͘Δ஥ؒΛืू͍ͯ͠·͢ɻ Recruit

Slide 51

Slide 51 text

@sugaarɹ2016/04/14ɹUI Crunch Thank you