ʮ଴্ͨͤखʯͳεέϧτϯεΫϦʔϯɺ ͦͷUXͷཪଆ νʔϜϥϘɹ๿໦ɹ༏ే ϑϩϯτΤϯυΧϯϑΝϨϯε๺ւಓ2025 (LT 5෼) 

© teamLab Inc ࣗݾ঺հ ❏ νʔϜϥϘ ❏ ύοέʔδνʔϜ ϑϩϯτΤϯυ൝ ❏ ৺ཧΧ΢ϯηϥʔͷࠃՈࢿ֨ ๿໦ ༏ే Honoki Yuto 

© teamLab Inc આ໌ͷྲྀΕ ❏ εέϧτϯεΫϦʔϯͱ͸ʁ ❏ εέϧτϯεΫϦʔϯ͸ૣ͘ײ͡Δ͔ʁ ❏ εέϧτϯεΫϦʔϯͱ৺ཧֶʁ ❏ εέϧτϯεΫϦʔϯΛ׆͔͢ʹ͸ʁ ❏ ·ͱΊ 

εέϧτϯεΫϦʔϯͱ͸ʁ 

© teamLab Inc 

© teamLab Inc ࠓͷΑ͏ͳɺΑ͘ݟ͔͚ΔಡΈࠐΈதͷσβΠϯ ❏ ίϯςϯπͷಡΈࠐΈதɺϨΠΞ΢τߏ଄ΛϓϨʔεϗϧμʔͱͯ͠ දࣔ͢ΔUIσβΠϯͷ͜ͱ ❏ ໊ͩͨΔΞϓϦͷಡΈࠐΈதʹ࢖ΘΕ͍ͯΔʢҎԼ͸GAFAʣ ▼Youtube ▼facebook ▼amazon ▼iPhone 

© teamLab Inc σβΠϯ͸3ύλʔϯ͘Β͍͋Δ Static / ੩త Shimmer / ͖ΒΊ͖ Pulse / ఺໓ ࢀߟ: Skeleton Screens vs. Loading Screens -- An UX Battle ※ಉ͡৭ͰృΓͭͿ͚ͨͩ͠ͷσβΠϯ ※໌Δ͍৭͕ԣʹ೾ଧͭσβΠϯ ※໌Δ͕͞׈Β͔ʹ఺໓͢ΔσβΠϯ 

© teamLab Inc Shimmerͷ࢓૊Έɻ೉͘͠͸ͳ͍ɻʢॾઆ͋Γʣ 10% 20% 30% 110°ճస എܠ෯Λ200%ʹҾ͖Ԇ͹͢ എܠ͚ͩΛ-200ʙ+200%ʹɺແݶʹԣʹಈ͔͢ άϨʔͱനͷάϥσʔγϣϯ ׬੒✨ -200% +200% 

© 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; } } 

εέϧτϯεΫϦʔϯ͸ૣ͘ײ͡Δ͔ʁ 

© teamLab Inc େલఏɺϢʔβʔ͸଴ͭͷ͕ݏ͍ ❏ ଴͕ͪ࣌ؒ3ඵҎ্ʹͳΔͱ53%͕αΠτ͔Β཭୤͢Δͱ͍͏σʔλ͕͋Δ ࢀߟ: Mobile site load time statistics - Think with Google 

© teamLab Inc UIվળͰମײͷૣ͞Λ޲্Ͱ͖ΔͷͰ͸ʁ DB BE FE Client File ϑΝΠϧαʔόΛ ෼͚Α͏ index͸Ζ͏ εϖοΫ͋͛Α͏ SQLվળ͠Α͏ Ωϟογϡ͠Α͏ SSRͱCSR ௐ੔͠Α͏ ϩʔσΟϯάUIͰޡຐԽͦ͏ ࠶ϨϯμϦϯάؾΛ͚ͭΑ͏ ࢀߟ: https://www.testingwithmarie.com/posts/20230206-the-psychology-of-waiting/ 

© 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 

© teamLab Inc Ұํɺεέϧτϯେͨ͜͠ͱͳ͍ͱ͍͏UXͷݚڀ΋ɹ ❏ εέϧτϯͱεϐφʔͰɺ Ϣʔβʔͷ஌֮଎౓ͷճ౴ʹ༗ҙͳࠩ͸ͳ͔ͬͨ ʢMejtoft, 2018ʣ ❏ Ϣʔβʔͷମײ଎౓Λௐࠪͨ͠Βɺ εέϧτϯ୯ମͳͲͷUIΑΓɺ ʮϒϥϯΫ(ਅͬന) → εϐφʔʯͷॱʹɺࠞ߹Ͱදࣔ͢ΔUI ͕࠷ڧͩͬͨʢYang, 2025ʣ ʁ 

© teamLab Inc εέϧτϯεΫϦʔϯ͸ૣ͘ײ͡Δ͔ʁͷ౴͑ ʮૣ͘ײ͡Δʯͱ͍͏ΑΓɺ଴ͬͯΔײ͕গͳ͍ ͦͷUXͷཪଆʹ͸ʮ৺ཧֶʯ͕ӅΕ͍ͯ·͢ɻ 

εέϧτϯεΫϦʔϯͱ৺ཧֶʁ 

