Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
570
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
110
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
220
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
3.5k
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
160
8_8_リサーチカンファレンスプレイベント.pdf
Avatar for Muture muture
PRO
2
610
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
1
330
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1.1k
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
250
アクセシビリティ推進を続けられるようにするヒント - Accessibility Conference CHIBA 2025
Avatar for uto usui uto
0
130
Ana Cortes Visual Development Portfolio 2025
Avatar for Ana Belen Cortes Diaz haruanleb
0
140
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
1
420

Featured

See All Featured
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
27
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.1k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
0
1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
0
1.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
310
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
92
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
560

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