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
83
エンジニアも知れば幸せな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
67
エンジニアこそ知っておきたいUX思考
kazuyoshigoto
1
540
Twitchと連動したMastodonのBotを作った
kazuyoshigoto
0
220
スマホのセンサーをJavaScriptで遊ぶ
kazuyoshigoto
0
420
ノンエンジニアのMastodon手探り構築記
kazuyoshigoto
0
97
Uploaded Webレイアウトの歴史と新時代「Grid」
kazuyoshigoto
0
120
InstagramとWordPressを軸に越境サイトを作った話
kazuyoshigoto
0
130
モバイル表示を超速にする「AMP」を試してみた
kazuyoshigoto
0
150
PSVR未だ買えないのでついカッとなって作ることを続けた話
kazuyoshigoto
1
190
Other Decks in Design
See All in Design
Первая беседа о Карте реализации историй
ashapiro
0
260
Rebuilding Stamen’s iconic map styles with Stadia Maps
almccon
0
220
PdMを始めたUIデザイナーのリアルな課題
muture
0
780
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.3k
MLP_Cleanup_Olga
olgastoryboard
0
130
portfolio
amitnk
1
110
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
600
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
110
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
0
410
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
0
890
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
6
1.5k
最速で価値を届けるUXリサーチ
degudegu2510
5
1.2k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
243
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
4.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
Designing the Hi-DPI Web
ddemaree
280
34k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
KATA
mclloyd
29
13k
Producing Creativity
orderedlist
PRO
341
39k
Automating Front-end Workflow
addyosmani
1365
200k
How to Ace a Technical Interview
jacobian
275
23k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
We Have a Design System, Now What?
morganepeng
50
7.2k
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͏લʹࢼͯ͠ΈΑ͏ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