Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

 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.7k
デザイナーとエンジニアの境界線
Avatar for Tatsuya Uchida ukn530
5
4.9k
デザイナーによるAtomic Designの実践〜導入編・運用編〜
Avatar for Tatsuya Uchida ukn530
9
3.2k

Other Decks in Design

See All in Design
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
Avatar for Yu Morita securecat
1
200
AIネイティブな時代におけるUXデザインの在り方とは
Avatar for Kunimitsu Toshiki kuni29
0
1.4k
RAKSUL_DESIGN_DECK_20250319
Avatar for RAKSUL raksulrecruiting
0
230
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
Avatar for Masahiko Sakakibara rdlabo
1
120
The Golden Whitney
Avatar for OhTristanArt ohtristanart
PRO
0
150
Echoes Boomerang
Avatar for Cloud Yu artcloudyu
PRO
0
190
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
Avatar for Gaku Oyanagi gakuoya
1
640
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
Avatar for Shota Ikeyatsu ikeyatsu
2
1.7k
プロダクトデザインの「守破離」の「破」について
Avatar for HAYASHIRINE hayashirine
0
340
デザイン・イネーブルメントの理論構築と実践 / 現場から組織にデザインを浸透させる：実践例と最新研究から学ぶボトムアップ戦略
Avatar for Akira Motomura akiramotomura
1
110
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
6
2.6k
界隈からの逃走–デザイン初め新年会2025
Avatar for sekig sekiguchiy
3
1.1k

Featured

See All Featured
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
30
950
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.7k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
6.5k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
129
19k

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