Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AbemaTVのデザイナーが語るUI実装の舞台裏
Search
Tatsuya Uchida
February 04, 2017
Design
0
260
AbemaTVのデザイナーが語るUI実装の舞台裏
WPJのConferenceで登壇した際の資料です。
http://webprofessional.jp/event/conf01/
Tatsuya Uchida
February 04, 2017
Tweet
Share
More Decks by Tatsuya Uchida
See All by Tatsuya Uchida
VODにおけるUIデザインとトレンド - 後編
ukn530
0
2.8k
デザイナーとエンジニアの境界線
ukn530
5
5k
デザイナーによるAtomic Designの実践〜導入編・運用編〜
ukn530
9
3.2k
Other Decks in Design
See All in Design
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
270
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
620
高卒公務員から Webデザイナーになるまで
kinomidesign
0
110
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.9k
Liquid GlassとApp Intents
touyou
0
430
kintone_aroma
kintone
0
140
DESIGNEAST 2025 A-3
_kotobuki_
0
100
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
150
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
180
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
160
Installing and Running decksh/pdfdeck
ajstarks
1
870
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Typedesign – Prime Four
hannesfritz
42
2.8k
Facilitating Awesome Meetings
lara
57
6.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Into the Great Unknown - MozCon
thekraken
40
2.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
For a Future-Friendly Web
brad_frost
180
10k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Transcript
"CFNB57ͷσβΠφʔ͕ޠΔ 6*࣮ͷཪ ాୡ Tech Session #01
͘͡ ࣗݾհ"CFNB57ʹ͍ͭͯ "CFNB57ͷσβΠϯͷਐΊํ ίʔυΛ৮ͬͨ ϞοΫΛ࡞ͬͨ·ͱΊ
͘͡ ࣗݾհ"CFNB57ʹ͍ͭͯ "CFNB57ͷσβΠϯͷਐΊํ ίʔυΛ৮ͬͨ ϞοΫΛ࡞ͬͨ·ͱΊ
ాୡ 6*σβΠφʔ ໊ݹࢢཱେֶେֶӃܳज़ֶݚڀՊଔ αΠόʔΤʔδΣϯτೖࣾ ͍ΖΜͳαʔϏεͷάϥϑΟοΫ6*σβΠϯ "CFNB57Ͱ6*σβΠϯ
ݴ༿ਤؑ 1&/%3&". 1FO`T"EWFOUVSF .FUSP ࣗओ੍࡞ΞϓϦ Φεεϝ
έηϥϯύαϥϯ Ծ ϦϦʔε࣌ظɿࠓத
None
ΠϯλʔωοτςϨϏہ J04"OESPJEͰສ%- ݄։ہ ςϨϏேͱͷڠۀ ࢝ສ8"6
։ൃνʔϜݱࡏਓ͘Β͍
1$ϓϩϞ "OESPJE57 "OESPJEϒϥβ "QQMF57 ΫϦΤΠςΟϒ σΟϨΫλʔ ө૾ܥ J04"OESPJE
͘͡ ࣗݾհ"CFNB57ʹ͍ͭͯ "CFNB57ͷσβΠϯͷਐΊํ ίʔυΛ৮ͬͨ ϞοΫΛ࡞ͬͨ·ͱΊ
ࣾ σΟϨΫλʔ σβΠφʔ ΤϯδχΞ Γ͍ͨػೳ69 ۩ମతͳ6* σβΠϯͷਐΊํ
'BDFCPPLͷΠϯϑΟʔυ ࠶ੜͷΑ͏ʹଦੑͰड͚Ͱ
1JYBUF"GUFS&GGFDUT ͳͲͰϞοΫΛ࡞Δ
None
βοϐϯά
൪දɾৄࡉը໘
ΤϯδχΞ σΟϨΫλʔ σβΠφʔ
ԣͷํ͕͍͍Ͷ
None
͘͡ ࣗݾհ"CFNB57ʹ͍ͭͯ "CFNB57ͷσβΠϯͷਐΊํ ίʔυΛ৮ͬͨ ϞοΫΛ࡞ͬͨ·ͱΊ
Ͳ͏ͬͯ࠷ॳͷҰาΛ౿Έग़ͨ͠ͷ͔ ʢࣗͷ߹ʣ
͕ࣗΞϓϦΛ࡞ͬͯΔ͜ͱΛΘͤΔ ςΫχΧϧΫϦΤΠλʔͱ͍͏ࣾͷ෩ ϦΞϧͳϓϩμΫτΛॏࢹ͢ΔྲྀΕ
ςΫχΧϧΫϦΤΠλʔ
6*ΞχϝʔγϣϯΤϯδχΞϦϯάʹ͚͍ͯΔʮσβΠφʔʯ ඒతηϯεσβΠϯࢥߟɺ6*Ξχϝʔγϣϯʹ͚͍ͯΔʮΤϯδχΞʯ ࠷ऴతͳΞτϓοτΛΫΦϦςΟߴ͘ɺ͔ͭࣗݾ݁Ͱߦ͑Δਓ ৗʹτϨϯυΛड͚ೖΕͯԠ༻͠ɺٕज़ͷ֞ࠜͳ͘෯͍ΞτϓοτΛग़ͤΔਓ ςΫχΧϧΫϦΤΠλʔlҰਓଟ࠽ͳΫϦΤΠλʔz
σβΠφʔ͚Swiftݚम
ΤϯδχΞ͚σβΠϯݚम
IUUQTEFWFMPQFSTDZCFSBHFOUDPKQCMPHBSDIJWFT
"CFNB57Ͱ৮ͬͯΈ͍ͨͳʙ
ίʔυ৮Γ͍ͨͰ͢ʂ ࣗ༝ʹ͍͍ͬͯΑ "OESPJEͷ͍͢͝ਓ
"OESPJE4UVEJPͰ 9.-Λ͍͡Δ Before After
9DPEFʹΑΔ ಈ͖ͷඍमਖ਼
4VCMJNF5FYUͰ ϨΠΞτௐ
"UPNJD%FTJHOͰ ίϯϙʔωϯτཧ
(JU)VCΛ͏
ίϐʔͯ͠࡞ۀ ίϐʔͯ͠࡞ۀ ݟ ͯ Β ͬͯ ্ ॻ ͖
OK! ݟͯΒ্ͬͯॻ͖ OK! ϓϩάϥϜWFS ϓϩάϥϜWFS ϓϩάϥϜWFS ػೳ" ϓϩάϥϜWFS ػೳ#
͘͡ ࣗݾհ"CFNB57ʹ͍ͭͯ σβΠϯͷਐΊํ ίʔυΛ৮ͬͨ ϞοΫΛ࡞ͬͨ·ͱΊ
͜͜·ͰσβΠφʔ͕ ϓϩμΫτΛमਖ਼ͨ͠
"QQMF57ͷϞοΫΛ࡞ͬͨ
None
ͬͯΈͨײ
Α͔ͬͨ͜ͱ ΞϓϦͷษڧʹͳΔ ΤϯδχΞ͞ΜʹཔΉ৺͕ۤ͠͞ͳ͍ ΫΦϦςΟͷվળαΠΫϧ͕ૣ͍
վળ λεΫͱ͖ͯͪ͠Μͱ࣌ؒΛͱΔ͖
ίʔσΟϯάΛ࢝ΊΔϚΠϯυ
͚ͩͩ͜͜ͱΑ͘ͳ͍ %FTJHOFS &OHJOFFS
ΤϯδχΞσβΠϯΛݚڀ͢Δஈ֊Ͱۙࢹ తʹָ͠ΊΔ͚ͲɺσβΠφઌʹ࡞Γ͍ͨ Ϟϊͷ໌֬ͳϏδϣϯ͕ٕज़తʹແ͗ͯ͢ ࠷ॳͰ࠳ં͢Δ͜ͱ͕ଟ͍ؾ͕ ࠳ં͢Δ߹ɺॳظஈ֊ͰΤϯδχΞ ʮඒ͘͢͠Δ͜ͱʹڵຯ͕ͳ͍ʯͰσβΠϯ ֶशΛ࠳ં͢Δ͜ͱ͕ଟͯ͘ɺσβΠφͷΤ ϯδχΞϦϯάֶशʮΓ͍ͨ͜ͱΛΕ ΔΑ͏ʹͳΔ·ͰͷಓͷΓ͕ա͗ΔʯͰ࠳ ં͢Δ͜ͱ͕ଟ͍ͱࢥ͏ɻ
ಠஅͱภݟʹΑΔਤ &OHJOFFS %FTJHOFS 5$ྗ ࣌ؒ
࠷ॳɺ͕ࣗΓ͍ͨ͜ͱʹ͍ۙ ຊͷαϯϓϧΛ͍ࣸͯ͘͠ ͦ͜ʹωοτͰरͬͨίʔυΛ ͭͳ͗߹Θ͍ͤͯ͘ Τϥʔ͕ग़ͨΒଈ(PPHMFઌੜʹฉ͘
&OHJOFFS %FTJHOFS ಠஅͱภݟʹΑΔਤ 5$ྗ ࣌ؒ
Ͱͻͱͭݴ͑Δͷ
ָ͍͠ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠
4LFUDIϓϥάΠϯ 'POU'JOEFS
ͭ͠Μίʔφʔ