通知UIを改善している話

Transcript

1. ௨஌UIΛվળ͍ͯ͠Δ࿩
   2023.05.31 ΞΫηγϏϦςΟ΍ΔͧʂLTࡇΓ
   
   
   Shirahama Kaori
   

   View Slide

2. ࣗݾ঺հ
   ShirahamaKaoriʢ9v9Shiraʣ
   
   
   ϑϩϯτΤϯυΤϯδχΞ @SmartHR 2022/8ʙ
   

   View Slide

3. SmartHR
   

   View Slide

4. SmartHR UI
   

   View Slide

5. SmartHR UI
   • https://github.com/kufu/smarthr-ui
   
   
   • SmartHR͕Φʔϓϯιʔεͱͯ͠։ൃ͍ͯ͠Δ
   

   UIίϯϙʔωϯτ
   
   
   • SmartHRͷϓϩμΫτͰ࢖͍ͬͯΔ
   

   View Slide

6. ௨஌ʹ࢖͍ͬͯΔ
   
   
   ίϯϙʔωϯτ
   

   View Slide

7. FlashMessage
   

   View Slide

8. View Slide

9. FlashMessage (SmartHR UI)
   • https://smarthr.design/products/components/
   fl
   ash-
   message/ʢݱࡏ͸ඇਪ঑ʣ
   
   
   • toastͷΑ͏ͳίϯϙʔωϯτ
   
   
   • ୲౰ϓϩμΫτͰ࢖༻͓ͯ͠ΓɺઈࢍվળରԠத
   

   View Slide

10. FlashMessage (SmartHR UI)
    • https://smarthr.design/products/components/
    fl
    ash-
    message/ʢݱࡏ͸ඇਪ঑ʣ
    
    
    • toastͷΑ͏ͳίϯϙʔωϯτ
    
    
    • ୲౰ϓϩμΫτͰ࢖༻͓ͯ͠ΓɺઈࢍվળରԠத
    ࠓ೔͸͜ͷ࿩Λ͠·͢ʂ
    

    View Slide

11. ͳʹ͕՝୊ͳͷ͔
    

    View Slide

12. ՝୊1ɿඪ४ͩͱ8ඵͰফ͑Δ
    ݒ೦఺
    

    Ϣʔβʔ͕จࣈΛಡΈɺ಺༰Λཧղ͢Δલʹফ͑ͯ͠·
    ͏Մೳੑ͕͋Δ
    
    
    ରԠҊ
    

    ࣗಈͰফ͞ͳ͍Α͏ʹ͢Δ
    

    ɾΦϓγϣϯΛࢦఆ͠ɺࣗಈͰফ͑ͳ͍ઃఆʹ͢Δ
    

    ɾॏཁͳϝοηʔδΛදࣔ͢ΔࡍɺFlashMessageͷ࢖
    ༻͠ͳ͍
    

    View Slide

13. ՝୊1ɿඪ४ͩͱ8ඵͰফ͑Δ
    ݒ೦఺
    

    Ϣʔβʔ͕จࣈΛಡΈɺ಺༰Λཧղ͢Δલʹফ͑ͯ͠·
    ͏Մೳੑ͕͋Δ
    
    
    վળҊ
    

    ࣗಈͰফ͞ͳ͍Α͏ʹ͢Δ
    

    ɾΦϓγϣϯΛࢦఆ͠ɺࣗಈͰফ͑ͳ͍ઃఆʹ͢Δ
    

    ɾॏཁͳϝοηʔδΛදࣔ͢ΔࡍɺFlashMessageΛ࢖
    ༻͠ͳ͍
    

    View Slide

14. ՝୊2ɿؾ͖ͮʹ͍͘
    ݒ೦఺
    

    ಛఆͷྖҬΛݟ͍ͯΔ৔߹΍σΟεϓϨΠ͕େ͖͍৔
    ߹ɺը໘Λ֦େ͍ͯ͠Δ৔߹ͳͲࢹքʹೖΓʹ͍͘
    
    
    ରԠҊ
    

    FlashMessageͷ࢖༻Λ΍ΊɺҎԼΛݕ౼͢Δ
    

    ɾૢ࡞ର৅ͷۙ͘ʹϝοηʔδΛදࣔ͢Δ
    

    ɾؾ͖ͮ΍͍͢ίϯϙʔωϯτΛ࢖͏
    

    View Slide

