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
4.8k
デザイナーとエンジニアの境界線
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.6k
AbemaTVのデザイナーが語るUI実装の舞台裏
ukn530
0
240
デザイナーによるAtomic Designの実践〜導入編・運用編〜
ukn530
9
3.1k
Other Decks in Design
See All in Design
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
820
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
300
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
700
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
890
Slip N Slime - Character Design Ideation
thebogheart
0
310
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k
Карта процесса-опыта. Презентация метода
ashapiro
0
330
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.4k
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
410
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.1k
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
460
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
350
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5k
We Have a Design System, Now What?
morganepeng
50
7.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Writing Fast Ruby
sferik
627
61k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Site-Speed That Sticks
csswizardry
0
23
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
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