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

Gunma.web #42

Transcript

1. 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
2. TinyKitten Freelance frontend engineer I 💖 Open source & Cat🐈 Born in Gunma🐴 Live in Tokyo🗼
3. Tsubasa SEKIGUCHI ϑϦʔϥϯεͷϑϩϯτΤϯυΤϯδχΞɻ൓ࣾͰ͸ͳ͍Ͱ͢ɻ ͖ͬͨΜͱݺ͹Ε͍ͯ·͢ɻ ϓϩμΫτ؅ཧπʔϧ͸ZenHub͕޷͖Ͱ͢
4. TrainLCD ೔ຊશࠃͷమಓ࿏ઢͰ࢖͑Δ ৽ײ֮ͷφϏήʔγϣϯΞϓϦͰ͢ɻ
5. ͜ͷεϥΠυ͸ɺ3FBDUKTͰϓϩμΫτΛ
   ։ൃ͍ͯ͠Δ͜ͱΛલఏͱ͍ͯ͠·͢ɻ ͓͜ͱΘΓ
6. ΤϯδχΞࢹ఺Ͱ
   6*69σβΠϯɺॱௐͰ͔͢ʁ
7. ࣮͸ɺ͜Μͳ໰୊๊͑ͯ·ͤΜ͔ʁ σβΠφʔͱ 
 িಥ͕ى͖Δʜ σβΠϯΛ஧࣮ʹ 
 ࠶ݱͰ͖ͳ͍ ͳ͔ͥΞϓϦ͕ 
 ࢖͍ͮΒ͍ʜ
8. ͜ΕΒͷ໰୊ɺ
   ਓྗͰ͸ͳ͘πʔϧͰղܾ͠·͠ΐ͏ʂ σβΠφʔͱ 
 িಥ͕ى͖Δʜ σβΠϯΛ஧࣮ʹ 
 ࠶ݱͰ͖ͳ͍ ͳ͔ͥΞϓϦ͕ 
 ࢖͍ͮΒ͍ʜ
9. ͨͱ͑͹ʜ
10. Case 1 σβΠφʔͱিಥ͕ى͖Δʜ
11. σβΠφʔͱিಥ͕ى͖Δʜ σβΠφʔʮ͜ͷ࣮૷ͯ͠΋ΒͬͨσβΠϯɺ
    QYӈʹͣΕͯΔΜͰ͚͢Ͳɺमਖ਼ͯ͠΋Β͑·͔͢ʁʯ
    ΤϯδχΞʮ΁ʁͦΜͳ͸ͣ͸ͳ͍ʜʯ
12. σβΠφʔͱিಥ͕ى͖Δʜ QYͷζϨͰ΋࠷ॳʹσβΠφʔʹ
    ݕ஌ͯ͠΋Β͏ʹ͸Ͳ͏͢Ε͹͍͍ΜͩΖ͏ʁ
13.  σβΠφʔͱিಥ͕ى͖Δʜ StorybookΛ࢖͏ͱɺ
    6*ίϯϙʔωϯτ୯ҐͰσβΠϯΛ֬ೝͰ͖·͢ʂ
14. িಥ͕ى͖ΔͳΒɺ4UPSZCPPLΛ࢖͓͏ Storybookͷಛ௃: - UIίϯϙʔωϯτΛ
 ϒϥ΢βͰ֬ೝͰ͖Δ - PropsΛ౉ͯ͠ಈ࡞ΛݟͨΓ
 ΫϦοΫޙͷڍಈΛ֬ೝͰ͖Δ - ReactҎ֎ʹ΋͍Ζ͍Ζͳ
 ϑϨʔϜϫʔΫʹରԠ
15. σβΠφʔͱিಥ͕ى͖Δʜ σβΠφʔʮ4UPSZCPPLݟͨΜ͚ͩͲɺ 
 ɹɹɹɹɹɹ͍͍ײ͡ʹ࣮૷Ͱ͖ͯͯخ͍͠Αʂʯ
    ΤϯδχΞʮΑ͔ͬͨͰ͢ʂʯ
