UI/UXをないがしろにしない「きもちのいい」Webサービスの作り方

Slide 1

Slide 1 text

UI/UXΛͳ͍͕͠Ζʹ͠ͳ͍ ʮ͖΋ͪͷ͍͍ʯWebαʔϏεͷ࡞Γํ Head fi rst UX- fi rst web development Photo by cottonbro on Pexels Gunma.web #42 ϓϩδΣΫτ؅ཧ(πʔϧؚΉ) 2021.8.21 @ Online Tsubasa SEKIGUCHI

Slide 2

Slide 2 text

TinyKitten Freelance frontend engineer I 💖 Open source & Cat🐈 Born in Gunma🐴 Live in Tokyo🗼

Slide 3

Slide 3 text

Tsubasa SEKIGUCHI ϑϦʔϥϯεͷϑϩϯτΤϯυΤϯδχΞɻ൓ࣾͰ͸ͳ͍Ͱ͢ɻ ͖ͬͨΜͱݺ͹Ε͍ͯ·͢ɻ ϓϩμΫτ؅ཧπʔϧ͸ZenHub͕޷͖Ͱ͢

Slide 4

Slide 4 text

TrainLCD ೔ຊશࠃͷమಓ࿏ઢͰ࢖͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ

Slide 5

Slide 5 text

͜ͷεϥΠυ͸ɺ3FBDUKTͰϓϩμΫτΛ ։ൃ͍ͯ͠Δ͜ͱΛલఏͱ͍ͯ͠·͢ɻ ͓͜ͱΘΓ

Slide 6

Slide 6 text

ΤϯδχΞࢹ఺Ͱ 6*69σβΠϯɺॱௐͰ͔͢ʁ

Slide 7

Slide 7 text

࣮͸ɺ͜Μͳ໰୊๊͑ͯ·ͤΜ͔ʁ σβΠφʔͱ   িಥ͕ى͖Δʜ σβΠϯΛ஧࣮ʹ   ࠶ݱͰ͖ͳ͍ ͳ͔ͥΞϓϦ͕   ࢖͍ͮΒ͍ʜ

Slide 8

Slide 8 text

͜ΕΒͷ໰୊ɺ ਓྗͰ͸ͳ͘πʔϧͰղܾ͠·͠ΐ͏ʂ σβΠφʔͱ   িಥ͕ى͖Δʜ σβΠϯΛ஧࣮ʹ   ࠶ݱͰ͖ͳ͍ ͳ͔ͥΞϓϦ͕   ࢖͍ͮΒ͍ʜ

Slide 9

Slide 9 text

ͨͱ͑͹ʜ

Slide 10

Slide 10 text

Case 1 σβΠφʔͱিಥ͕ى͖Δʜ

Slide 11

Slide 11 text

σβΠφʔͱিಥ͕ى͖Δʜ σβΠφʔʮ͜ͷ࣮૷ͯ͠΋ΒͬͨσβΠϯɺ QYӈʹͣΕͯΔΜͰ͚͢Ͳɺमਖ਼ͯ͠΋Β͑·͔͢ʁʯ ΤϯδχΞʮ΁ʁͦΜͳ͸ͣ͸ͳ͍ʜʯ

Slide 12

Slide 12 text

σβΠφʔͱিಥ͕ى͖Δʜ QYͷζϨͰ΋࠷ॳʹσβΠφʔʹ ݕ஌ͯ͠΋Β͏ʹ͸Ͳ͏͢Ε͹͍͍ΜͩΖ͏ʁ

Slide 13

Slide 13 text

σβΠφʔͱিಥ͕ى͖Δʜ StorybookΛ࢖͏ͱɺ 6*ίϯϙʔωϯτ୯ҐͰσβΠϯΛ֬ೝͰ͖·͢ʂ

Slide 14

Slide 14 text

িಥ͕ى͖ΔͳΒɺ4UPSZCPPLΛ࢖͓͏ Storybookͷಛ௃: - UIίϯϙʔωϯτΛ  ϒϥ΢βͰ֬ೝͰ͖Δ - PropsΛ౉ͯ͠ಈ࡞ΛݟͨΓ  ΫϦοΫޙͷڍಈΛ֬ೝͰ͖Δ - ReactҎ֎ʹ΋͍Ζ͍Ζͳ  ϑϨʔϜϫʔΫʹରԠ

