Tweet
Tweet

Slide 1

Slide 1 text

Design System Discussion 2019/09/19 @ SmartHR ΦϑΟε

Slide 2

Slide 2 text

Panelist

Slide 3

Slide 3 text

ݹ઒ͷελϯε • σβΠϯγεςϜջٙ೿ • σβΠϯγεςϜࣗମ͸ྑ͍ • අ༻ରޮՌ͕ٙ໰

Slide 4

Slide 4 text

͜ͷٞ࿦ͷΰʔϧ • σβΠϯγεςϜͷٙ໰ʹ͍ͭͯҙݟΛͿͭ ͚ɺճ౴ΛಘΔ • σβΠϯγεςϜͷམͱ͠ॴΛ͠Δ

Slide 5

Slide 5 text

ͦ΋ͦ΋࿦ • ͏·͍ͬͯ͘Δʁ • य़໺͞Μ: ͻͱ·ͣೖΕͯΈ͚ͨͲɺࠓͷॴճͤͯΔɻ͜Ε͔Βɺ͏·͍ͬͯ͘Δ͔Ͳ͏͔͸൒ʑɺ࡞͍͖͍ͬͯͨͱ ͍͏৺ҙؾ͕͋Δɻ • ݱঢ়͸ࣾ಺ͷޮ཰ԽͷͨΊͷπʔϧͱ͔ͯ͠͠ݕ౼͍ͯ͠ͳ͍ • ࣾ಺ͷޮ཰Խ͕ϝΠϯͷ͜ͱ͕ଟ͍ => Ϗδωε·Ͱམͱ͢ॴ·Ͱ͍͚ͯͳ͍ • ੴڮ͞Μ: ಉ͘͡ɺࠓͷॴ͸΍ͬͯΔ͕ɺ͏·͘ݴͬͯΔ͔Ͳ͏͔ͷධՁ͸·ͩԼͤͳ͍ɻ • উखʹ࡞ۭͬͯதʹු͘ͷ͸΍Ί͔ͨͬͨɻ • খ͘͞࡞ͬͯɺϓϩμΫγϣϯͰಈ͍ͯΔΑ͏ʹ͔ͨͬͨ͠ɻ • => ͜͜͸ୡ੒ɺελʔτ͔ͯ͠Β൒೥ • ٶݪ͞Μ: ͓ۚʹ௓Ͷͯͳ͍ɺ͏·͘ݴͬͯͳ͍ͱࢥͬͯΔɻ • ·ͩ૸Γग़͠Ͱ౤ࢿظؒɺ։ൃੜ࢈ੑʹͪΌΜͱϑΟʔυόοΫ͍ͯ͘͠ͱΑ͍

Slide 6

Slide 6 text

ͦ΋ͦ΋࿦ • ಋೖͨ͠͹͔Γ? • ಋೖͯ͠ӡ༻ͯ͠Δ? • ӡ༻੒ख़ظ? • य़໺͞Μ: 1೥ • ੴڮ͞Μ ൒೥ • ٶݪ͞Μ 3ϲ݄ • य़໺͞Μ͸1೥ؒӡ༻ͯ͠Δ͕ɺͦ΋ͦ΋͕σβΠϯ౷Ұ͞Εͯͳ͍ɺ։ൃͷUI͕ό ϥόϥͳͲͷঢ়گ͔Β࢝·ͬͨɻ

Slide 7

Slide 7 text

