AbemaTVのデザイナーが語るUI実装の舞台裏

WPJのConferenceで登壇した際の資料です。
http://webprofessional.jp/event/conf01/

Transcript

1. "CFNB57ͷσβΠφʔ͕ޠΔ
   6*࣮૷ͷ෣୆ཪ ಺ా
   ୡ໵ Tech Session #01
2. ΋͘͡  ࣗݾ঺հ"CFNB57ʹ͍ͭͯ
    "CFNB57ͷσβΠϯͷਐΊํ
    ίʔυΛ৮ͬͨ࿩
    ϞοΫΛ࡞ͬͨ࿩
   
   ·ͱΊ
3. ΋͘͡  ࣗݾ঺հ"CFNB57ʹ͍ͭͯ
    "CFNB57ͷσβΠϯͷਐΊํ
    ίʔυΛ৮ͬͨ࿩
    ϞοΫΛ࡞ͬͨ࿩
   
   ·ͱΊ
4. ಺ా
   ୡ໵ 6*σβΠφʔ ೥
   ໊ݹ԰ࢢཱେֶେֶӃ
   ܳज़޻ֶݚڀՊଔ
   ೥
   αΠόʔΤʔδΣϯτೖࣾ
   ೥
   ͍ΖΜͳαʔϏεͷάϥϑΟοΫ6*σβΠϯ
   ೥
   "CFNB57Ͱ6*σβΠϯ
5. ݴ༿ਤؑ 1&/
   %3&". 1FO`T
   "EWFOUVSF .FUSP ࣗओ੍࡞ΞϓϦ Φεεϝ
6. έηϥϯύαϥϯ Ծ ϦϦʔε࣌ظɿࠓ೥த
8. ΠϯλʔωοτςϨϏہ J04"OESPJEͰສ%- ೥
   ݄೔
   ։ہ ςϨϏே೔ͱͷڠۀ ೥຤೥࢝͸ສ8"6
9. ։ൃνʔϜ͸ݱࡏਓ͘Β͍
10. 1$
    ϓϩϞ
    "OESPJE57 "OESPJE
    ϒϥ΢β
    "QQMF57 ΫϦΤΠςΟϒ
    σΟϨΫλʔ
    ө૾ܥ J04
    "OESPJE
11. ΋͘͡  ࣗݾ঺հ"CFNB57ʹ͍ͭͯ
     "CFNB57ͷσβΠϯͷਐΊํ
     ίʔυΛ৮ͬͨ࿩
     ϞοΫΛ࡞ͬͨ࿩
    
    ·ͱΊ
12. ࣾ௕ σΟϨΫλʔ σβΠφʔ ΤϯδχΞ ΍Γ͍ͨػೳ69 ۩ମతͳ6* σβΠϯͷਐΊํ
13. 'BDFCPPLͷΠϯϑΟʔυ
    ࠶ੜͷΑ͏ʹଦੑͰड͚਎Ͱ
14. 1JYBUF"GUFS&GGFDUT
    ͳͲͰϞοΫΛ࡞Δ
16. βοϐϯά
17. ൪૊දɾৄࡉը໘
18. ΤϯδχΞ σΟϨΫλʔ σβΠφʔ
19. ԣͷํ͕͍͍Ͷ
21. ΋͘͡  ࣗݾ঺հ"CFNB57ʹ͍ͭͯ
     "CFNB57ͷσβΠϯͷਐΊํ
     ίʔυΛ৮ͬͨ࿩
     ϞοΫΛ࡞ͬͨ࿩
    
    ·ͱΊ
22. Ͳ͏΍ͬͯ࠷ॳͷҰาΛ౿Έग़ͨ͠ͷ͔
    ʢࣗ෼ͷ৔߹ʣ
23. ࣗ෼͕ΞϓϦΛ࡞ͬͯΔ͜ͱΛ೏ΘͤΔ ςΫχΧϧΫϦΤΠλʔͱ͍͏ࣾ಺ͷ෩ ϦΞϧͳϓϩμΫτΛॏࢹ͢ΔྲྀΕ
24. ςΫχΧϧΫϦΤΠλʔ
25. 6*Ξχϝʔγϣϯ΍ΤϯδχΞϦϯάʹ΋௕͚͍ͯΔʮσβΠφʔʯ
    ඒతηϯε΍σβΠϯࢥߟɺ6*Ξχϝʔγϣϯʹ΋௕͚͍ͯΔʮΤϯδχΞʯ
    ࠷ऴతͳΞ΢τϓοτΛΫΦϦςΟߴ͘ɺ͔ͭࣗݾ׬݁Ͱߦ͑Δਓ
    ৗʹτϨϯυΛड͚ೖΕͯԠ༻͠ɺٕज़ͷ֞ࠜͳ͘෯޿͍Ξ΢τϓοτΛग़ͤΔਓ ςΫχΧϧΫϦΤΠλʔ
    
    lҰਓଟ࠽ͳΫϦΤΠλʔz
