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
KATA
mclloyd
30
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Raft: Consensus for Rubyists
vanstee
140
7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Statistics for Hackers
jakevdp
799
220k
We Have a Design System, Now What?
morganepeng
53
7.7k
Producing Creativity
orderedlist
PRO
346
40k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
320
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໎͍ͬͯͨ
͓ΘΓ