Component-based Design for Ikyu users

by Yu I.

Slide 1

Slide 1 text

Ϣʔβʔ͕ײ֮తʹ࢖͑ΔαʔϏεΛ໨ࢦ͢ ʮҰٳ.comϨετϥϯʯ ίϯϙʔωϯτࢦ޲։ൃͷࠓ

Slide 2

Slide 2 text

https://restaurant.ikyu.com/

Slide 3

Slide 3 text

このサービスで予約したお店なら間違いない!! https://restaurant.ikyu.com/ Ұٳ.comϨετϥϯ ߴ੒௕Λଓ͚ΔϑΝΠϯμΠχϯάͷ༧໿αʔϏε 2006 Released

Slide 4

Slide 4 text

ࠓ೔ͷ͸ͳ͠ 1 ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ 2 Atomic Design ͔Β࠾༻ͨ͠Τοηϯε 3 νʔϜσβΠφʔ͕໨ࢦ͢σβΠϯ 4 ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 5

Slide 5 text

ίϯϙʔωϯτࢦ޲ઃܭ ಋೖͷετʔϦʔ

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

ͳΜ͔஗͍ɾɾɾ ݕࡧΛμΠφϛοΫʹʂ

Slide 8

Slide 8 text

ͳΜ͔஗͍ɾɾɾ ݕࡧΛμΠφϛοΫʹʂ ͪΌΜͱͨ͠SPAʹ͠Α͏ʂ

Slide 9

Slide 9 text

ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 10

Slide 10 text

Nuxt.js ʹΑΔϑϩϯτΤϯυج൫ͷ ࡮৽Λελʔτ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 11

Slide 11 text

Component-based design ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 12

Slide 12 text

Ұٳ.com Ϩετϥϯʹ͓͚Δ “ίϯϙʔωϯτ” ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 13

Slide 13 text

ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 14

Slide 14 text

ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ 1 σʔλɺςϯϓϨʔτɺϩδοΫɺελΠϧɺ ɹͦΕͧΕؔ࿈ੑ͕ਂ͍΋ͷಉ࢜ΛϞδϡʔϧԽ 2 ϑΝΠϧλΠϓʹΑΔॎׂΓͰ͸ͳ͘ɺ ɹؔ࿈ੑʹΑΔϑΝΠϧλΠϓԣஅͷ۲ࢗ͠ͰάϧʔϓԽ 3 ϑϩϯτΤϯυ࣮૷ͷ͋ΒΏΔΞηοτΛ ɹίϯϙʔωϯτͱଊ͑ͯ؅ཧ

Slide 15

Slide 15 text

͢΂ͯΛίϯϙʔωϯτͱͯ͠ ଊ͑ͨ࣌ʹු͖۷Γͱͳͬͨ ίϯϙʔωϯτͷछྨ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 16

Slide 16 text

छྨ ໾ׂ άϩʔόϧσʔλ ఆ਺ɺάϩʔόϧม਺ ܕఆٛ TypeScript Ͱఆٛͨ͠ྻڍܕ΍Ϟσϧ ڞ௨/άϩʔόϧϩδοΫ UI ίϯϙʔωϯτؒͰڞ௨Խ͍ͨ͠ɺ ύϑΥʔϚϯε্άϩʔόϧԽ͍ͨ͠ ϩδοΫ UI ίϯϙʔωϯτ ϏϡʔɺUI ͱͳΔ෦඼ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ ϓϩάϥϜ্ඞཁͳཻ౓

Slide 17

Slide 17 text

छྨ ໾ׂ άϩʔόϧσʔλ CSS ม਺ ϑΟϧλʔ CSS ϛοΫεΠϯ άϩʔόϧελΠϧ ཁૉܕηϨΫλ΁ࢦఆ͢ΔελΠϧ UI ίϯϙʔωϯτ ΫϥεηϨΫλʹର͢ΔελΠϧ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ ελΠϧ্ඞཁͳཻ౓

