Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
テクニカルクリエイターが担う、サービス開発のUIモックの現場/Technical Creato...
Search
sugar
April 14, 2016
Design
8
6.6k
テクニカルクリエイターが担う、サービス開発のUIモックの現場/Technical Creator for the App Design.
Technical Creator for the App Design.
sugar
April 14, 2016
Tweet
Share
More Decks by sugar
See All by sugar
デザイナーが10倍輝くCA流マネジメント
sato_yosuke
8
25k
テクニカルクリエイターとは?/What is TECHNICAL CREATOR?
sato_yosuke
3
4.1k
Other Decks in Design
See All in Design
Карта реализации историй. Технология осмысленной работы с детальными требованиями
ashapiro
0
100
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
450
AIで加速するアクセシビリティのこれから
magi1125
3
660
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3.6k
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
280
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
490
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
550
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
550
sachi_y_portfolio
sachi337
0
500
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.5k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
380
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
780
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
We Have a Design System, Now What?
morganepeng
53
7.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Optimizing for Happiness
mojombo
379
70k
How to Think Like a Performance Engineer
csswizardry
26
1.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Speed Design
sergeychernyshev
32
1.1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Done Done
chrislema
185
16k
Being A Developer After 40
akosma
90
590k
Designing for humans not robots
tammielis
253
25k
Transcript
@sugaarɹ2016/04/14ɹUI Crunch Technical Creator App Design. at CyberAgent for the
ࣗݾհ ࠤ౻༸հ ʢ͞ͱ͏Α͏͚͢ʣ "NFCBࣄۀຊ෦ɹΫϦΤΠςΟϒ౷ׅࣨɹࣨ νʔϑɾΫϦΤΠςΟϒσΟϨΫλʔ !TVHBBS
ʵ େຊҹɹ%/1 8FCσβΠφʔΞʔτσΟϨΫλʔ ʵ αΠόʔΤʔδΣϯτ νʔϑɾΫϦΤΠςΟϒσΟϨΫλʔ
Technical Creator ςΫχΧϧΫϦΤΠλʔ
άϥϑΟοΫ αʔϏε։ൃ 69σβΠϯ ΠϯλϥΫγϣϯ 4LFUDI ৭࠼ɾ৭ 4XJGU 6*Ξχϝʔγϣϯ λΠϙάϥϑΟ (JU)VC
1JYBUF "GUFS&⒎FDUT 6*σβΠϯ "OESPJE4UVEJP ΨΠυϥΠϯ
ωΠςΟϒΞϓϦࢢͰ ΑΓߴͳදݱ͕࠷ॏཁ Point 1 σβΠφʔ͕੩తͳσβΠϯ͚ͩΛߦ͏ͷͰͳ͘ͳ͖ͬͯͨ ΤϯδχΞ͕6*Ξχϝʔγϣϯ69Λ୲͏ඞཁ͕ग़͖ͯͨ
৺Α͍Ϣʔβʔମݧ͕ ڝ߹༏ҐੑͱͳΔ Point 2 ߴ͍ΫΦϦςΟͱॊೈͳΞτϓοτ͕ॏཁ ຊͷΫΦϦςΟϨϕϧ·ͩ·ͩ͘ɺඈͼൈ͚Δνϟϯε͕͋Δ
σβΠϯͱΤϯδχΞϦϯάͷ தؒΛ୲͏πʔϧ͕͖ͬͯͨ Point 3 'MBTIͷΑ͏ͳπʔϧ͕ωΠςΟϒΞϓϦ͚ʹ͖ͬͯͨ 6*Ξχϝʔγϣϯ6*σβΠϯɺΤϯδχΞϦϯάͷෑډ͕͘ͳ͖ͬͯͨ
テクニカルクリエイター 【一人多才なクリエイター】 - いっと たさいな くりえいたー [概要] 表現の幅が広く、デザイン・プログラム言語・アニメーションを 自在にあつかえるクリエイター
① 技術の垣根を越えて「テクニカル」に「クリエイティブ」できる人材 ② 一人で領域広くカバーしてハイクオリティなアウトプットができる人材 ③ 業界のトレンドに敏感で常に新技術を追える人材 定義
Field of Development $"ͷαʔϏε։ൃͷݱ
Designer Engineer Design Tool Animation Tool Mock Up Tool Programming
Tool
Designer Engineer Design Tool Animation Tool Mock Up Tool Programming
Tool ͦΕͧΕͷ֞ࠜΛӽ͑Δ࣌
ࠓճʮϞοΫΞοϓʯʹ ϑΥʔΧε͠·͢
https://abema.tv ΠϯλʔωοτςϨϏہ
ςϨϏΛεϚϗͰݟΔ͕࣌དྷΔͷͰʁ ͱʹ͔͘εϚϗͰշదʹݟ͍ͨ ൪੍࡞ςϨϏேͱ࿈ܞ Concept
w ։ൃॳJ1BEΞϓϦΛఆ͍ͯͨͨ͠ΊɺࢴࣳډͷϥϑϞοΫΛ࡞ Rough Mock Up ༻πʔϧ https://abema.tv ˞ಈըͰ͢ɻ
w ੩తσβΠϯͱಉ࣌ʹɺ'MBTIͰΞχϝʔγϣϯԽͯ͠αʔϏεͷશମϧʔϓ Λ࡞͠ɺʮ৺Α͍ࢹௌମݧʯʹʮβοϐϯάʯʹϑΥʔΧεɻ Concept Mock Up ༻πʔϧ https://abema.tv ˞ಈըͰ͢ɻ
w 1JYBUFͰৄࡉʹͭ͘ΓࠐΉ Detail Mock Up ༻πʔϧ https://abema.tv ˞ಈըͰ͢ɻ
w ϞοΫͰΠϯλϥΫγϣϯͷΠϝʔδΛ໌֬ʹ͠ɺਖ਼ࣜϓϩμΫτʹΈࠐΉ Product Version ༻πʔϧ https://abema.tv ˞ಈըͰ͢ɻ
https://awa-official.themedia.jp
ʮԻָͱͷग़ձ͍ʯʹϑΥʔΧε ͱʹ͔͓͘ᔬམͰଞਓʹનΊͨ͘ͳΔ6* Ұݟւ֎͔ΒདྷͨΞϓϦͷΑ͏ͳੈք؍ Concept
w ΠϯλϥΫγϣϯઐ༻ΞϓϦͷ։ൃ w ετΞ൛ΞϓϦͱผʹɺΠϯλϥ Ϋγϣϯઐ༻ͷΞϓϦʮ"8"*Y%ʯ ΛฒߦͰ࡞͠ɺ֬ೝ͕औΕͨͷ ΛετΞ൛ʹঃʑʹϚʔδ w ҙຯͷ͋ΔΞχϝʔγϣϯ͕લఏ Interaction
༻πʔϧ https://awa-official.themedia.jp
Interaction ༻πʔϧ w ݱ࣮ੈքͷಈ͖ͱΞχϝʔγϣϯͷ ؒʹΪϟοϓΛ࡞Βͳ͍ w Ϣʔβʔͷ࿈ଓతͳಈ࡞ͱΞχϝʔ γϣϯͷؒʹΪϟοϓΛ࡞Βͳ͍ https://awa-official.themedia.jp ˞ಈըͰ͢ɻ
Interaction ༻πʔϧ w ઐ༻ΞϓϦʮ"8"*Y%ʯ w ԣεΫϩʔϧ࣌ʹɺ௨ৗͷ࣮Λ͢ ΔͱࠨͷΑ͏ʹϊοϖϦͱͨ͠ը໘ ʹͳΔ͕ɺͦ͜ʹύϥϥοΫεΤϑΣ ΫτΛՃ͑Δ͜ͱͰԞߦ͖Λ࣋ͨͤɺ ΑΓഎܠͰ͋Δ͜ͱΛײతʹཧղ
͢Δखॿ͚Λ͍ͯ͠Δɻ ύϥϥοΫεͳ͠ ύϥϥοΫε͋Γ https://awa-official.themedia.jp ˞ಈըͰ͢ɻ
http://pecolly.jp
w ̏ͭͷϝΠϯϑΟʔυͷԣϑϦο ΫͰͷભҠΛৄࡉʹ࠶ݱɻ w ϝΠϯΠϝʔδͷߴ͞Λଗ͑ͭͭɺ ҹతʹݟ͑ΔΑ͏ͳࣸਅͷαΠζ w όϯεޮՌͰεΫϩʔϧϦϛοτ ͷෛՙΛܰݮ Mock
Up ༻πʔϧ http://pecolly.jp ˞ಈըͰ͢ɻ
CyberAgent Quality ΫΦϦςΟʹର͢Δ$"ͷऔΓΈ
Qual ity 3Q
Interaction Quality Design Quality Planning Quality 3Q
Design Quality 6*ɾάϥϑΟοΫ ΨΠυϥΠϯɺܗඒ͕อ͍ͯͯΔ͔ ͍͘͢ɺ͔Γ͍͔͢ ಠࣗੑPS৽نੑ͕͋Δ͔
αʔϏεΛ ݄$IFDL
σβΠφʔ ϓϩσϡʔαʔ ͷ'#
શମͰͷ σβΠϯ'#
Interaction Quality ભҠɾτϥϯδγϣϯ ֊͕͔Γ͘͢ɺࣗવ͔ աͳԋग़Λ͗མͱ͍ͤͯΔ͔ ಈ͖͕εϜʔζɺετϨεϑϧ͔
ωΠςΟϒ ༦ձ
Engineer Engineer Designer Designer Engineer Engineer Engineer
σβΠφʔͱΤϯδχΞ͕ϖΞͰࢀՃ͠ɺ αʔϏεຖͷ5JQTɺ࣮ΞΠσΞͷڞ༗ͷͱͯ͠ Mock up
σβΠφʔ͚ 4XJGUݚम ΤϯδχΞ͚ σβΠϯݚम
http://ameblo.jp/ca-1pixel/theme2-10039396608.html ˞ಈըͰ͢ɻ UIΞχϝʔγϣϯݚम՝
Planning Quality αʔϏεϧʔϓ ϓϩμΫτϏδϣϯ͕ඳ͚͍ͯΔ͔ ϥϕϦϯά͔Γ͍͔͢ Ϣʔβʔ͕ϋϚΔ͕͋Δ͔
ϞοΫ ϨϏϡʔ Chief Producer Chief Product Officer General Produce Chief
Designer
Engineer Designer
͜Εͨͩͷث༻ශ Engineer Designer
ेͳ ϕʔεεΩϧ͕ඞཁ -WҎ্ͳ͚ΕɺμʔϚͷਆ఼Ͱ༐ऀʹస৬͕Ͱ͖ͳ͍Α͏ʹɺ σβΠϯɺΤϯδχΞϦϯάͷेͳϕʔεεΩϧ͕ͳ͚Εͨͩͷث༻ශɻ What is Technical Creator ?
αοΧʔͷ%'Ͱ͍͏ͱ ϦϕϩΈ͍ͨͳͷ ͷ͍σΟϑΣϯμʔ͕ʮϦϕϩʯͱݴΘΕ͍ͯΔΑ͏ʹɺ σβΠφʔɺΤϯδχΞͷʮ৽ׂ͍͠ʯͰ͋Δɻ What is Technical Creator ?
ࣗͷڧΈΛཧղ͠ ٕज़ΛΈʹԠ༻͢Δ σβΠϯɾϓϩάϥϜݴޠɾΞχϝʔγϣϯͳͲɺ શͯʹ͚͍ͯΔඞཁͳ͘ɺ࠷దͳΞτϓοτͷͨΊͷԠ༻ྗ͕ॏཁ What is Technical Creator ?
テクニカルクリエイター 【一人多才なクリエイター】 - いっと たさいな くりえいたー [概要] 表現の幅が広く、デザイン・プログラム言語・アニメーションを 自在にあつかえるクリエイター
ٕज़ͷ࣠Λஔ্͍ͨͰ ྖҬΛ͛Δ Engineer Designer
https://www.cyberagent.co.jp/recruit/special/techcareer/ αΠόʔΤʔδΣϯτͰɺ ੈքج४ͷαʔϏεΛҰॹʹͭ͘ΔؒΛืू͍ͯ͠·͢ɻ Recruit
@sugaarɹ2016/04/14ɹUI Crunch Thank you