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.2k
通知UIを改善している話
shira
June 01, 2023
Tweet
Share
More Decks by shira
See All by shira
開発プロセスとアクセシビリティ
shira
0
1
:is()と:where()の話
shira
0
5k
実践アクセシビリティ in Angularアプリケーション
shira
0
600
hoverとタッチスクリーンデバイス
shira
2
1.2k
犬顔or猫顔判定アプリを作っている話.pdf
shira
1
180
社内LT大会開催に至るまでの話
shira
4
410
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
A Philosophy of Restraint
colly
203
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
19k
Optimizing for Happiness
mojombo
376
70k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
610
For a Future-Friendly Web
brad_frost
176
9.5k
The Pragmatic Product Professional
lauravandoore
32
6.4k
The Cult of Friendly URLs
andyhume
78
6.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
220
RailsConf 2023
tenderlove
29
980
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໎͍ͬͯͨ
͓ΘΓ