Slide 1
Slide 1 text
$44ϑϨʔϜϫʔΫΛͭ͘Ζ͏ʂ
'30/5&/%$0/'&3&/$&
Slide 2
Slide 2 text
ϞϯΩʔϨϯν
ΩλδϚλΧγ !JOD
ϑϦʔϥϯε
8FCσβΠφʔϓϩάϥϚʔ
࡚
8PSE1SFTTϓϥάΠϯ
.881'PSNɺ4NBSU$VTUPN'JFMET
8PSE1SFTTςʔϚ
)BCBLJSJɺ.JNJ[VLV
4BTT4UZMVT$44ϑϨʔϜϫʔΫ
#BTJT
Slide 3
Slide 3 text
ᶃ $44ϑϨʔϜϫʔΫͷํੑΛ͖ΊΔ
ᶄ ༻͢ΔϝλݴޠΛ͖ΊΔ
ᶅ $44ઃܭ໋໊نଇΛ͖ΊΔ
ᶆ +4·ͰΧόʔ͢Δͷ͔͠ͳ͍ͷ͔
ᶇ Ͳ͜·Ͱύοέʔδʹ;͘ΊΔ͔
Slide 4
Slide 4 text
ᶃ $44ϑϨʔϜϫʔΫͷํੑΛ͖ΊΔ
ᶄ ༻͢ΔϝλݴޠΛ͖ΊΔ
ᶅ $44ઃܭ໋໊نଇΛ͖ΊΔ
ᶆ +4·ͰΧόʔ͢Δͷ͔͠ͳ͍ͷ͔
ᶇ Ͳ͜·Ͱύοέʔδʹ;͘ΊΔ͔
Slide 5
Slide 5 text
ᶃ $44ϑϨʔϜϫʔΫΛͭ͘Δʹ͍ͨͬͨܦҢ
ᶄ $44ϑϨʔϜϫʔΫΛͭ͘Δ͜ͱʹΑͬͯ
ղܾ͔ͨͬͨ͜͠ͱ
ᶅ Ͳ͏͍͏ରࡦΛ͔ͨ͠
ᶆ $44ϑϨʔϜϫʔΫΛͭͬͨ͘͜ͱʹΑͬͯ
Ͳ͏ͳ͔ͬͨ
Slide 6
Slide 6 text
$44ϑϨʔϜϫʔΫΛ
ͭ͘Δʹ͍ͨͬͨܦҢ
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
ɾશ͘ಉ͡෦
ɾগ͠ҧ͏͚Ͳ΄ͱΜͲಉ͡෦
ɾσβΠϯશવҧ͏͚Ͳେͱͯ͠ࣅ͍ͯΔ෦
ͦͷΑ͏ͳ෦Λநग़͍ͯ͠·ΘͤΔΑ͏ʹ൚༻Խ
$44ϑϨʔϜϫʔΫ
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
$44ϑϨʔϜϫʔΫΛͭ͘Δ
͜ͱʹΑͬͯղܾ͔ͨͬͨ͜͠ͱ
Slide 12
Slide 12 text
্ॻ͖ͭΒ͍
Slide 13
Slide 13 text
ࣗͷχʔζʹϚονͨ͠
$44ϑϨʔϜϫʔΫΛͭ͘Γ͍ͨ
Slide 14
Slide 14 text
8FC੍࡞ձࣾ
γεςϜձࣾ
σβΠφʔ
ϓϩάϥϚʔ
͞·͟·ͳ
σβΠϯςΠετ
ίϯϙʔωϯτ
දݱ
ίʔσΟϯά
ͲͷαΠτʹʮϘλϯʯ͋Δ͚Ͳ
ܗςΠετશવ͕ͪ͏ͳ
σϑΥϧτͷ০͕͋ͬͯͦͷ··
͑Δ͜ͱͳ͍͠ଧͪফ͢ͷετϨεͩͳ͊͊
Slide 15
Slide 15 text
8FC੍࡞ձࣾ
γεςϜձࣾ
σβΠφʔ
ϓϩάϥϚʔ
͞·͟·ͳ
σβΠϯςΠετ
ίϯϙʔωϯτ
දݱ
ίʔσΟϯά
০͕ͳ͍ࠎΈ͚ͩͷ$44ϑϨʔϜϫʔΫ͕΄͍͠
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
ετϨεΛײ͍ͯͨ͜͡ͱ
্ॻ͖ͭΒ͍
14%Ͱʮ༨നαΠζΛ͔Δʯͱ͍͏࡞ۀ
qPBUϕʔεάϦουͲ͏ʹ͔ͳΒΜ͔
ʮ*&ɾͰ͋ΔఔϨΠΞτͨͬͯͶʙʯ
ׂάϦου͚ͩͰʜ
Slide 18
Slide 18 text
Ͳ͏͍͏ରࡦΛ͔ͨ͠
Slide 19
Slide 19 text
্ॻ͖ͭΒ͍
ղܾ͍ͨ͜͠ͱ
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
ίϯϙʔωϯτͷجຊઃܭ
w ͍͠ͳ͍৭ͷόϦΤʔγϣϯͳ͠
w ϗόʔ࣌ͷελΠϧͳ͠
w ϑΥϯταΠζͳͲίϯϙʔωϯτཱ͕͢ΔͨΊʹ
ͳͯ͘େৎͳͷະࢦఆ
Slide 23
Slide 23 text
·ͩΓͳ͍ʜ
Slide 24
Slide 24 text
αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯΔ߹
#BTJTͷσϑΥϧτͷϘλϯ
্ॻ͖ͯͦ͠ͷαΠτͷ
σϑΥϧτͷϘλϯσβΠϯʹ
ಠࣗʹ֦ு
ಠࣗʹ֦ு
@DCUO
@DCUO
@DCUOGPP @DCUOCBS
Slide 25
Slide 25 text
αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯͳ͍ʜ
#BTJTͷσϑΥϧτͷϘλϯ
ͲΕ͕σϑΥϧτͳΜͩʜ
@DCUO
NPEJpFSͰෆՄೳʜ
Slide 26
Slide 26 text
αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯͳ͍ʜ
#BTJTͷσϑΥϧτͷϘλϯ
ίϯϙʔωϯτΛΘ͚͍ͨ
@DCUO
DQSJNBSZCUO DEBOHFSCUO
DDBVUJPOCUO
DTFOECUO
DMPHJOCUO
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
'-0$44
w ຊจϨϕϧ
w ຊจϨϕϧ
w ຊจϨϕϧ
w ຊจϨϕϧ
w ຊจϨϕϧ
! foundation/ # normalizeɺϕʔεελΠϧɺϛοΫεΠϯ
! layout/ # ϔομʔɾϑολʔϨΠΞτ༻ελΠϧ
" object/ʊ
! component/ # ίϯϙʔωϯτ༻ͷελΠϧ
! project/ # ϓϩδΣΫτݻ༗ͷελΠϧ
" utility/ # ϔϧύʔɾௐ༻ελΠϧ
Slide 29
Slide 29 text
#BTJTʜ
! core/ # BasisΛߏ͢ΔίΞ෦
# ! function/ # ؔ
# ! mixin/ # ϛοΫεΠϯ
# " abstract/ # ίϯϙʔωϯτΛߏ͢ΔϛοΫεΠϯ
! foundation/ # normalizeɺϕʔεελΠϧ
! layout/ʊ
" object/ʊ
! component/ # ίϯϙʔωϯτ༻ͷελΠϧ
! project/ʊ
" utility/ # ϔϧύʔɾௐ༻ελΠϧ
Slide 30
Slide 30 text
#BTJTͷ࣋ͭDMBTT͕͍Βͳ͍Ҋ݅ͷ߹
w DPSF͚ͩ!JNQPSU͢ΕϕʔεͷελΠϧίϯϙʔω
ϯτͷελΠϧҰు͖ग़͞Εͣແବ͕গͳ͍
w BCTUSBDUϨΠϠʔͷNJYJOΛ۩Խͯ͠ඞཁͳίʔυΛ
͚͢ܗʹ͢ΕΦϦδφϧͷίϯϙʔωϯτΛͭ
͘Δͷ؆୯
Slide 31
Slide 31 text
BCTUSBDUͷ۩Խ
.my-btn {
@include _btn((
border: null,
));
&--primary { … }
&--secondary { … }
&--block { … }
}
Slide 32
Slide 32 text
BCTUSBDUͷ۩Խ
.c-send-btn {
@include _btn();
…
}
.c-caution-btn {
@include _btn();
…
}
.c-login-btn {
@include _btn();
…
}
Slide 33
Slide 33 text
14%Ͱʮ༨നαΠζΛ͔Δʯ
ͱ͍͏࡞ۀ
ղܾ͍ͨ͜͠ͱ
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
MJOFIFJHIU GPOUTJ[F IBMGMFBEJOH
IBMGMFBEJOH
Slide 37
Slide 37 text
14%Ͱʮ༨നαΠζΛ͔Δʯͱ͍͏࡞ۀ
w ਖ਼֬ʹ͔ΔͨΊʹGPOUTJ[FͱMJOFIFJHIU͔Βߦؒ
͕ԿQYʹͳΔ͔ܭࢉ͠ɺ
w ͦͷߦؒΛҾ͍ͯ༨നαΠζΛಋ͖ग़͞ͳ͚Εͳ
Βͳ͍
w MJOFIFJHIUࣗମ૬ରͰॻͨ͘Ίʹܭࢉͯ͠ಋ͖ͩ
͞ͳ͚ΕͳΒͳ͍ͷͰΊΜͲ͍͘͞
w ͦͯͦ͠ΕΒͷ࡞ۀΛશՕॴͰΒͳ͍ͱ͍͚ͳ͍
Slide 38
Slide 38 text
MJOFIFJHIU༨നউखʹ
ྑ͍ײ͡ʹͳͬͯ΄͍͠
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
w ҰݴͰ͍͏ͱMJOFIFJHIUͱ༨നͷαΠζΛ౷Ұ͠ɺഒ
ͰΛઃఆ͍ͯ͘͜͠ͱͰόϥϯεΛ͑Δ
w ྫ͑QYɺQYɺQYɺQYͷΑ͏ͳ۠Γ
w ͦΕʹ͋ΘͤͯจࣈαΠζഒͰઃఆ
w ͨͩɺຊޠͩͱจࣈ͕େ͖͘ͳΓ͗ͨ͢Γɺͦͦ
ͦΜͳσβΠϯ͕͍ͭ͘ΔͱݶΒͳ͍
Slide 41
Slide 41 text
จࣈαΠζΛج४ʹউखʹܭࢉͤ͞Δʂ
@function _vertical-rhythm($font-size, $coefficient: 1) {
$between-lines : _strip-unit(_rem2px($_between-lines));
$base-line-height: _strip-unit(_rem2px($_base-line-height));
$base-font-size : _strip-unit(_rem2px($_base-font-size));
$font-size : _strip-unit($font-size);
$line-height: $font-size + ($between-lines * $coefficient);
@if ($line-height < $font-size + ($between-lines * 2)) {
@return _vertical-rhythm($font-size, ($coefficient + 1));
} @else {
@if ($font-size % $base-font-size == 0 and $font-size > $base-font-size) {
@return $line-height - ($between-lines / 2);
}
@return $line-height;
}
}
Slide 42
Slide 42 text
จࣈαΠζΛج४ʹউखʹܭࢉͤ͞Δʂ
/* margin */
@include _margin-bottom(1);
/* padding */
@include _padding(.5);
/* จࣈαΠζͱͦΕʹԠͨ͡࠷దͳline-height */
@include _font-size-line-height(16px);
Slide 43
Slide 43 text
͍͍ɺ݁ہ͔Βͳ͍ΜͩͬͨΒ
ҧ͏ʹͳͬͯͳ͍ʜʁ
Slide 44
Slide 44 text
qPBUϕʔεάϦου
Ͳ͏ʹ͔ͳΒΜ͔
ղܾ͍ͨ͜͠ͱ
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
'MFYJCMFCPYMBZPVU.PEVMF
Slide 48
Slide 48 text
'MFYJCMF#PY-BZPVU.PEVMF
w ͍ΘΏΔqFYCPY
w DMFBSෆཁ
w ্͖ɺதԝἧ͑ɺԼ͖ɺࠨӈۉׂɺࢠཁૉͷ
ߴ͞౷ҰͳͲɺॊೈͳϨΠΞτ͕ɺ؆୯ͳϓϩύςΟ
ͷΈ߹ΘͤͰՄೳ
Slide 49
Slide 49 text
ʮ*&ɾͰ͋Δఔ
ϨΠΞτͨͬͯͶʙʯ
ղܾ͍ͨ͜͠ͱ
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
'MFYJCMF#PY-BZPVU.PEVMF
w *&BVUPQSFpYFSΛ͑ͦΕͳΓʹ͔ͭ͑Δ
w *&ҎԼશʹະରԠͳͷͰqFYCPYશ͔ͭ͑͘ͳ͍
Slide 52
Slide 52 text
*&ɻɻɻ
Slide 53
Slide 53 text
ίϯσΟγϣφϧίϝϯτ
EJTQMBZJOMJOFCPY
UBCMF
✕
Slide 54
Slide 54 text
ίϯσΟγϣφϧίϝϯτͰ*&༻$44ΛಡΈࠐΉ
Slide 55
Slide 55 text
EJTQMBZJOMJOFCMPDL
UBCMFͰ্ॻ͖
w EJTQMBZqFYͷࢦఆΛ*&ҎԼͰEJTQMBZJOMJOFCPY
UBCMF
Ͱ্ॻ͖
w தԝἧ͑ɺԼἧ͑ɺࠨӈۉׂɺٯॱͷϨΠΞτͳͲ
EJTQMBZJOMJOFCMPDLͰ্ॻ͖ͤ͞Δ͜ͱͰରԠ
w ࢠཁૉͷߴ͞ἧ͑ɺΧϥϜαΠζͷࣗಈۉҰԽͳͲ
EJTQMBZUBCMFͰ্ॻ͖ͤ͞Δ͜ͱͰରԠ
w qFYCPYͷશͯΛ࠶ݱ͢Δ͜ͱͰ͖ͳ͍͕ɺରԠՄೳൣғ
ΛΘ্͔ͬͨͰ͑͋Δఔ࠶ݱͰ͖Δ
Slide 56
Slide 56 text
ׂάϦου͚ͩͰʜ
ղܾ͍ͨ͜͠ͱ
Slide 57
Slide 57 text
w ࣮ଆ͕ޮԽͷͨΊʹ#PPUTUSBQΛউखʹ͍ͬͯΔ
ͱσβΠφʔ͞Μ͕άϦουγεςϜΛҙࣝͤͣʹσβ
Πϯ͍ͯ͠Δ͜ͱී௨ʹ͋Γ͑Δ
w ͠ҙࣝͯ͠Β͍ͬͯͨͱͯ͠ίϯςϯπʹΑͬͯ
ʮ͚ͦͩ͜ΧϥϜʹ͍ͨ͠ʯΈ͍ͨͳ͜ͱ͋Γ
͑Δ
w ࣮తʹάϦουͷʢ#PPUTUSBQͳΒʣ͕ݻఆ
͞Ε͍ͯͳ͍΄͏͕Ԡ༻͕͖͖͍͢
Slide 58
Slide 58 text
͕ՄมͳάϦουγεςϜΛ
ͭ͘Ε͑͑Μ
Slide 59
Slide 59 text
#BTJTͷάϦουγεςϜ
Slide 60
Slide 60 text
#BTJTͷάϦουγεςϜ
࣮ࡍͷαΠζ ΧϥϜαΠζʸߦ͋ͨΓͷΧϥϜ
͜ͷྫͷ߹ͩͱɺ
Slide 61
Slide 61 text
#BTJTΛͬͨ͜ͱʹΑͬͯ
Ͳ͏ͳ͔ͬͨ
Slide 62
Slide 62 text
w $44ϑϨʔϜϫʔΫͦͷαΠτ͚ͩͳ͘৭ʑͳαΠ
τͰ͍·Θ͢ͷͳͷͰɺͲ͏ઃܭ͢Ε൚༻తʹ
͍·ΘͤΔΑ͏ʹͳΔͷ͔Λڧ͘ҙࣝ͢ΔΑ͏ʹͳͬ
ͨ
w ͦ͏͍͏ҙ͚͕ࣝ͞Εͨ͜ͱͰ$44ϑϨʔϜϫʔΫ֎
ͷ$44Λॻ͘ͱ͖ͷޮྑ͘ͳͬͨ
w 4BTTΛωετ͙Β͍ʹ͔͍ͬͯ͠ͳ͔͚ͬͨͲɺม
NJYJOΛͲ͏͑ͬͱޮతʹͳΔͷ͔ҙࣝ
Ͱ͖ΔΑ͏ʹͳͬͨ
Slide 63
Slide 63 text
ίʔσΟϯά࡞ۀ͕
ָ͘͠ͳͬͨ
Slide 64
Slide 64 text
·ͱΊ
w طଘͷ$44ϑϨʔϜϫʔΫʹͬ͘͠Γ͖͍ͯͳ͍ͷͰ͋ΕɺͲ͏
͍͏ͱ͜Ζʹͬ͘͠Γ͖͍ͯͳ͍ͷ͔ɺͦΕΛղܾ͢ΔʹͲ͏͠
ͨΒྑ͍ͷ͔Λཧͯ͠ɺࣗʹͽͬͨΓ·ΔΦϦδφϧͷ$44
ϑϨʔϜϫʔΫΛͭͬͯ͘Έ·͠ΐ͏
w ࠓճ͓ͨ͠ࢪࡦ͋͘·ͰͷχʔζɾϫʔΫϑϩʔʹ࠷దԽ͞
ΕͨͷͰ͢
w ࠷దղΈͳ͞ΜͷχʔζɾϫʔΫϑϩʔʹΑͬͯมΘΔͣͰ͢
w ͭͬͨ͘Βͥͻ(JU)VCͰެ։ͯ͠ݟΛγΣΞ͍ͯͩ͘͠͞ɻε
λʔ͚ͭ·͢