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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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.9k
デザイナーとエンジニアの境界線
Avatar for Tatsuya Uchida ukn530
5
5.2k
デザイナーによるAtomic Designの実践〜導入編・運用編〜
Avatar for Tatsuya Uchida ukn530
9
3.3k

Other Decks in Design

See All in Design
図じゃなく言語で描く - Common Ground for Design AI Operations.
Avatar for Kazuki Ikeda kazukiikeda
1
650
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
1
500
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
800
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
5k
Liquid GlassとApp Intents
Avatar for touyou touyou
0
780
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
230
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.6k
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
130
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
1.4k
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
320
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
140
AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験
Avatar for daitasu daitasu
1
130

Featured

See All Featured
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
120
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
170
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.6k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
350
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
46k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
1
47
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
130

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