Slide 15

Slide 15 text

σβΠφʔͱিಥ͕ى͖Δʜ σβΠφʔʮ4UPSZCPPLݟͨΜ͚ͩͲɺ   ɹɹɹɹɹɹ͍͍ײ͡ʹ࣮૷Ͱ͖ͯͯخ͍͠Αʂʯ ΤϯδχΞʮΑ͔ͬͨͰ͢ʂʯ

Slide 16

Slide 16 text

িಥ͕ى͖ΔͳΒɺ4UPSZCPPLΛ࢖͓͏ Pro Tips: - ࣮͸ɺσβΠϯ͸σβΠφʔ͚ͩͷ࢓ࣄͰ͸ͳ͍͔΋͠Ε·ͤΜɻ ΑΓྑ͍ϓϩμΫτ։ൃͷͨΊʹɺࣗ͝਎΋σβΠϯΛษڧͯ͠ΈΔͱɺ ΋ͬͱੈք͕޿͕Δ͔΋͠Ε·ͤΜ😲

Slide 17

Slide 17 text

Case 2 ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ

Slide 18

Slide 18 text

ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ 1E.ʮͳΜ͔͜ͷΞϓϦॏ͘ͳ͍ʁͳΜͱ͔Ͱ͖ͳ͍Ͱ͔͢ʁʯ ΤϯδχΞʮ΁ʁͦΜͳ͸ͣ͸ͳ͍ʜʯ

Slide 19

Slide 19 text

ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ Ͱͳͯ͘΋ɺ ύϑΥʔϚϯεͷσάϨΛͲ͏΍ͬͯݕ஌Ͱ͖Δ͔ʁ

Slide 20

Slide 20 text

ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ ύϑΥʔϚϯενϡʔχϯάͷେݪଇͱͯ͠ʜ ܭଌͰ͖ͳ͍ͳΒ҆қʹ௚͞ͳ͍΄͏͕͍͍ʂ

Slide 21

Slide 21 text

ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ ύϑΥʔϚϯεͷܭଌʹ͸৭ʑͱํ๏͕͋Γ·͕͢ʜ $ISPNF%FW5PPMT͕ޮՌతʂ

Slide 22

Slide 22 text

ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ DevToolsͷϊ΢ϋ΢: - εϩοτϦϯάΛ͠Α͏  ΤϯυϢʔβʔʹ͍ۙܭଌΛߦ͏ͨΊʹɺ  CPUɺωοτϫʔΫͳͲͷ  εϩοτϦϯάΛ͠·͠ΐ͏ʂ -ܭଌ͠Α͏  Chromeʹ͸ϓϩϑΝΠϦϯάͷͨΊͷ  πʔϧ͕౥ࡌ͞Ε͍ͯ·͢ɻ  Ͳͷॲཧ͕ॏ͍͔Λಛఆ͠·͠ΐ͏ɻ - User Timing APIΛ࢖͏  Ͳͷൣғ͕ύϑΥʔϚϯε͕  ѱ͍͔஌͍ͬͯΔ৔߹ɺࢦఆൣғͷ  ύϑΥʔϚϯεΛܭଌͰ͖·͢ɻ

Slide 23

Slide 23 text

ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ 1E.ʮΤϯδχΞ͞Μ͕ ύϑΥʔϚϯενϡʔχϯάΛ΍ͬͯ͘Ε͓͔ͨ͛Ͱ ɹɹɹϢʔβʔ͞Μ͔Βͷධ൑΋্ʑͩΑʂʯ ΤϯδχΞʮେมͰ͕ͨ͠ɺύϑΥʔϚϯε͕վળͯ͠Α͔ͬͨʂʯ

Slide 24

Slide 24 text

ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ Pro Tips: - ೔ࠒ͔ΒύϑΥʔϚϯεʹ͸໨ΛޫΒͤ·͠ΐ͏🐈 ೔ࠒ͔ΒύϑΥʔϚϯεͷ؂ࢹΛߦ͑͹ ͍ͭͷؒʹ͔ϓϩμΫτ͕ॏ͘ͳͬͯ͠·͏͜ͱΛճආͰ͖·͢😋 ύϑΥʔϚϯεΛ؂ࢹ͢Δ༗໊Ͳ͜ΖͷπʔϧͰ͸ɺ New RelicͳͲ͕͋Γ·͢Α😲