15. ՝୊2ɿؾ͖ͮʹ͍͘
    ݒ೦఺
    

    ಛఆͷྖҬΛݟ͍ͯΔ৔߹΍σΟεϓϨΠ͕େ͖͍৔
    ߹ɺը໘Λ֦େ͍ͯ͠Δ৔߹ͳͲࢹքʹೖΓʹ͍͘
    
    
    վળҊ
    

    FlashMessageͷ࢖༻Λ΍ΊɺҎԼΛݕ౼͢Δ
    

    ɾૢ࡞ର৅ͷۙ͘ʹϝοηʔδΛදࣔ͢Δ
    

    ɾؾ͖ͮ΍͍͢ίϯϙʔωϯτΛ࢖͏
    

    View Slide

16. FlashMessageͷ՝୊͸
    
    
    Θ͔ͬͨ
    

    View Slide

17. FlashMessage࢖༻Λ΍Ίͯ
    
    
    Ͳ͏͢Δ͔ʁ
    

    View Slide

18. ରԠํ਑
    • Ϣʔβʔ͕ૢ࡞ͨ͠ૢ࡞ର৅ͷۙ͘ʹϝο
    ηʔδΛදࣔ͢Δ
    
    
    • ্ه͕ࠔ೉ͳ৔߹ɺʮNoti
    fi
    cationBarʯͰ
    ϝοηʔδΛදࣔ͢Δ
    

    View Slide

19. Noti
    fi
    cationBar
    

    View Slide

20. View Slide

21. Noti
    fi
    cationBar (SmartHR UI)
    • https://smarthr.design/products/components/noti
    fi
    cation-
    bar/
    
    
    • ࢖͍Ͳ͜Ζ
    
    
    • ૢ࡞ޙʹɺը໘શମ͕੾ΓସΘΔͱ͖
    
    
    • μΠΞϩάͰૢ࡞͠ɺݩͷը໘ʹ໭Δͱ͖
    
    
    • ಛผͰॏཁͳ৘ใ΍͓஌ΒͤΛදࣔ͢Δͱ͖
    

    View Slide

22. ରԠͷྲྀΕ
    

    View Slide

23. ରԠͷྲྀΕ
    1.ͲͷΑ͏ͳૢ࡞/ॲཧΛߦͬͨ࣌ʹϝοηʔδΛ
    

    ද͍ࣔͯ͠Δ͔ਫ਼ࠪ
    
    
    2.ύλʔϯผʹ෼ྨ͠ɺ֤ରԠํ਑Λݕ౼
    
    
    3.νʔϜͷσβΠφʔͱೝࣝ߹Θͤɾௐ੔
    
    
    4.νʔϜશମʹల։͠߹ҙɾܾఆ
    
    
    5.ը໘͝ͱʹରԠΛਐߦத
    

    View Slide

24. View Slide

25. ϝοηʔδදࣔύλʔϯ
    μΠΞϩά
    

    ɹμΠΞϩάΛด͡ͳ͍৔߹ɿϘλϯ෇ۙ
    

    ɹμΠΞϩάΛด͡Δ৔߹ɿNoti
    fi
    cationBar
    
    
    μΠΞϩάҎ֎
    

    ɹϘλϯΛԡͯ͠ߦ͏ॲཧͷ৔߹ɿϘλϯ෇ۙ
    

    ɹ্هҎ֎ɿNoti
    fi
    cationBar
    

    View Slide

26. Α͔ͬͨ͜ͱ
    • ࠷ॳʹύλʔϯਫ਼ࠪͱ֤ରԠํ਑ΛܾΊΒΕ
    ͨͷͰରԠΛ໎ΘͣਐΊΒΕͨ
    
    
    • ௨஌Λग़͢ύλʔϯΛ੔ཧ͠υΩϡϝϯτԽ
    ͨ͜͠ͱͰνʔϜͰڞ௨ೝࣝΛ࣋ͯͨ
    
    
    • ͜Ε·Ͱ͸௨஌UI͕ࠞࡏ͍ͯͨ͠
    
    
    • ػೳ௥Ճ࣌ͷ௨஌UI΋໎͍ͬͯͨ
    

    View Slide

27. ͓ΘΓ
    

    View Slide