Slide 18

Slide 18 text

͜ΕΒΛద౰ʹϨΠϠʔԽͰ͖Δ ࢓૊Έͬͯͳ͍͔ͳʁ ϓϩάϥϜ্ ඞཁͳཻ౓ ελΠϧ্ ඞཁͳཻ౓ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 19

Slide 19 text

ITCSS Λ࠾༻ https://www.skillshare.com/classes/Modern-CSS-Writing-Better-Cleaner-More-Scalable-Code/771669373 ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 20

Slide 20 text

ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 21

Slide 21 text

Inverted Triangle (ٯࡾ֯ܗ) Ͱ ਤࣔ͞Εͨந৅ԽͷதͰ ద੾ʹϨΠϠʔԽ͍ͯ͜͠͏ ͱ͍͏ΞʔΩςΫνϟ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 22

Slide 22 text

ϨΠϠʔ ໾ׂ Settings CSS ม਺ Tools CSS ϛοΫεΠϯ Generic Ϧηοτ CSS Elements άϩʔόϧ (ཁૉܕηϨΫλʔ΁ͷ) ελΠϧ Objects OOCSS ʹݟΒΕΔ Media Object ܥ UI ίϯϙʔωϯτͷελΠϧ Components ϢʔβʔʹػೳΛఏڙ͢Δ UI ίϯϙʔωϯτͷελΠϧ Trumps ྫ֎త༻๏ͷϨΠϠʔ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 23

Slide 23 text

ϨΠϠʔ ໾ׂ Settings CSS ม਺΍ɺఆ਺ͳͲͷσʔλΛѻ͏ɻ Tools CSS ϛοΫεΠϯɺϑΟϧλʔɺ·ͨ͸όϦϡʔΦϒδΣΫτɺ DTO ͷΑ͏ͳΞϓϦέʔγϣϯ্ͷܕͱͳΔఆٛΛѻ͏ɻ Generic CSS ཁૉܕηϨΫλʔʹΑΔάϩʔόϧελΠϧఆٛɺΞϓϦέʔ γϣϯશମͰڞ௨Խ͞Εͨॲཧɺάϩʔόϧͳ෭࡞༻Λ࣋ͭϏδω εϩδοΫΛѻ͏ɻ Elements Atoms ͷΑ͏ͳϓϦϛςΟϰͳίϯϙʔωϯτΛѻ͏ɻ͜ΕҎԼͷ ϨΠϠʔͰ Vue.js SFC Λѻ͏ɻ Objects Molecules ͷΑ͏ͳΞϓϦέʔγϣϯ্ͷίϯςΩετΛؚΉίϯ ϙʔωϯτΛѻ͏ɻ Components Organisms ͷΑ͏ͳΞϓϦέʔγϣϯ্ҙຯͷ͋Δػೳ୯Ґͷίϯ ϙʔωϯτΛѻ͏ɻ Trumps ྫ֎ϨΠϠʔ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ Ұٳ.comϨετϥϯͱͯ͠ͷղऍ

Slide 24

Slide 24 text

શͯΛίϯϙʔωϯτͱଊ͑ͨ Ұٳ.com Ϩετϥϯͷߏ੒ʹ ͜ͷߟ͑Λద༻ … ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 25

Slide 25 text

Time to First Byte avg. 4.0s 0.4s First Contentful Paint avg. 5.0s 1.1s First Meaningful Paint avg. 9.5s 4.8s Time to Interactive avg. 10.0s 8.0s Good 3G ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 26

Slide 26 text

SVNTQFFEJOEFY ͷܭଌ஋ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 27

Slide 27 text

଎͘ͳͬͨʂΘʔ͍ ͔͠͠ɺ KPI ͱͯ͠ॏཁͳ CVR վળʹ͸ͭͳ͕Βͣ… ࡮৽ͷՁ஋͸Կͩͬͨͷ͔ʁ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 28

Slide 28 text

Market-oriented ʹͳΔҝͷ Product-oriented User First ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

