Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for teamLab teamLab PRO
September 08, 2025

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

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

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

Avatar for teamLab

teamLab PRO

September 08, 2025
Tweet

More Decks by teamLab

Other Decks in Programming

Transcript

  1. © teamLab Inc ࣗݾ঺հ ❏ νʔϜϥϘ ❏ ύοέʔδνʔϜ ϑϩϯτΤϯυ൝ ❏

    ৺ཧΧ΢ϯηϥʔͷࠃՈࢿ֨ ๿໦ ༏ే Honoki Yuto
  2. © teamLab Inc σβΠϯ͸3ύλʔϯ͘Β͍͋Δ Static / ੩త Shimmer / ͖ΒΊ͖

    Pulse / ఺໓ ࢀߟ: Skeleton Screens vs. Loading Screens -- An UX Battle ※ಉ͡৭ͰృΓͭͿ͚ͨͩ͠ͷσβΠϯ ※໌Δ͍৭͕ԣʹ೾ଧͭσβΠϯ ※໌Δ͕͞׈Β͔ʹ఺໓͢ΔσβΠϯ
  3. © 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>
  4. © teamLab Inc UIվળͰମײͷૣ͞Λ޲্Ͱ͖ΔͷͰ͸ʁ DB BE FE Client File ϑΝΠϧαʔόΛ

    ෼͚Α͏ index͸Ζ͏ εϖοΫ͋͛Α͏ SQLվળ͠Α͏ Ωϟογϡ͠Α͏ SSRͱCSR ௐ੔͠Α͏ ϩʔσΟϯάUIͰޡຐԽͦ͏ ࠶ϨϯμϦϯάؾΛ͚ͭΑ͏ ࢀߟ: https://www.testingwithmarie.com/posts/20230206-the-psychology-of-waiting/
  5. © 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
  6. © teamLab Inc Ұํɺεέϧτϯେͨ͜͠ͱͳ͍ͱ͍͏UXͷݚڀ΋ɹ ❏ εέϧτϯͱεϐφʔͰɺ Ϣʔβʔͷ஌֮଎౓ͷճ౴ʹ༗ҙͳࠩ͸ͳ͔ͬͨ ʢMejtoft, 2018ʣ ❏

    Ϣʔβʔͷମײ଎౓Λௐࠪͨ͠Βɺ εέϧτϯ୯ମͳͲͷUIΑΓɺ ʮϒϥϯΫ(ਅͬന) → εϐφʔʯͷॱʹɺࠞ߹Ͱදࣔ͢ΔUI ͕࠷ڧͩͬͨʢYang, 2025ʣ ʁ
  7. © teamLab Inc ❶ ஌֮త༧ظ / Perceptual Anticipation ❏ ༧ظ͍ͯ͠Δ͔͍ͳ͍͔Ͱ͸ਫ਼ਆతͳ४උঢ়ଶ͕ҟͳΓɺͦͷ݁ՌΛड͚ͨ

    ࣌ͷೝ஌ෛՙ͕มΘΔͱ͍͏஌֮৺ཧֶͷཧ࿦ʢPoulton, E. C., 1950ʣ ࣍͜͏͍͏ܗঢ়ͷ UI͕དྷΔͷͶ 😲 εέϧτϯεΫϦʔϯ͸஌֮త༧ظΛαϙʔτͯ͠ɺೝ஌ෛՙΛԼ͛ΔޮՌ͕͋Δ
  8. © teamLab Inc ❷ ೝ஌తྲྀெੑ / Cognitive Fluency ❏ ྲྀெੑͷ͋Δ৘ใ͸޷·ΕΔͱ͍͏ೝ஌৺ཧֶͷཧ࿦ʢUnkelbach,

    2006ʣ ❏ UXք۾Ͱ͸ஈ֊తදࣔͱݴͬͨΓ͢Δɻ εέϧτϯεΫϦʔϯ͸ஈ֊తදࣔΛੜΉ͜ͱʹΑͬͯਓؒʹͱͬͯ޷·͍͠UIʹͳΔ
  9. © teamLab Inc ❸ ೳಈత଴ػ / Active Waiting ❏ ͨͩडಈతʹ଴ͭͷͰ͸ͳ͘ɺೳಈతʹ଴ͭํ͕ɺ଴ػதͷෆշײ͕ܰݮ͢

    Δͱ͍͏ཧ࿦ʢRichard C. Larson, 1987ʣ εέϧτϯεΫϦʔϯ͸ɺҙࣝΛ଴͔ͪ࣌ؒΒίϯςϯπʹม͑ɺ଴ػதͷෆշײΛݮΒ͢ 🤩 Կ͕དྷΔͷʁ ⏳ 🤔 ※จݙͰ͸”occupied time”ͱ͔ɺ”unoccupied time”ͱදݱ͞Ε͍ͯΔ