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.9k
デザイナーとエンジニアの境界線
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.7k
AbemaTVのデザイナーが語るUI実装の舞台裏
ukn530
0
250
デザイナーによるAtomic Designの実践〜導入編・運用編〜
ukn530
9
3.1k
Other Decks in Design
See All in Design
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
590
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
300
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.1k
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
260
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
520
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
240
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.8k
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
1k
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
Tableau曲線表現講座(2024.11.21)
cielo1985
0
270
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Building Applications with DynamoDB
mza
93
6.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
Side Projects
sachag
452
42k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
What's in a price? How to price your products and services
michaelherold
244
12k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
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