Slide 29

Slide 29 text

• ࠶ར༻ੑɺੜ࢈ੑͷ޲্ɺείʔϓ؅ཧͳͲͷ։ൃऀϝϦοτ • αʔϏεͱϢʔβʔͷର࿩ΠϯλʔϑΣʔεҰ؏ੑڧԽͷ࢓૊ΈΛ֫ಘ • αʔϏεϒϥϯυڧԽͷ࢓૊Έ֫ಘ ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ ܧଓతͳϢʔβʔϏϦςΟվળͷ جૅΛ֫ಘ

Slide 30

Slide 30 text

Atomic Design ͔Β࠾༻ͨ͠ Τοηϯε

Slide 31

Slide 31 text

ͱ͜ΖͰ ITCSS ͡Όͳͯ͘ɺ ͦ͜͸ Atomic Design ͡Όͳ͍ͷ͔ʁ Atomic Design͔Β࠾༻ͨ͠Τοηϯε

Slide 32

Slide 32 text

Atomic Design͔Β࠾༻ͨ͠Τοηϯε

Slide 33

Slide 33 text

ॏཁͳͷ͸ɺ Atomic Design Methodology ΍ ITCSS ͷ࣋ͭϝϯλϧϞσϧɻ Atomic Design͔Β࠾༻ͨ͠Τοηϯε ϨΠϠʔߏ଄Λ࣋ͭ FLOCSS ΍ SMACSS Ͱ΍ͬͯΈͯ΋ྑ͍ͱࢥ͏

Slide 34

Slide 34 text

Atomic Design Methodology ʹ৐͔ͬΕ͹ ͏·͘෼ྨͰ͖Δ༁Ͱ͸ͳ͍ Atomic Design͔Β࠾༻ͨ͠Τοηϯε

Slide 35

Slide 35 text

ITCSS Atomic Design Settings Atoms Tools Generic Elements Objects Molecules Components Organisms Trumps Atomic Design͔Β࠾༻ͨ͠Τοηϯε

Slide 36

Slide 36 text

ITCSS Atomic Design Settings Atoms Tools Generic Elements Objects Molecules Components Organisms Trumps ITCSS ͷϨΠϠʔ໊΍ϨΠϠʔ֦ு͸ ར༻ऀଆͰࣗ༝ʹ࠶ఆٛͰ͖Δ ɹTrumps ͸։ൃ్্ͷચ࿅͞Εͯ ɹ͍ͳ͍ίϯϙʔωϯτஔ͖৔ͱͯ͠΋ศར ITCSS ͩͱ Atoms ϨΠϠʔʹ౰ͨΔ ந৅౓Λࡉ͔͘෼ྨͰ͖ͦ͏ Atomic Design͔Β࠾༻ͨ͠Τοηϯε

Slide 37

Slide 37 text

ITCSS Atomic Design Settings Atoms Tools Generic Elements Objects Molecules Components Organisms Trumps νʔϜʹඞཁͳ෼ྨΛ νʔϜͰ߹ҙΛऔΔ͜ͱ͕ॏཁ Atomic Design͔Β࠾༻ͨ͠Τοηϯε

Slide 38

Slide 38 text

UI/UX νʔϜͷσβΠφʔ͕ ໨ࢦ͢σβΠϯ

Slide 39

Slide 39 text

UI/UXνʔϜͷσβΠφʔ͕໨ࢦ͢σβΠϯ Ҋ͍݅ͬͺ͍ʂ ͋ͷҊ݅ɺ͜ͷҊ݅΋σβΠϯɺσβΠϯ Designer Designer

Slide 40

Slide 40 text

Designer Designer UI/UXνʔϜͷσβΠφʔ͕໨ࢦ͢σβΠϯ ໨ઌҊ݅΋େࣄ͚ͩͲ Ұٳ.comϨετϥϯͷσβΠϯͷ ํ޲ੑΛߟ͑Α͏ʂ

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Ұٳ.comϨετϥϯͷσβΠϯͷ ݴޠԽΛ։࢝ UI/UXνʔϜͷσβΠφʔ͕໨ࢦ͢σβΠϯ

