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
エンジニアも知れば幸せなCSS基礎
Search
Kazuyoshi Goto
December 01, 2017
Design
1
95
エンジニアも知れば幸せなCSS基礎
TOWN BASH 2017/11 公開
https://town.connpass.com/event/71098/
Kazuyoshi Goto
December 01, 2017
Tweet
Share
More Decks by Kazuyoshi Goto
See All by Kazuyoshi Goto
成功体験を伝えよう。
kazuyoshigoto
0
73
エンジニアこそ知っておきたいUX思考
kazuyoshigoto
1
610
Twitchと連動したMastodonのBotを作った
kazuyoshigoto
0
240
スマホのセンサーをJavaScriptで遊ぶ
kazuyoshigoto
0
420
ノンエンジニアのMastodon手探り構築記
kazuyoshigoto
0
100
Uploaded Webレイアウトの歴史と新時代「Grid」
kazuyoshigoto
0
130
InstagramとWordPressを軸に越境サイトを作った話
kazuyoshigoto
0
150
モバイル表示を超速にする「AMP」を試してみた
kazuyoshigoto
0
150
PSVR未だ買えないのでついカッとなって作ることを続けた話
kazuyoshigoto
1
200
Other Decks in Design
See All in Design
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.8k
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
300
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
250
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
610
デザイナー向けフライル説明資料
toshiblues
0
120
What makes a great Director?
_limex_
0
210
Installing and Running decksh/pdfdeck
ajstarks
1
840
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
800
Findyのプロデチームの 歩みとこれから
satty9556
0
260
Карта реализации историй. Технология осмысленной работы с детальными требованиями
ashapiro
0
110
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
The Cult of Friendly URLs
andyhume
79
6.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Site-Speed That Sticks
csswizardry
10
810
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
A better future with KSS
kneath
239
17k
Navigating Team Friction
lara
189
15k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Automating Front-end Workflow
addyosmani
1370
200k
Transcript
ΤϯδχΞΕͤͳ $44جૅ ޙ౻ྑ
ࣗݾհ ޙ౻ྑ $*ࣄۀ෦ ,B[VZPTIJ(PUP
ࠓճͷର 8FCσβΠϯɾϑϩϯτʹڵຯͷ͋Δਓ ϑϩϯτ͔ΒΜ͚Ͳ৮ΔՄೳੑͷ͋Δਓ ࣮$44ΛงғؾͰίϐϖͯ͠Δਓ
$44ͱ
$BTDBEJOH4UZMF4IFFUT ΧεέʔςΟϯάελΠϧγʔτ Σϒϖʔδͷݟӫ͑Λ੍ޚ͢Δݴޠɻ )5.-ͱซͤͯΘΕΔɻ
ͳͥ$44Λ͏ͷ͔ )5.-ͷΈͰଟগݟӫ͑Λ੍ޚͰ͖Δ͕ɺ ϝϯςφϯεੑ͕͍͘ճ͠ޮ͔ͳ͍ɻ ·ͨ)5.-ຊདྷͷจॻߏΛଛͳ͏ͨΊɺ $44Λ͏ɻ
$44ͷه๏
Q\GPOUTJ[FQY^ ʲηϨΫλʔʳ ελΠϧΛద༻ͤ͞Δରɻ ྫQλάͯ͢Λରʹ͢Δɻ ʲϓϩύςΟʳ ద༻͢ΔελΠϧͷ༰ɻ ྫϑΥϯταΠζΛQYʹ͢Δɻ
Q\ GPOUTJ[FQY NBSHJOQY DPMPS ^ ϓϩύςΟෳॻ͚Δɻ ϓϩύςΟؒηϛίϩϯ Ͱ۠Δɻ
ηϨΫλʔͷछྨ
)5.- Q\DPMPSG^ EJW\DPMPSG^ Q EJW\GPOUXFJHIUCPME^ Q͍ଠࣈQ EJW੨͍ଠࣈEJW ηϨΫλʔΛΧϯϚ Ͱ۠Δͱ ෳͷରʹಉ͡ελΠϧΛద༻Ͱ͖Δɻ
֊Խ ΧεέʔσΟϯά VMMJ\DPMPSG^ PMMJ\DPMPSG^ VM MJVMҎԼͷMJ͍ࣈMJ VM PM MJPMҎԼͷMJ੨͍ࣈMJ PM
ηϨΫλʔΛεϖʔεͰ۠Γ࿈ͶΔͱ ରΛߜΕΔɻʢΧεέʔσΟϯάʣ
DMBTT SFE\DPMPSG^ EJWCMVF\DPMPSG^ QDMBTTSFE ΫϥεSFEͰࣈ Q EJWDMBTTCMVF EJWʹΫϥεCMVFͰ੨ࣈ Q QDMBTTCMVF
ԿมΘΒͳ͍Αɻ TQBO EJWλάʹΫϥεCMVFΛ༩ͨ࣌͠ʹ ελΠϧΛద༻͢Δɻ υοτ ͱ͖ͳ໊લͰ ελΠϧΛఆٛͰ͖Δɻ
*%ʢඇਪʣ JEOBNF\DPMPS^ QJEJEOBNF άϨʔͷࣈʹͳΔΑɻ Q )5.-ͷ্༷ɺ*%ϖʔδʹ͔ͭ͑͠ͳ͍ɻ Ϋϥεͱར༻ײมΘΒͳ͍͕൚༻ੑ͕͘ɺ*%+BWB4DSJQUͰѻ͏͜ͱ ଟ͍ͨΊɺׯবΛආ͚ΔҙຯͰ$44ΫϥεͷΈ͏͜ͱ͕·͍͠ɻ γϟʔϓ
ͱ͖ͳ໊લͰ ελΠϧΛఆٛͰ͖Δɻ
ಛघͳηϨΫλʔ
YIPWFSʢϚεΦϯʣ BIPWFS\DPMPSG^ BISFG ΧʔιϧͤΔͱ͘ͳΔΑ B
Y ZʢYͱྡ͢ΔZʣ I Q\DPMPSG^ IλΠτϧI Q͍จࣈQ Qී௨ͷจࣈQ
YZʢYԼͷZʣ EJWQ\DPMPSG^ Qී௨ͷจࣈQ EJW Q͍จࣈQ Q͍จࣈQ TFDUJPO Qී௨ͷจࣈQ TFDUJPO EJW
YdZʢYͷޙͷZʣ IdQ\DPMPSG^ IλΠτϧI Qී௨ͷจࣈQ Qී௨ͷจࣈQ Iݟग़͠I Q͍จࣈQ Q͍จࣈQ
YpSTUDIJMEʢ࠷ॳͷཁૉʣ QpSTUDIJME\DPMPSG^ Q͍จࣈQ Qී௨ͷจࣈQ EJW Q͍จࣈQ Qී௨ͷจࣈQ EJW
YMBTUDIJMEʢ࠷ޙͷཁૉʣ MJMTUDIJME\DPMPSG^ VM MJී௨ͷจࣈMJ MJී௨ͷจࣈMJ MJ͍จࣈMJ VM PM MJී௨ͷจࣈMJ MJී௨ͷจࣈMJ
MJ͍จࣈMJ PM
YpSTUMFUUFSʢ࠷ॳͷҰจࣈʣ QpSTUMFUUFS\DPMPSG^ Q͍จࣈQ Q͍จࣈQ
·ͩෳࡶͳͷ͋Γɺ ηϨΫλʔԞ͕ਂ͍ɻ
$44ͷద༻ํ๏ छྨ
)5.-λάʹॻ͘ ϋʔυίʔσΟϯά/( Ұ࣌తʹදࣔΛ੍ޚ͢Δ߹ʹ +BWB4DSJQUͰ%0.Λૢ࡞ͯ͠ ͏͜ͱ͕ଟ͍ɻ QTUZMFDPMPSG ͍ࣈʹͳΔΑɻ Q
TUZMFλάʹॻ͘ ϋʔυίʔσΟϯάඇਪɻ ͦͷϖʔδ͚ͩͰద༻͍ͤͨ͞ ελΠϧ͕͋Δ࣌ʹ͏ɻ TUZMF SFE\DPMPSG^ CMVF\DPMPSG^ TUZMF QDMBTTSFEࣈQ QDMBTTCMVF੨ࣈQ
˞ಛఆ݅Ͱڀۃతʹ͜Ε͕ϕετͳ߹
DTTϑΝΠϧΛಡΈࠐΉ جຊͷద༻ํ๏ɻ )5.-ͱ$44ͷཧΛ͠ɺ αΠτશମͷελΠϧΛҰݩ ཧͰ͖ΔͨΊɻ MJOLSFMTUZMFTIFFUISFGTUZMFDTT
$44ͷཧղࠩͰΑ͋͘Δ൵ܶ )5.-ʹΛͬͯ͠·͏ मਖ਼͞Εͨ$44ͷॴ͕͔Β ͣमਖ਼͕େมˍෛ࠴Խ ΤϯδχΞ͕)5.-͞ΘΕΔঢ়گ͕ओͳݪҼɻ Engineer Designer
$44ϒϥβ͝ͱʹ ղऍ͕ҧ͏
ԕ͍ੲɺང͔൴ํͷۜՏܥͰʜ ۜՏதͷδΣμΠ σβΠφʔ ͕ ఇࠃ܉ .JDSPTPGU ͷ։ൃͨ͠ σεɾελʔ *& ͱಆ͍ͬͯͨɻ
*&ͷѱຐͷΑ͏ͳ$44όά σβΠφʔୡΛ͍ۤͷఈʹ ୟ͖མͱͨ͠ͷͩͬͨʜ
σΟεϓϨΠղऍͷࠩ ༨നͷղऍͷࠩ จࣈͷॲཧͷࠩ ͑ΔηϨΫλͷࠩ ͑ΔϓϩύςΟͷࠩ ϑΥʔϜύʔπͷ σβΠϯͷࠩ ͦͦະରԠ όά FUD
͜Μͳ͚࣌͋ͬͨͲɺ ݱ͍ͩͿվળ͞Εͨɻ
༏ੜ ਖ਼͘͠ݴ͏͜ͱΛฉ͍ͯ͘ΕΔɻ ࣇ ੲΑΓϚγ͚ͩͲϠϯνϟͳɻ
ΫϩεϒϥβνΣοΫ͕ඞཁ
ݱͷ$44Ͱ ٻΊΒΕΔ͜ͱ
ʲ࠷ॏཁʳϨεϙϯγϒରԠ ಉҰ)5.-ͷΣϒϖʔδΛɺσΟεϓϨΠαΠζʹ ΑͬͯϨΠΞτΛ࠷దԽͤ͞Δٕज़ɻ
!NFEJBTDSFFOBOE NBYXJEUIQY \ QYҎԼͷ࣌ʹద༻͞ΕΔελΠϧ CPEZ\ GPOUTJ[FQY ^ DMBTTOBNF\ NBSHJOQY ^
^
$44Ξχϝʔγϣϯ ০ͷΈͳΒͣɺ6*ͷΠϯλϥΫγϣϯ Ԡ ʹར༻ ͢Δ͜ͱͰརศੑΛߴΊΔɻ
DMBTTOBNF\ BOJNBUJPOCMJOLTJOpOJUF ^ !LFZGSBNFTCMJOL\ \PQBDJUZ^ \PQBDJUZ^ \PQBDJUZ^ ^
͜͏ͨ͠දࣔͷ੍ޚ +BWB4DSJQUΛ͏ΑΓૣ͍ͯܰ͘ɻ
͞Βʹ
$44% Ґஔ੍ޚͱΞχϝʔγϣϯΛۦ͠$44Ͱ%ۭؒΛ࡞Δٕ๏ɻ ࣮༻ੑʜ·͋ඍົͱ͍͏͔ʜ
$44͚ͩͰग़དྷΔ͜ͱଟ͍ɻ +BWB4DSJQU͏લʹࢼͯ͠ΈΑ͏ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