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
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
2
2.5k
TUNAG BOOK 2024
stmn
0
330
ZKK_001.pdf
nicholaspegu
0
1.4k
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
360
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
210
Personal Story Sequence(WIP) - Younghoon Park
elrns88
0
260
Slip N Slime - Character Design Ideation
thebogheart
0
310
我做了一個詐騙網站...嗎?
crboy
1
150
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.3k
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
2
2k
ito aya|Portfolio2409
itoaya116
0
260
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
440
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Optimizing for Happiness
mojombo
376
70k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Statistics for Hackers
jakevdp
796
220k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Become a Pro
speakerdeck
PRO
25
5k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Site-Speed That Sticks
csswizardry
0
28
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