16. িಥ͕ى͖ΔͳΒɺ4UPSZCPPLΛ࢖͓͏ Pro Tips: - ࣮͸ɺσβΠϯ͸σβΠφʔ͚ͩͷ࢓ࣄͰ͸ͳ͍͔΋͠Ε·ͤΜɻ ΑΓྑ͍ϓϩμΫτ։ൃͷͨΊʹɺࣗ͝਎΋σβΠϯΛษڧͯ͠ΈΔͱɺ ΋ͬͱੈք͕޿͕Δ͔΋͠Ε·ͤΜ😲
17. Case 2 ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ
18. ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ 1E.ʮͳΜ͔͜ͷΞϓϦॏ͘ͳ͍ʁͳΜͱ͔Ͱ͖ͳ͍Ͱ͔͢ʁʯ
    ΤϯδχΞʮ΁ʁͦΜͳ͸ͣ͸ͳ͍ʜʯ
19. ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ Ͱͳͯ͘΋ɺ
    ύϑΥʔϚϯεͷσάϨΛͲ͏΍ͬͯݕ஌Ͱ͖Δ͔ʁ
20. ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ ύϑΥʔϚϯενϡʔχϯάͷେݪଇͱͯ͠ʜ
    ܭଌͰ͖ͳ͍ͳΒ҆қʹ௚͞ͳ͍΄͏͕͍͍ʂ
21. ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ ύϑΥʔϚϯεͷܭଌʹ͸৭ʑͱํ๏͕͋Γ·͕͢ʜ
    $ISPNF
    %FW5PPMT͕ޮՌతʂ
22. ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ DevToolsͷϊ΢ϋ΢: - εϩοτϦϯάΛ͠Α͏
 ΤϯυϢʔβʔʹ͍ۙܭଌΛߦ͏ͨΊʹɺ
 CPUɺωοτϫʔΫͳͲͷ
 εϩοτϦϯάΛ͠·͠ΐ͏ʂ -ܭଌ͠Α͏
 Chromeʹ͸ϓϩϑΝΠϦϯάͷͨΊͷ
 πʔϧ͕౥ࡌ͞Ε͍ͯ·͢ɻ
 Ͳͷॲཧ͕ॏ͍͔Λಛఆ͠·͠ΐ͏ɻ - User Timing APIΛ࢖͏
 Ͳͷൣғ͕ύϑΥʔϚϯε͕
 ѱ͍͔஌͍ͬͯΔ৔߹ɺࢦఆൣғͷ
 ύϑΥʔϚϯεΛܭଌͰ͖·͢ɻ
23. ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ 1E.ʮΤϯδχΞ͞Μ͕
    ύϑΥʔϚϯενϡʔχϯάΛ΍ͬͯ͘Ε͓͔ͨ͛Ͱ
    ɹɹɹϢʔβʔ͞Μ͔Βͷධ൑΋্ʑͩΑʂʯ
    ΤϯδχΞʮେมͰ͕ͨ͠ɺύϑΥʔϚϯε͕վળͯ͠Α͔ͬͨʂʯ
24. ͳ͔ͥΞϓϦ͕࢖͍ͮΒ͍ʜ Pro Tips: - ೔ࠒ͔ΒύϑΥʔϚϯεʹ͸໨ΛޫΒͤ·͠ΐ͏🐈 ೔ࠒ͔ΒύϑΥʔϚϯεͷ؂ࢹΛߦ͑͹ ͍ͭͷؒʹ͔ϓϩμΫτ͕ॏ͘ͳͬͯ͠·͏͜ͱΛճආͰ͖·͢😋 ύϑΥʔϚϯεΛ؂ࢹ͢Δ༗໊Ͳ͜ΖͷπʔϧͰ͸ɺ New RelicͳͲ͕͋Γ·͢Α😲
25. Case 3 σβΠϯΛ஧࣮ʹ࠶ݱͰ͖ͳ͍
26. σβΠϯΛ஧࣮ʹ࠶ݱͰ͖ͳ͍ σβΠφʔʮ΍ͬͺΓ͜͜σβΠϯͱҧ͍·͢Αʁʯ
    ΤϯδχΞʮ΁ʁͦΜͳ͸ͣ͸ͳ͍ʜʯ