© teamLab Inc εέϧτϯεΫϦʔϯͷUXʹؔΘΔ৺ཧֶ̏બ ஌֮త ༧ظ ೝ஌త ྲྀெੑ ೳಈత ଴ػ ❶ ❷ ❸ 

© teamLab Inc ❶ ஌֮త༧ظ / Perceptual Anticipation ❏ ༧ظ͍ͯ͠Δ͔͍ͳ͍͔Ͱ͸ਫ਼ਆతͳ४උঢ়ଶ͕ҟͳΓɺͦͷ݁ՌΛड͚ͨ ࣌ͷೝ஌ෛՙ͕มΘΔͱ͍͏஌֮৺ཧֶͷཧ࿦ʢPoulton, E. C., 1950ʣ ࣍͜͏͍͏ܗঢ়ͷ UI͕དྷΔͷͶ 😲 εέϧτϯεΫϦʔϯ͸஌֮త༧ظΛαϙʔτͯ͠ɺೝ஌ෛՙΛԼ͛ΔޮՌ͕͋Δ 

© teamLab Inc ❷ ೝ஌తྲྀெੑ / Cognitive Fluency ❏ ྲྀெੑͷ͋Δ৘ใ͸޷·ΕΔͱ͍͏ೝ஌৺ཧֶͷཧ࿦ʢUnkelbach, 2006ʣ ❏ UXք۾Ͱ͸ஈ֊తදࣔͱݴͬͨΓ͢Δɻ εέϧτϯεΫϦʔϯ͸ஈ֊తදࣔΛੜΉ͜ͱʹΑͬͯਓؒʹͱͬͯ޷·͍͠UIʹͳΔ 

© teamLab Inc ❸ ೳಈత଴ػ / Active Waiting ❏ ͨͩडಈతʹ଴ͭͷͰ͸ͳ͘ɺೳಈతʹ଴ͭํ͕ɺ଴ػதͷෆշײ͕ܰݮ͢ Δͱ͍͏ཧ࿦ʢRichard C. Larson, 1987ʣ εέϧτϯεΫϦʔϯ͸ɺҙࣝΛ଴͔ͪ࣌ؒΒίϯςϯπʹม͑ɺ଴ػதͷෆշײΛݮΒ͢ 🤩 Կ͕དྷΔͷʁ ⏳ 🤔 ※จݙͰ͸”occupied time”ͱ͔ɺ”unoccupied time”ͱදݱ͞Ε͍ͯΔ 

εέϧτϯεΫϦʔϯΛ׆͔͢ʹ͸ʁ 

© teamLab Inc ʢ̍ʣεέϧτϯΛϖʔδͷߏ଄ͱಉ༷ͷܗʹ͢Δ ❏ Ϣʔβʔ͕ʮ⁞஌֮త༧ظʯͨ͠UIͱζϨͳ͍Α͏ʹ͢Δ 

© teamLab Inc ʢ̎ʣϢʔβʔͷܦݧతʹద͞ͳ͍৔ॴͰ͸ආ͚Δ ❏ ٸʹܦݧʹ൓ͨ͠UI͕དྷΔͱʮ ೝ஌తྲྀெੑʯͷ๦͛ʹͳΔ ❏ ྫ͑͹ɺಈըಡΈࠐΈதͷUI͸ɺεϐφʔ͕ҰൠతͳͷͰͦ͏͢Δ 

© teamLab Inc ʢ̏ʣ਺ඵʙ10ඵఔ౓ͷॳظϩʔσΟϯάʹ࠷ద ❏ εέϧτϯεΫϦʔϯͷʮ⁠ೳಈత଴ػʯޮՌʹ΋ݶք͸͋Δ ❏ 10ඵΛ௒͑ΔͱϓϩάϨεόʔ͕͋Δͱྑ͍ ࢀߟ: https://www.nngroup.com/articles/skeleton-screens/ 

·ͱΊ 

© teamLab Inc εέϧτϯεΫϦʔϯɺਖ਼͘͠࢖͑͹ʮ଴্ͨͤखʯ ❏ εέϧτϯεΫϦʔϯ͸ૣ͘ײͤ͡͞Δͱ͍͏͔ɺ଴ͬͯΔײΛܰݮ͢Δ ❏ ྑ͞Λ׆͔ͨ͢Ίʹ͸ɺεέϧτϯεΫϦʔϯͷ৺ཧֶతഎܠΛཧղͯ͠ɺ ޻෉࣮ͯ͠૷͢Δඞཁ͕͋Δ εϐφʔʹ๞͖ͨօ͞ΜɺϞμϯͳεέϧτϯεΫϦʔϯΛऔΓೖΕͯΈͯ͸ʁ 

෇࿥ 

© teamLab Inc ৭ʑͳϩʔσΟϯάΛମײͰ͖ΔσϞϖʔδ࡞Γ·ͨ͠ https://honokiyuto.github.io/loading-demo-page/ 

© teamLab Inc Zennʹͯొஃࢿྉެ։͠·͢ʂ Zenn νʔϜϥϘϑϩϯτΤϯυ൝ɹͰݕࡧʂʂʂ 

© teamLab Inc EOF