Slide 25

Slide 25 text

Case 3 σβΠϯΛ஧࣮ʹ࠶ݱͰ͖ͳ͍

Slide 26

Slide 26 text

σβΠϯΛ஧࣮ʹ࠶ݱͰ͖ͳ͍ σβΠφʔʮ΍ͬͺΓ͜͜σβΠϯͱҧ͍·͢Αʁʯ ΤϯδχΞʮ΁ʁͦΜͳ͸ͣ͸ͳ͍ʜʯ

Slide 27

Slide 27 text

σβΠϯΛ஧࣮ʹ࠶ݱͰ͖ͳ͍ ϐΫηϧύʔϑΣΫτͱݴΘͣͱ΋ɺ σβΠϯΛ஧࣮ʹ࠶ݱ͢Δํ๏͸ͳ͍͔ʁ

Slide 28

Slide 28 text

σβΠϯΛ஧࣮ʹ࠶ݱͰ͖ͳ͍ σβΠϯͷڞ௨ҙࣝΛ͢Γ߹ΘͤΔπʔϧ͸ʜ 'JHNB͕Ξπ͍ʂ

Slide 29

Slide 29 text

σβΠϯΛ஧࣮ʹ࠶ݱͰ͖ͳ͍ FigmaͷԿ͕Ξπ͍ͷʁ - σβΠϯ͔ΒCSSΛॻ͖ग़ͤΔ  σβΠϯΛͦͷ··CSSʹམͱ͠ࠐΊΔͷͰɺ  Web։ൃ͕ޮ཰తʹͳΓ·͢ʂ - Webϒϥ΢β͔ΒͰ΋࢖͑Δ  ࣮͸Webϒϥ΢β͔Β΋࢖͑·͢ʂ  ΤϯδχΞͷPCʹΞϓϦΛೖΕͳͯ͘΋ɺ  σβΠϯΛ֬ೝͰ͖·͢ʂ -ҐஔΛURLͰ౉͢͜ͱ͕Ͱ͖Δ  σβΠφʔ͕ݟ͍ͯΔҐஔΛͦͷ··ΤϯδχΞʹ  URLʹͯ͠γΣΞ͢Δ͜ͱ͕Ͱ͖·͢ʂ

Slide 30

Slide 30 text

σβΠϯΛ஧࣮ʹ࠶ݱͰ͖ͳ͍ σβΠφʔʮΤϯδχΞ͞Μͷ࡞ͬͯ͘ΕͨσβΠϯɺ   ɹɹɹɹɹɹ๻ͷ࡞ͬͨσβΠϯʹ஧࣮Ͱخ͍͠Αʂʯ ΤϯδχΞʮ'JHNBͷ͓͔͛ͰͳΜͱ͔஧࣮ʹσβΠϯΛ࠶ݱͰ͖·ͨ͠ɻʯ

Slide 31

Slide 31 text

σβΠϯΛ஧࣮ʹ࠶ݱͰ͖ͳ͍ Pro Tips: - ΤϯδχΞͰ΋ɺσβΠϯπʔϧʹ໨Λ഑ͬͯΈͯ͸ʁ Figma΋͍ͭ·Ͱ࢖ΘΕΔ͔Θ͔Γ·ͤΜɻ σβΠφʔ͕͍ͭπʔϧΛม͑ͯ΋͙͢ʹॱԠͰ͖ΔΑ͏ʹɺ σβΠϯπʔϧʹ΋ΞϯςφΛཱͯͯΈΔͷ͸͍͔͕Ͱ͠ΐ͏͔ʁ

Slide 32

Slide 32 text

͜ΕΒͷ໰୊͸ɺ πʔϧΛ࢖ָͬͯʹղܾ͠·͠ΐ͏ σβΠφʔͱ   িಥ͕ى͖Δʜ σβΠϯΛ஧࣮ʹ   ࠶ݱͰ͖ͳ͍ ͳ͔ͥΞϓϦ͕   ࢖͍ͮΒ͍ʜ

Slide 33

Slide 33 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening! Photo by cottonbro on Pexels Gunma.web #42 ϓϩδΣΫτ؅ཧ(πʔϧؚΉ) 2021.8.21 @ Online Tsubasa SEKIGUCHI