27. σβΠϯΛ஧࣮ʹ࠶ݱͰ͖ͳ͍ ϐΫηϧύʔϑΣΫτͱݴΘͣͱ΋ɺ
    σβΠϯΛ஧࣮ʹ࠶ݱ͢Δํ๏͸ͳ͍͔ʁ
28. σβΠϯΛ஧࣮ʹ࠶ݱͰ͖ͳ͍ σβΠϯͷڞ௨ҙࣝΛ͢Γ߹ΘͤΔπʔϧ͸ʜ
    'JHNB͕Ξπ͍ʂ
29. σβΠϯΛ஧࣮ʹ࠶ݱͰ͖ͳ͍ FigmaͷԿ͕Ξπ͍ͷʁ - σβΠϯ͔ΒCSSΛॻ͖ग़ͤΔ
 σβΠϯΛͦͷ··CSSʹམͱ͠ࠐΊΔͷͰɺ
 Web։ൃ͕ޮ཰తʹͳΓ·͢ʂ - Webϒϥ΢β͔ΒͰ΋࢖͑Δ
 ࣮͸Webϒϥ΢β͔Β΋࢖͑·͢ʂ
 ΤϯδχΞͷPCʹΞϓϦΛೖΕͳͯ͘΋ɺ
 σβΠϯΛ֬ೝͰ͖·͢ʂ -ҐஔΛURLͰ౉͢͜ͱ͕Ͱ͖Δ
 σβΠφʔ͕ݟ͍ͯΔҐஔΛͦͷ··ΤϯδχΞʹ
 URLʹͯ͠γΣΞ͢Δ͜ͱ͕Ͱ͖·͢ʂ
30. σβΠϯΛ஧࣮ʹ࠶ݱͰ͖ͳ͍ σβΠφʔʮΤϯδχΞ͞Μͷ࡞ͬͯ͘ΕͨσβΠϯɺ 
 ɹɹɹɹɹɹ๻ͷ࡞ͬͨσβΠϯʹ஧࣮Ͱخ͍͠Αʂʯ
    ΤϯδχΞʮ'JHNBͷ͓͔͛ͰͳΜͱ͔஧࣮ʹσβΠϯΛ࠶ݱͰ͖·ͨ͠ɻʯ
31. σβΠϯΛ஧࣮ʹ࠶ݱͰ͖ͳ͍ Pro Tips: - ΤϯδχΞͰ΋ɺσβΠϯπʔϧʹ໨Λ഑ͬͯΈͯ͸ʁ Figma΋͍ͭ·Ͱ࢖ΘΕΔ͔Θ͔Γ·ͤΜɻ σβΠφʔ͕͍ͭπʔϧΛม͑ͯ΋͙͢ʹॱԠͰ͖ΔΑ͏ʹɺ σβΠϯπʔϧʹ΋ΞϯςφΛཱͯͯΈΔͷ͸͍͔͕Ͱ͠ΐ͏͔ʁ
32. ͜ΕΒͷ໰୊͸ɺ
    πʔϧΛ࢖ָͬͯʹղܾ͠·͠ΐ͏ σβΠφʔͱ 
 িಥ͕ى͖Δʜ σβΠϯΛ஧࣮ʹ 
 ࠶ݱͰ͖ͳ͍ ͳ͔ͥΞϓϦ͕ 
 ࢖͍ͮΒ͍ʜ
33. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Thank you for listening! Photo by cottonbro on Pexels Gunma.web #42 ϓϩδΣΫτ؅ཧ(πʔϧؚΉ) 2021.8.21 @ Online Tsubasa SEKIGUCHI