ͦ΋ͦ΋࿦ • σβΠϯγεςϜͷॳखͰ΍Δ͜ͱ: • ٶݪ: ͓ߦّΑ͘΍ͬͯͳ͍ɺύλʔϯΛચ͍ग़͠ͱ͔΍ͬͯͳ͍ɺ࠷ॳʹτοϓμ΢ϯͷ͋Δ΂͖࢟ͷશମ ૾࡞ͬͯΔɺػೳతʹ੔ཧͯ͠ϘτϜΞοϓ΋࡞Δɺτοϓμ΢ϯͱϘτϜΞοϓͷ྆ํ͔Β߈ΊΔ • લ৬͸ΞτϛοΫσβΠϯ͕ࣦഊ => ޙͰฉ͘ • ੴڮ͞Μ σβΠϯγεςϜͷγεςϚνοΫͳͱ͜ΖΛ͍Ε͍ͨɺͲ͏΍ͬͯ੾Γ෼͚ͯೖΕ͍͔ͯ͘Λ૬ ஊ • Ұ୴ϖʔδΛεΫγϣͯ͠ɺϋαϛͰ੾ͬͯ·ͱΊ͍ͯͬͨ • ࠷ॳ͔Β׬ᘳ͸໨ࢦ͞ͳ͔ͬͨ • ΧϥʔύϨοτ͸࠷ॳ͔ΒܾΊͯྑ͍ͷͰ͸ => ૝૾ͱҧͬͯͨ͘͞Μ͋ͬͨɻ • य़໺͞Μ ελΠϧΨΠυΛ࡞͍ͬͯͬͯɺ͢Ͱʹ͋Δϖʔδ͔ΒίϯϙʔωϯτΛચ͍ग़͢ͷ͸Ұॹɺύʔ πύʔπͰ࡞͍ͬͯ͘ɻ

Slide 8

Slide 8 text

ͦ΋ͦ΋࿦ • σβΠϯγεςϜͬͯݴͬͨ࣌ʹͲ͜·Ͱ΍ͬͯΔ? • UIKitͱ͔΋࡞ͬͯΔʁ • Styleguideͱ͔͸ʁ • ͦΕͱ΋σβΠϯͷυΩϡϝϯτԽ = ϧʔϧͱݪଇͷ໌จԽͷΈʁ • य़໺͞Μ: UIKit, StyleGuide, React Component ͷఏڙ • ੴڮ͞Μ: ΄΅ࣅ͍ͯΔɺUIιʔείʔυɺ։ൃऀ޲͚υΩϡϝϯτɺσβΠϯͷυΩϡϝϯτ Խ͕Ͱ͖ͯͳ͍ • ٶݪ͞Μ: sketch library, React Component, UIKit આ໌͢ΔΨΠυϥΠϯ • σβΠφʔࣗ਎͕ίʔσΟϯά͍ͯ͠Δ

Slide 9

Slide 9 text

૊৫࿦ • σβΠφʔͱΤϯδχΞ͕Ͳ͏΍ͬͯڠۀͯ͠ Δͷ͔ •

Slide 10

Slide 10 text

૊৫࿦ • σβΠφʔɺΤϯδχΞ͚ͩͰ͸ͳ͘ɺϓϥϯφʔ·Ͱ͍ࠞͥͯ͘ඞཁ͕͋ΔͷͰɺ ͦͷลΓͷԹ౓ײΛͲ͏΍ͬͯௐ੔ͯ͠Δͷ͔ • ੴڮ͞Μ: σβΠφʔ͕ϫΠϠʔΛߟ͑Δ΂͖ͩͱࢥͬͯΔɺσβΠϯγεςϜΛε ΫϥϜͷதͰಋೖ͢Δ΂͖ͩͱࢥͬͯΔ͕Ͱ͖͍ͯͳ͍ • य़໺͞Μ: σβΠφʔ͚ͩͰ΍ͬͯΔɺΤϯδχΞͱڠۀ͸͜Ε͔ΒɻσβΠφʔ͕ ओମͰ΍ͬͯΔ͚ͩͰ͜Ε͔Βͷͱ͜Ζ͕ଟ͍ • ٶݪ͞Μ: SmartHRͰ͸ظ଴஋શһἧͬͯΔ => લ৬͸ɺσβΠϯΛΩϨΠʹͯ͠΋ Ϗδωεʹܨ͕Βͳ͍ͷͰ͸ʁͱ͋ͬͨͷͰɺࣾ಺ϚʔέςΟϯά΍ΩϟϥΫλʔ ෇Λ͍ͯͬͨ͠ɻ • σβΠϯγεςϜνʔϜ ͷ໊લΛ vibes ʹ͍ͯͬͨ͠ɺόΠϒε͋͛͋͛ͬͯ͜ͱʁ

