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
デザイナーとエンジニアの境界線
Search
Tatsuya Uchida
October 15, 2016
Design
5
5k
デザイナーとエンジニアの境界線
AbemaTV Developer Conference 2016にて
松本がデザイナーとエンジニアのコミュニケーションの話を、
内田がデザイナーがコードを書いて見た話をしました
Tatsuya Uchida
October 15, 2016
Tweet
Share
More Decks by Tatsuya Uchida
See All by Tatsuya Uchida
VODにおけるUIデザインとトレンド - 後編
ukn530
0
2.8k
AbemaTVのデザイナーが語るUI実装の舞台裏
ukn530
0
260
デザイナーによるAtomic Designの実践〜導入編・運用編〜
ukn530
9
3.2k
Other Decks in Design
See All in Design
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.3k
portfolio.pdf
onof003
0
200
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
890
アクセシビリティに取り組むメリット
magi1125
2
270
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
190
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
520
decksh object reference
ajstarks
2
1.3k
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
400
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
410
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
140
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
160
Featured
See All Featured
KATA
mclloyd
PRO
32
15k
Faster Mobile Websites
deanohume
310
31k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Music & Morning Musume
bryan
46
6.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Site-Speed That Sticks
csswizardry
13
920
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Statistics for Hackers
jakevdp
799
220k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
σβΠφʔͱΤϯδχΞͷڥքઢ 2016/10/15
ࣗݾհ দຊढ़հ 6*σβΠφʔ $ZCFS"HFOUೖࣾ "CFNB57ଐ ݱࡏ J04 "OESPJEΞϓϦ6*σβΠϯ୲
"CFNB57ͷ6* Ͳ͏ͬͯͰ͖ͨͷ
ݱࡏͷ6* ͪͳΈʹ
ࣾ 'BDFCPPLͷ ΠϯϑΟʔυ࠶ੜΈ͍ͨͳ6* ςϨϏͷβοϐϯάࢹௌ ड͚ͰͩΒͩΒ
None
༦ձͰຖϞοΫΛڞ༗
ΤϯδχΞ σΟϨΫλʔ σβΠφʔ
βοϐϯά
൪දɾৄࡉը໘
ΤϯδχΞ σΟϨΫλʔ σβΠφʔ ࣮πϥΠͬ͢ 6*Πέͯͳ͘ͳ͍ʁ ελΠϦογϡ͚ͩͲ Ϣʔβʔʹ༏͘͠ͳ͘Ͷ ͍ͦ͢͏͚ͩͲ ςϨϏͬΆ͘ͳ͍ΑͶ ̋̋ͩͬͨΒ͍͍Μ͡Όͳ͍ʁ
6*Πέͯͳ͘ͳ͍ʁ 6*Πέͯͳ͘ͳ͍ʁ 6*Πέͯͳ͘ͳ͍ʁ 6*Πέͯͳ͘ͳ͍ʁ
͓L
͔݄ɺຖϞοΫΛ࡞Γଓ͚Δ
࡞ͬͨϞοΫͷݸ
ͳΜ͔ΜͰೲಘ͍͘6*͕ੜ·Εͨ
ͨΓલ͕ͩ ΈΜͳͰᎍΜͩՌ ೲಘײ͕͍͢͝
༷ ˣ σβΠϯ ˣ ࣮ݱੑ ˣ ࣮͊͞ σβΠφʔ σβΠφʔ σβΠφʔ
σβΠφʔ ΤϯδχΞ ΤϯδχΞ ΤϯδχΞ ΤϯδχΞ
։ൃॳظಛʹ ٕज़ऀͷ࿈ܞ͕ೱ͘ ΫΦϦςΟͷߴ͍ϓϩμΫτΛ ࡞Γ্͛ΒΕΔڥͰͨ͠
ͪΐͬͱ۩ମతʹݴ͏ͱʜ
4UBUVT#BS ͋ͬͨํ͕͍͍͔
ͦΕͧΕͷཁૉ͕Կͳͷ͔ ύοͱݟͰΘ͔Βͳ͍
ࢹௌ͕ݟͮΒ͍ ൪දϘλϯ͕Α͘Θ͔ΒΜ
͜ΕͰϦϦʔε
ͪΐͬͱमਖ਼ͯ͠ݱঢ়
4LFUDIͱ1JYBUFΛΤϯδχΞʹ͢ 4LFUDI
ΤϯδχΞ͕4LFUDIΛݟ࣮ͯ
৭DPNQPOFOUTϑΝΠϧΛ࡞Γཧ
ΞΠίϯͷॻ͖ग़͠ 4LFUDIϑΝΠϧ͔Β ΤΫεϙʔτΛ࣮ߦ͠ɺ 1/(ͷ࠷దԽΛߦ͏ J046* make ios "OESPJE6* make android
͜͏͍͏ͷΛσβΠφʔ͕ ༻ҙ͠ͳཱͯͨ͘͠ ༻ҙͨ͠ํ͕ͩΖ͏͚Ͳʜ ΤϯδχΞ͞Μ͋Γ͕ͱ͏
1JYBUFΛͯ͠ ཧͷΞχϝʔγϣϯΛ࣮ͯ͠Β͏ ൪දΛ։͘ Ξχϝʔγϣϯ easeOutCubic 0.3s ˞1JYBUFͰ͢
1JYBUFͰࡉ෦·Ͱ࡞ͬͨͷͰ σβΠφʔͱΤϯδχΞͷζϨ͕΄΅ແ͔ͬͨ ˞1JYBUFͰ͢
·ͱΊ
ͱʹ͔͘νʔϜશһͰᎍΉ ϑΝΠϧͷΓऔΓॻ͖ग़ࣗ͠ಈԽ ΞχϝʔγϣϯΛܾΊ͔ͯΒΤϯδχΞʹ͢
ʜଓ͖ςΫχΧϧΫϦΤΠλʔ ͋Γ͕ͱ͏͍͟͝·ͨ͠
ʙσβΠφʔ͕ίʔυΛ৮ͬͯΈͯײͨ͜͡ͱʙ
ࣗݾհ
ాୡ 6*σβΠφʔ ໊ݹࢢཱେֶେֶӃܳज़ֶݚڀՊଔ αΠόʔΤʔδΣϯτೖࣾ ͍ΖΜͳαʔϏεͷάϥϑΟοΫ6*σβΠϯ "CFNB57Ͱ6*σβΠϯ
ݴ༿ਤؑ 1&/%3&". 1FO`T"EWFOUVSF
None
Ͳ͏ͬͯ࠷ॳͷҰาΛ౿Έग़ͨ͠ͷ͔ ʢࣗͷ߹ʣ
͕ࣗΞϓϦΛ࡞ͬͯΔ͜ͱΛΘͤΔ ςΫχΧϧΫϦΤΠλʔͱ͍͏ࣾͷ෩ ϦΞϧͳϓϩμΫτΛॏࢹ͢ΔྲྀΕ
ςΫχΧϧΫϦΤΠλʔ
6*ΞχϝʔγϣϯΤϯδχΞϦϯάʹ͚͍ͯΔʮσβΠφʔʯ ඒతηϯεσβΠϯࢥߟɺ6*Ξχϝʔγϣϯʹ͚͍ͯΔʮΤϯδχΞʯ ࠷ऴతͳΞτϓοτΛΫΦϦςΟߴ͘ɺ͔ͭࣗݾ݁Ͱߦ͑Δਓ ৗʹτϨϯυΛड͚ೖΕͯԠ༻͠ɺٕज़ͷ֞ࠜͳ͘෯͍ΞτϓοτΛग़ͤΔਓ ςΫχΧϧΫϦΤΠλʔʠҰਓଟ࠽ͳΫϦΤΠλʔʡ
σβΠφʔ͚Swiftݚम
ΤϯδχΞ͚σβΠϯݚम
IUUQTEFWFMPQFSTDZCFSBHFOUDPKQCMPHBSDIJWFT
"CFNBͰ৮ͬͯݟ͍ͨͳʙ
ίʔυ৮Γ͍ͨͰ͢ʂ ࣗ༝ʹ͍͍ͬͯΑ "OESPJEͷ͍͢͝ਓ
"OESPJE4UVEJPͰ 9.-Λ͍͡Δ Before After
9DPEFʹΑΔ ಈ͖ͷඍमਖ਼
4VCMJNF5FYUͰ ϨΠΞτௐ
"UPNJD%FTJHOͰ ίϯϙʔωϯτཧ
(JU)VCΛ͏
ίϐʔͯ͠࡞ۀ ίϐʔͯ͠࡞ۀ ݟ ͯ Β ͬͯ ্ ॻ ͖
OK! ݟͯΒ্ͬͯॻ͖ OK! ϓϩάϥϜWFS ϓϩάϥϜWFS ϓϩάϥϜWFS ػೳ" ϓϩάϥϜWFS ػೳ#
͜͜·ͰσβΠφʔ͕ ϓϩμΫτΛमਖ਼ͨ͠
࠷ۙϞοΫΛ࡞ͬͨ
None
ͬͯΈͨײ
Α͔ͬͨ͜ͱ ΞϓϦͷษڧʹͳΔ ΤϯδχΞ͞ΜʹཔΉ৺͕ۤ͠͞ͳ͍ ΫΦϦςΟͷվળαΠΫϧ͕ૣ͍
վળ λεΫͱ͖ͯͪ͠Μͱ࣌ؒΛͱΔ͖
·ͱΊ
ָ͍͠ ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
4LFUDIϓϥάΠϯ 'POU'JOEFS