$30 off During Our Annual Pro Sale. View Details »

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

Avatar for Tatsuya Uchida Tatsuya Uchida
February 04, 2017
Design
0
260

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

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

Avatar for Tatsuya Uchida

Tatsuya Uchida

February 04, 2017
Tweet

More Decks by Tatsuya Uchida

See All by Tatsuya Uchida
VODにおけるUIデザインとトレンド - 後編
Avatar for Tatsuya Uchida ukn530
0
2.8k
デザイナーとエンジニアの境界線
Avatar for Tatsuya Uchida ukn530
5
5.1k
デザイナーによるAtomic Designの実践〜導入編・運用編〜
Avatar for Tatsuya Uchida ukn530
9
3.2k

Other Decks in Design

See All in Design
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
250
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
990k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
840
SAMSUL KAMAR ABDUL RAHMAN
Avatar for SAMSUL RAHMAN samsulrahman32
0
200
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
720
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
1
420
そのUIコンポーネント、これから先も使えますか？―Headless UI,Open UI,グローバルデザインシステム
Avatar for sakito sakito
2
2.4k
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
160
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
Avatar for 弁護士ドットコム bengo4com
1
1.4k
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
Avatar for Takahiro Yamaguchi hiro93n
0
230
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
2.9k

Featured

See All Featured
A Soul's Torment
Avatar for Nat Ma seathinner
1
2k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
93
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
Between Models and Reality
Avatar for mayunak mayunak
0
150
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
8
35k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.3k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
28
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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. έηϥϯύαϥϯ Ծ ϦϦʔε࣌ظɿࠓ೥த

  7. None

  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 ͳͲͰϞοΫΛ࡞Δ

  15. None

  16. βοϐϯά

  17. ൪૊දɾৄࡉը໘

  18. ΤϯδχΞ σΟϨΫλʔ σβΠφʔ

  19. ԣͷํ͕͍͍Ͷ

  20. None

  21. ΋͘͡  ࣗݾ঺հ"CFNB57ʹ͍ͭͯ  "CFNB57ͷσβΠϯͷਐΊํ  ίʔυΛ৮ͬͨ࿩  ϞοΫΛ࡞ͬͨ࿩·ͱΊ

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

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

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

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

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

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

  28. IUUQTEFWFMPQFSTDZCFSBHFOUDPKQCMPHBSDIJWFT

  29. "CFNB57Ͱ΋৮ͬͯΈ͍ͨͳʙ

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

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

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

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

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

  35. (JU)VCΛ࢖͏

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

    OK! ݟͯ΋Β্ͬͯॻ͖ OK! ϓϩάϥϜWFS ϓϩάϥϜWFS ϓϩάϥϜWFS ػೳ" ϓϩάϥϜWFS ػೳ#

  37. ΋͘͡  ࣗݾ঺հ"CFNB57ʹ͍ͭͯ  σβΠϯͷਐΊํ  ίʔυΛ৮ͬͨ࿩  ϞοΫΛ࡞ͬͨ࿩·ͱΊ

  38. ͜͜·ͰσβΠφʔ͕ ϓϩμΫτΛमਖ਼ͨ͠࿩

  39. "QQMF57ͷϞοΫΛ࡞ͬͨ

  40. None

  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. ͭ͠΋Μίʔφʔ