26. σβΠφʔ޲͚Swiftݚम
27. ΤϯδχΞ޲͚σβΠϯݚम
28. IUUQTEFWFMPQFSTDZCFSBHFOUDPKQCMPHBSDIJWFT
29. "CFNB57Ͱ΋৮ͬͯΈ͍ͨͳʙ
30. ίʔυ৮Γ͍ͨͰ͢ʂ ࣗ༝ʹ΍͍͍ͬͯΑ "OESPJEͷ͍͢͝ਓ
31. "OESPJE
    4UVEJPͰ
    9.-Λ͍͡Δ Before After
32. 9DPEFʹΑΔ
    ಈ͖ͷඍमਖ਼
33. 4VCMJNF
    5FYUͰ
    ϨΠΞ΢τௐ੔
34. "UPNJD
    %FTJHOͰ
    ίϯϙʔωϯτ؅ཧ
35. (JU)VCΛ࢖͏
36. ίϐʔͯ͠࡞ۀ ίϐʔͯ͠࡞ۀ ݟ ͯ ΋ Β ͬͯ ্ ॻ ͖ OK! ݟͯ΋Β্ͬͯॻ͖ OK! ϓϩάϥϜ
    WFS ϓϩάϥϜ
    WFS ϓϩάϥϜ
    WFS
    
    ػೳ" ϓϩάϥϜ
    WFS
    
    ػೳ#
37. ΋͘͡  ࣗݾ঺հ"CFNB57ʹ͍ͭͯ
     σβΠϯͷਐΊํ
     ίʔυΛ৮ͬͨ࿩
     ϞοΫΛ࡞ͬͨ࿩
    
    ·ͱΊ
38. ͜͜·ͰσβΠφʔ͕
    ϓϩμΫτΛमਖ਼ͨ͠࿩
39. "QQMF57ͷϞοΫΛ࡞ͬͨ
41. ΍ͬͯΈͨײ૝
42. Α͔ͬͨ͜ͱ ΞϓϦͷษڧʹͳΔ ΤϯδχΞ͞ΜʹཔΉ৺͕ۤ͠͞ͳ͍ ΫΦϦςΟͷվળαΠΫϧ͕ૣ͍
43. վળ఺ λεΫͱ͖ͯͪ͠Μͱ࣌ؒΛͱΔ΂͖
44. ίʔσΟϯάΛ࢝ΊΔϚΠϯυ
45. ͚ͩͩ͜͜ͱΑ͘ͳ͍ %FTJHOFS &OHJOFFS
46. ΤϯδχΞ͸σβΠϯΛݚڀ͢Δஈ֊Ͱۙࢹ తʹָ͠ΊΔ͚ͲɺσβΠφ͸ઌʹ࡞Γ͍ͨ Ϟϊͷ໌֬ͳϏδϣϯ͕ٕज़తʹແ๳͗ͯ͢ ࠷ॳͰ࠳ં͢Δ͜ͱ͕ଟ͍ؾ͕ ࠳ં͢Δ৔߹΋ɺॳظஈ֊Ͱ͸ΤϯδχΞ͸ ʮඒ͘͢͠Δ͜ͱʹڵຯ͕ͳ͍ʯͰσβΠϯ ֶशΛ࠳ં͢Δ͜ͱ͕ଟͯ͘ɺσβΠφͷΤ ϯδχΞϦϯάֶश͸ʮ΍Γ͍ͨ͜ͱΛ΍Ε ΔΑ͏ʹͳΔ·ͰͷಓͷΓ͕௕ա͗ΔʯͰ࠳ ં͢Δ͜ͱ͕ଟ͍ͱࢥ͏ɻ
    
47. ಠஅͱภݟʹΑΔਤ &OHJOFFS %FTJHOFS 5$ྗ ࣌ؒ
48. ࠷ॳ͸ɺࣗ෼͕΍Γ͍ͨ͜ͱʹ͍ۙ
    ຊͷαϯϓϧΛ͍ࣸͯ͘͠ ͦ͜ʹωοτͰरͬͨίʔυΛ
    ͭͳ͗߹Θ͍ͤͯ͘ Τϥʔ͕ग़ͨΒଈ(PPHMFઌੜʹฉ͘
49. &OHJOFFS %FTJHOFS ಠஅͱภݟʹΑΔਤ 5$ྗ ࣌ؒ
50. Ͱ΋ͻͱͭݴ͑Δͷ͸
51. ָ͍͠ʂ
52. ͋Γ͕ͱ͏͍͟͝·ͨ͠
53. 4LFUDIϓϥάΠϯ
    'POU
    'JOEFS
54. ͭ͠΋Μίʔφʔ