Slide 11

Slide 11 text

։ൃ࿦ • Storybook͕෗Γ΍͍͢໰୊Ͳ͏ͯ͠Δ? • ٶݪ͞Μ: ઈࢍ෗ͬͯΔʂͨͩSmartHR͸౤ࢿʹ͍ͭͯ͸ΈΜͳagreeͳͷͰݴ͏͜ ͱແ͍ɻલ৬͸ΤϯδχΞͷOKRͷதʹೖΕ͍ͯͬͨɻ • ੴڮ͞Μ: ࡞ͬͨUIϥΠϒϥϦ͸ඞͣόʔδϣχϯάͯ͠Δɺͦͷࠩ෼͸Θ͔ΔΑ͏ ʹͯ͠Δɺࡉ͔͍ͷ͸ඞ͍͔ͣͯ͠ͳ͍ͱ͍͚ͳ͍ɻࣾ಺ͷͲΜͳਓͰ΋ίϛοτ ͯ͠ྑ͍͜ͱʹͨ͠ɻ׬શʹࣾ಺ͰOSSʹ͢Δͷ͸ແ஡ͩͬͨͷͰɺϝΠϯϝϯς φΛೖΕΔͳͲΛݕ౼ͨ͠ • य़໺͞Μ: ࢲ͕Storybookܯ࡯ͩɻදࣔ֬ೝͱͯ͠࠷ॳ͸΍͍͕ͬͯͨɺ͍ͭ࠷ۙ Storybook v5.2͕ग़ͯɺΞϧϑΝ൛͔Β࢖ͬͯΔaddon docs͕ग़ͯɺͦΕʹ߹Θͤ ͯstorybookࣗମΛϝϯςφϯε͍ͯ͠Δ

Slide 12

Slide 12 text

։ൃ࿦ • ͦ΋ͦ΋StorybookۦಈͰ։ൃͱ͔΍ͬͯΔ?

Slide 13

Slide 13 text

։ൃ࿦ • ͦ΋ͦ΋StorybookۦಈͰ։ൃͱ͔΍ͬͯΔ?

Slide 14

Slide 14 text

Q&A • σβΠϯγεςϜΛطଘͷϓϩδΣΫτʹஈ ֊తʹಋೖͨ͠ਓ or ಋೖ͍ͯ͠Δਓ͕ډΔ͔ ฉ͍ͯ΄͍͠Ͱ͢ʂ

Slide 15

Slide 15 text

Q&A • 1. ԿΛओ໨తʹσβΠϯγεςϜͷ੔උΛ࢝Ί·͔ͨ͠ʁ • ex. ϒϥϯυΞΠσϯςΟςΟͷೝ஌ɺϢʔβೝ஌ෛՙͷ ܰݮɺσβΠϯίετ࡟ݮɺ࣮૷ίετ࡟ݮ • 2. σβΠϯγεςϜͷӡ༻ΛͲͷ໾ׂɺ৬छͷਓ͕ओಋ͠ ͯ·͔͢ʁ

Slide 16

Slide 16 text

Q&A • σόΠεؒͷࠩ෼ΛͲ͏ѻ͏ͷ͔օͷ஌ݟฉ ͖͍ͨͰ͢ࢲɻ • ωΠςΟϒͷ iOS ͱ Android Ͱ Platform ʹ ߹Θͤͨύʔπ (τάϧεΠονͱ͔) ͕͋ͬ ͨ৔߹ɺWeb ΛͲ͏͢Δ͔ɻ৔߹ʹΑͬͯ͸ WebView Ͱ͍͢͝ࠔΔΜͰ͢ΑͶɻɻɻ