Slide 43

Slide 43 text

ΧϥʔεΩʔϜ λΠϙάϥϑΟ ΠϯλʔϑΣʔεσβΠϯ ☐ άϦουγεςϜ ϕʔεϥΠϯ ࢄΒ͔͍ͬͯΔͷͰ੔ཧ͠Α͏ʂ UI/UXνʔϜͷσβΠφʔ͕໨ࢦ͢σβΠϯ

Slide 44

Slide 44 text

UI/UXνʔϜͷσβΠφʔ͕໨ࢦ͢σβΠϯ

Slide 45

Slide 45 text

UI/UXνʔϜͷσβΠφʔ͕໨ࢦ͢σβΠϯ σβΠφʔͷҙࢥܾఆΛ ελΠϧΨΠυԽ

Slide 46

Slide 46 text

ΧϥʔεΩʔϜ λΠϙάϥϑΟ ΠϯλʔϑΣʔεσβΠϯ ☐ άϦουγεςϜ ϕʔεϥΠϯ ΧϥʔύϨοτΛఆٛɺطଘ࣮૷ͷۙࣅ৭Λ੔ཧ౷߹ UI/UXνʔϜͷσβΠφʔ͕໨ࢦ͢σβΠϯ

Slide 47

Slide 47 text

ΧϯϓΛίϯϙʔωϯτԽ ͢Δ࣌ͷΠγϡʔ

Slide 48

Slide 48 text

ΧϥʔεΩʔϜ λΠϙάϥϑΟ ΠϯλʔϑΣʔεσβΠϯ ☐ άϦουγεςϜ ϕʔεϥΠϯ ڞ௨ͷϘλϯσβΠϯΛఆٛ ͍ͨ͠ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 49

Slide 49 text

σβΠϯΧϯϓΛ ࡞ͬͯ΋Βͬͨ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 50

Slide 50 text

Ͳ͏΍ͬͯίϯϙʔωϯτԽ͢Δͷ͕ ྑ͍ͩΖ͏? ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 51

Slide 51 text

ݸผʹίϯϙʔωϯτԽ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 52

Slide 52 text

αΠζ͚ͩଐੑԽͯ͠ Ϙλϯͷ໾ׂ͝ͱʹ ίϯϙʔωϯτԽ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 53

Slide 53 text

Ϙλϯͱͯ͠ͷػೳ͸ڞ௨ ͳͷͰ໾ׂͱαΠζͱ΋ʹ ଐੑԽ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 54

Slide 54 text

αΠζ͸Ͳ͏ఆٛ͢Δͷ͕ྑ͍ͩΖ͏ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 55

Slide 55 text

ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 56

Slide 56 text

ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 57

Slide 57 text

ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 58

Slide 58 text

ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 59

Slide 59 text

ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 60

Slide 60 text

ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 61

Slide 61 text

ΧϥʔεΩʔϜ λΠϙάϥϑΟ ΠϯλʔϑΣʔεσβΠϯ άϦουγεςϜ ϕʔεϥΠϯ ͜Εͷલʹɾɾɾ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ άϦουγεςϜ͕ ίϯϙʔωϯτఆٛʹඞਢͳͷͰ͸? άϦουͷϕʔεϥΠϯ͸ɾɾɾʁ όʔςΟΧϧϦζϜͷఆٛ΋ඞཁͳͷͰ͸ʁ

Slide 62

Slide 62 text

ίϯϙʔωϯτࢦ޲ઃܭʹۙಓͳ͠ ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

Slide 63

Slide 63 text

Ұٳ.com ϨετϥϯͷϑϩϯτΤϯυ͸ Web Β͘͠ɺϓϩάϨογϰʹ վળΛଓ͚ͯߦ͖·͢