Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
通知UIを改善している話
Search
shira
June 01, 2023
2
3.4k
通知UIを改善している話
shira
June 01, 2023
Tweet
Share
More Decks by shira
See All by shira
開発プロセスとアクセシビリティ
shira
1
98
:is()と:where()の話
shira
0
5.3k
実践アクセシビリティ in Angularアプリケーション
shira
0
640
hoverとタッチスクリーンデバイス
shira
2
1.3k
犬顔or猫顔判定アプリを作っている話.pdf
shira
1
200
社内LT大会開催に至るまでの話
shira
4
450
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Writing Fast Ruby
sferik
628
62k
Designing Experiences People Love
moore
142
24k
Building an army of robots
kneath
306
45k
GraphQLとの向き合い方2022年版
quramy
49
14k
Documentation Writing (for coders)
carmenintech
73
4.9k
Six Lessons from altMBA
skipperchong
28
3.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
4 Signs Your Business is Dying
shpigford
184
22k
Transcript
௨UIΛվળ͍ͯ͠Δ 2023.05.31 ΞΫηγϏϦςΟΔͧʂLTࡇΓ Shirahama Kaori
ࣗݾհ ShirahamaKaoriʢ9v9Shiraʣ ϑϩϯτΤϯυΤϯδχΞ @SmartHR 2022/8ʙ
SmartHR
SmartHR UI
SmartHR UI • https://github.com/kufu/smarthr-ui • SmartHR͕Φʔϓϯιʔεͱͯ͠։ൃ͍ͯ͠Δ UIίϯϙʔωϯτ • SmartHRͷϓϩμΫτͰ͍ͬͯΔ
௨ʹ͍ͬͯΔ ίϯϙʔωϯτ
FlashMessage
None
FlashMessage (SmartHR UI) • https://smarthr.design/products/components/ fl ash- message/ʢݱࡏඇਪʣ • toastͷΑ͏ͳίϯϙʔωϯτ
• ୲ϓϩμΫτͰ༻͓ͯ͠ΓɺઈࢍվળରԠத
FlashMessage (SmartHR UI) • https://smarthr.design/products/components/ fl ash- message/ʢݱࡏඇਪʣ • toastͷΑ͏ͳίϯϙʔωϯτ
• ୲ϓϩμΫτͰ༻͓ͯ͠ΓɺઈࢍվળରԠத ࠓ͜ͷΛ͠·͢ʂ
ͳʹ͕՝ͳͷ͔
՝1ɿඪ४ͩͱ8ඵͰফ͑Δ ݒ೦ Ϣʔβʔ͕จࣈΛಡΈɺ༰Λཧղ͢Δલʹফ͑ͯ͠· ͏Մೳੑ͕͋Δ ରԠҊ ࣗಈͰফ͞ͳ͍Α͏ʹ͢Δ ɾΦϓγϣϯΛࢦఆ͠ɺࣗಈͰফ͑ͳ͍ઃఆʹ͢Δ
ɾॏཁͳϝοηʔδΛදࣔ͢ΔࡍɺFlashMessageͷ ༻͠ͳ͍
՝1ɿඪ४ͩͱ8ඵͰফ͑Δ ݒ೦ Ϣʔβʔ͕จࣈΛಡΈɺ༰Λཧղ͢Δલʹফ͑ͯ͠· ͏Մೳੑ͕͋Δ վળҊ ࣗಈͰফ͞ͳ͍Α͏ʹ͢Δ ɾΦϓγϣϯΛࢦఆ͠ɺࣗಈͰফ͑ͳ͍ઃఆʹ͢Δ
ɾॏཁͳϝοηʔδΛදࣔ͢ΔࡍɺFlashMessageΛ ༻͠ͳ͍
՝2ɿؾ͖ͮʹ͍͘ ݒ೦ ಛఆͷྖҬΛݟ͍ͯΔ߹σΟεϓϨΠ͕େ͖͍ ߹ɺը໘Λ֦େ͍ͯ͠Δ߹ͳͲࢹքʹೖΓʹ͍͘ ରԠҊ FlashMessageͷ༻ΛΊɺҎԼΛݕ౼͢Δ ɾૢ࡞ରͷۙ͘ʹϝοηʔδΛදࣔ͢Δ
ɾؾ͖͍ͮ͢ίϯϙʔωϯτΛ͏
՝2ɿؾ͖ͮʹ͍͘ ݒ೦ ಛఆͷྖҬΛݟ͍ͯΔ߹σΟεϓϨΠ͕େ͖͍ ߹ɺը໘Λ֦େ͍ͯ͠Δ߹ͳͲࢹքʹೖΓʹ͍͘ վળҊ FlashMessageͷ༻ΛΊɺҎԼΛݕ౼͢Δ ɾૢ࡞ରͷۙ͘ʹϝοηʔδΛදࣔ͢Δ
ɾؾ͖͍ͮ͢ίϯϙʔωϯτΛ͏
FlashMessageͷ՝ Θ͔ͬͨ
FlashMessage༻ΛΊͯ Ͳ͏͢Δ͔ʁ
ରԠํ • Ϣʔβʔ͕ૢ࡞ͨ͠ૢ࡞ରͷۙ͘ʹϝο ηʔδΛදࣔ͢Δ • ্ه͕ࠔͳ߹ɺʮNoti fi cationBarʯͰ ϝοηʔδΛදࣔ͢Δ
Noti fi cationBar
None
Noti fi cationBar (SmartHR UI) • https://smarthr.design/products/components/noti fi cation- bar/
• ͍Ͳ͜Ζ • ૢ࡞ޙʹɺը໘શମ͕ΓସΘΔͱ͖ • μΠΞϩάͰૢ࡞͠ɺݩͷը໘ʹΔͱ͖ • ಛผͰॏཁͳใ͓ΒͤΛදࣔ͢Δͱ͖
ରԠͷྲྀΕ
ରԠͷྲྀΕ 1.ͲͷΑ͏ͳૢ࡞/ॲཧΛߦͬͨ࣌ʹϝοηʔδΛ ද͍ࣔͯ͠Δ͔ਫ਼ࠪ 2.ύλʔϯผʹྨ͠ɺ֤ରԠํΛݕ౼ 3.νʔϜͷσβΠφʔͱೝࣝ߹Θͤɾௐ 4.νʔϜશମʹల։͠߹ҙɾܾఆ 5.ը໘͝ͱʹରԠΛਐߦத
None
ϝοηʔδදࣔύλʔϯ μΠΞϩά ɹμΠΞϩάΛด͡ͳ͍߹ɿϘλϯۙ ɹμΠΞϩάΛด͡Δ߹ɿNoti fi cationBar μΠΞϩάҎ֎
ɹϘλϯΛԡͯ͠ߦ͏ॲཧͷ߹ɿϘλϯۙ ɹ্هҎ֎ɿNoti fi cationBar
Α͔ͬͨ͜ͱ • ࠷ॳʹύλʔϯਫ਼ࠪͱ֤ରԠํΛܾΊΒΕ ͨͷͰରԠΛ໎ΘͣਐΊΒΕͨ • ௨Λग़͢ύλʔϯΛཧ͠υΩϡϝϯτԽ ͨ͜͠ͱͰνʔϜͰڞ௨ೝࣝΛ࣋ͯͨ • ͜Ε·Ͱ௨UI͕ࠞࡏ͍ͯͨ͠ •
ػೳՃ࣌ͷ௨UI໎͍ͬͯͨ
͓ΘΓ