Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Component-based Design for Ikyu users

Yu I.
March 20, 2019

Component-based Design for Ikyu users

BASE 様主催、Atomic Design 勉強会で、一休.comレストランから発表させて頂いた資料になります。

ユーザーが感覚的に使えるサービスを目指す「一休.comレストラン」コンポーネント指向開発の今

Atomic Designを実現するコンポーネント指向開発のいま
https://base.connpass.com/event/122517/

#atomic_shibuya

Yu I.

March 20, 2019
Tweet

More Decks by Yu I.

Other Decks in Design

Transcript

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

    View full-size slide

  2. https://restaurant.ikyu.com/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. શͯΛίϯϙʔωϯτͱଊ͑ͨ
    Ұٳ.com Ϩετϥϯͷߏ੒ʹ
    ͜ͷߟ͑Λద༻

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

    View full-size slide

  24. 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
    ίϯϙʔωϯτࢦ޲ઃܭಋೖͷετʔϦʔ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


















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

    View full-size slide





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

    View full-size slide

  51. role=“…”
    size=“…”
    />
    Ϙλϯͱͯ͠ͷػೳ͸ڞ௨
    ͳͷͰ໾ׂͱαΠζͱ΋ʹ
    ଐੑԽ
    ΧϯϓΛίϯϙʔωϯτԽ͢Δ࣌ͷΠγϡʔ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. ϒϩά΍ͬͯ·͢
    https://user-first.ikyu.co.jp/

    View full-size slide

  63. σβΠφʔ/ΤϯδχΞ΋࠾༻த!
    https://www.ikyu.co.jp/recruit/

    View full-size slide