「待たせ上手」なスケルトンスクリーン、 そのUXの裏側

フロントエンドカンファレンス北海道2025にてチームラボのフロントエンドエンジニアが登壇用に作成したスライドです。

フロントエンドカンファレンス北海道2025
開催日：2025年9月6日（土）
会場：エア・ウォーターの森（北海道札幌市）

Transcript

1. ʮ଴্ͨͤखʯͳεέϧτϯεΫϦʔϯɺ ͦͷUXͷཪଆ νʔϜϥϘɹ๿໦ɹ༏ే ϑϩϯτΤϯυΧϯϑΝϨϯε๺ւಓ2025 (LT 5෼)
2. © teamLab Inc ࣗݾ঺հ ❏ νʔϜϥϘ ❏ ύοέʔδνʔϜ ϑϩϯτΤϯυ൝ ❏ ৺ཧΧ΢ϯηϥʔͷࠃՈࢿ֨ ๿໦ ༏ే Honoki Yuto
3. © teamLab Inc આ໌ͷྲྀΕ ❏ εέϧτϯεΫϦʔϯͱ͸ʁ ❏ εέϧτϯεΫϦʔϯ͸ૣ͘ײ͡Δ͔ʁ ❏ εέϧτϯεΫϦʔϯͱ৺ཧֶʁ ❏ εέϧτϯεΫϦʔϯΛ׆͔͢ʹ͸ʁ ❏ ·ͱΊ
4. εέϧτϯεΫϦʔϯͱ͸ʁ
5. © teamLab Inc
6. © teamLab Inc ࠓͷΑ͏ͳɺΑ͘ݟ͔͚ΔಡΈࠐΈதͷσβΠϯ ❏ ίϯςϯπͷಡΈࠐΈதɺϨΠΞ΢τߏ଄ΛϓϨʔεϗϧμʔͱͯ͠ දࣔ͢ΔUIσβΠϯͷ͜ͱ ❏ ໊ͩͨΔΞϓϦͷಡΈࠐΈதʹ࢖ΘΕ͍ͯΔʢҎԼ͸GAFAʣ ▼Youtube ▼facebook ▼amazon ▼iPhone
7. © teamLab Inc σβΠϯ͸3ύλʔϯ͘Β͍͋Δ Static / ੩త Shimmer / ͖ΒΊ͖ Pulse / ఺໓ ࢀߟ: Skeleton Screens vs. Loading Screens -- An UX Battle ※ಉ͡৭ͰృΓͭͿ͚ͨͩ͠ͷσβΠϯ ※໌Δ͍৭͕ԣʹ೾ଧͭσβΠϯ ※໌Δ͕͞׈Β͔ʹ఺໓͢ΔσβΠϯ
8. © teamLab Inc Shimmerͷ࢓૊Έɻ೉͘͠͸ͳ͍ɻʢॾઆ͋Γʣ 10% 20% 30% 110°ճస എܠ෯Λ200%ʹҾ͖Ԇ͹͢ എܠ͚ͩΛ-200ʙ+200%ʹɺແݶʹԣʹಈ͔͢ άϨʔͱനͷάϥσʔγϣϯ ׬੒✨ -200% +200%
9. © teamLab Inc ͖ͬ͞ͷ͸CSS͚ͩͰՄೳɻߦ਺΋গͳ͍ɻ /* ຊମ */ .skeleton { background: #ffffff; background: linear-gradient( 110deg, #eeeeee 10%, #ffffff 20%, #eeeeee 30% ); border-radius: 4px; background-size: 200% 100%; animation: shimmer 1.5s linear infinite; } /* shimmerΞχϝʔγϣϯ */ @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } <div class="skeleton …"></div>
10. εέϧτϯεΫϦʔϯ͸ૣ͘ײ͡Δ͔ʁ
11. © teamLab Inc େલఏɺϢʔβʔ͸଴ͭͷ͕ݏ͍ ❏ ଴͕ͪ࣌ؒ3ඵҎ্ʹͳΔͱ53%͕αΠτ͔Β཭୤͢Δͱ͍͏σʔλ͕͋Δ ࢀߟ: Mobile site load time statistics - Think with Google
12. © teamLab Inc UIվળͰମײͷૣ͞Λ޲্Ͱ͖ΔͷͰ͸ʁ DB BE FE Client File ϑΝΠϧαʔόΛ ෼͚Α͏ index͸Ζ͏ εϖοΫ͋͛Α͏ SQLվળ͠Α͏ Ωϟογϡ͠Α͏ SSRͱCSR ௐ੔͠Α͏ ϩʔσΟϯάUIͰޡຐԽͦ͏ ࠶ϨϯμϦϯάؾΛ͚ͭΑ͏ ࢀߟ: https://www.testingwithmarie.com/posts/20230206-the-psychology-of-waiting/
13. © teamLab Inc εέϧτϯ͸ମײૣ͍ͱ͍͏UXؔ࿈ͷهࣄ͕ͪ´ …switching from spinners to a skeleton screen that incrementally filled in as content arrived back from the server. People stopped complaining about wait times…ʢεϐφʔ͔Βεέϧτϯʹม͑ͨΒ଴ͪ࣌ؒͷΫϨʔϜݮͬͨʣ ࢀߟ: Effective Skeleton Screens - Web Performance Consulting | TimKadlec.com By providing a visual feedback, skeleton screens help reduce perceived wait times, improving the overall perception of speed and … ʢεέϧτϯ͸଴͍ͬͯΔͱ͍͏ೝࣝΛݮΒ͢ʣ ࢀߟ: Skeleton Screens in Modern UI Design | by Gloria Solinas | Bootcamp | Medium
14. © teamLab Inc Ұํɺεέϧτϯେͨ͜͠ͱͳ͍ͱ͍͏UXͷݚڀ΋ɹ ❏ εέϧτϯͱεϐφʔͰɺ Ϣʔβʔͷ஌֮଎౓ͷճ౴ʹ༗ҙͳࠩ͸ͳ͔ͬͨ ʢMejtoft, 2018ʣ ❏ Ϣʔβʔͷମײ଎౓Λௐࠪͨ͠Βɺ εέϧτϯ୯ମͳͲͷUIΑΓɺ ʮϒϥϯΫ(ਅͬന) → εϐφʔʯͷॱʹɺࠞ߹Ͱදࣔ͢ΔUI ͕࠷ڧͩͬͨʢYang, 2025ʣ ʁ
15. © teamLab Inc εέϧτϯεΫϦʔϯ͸ૣ͘ײ͡Δ͔ʁͷ౴͑ ʮૣ͘ײ͡Δʯͱ͍͏ΑΓɺ଴ͬͯΔײ͕গͳ͍ ͦͷUXͷཪଆʹ͸ʮ৺ཧֶʯ͕ӅΕ͍ͯ·͢ɻ
16. εέϧτϯεΫϦʔϯͱ৺ཧֶʁ
17. © teamLab Inc εέϧτϯεΫϦʔϯͷUXʹؔΘΔ৺ཧֶ̏બ ஌֮త ༧ظ ೝ஌త ྲྀெੑ ೳಈత ଴ػ ❶ ❷ ❸
18. © teamLab Inc ❶ ஌֮త༧ظ / Perceptual Anticipation ❏ ༧ظ͍ͯ͠Δ͔͍ͳ͍͔Ͱ͸ਫ਼ਆతͳ४උঢ়ଶ͕ҟͳΓɺͦͷ݁ՌΛड͚ͨ ࣌ͷೝ஌ෛՙ͕มΘΔͱ͍͏஌֮৺ཧֶͷཧ࿦ʢPoulton, E. C., 1950ʣ ࣍͜͏͍͏ܗঢ়ͷ UI͕དྷΔͷͶ 😲 εέϧτϯεΫϦʔϯ͸஌֮త༧ظΛαϙʔτͯ͠ɺೝ஌ෛՙΛԼ͛ΔޮՌ͕͋Δ
19. © teamLab Inc ❷ ೝ஌తྲྀெੑ / Cognitive Fluency ❏ ྲྀெੑͷ͋Δ৘ใ͸޷·ΕΔͱ͍͏ೝ஌৺ཧֶͷཧ࿦ʢUnkelbach, 2006ʣ ❏ UXք۾Ͱ͸ஈ֊తදࣔͱݴͬͨΓ͢Δɻ εέϧτϯεΫϦʔϯ͸ஈ֊తදࣔΛੜΉ͜ͱʹΑͬͯਓؒʹͱͬͯ޷·͍͠UIʹͳΔ
20. © teamLab Inc ❸ ೳಈత଴ػ / Active Waiting ❏ ͨͩडಈతʹ଴ͭͷͰ͸ͳ͘ɺೳಈతʹ଴ͭํ͕ɺ଴ػதͷෆշײ͕ܰݮ͢ Δͱ͍͏ཧ࿦ʢRichard C. Larson, 1987ʣ εέϧτϯεΫϦʔϯ͸ɺҙࣝΛ଴͔ͪ࣌ؒΒίϯςϯπʹม͑ɺ଴ػதͷෆշײΛݮΒ͢ 🤩 Կ͕དྷΔͷʁ ⏳ 🤔 ※จݙͰ͸”occupied time”ͱ͔ɺ”unoccupied time”ͱදݱ͞Ε͍ͯΔ
21. εέϧτϯεΫϦʔϯΛ׆͔͢ʹ͸ʁ
22. © teamLab Inc ʢ̍ʣεέϧτϯΛϖʔδͷߏ଄ͱಉ༷ͷܗʹ͢Δ ❏ Ϣʔβʔ͕ʮ⁞஌֮త༧ظʯͨ͠UIͱζϨͳ͍Α͏ʹ͢Δ
23. © teamLab Inc ʢ̎ʣϢʔβʔͷܦݧతʹద͞ͳ͍৔ॴͰ͸ආ͚Δ ❏ ٸʹܦݧʹ൓ͨ͠UI͕དྷΔͱʮ ೝ஌తྲྀெੑʯͷ๦͛ʹͳΔ ❏ ྫ͑͹ɺಈըಡΈࠐΈதͷUI͸ɺεϐφʔ͕ҰൠతͳͷͰͦ͏͢Δ
24. © teamLab Inc ʢ̏ʣ਺ඵʙ10ඵఔ౓ͷॳظϩʔσΟϯάʹ࠷ద ❏ εέϧτϯεΫϦʔϯͷʮ⁠ೳಈత଴ػʯޮՌʹ΋ݶք͸͋Δ ❏ 10ඵΛ௒͑ΔͱϓϩάϨεόʔ͕͋Δͱྑ͍ ࢀߟ: https://www.nngroup.com/articles/skeleton-screens/
25. ·ͱΊ
26. © teamLab Inc εέϧτϯεΫϦʔϯɺਖ਼͘͠࢖͑͹ʮ଴্ͨͤखʯ ❏ εέϧτϯεΫϦʔϯ͸ૣ͘ײͤ͡͞Δͱ͍͏͔ɺ଴ͬͯΔײΛܰݮ͢Δ ❏ ྑ͞Λ׆͔ͨ͢Ίʹ͸ɺεέϧτϯεΫϦʔϯͷ৺ཧֶతഎܠΛཧղͯ͠ɺ ޻෉࣮ͯ͠૷͢Δඞཁ͕͋Δ εϐφʔʹ๞͖ͨօ͞ΜɺϞμϯͳεέϧτϯεΫϦʔϯΛऔΓೖΕͯΈͯ͸ʁ
27. ෇࿥
28. © teamLab Inc ৭ʑͳϩʔσΟϯάΛମײͰ͖ΔσϞϖʔδ࡞Γ·ͨ͠ https://honokiyuto.github.io/loading-demo-page/
29. © teamLab Inc Zennʹͯొஃࢿྉެ։͠·͢ʂ Zenn νʔϜϥϘϑϩϯτΤϯυ൝ɹͰݕࡧʂʂʂ
30. © teamLab Inc EOF