The HIG & Software UI Design

WWDC22 Recap in Goodpatch

WWDC22の発表内容とHIGの更新内容の振り返りつつ、AppleプラットフォームにおけるHIGの位置付けとソフトウェアUIデザインへの向き合い方を考えます。

Transcript

1. The HIG & Software UI Design
   https://goodpatch.connpass.com/event/251756/
   22.7.11
   WWDC22ͷൃද಺༰ͱHIGͷߋ৽಺༰͔ΒUIσβΠϯΛߟ͑Δ
   #wwdc22gp
   © 2022 Satori MARU.
   usagimaru
   

   View Slide

2. Satori MARU
   #wwdc22gp
   © 2022 Satori MARU.
   Software Designer / UI Architect / Developer
   @usagimaru
   @usagimaru
   @usagimaruma
   Goodpatch Inc. Design Ops
   

   View Slide

3. Software Designer / UI Architect / Developer
   Satori MARU
   @usagimaru
   @usagimaru
   @usagimaruma
   Goodpatch Inc. Design Ops
   #wwdc22gp
   © 2022 Satori MARU.
   

   View Slide

4. https://goodpatch.com/work/vegery
   © 2022 Satori MARU.
   VegeryʢαʔϏεऴྃʣ
   ٶ࡚ݝ࢈໺ࡊɾੜ઱৯඼ͷσϦόϦʔαʔϏεʢiOSωΠςΟϒΞϓϦέʔγϣϯʣ
   גࣜձࣾϕδΦϕδί
   

   View Slide

5. https://goodpatch.com/work/jins-meme-office
   © 2022 Satori MARU.
   JINS MEME OFFICE
   ϝΨωσόΠεʹΑΔूதྗܭଌappʢiOSωΠςΟϒʗApple WatchΞϓϦέʔγϣϯʣ
   גࣜձࣾδϯζ
   

   View Slide

6. https://goodpatch.com/news/sunchigooddesign
   © 2022 Satori MARU.
   ͞Μͪ ʙ޻ܳͱ୳๚ʙʗ͞Μͪͷख஽ʢiOS appαʔϏεऴྃʣ
   ޻ܳ࢈஍ϝσΟΞɺཱྀͷ͓ͱ΋ΞϓϦʢWebαΠτʗiOSωΠςΟϒΞϓϦέʔγϣϯʣ
   גࣜձࣾத઒੓ࣣ঎ళ
   

   View Slide

7. https://goodpatch.com/work/6gram
   © 2022 Satori MARU.
   6gramʢݱMIXI Mʣ
   όʔνϟϧϓϦϖΠυΧʔυʗܾࡁappʢiOSωΠςΟϒΞϓϦέʔγϣϯʣ
   גࣜձࣾϛΫγΟ
   

   View Slide

8. https://goodpatch.com/work/onecareercloud
   © 2022 Satori MARU.
   ϫϯΩϟϦΞΫϥ΢υ
   ࠾༻ਓࣄ޲͚SaaSʢWebΞϓϦέʔγϣϯʣ
   גࣜձࣾϫϯΩϟϦΞ
   

   View Slide

9. © 2022 Satori MARU.
   macOS native
   https://macos-native.github.io
   ߴ඼࣭ͳmacOSωΠςΟϒΞϓϦέʔγϣϯ։ൃΛࢤ͠
   ͦͷٕज़ͱ஌ݟΛڞ༗͢ΔͨΊͷίϛϡχςΟ
   1024jp Nob Nukui
   zumu usagimaru
   Private
   

   View Slide

10. © 2022 Satori MARU.
    Developer UI Designer
    ςʔϚ
    

    View Slide

11. © 2022 Satori MARU.
    Develop UI Design
    ςʔϚ
    

    View Slide

12. © 2022 Satori MARU.
    Develop UI Design
    Swift
    API
    ࠓճ͸࿩୊ʹ͠·ͤΜ
    ςʔϚ
    ࣮૷ํ๏
    

    View Slide

13. © 2022 Satori MARU.
    #wwdc22gp
    HIG
    

    View Slide

14. © 2022 Satori MARU.
    #wwdc22gp
    Human Interface Guidelines
    

    View Slide

15. © 2022 Satori MARU.
    #wwdc22gp
    https://developer.apple.com/design/human-interface-guidelines/guidelines/overview
    2022.06
    

    View Slide

16. © 2022 Satori MARU.
    #wwdc22gp
    HIGͱ͸Կͳͷ͔
    

    View Slide

17. © 2022 Satori MARU.
    #wwdc22gp
    AppleϓϥοτϑΥʔϜͷͨΊͷ
    σβΠϯΨΠμϯεɺσβΠϯݴޠ
    HIG
    )*(ͷࠜఈʹ͋ΔجຊతͳσβΠϯͷߟ͑ํ͸
    ϓϥοτϑΥʔϜඇґଘͰ͋Γɺීวతʹద༻Ͱ͖Δ༨஍͕͋Δ
    HIGͱ͸Կͳͷ͔
    

    View Slide

18. © 2022 Satori MARU.
    #wwdc22gp
    https://developer.apple.com/design/human-interface-guidelines/guidelines/overview
    2022.06
    HIGͱ͸Կͳͷ͔
    

    View Slide

19. © 2022 Satori MARU.
    #wwdc22gp
    The Apple ][ Human Interface Guidelines, Pre-Release Version (1977–1985)
    1985
    HIGͱ͸Կͳͷ͔
    

    View Slide

20. © 2022 Satori MARU.
    #wwdc22gp
    1987
    1992
    Macintosh Human Interface Guidelines (1992) / Apple Human Interface Guidelines: The Apple Desktop Interface (1987) / ಉ೔ຊޠ൛ (1989–2004)
    HIGͱ͸Կͳͷ͔
    

    View Slide

21. © 2022 Satori MARU.
    #wwdc22gp
    Apple Human Interface Guidelines: The Apple Desktop Interface ೔ຊޠ൛ (1989–2004)
    Apple Desktop Interfaceͷϧʔπ
    

    View Slide

22. © 2022 Satori MARU.
    #wwdc22gp
    Apple Human Interface Guidelines: The Apple Desktop Interface ೔ຊޠ൛ (1989–2004)
    Apple Desktop Interfaceͷϧʔπ
    μάϥεɾΤϯήϧόʔτ
    Xerox ύϩΞϧτݚڀॴ
    ΞϥϯɾέΠ
    

    View Slide

23. © 2022 Satori MARU.
    #wwdc22gp
    http://www.dougengelbart.org/content/view/209/448/
    https://en.wikipedia.org/wiki/Dynabook
    https://ja.wikipedia.org/wiki/Macintosh
    Apple Desktop Interfaceͷϧʔπ
    1960೥୅
    ώϡʔϚϯΠϯλʔϑΣΠεͷ
    ίϯηϓτཱ͕֬
    1970೥୅
    σεΫτοϓGUIͷ
    جຊίϯηϓτཱ͕֬
    Macintosh
    SRI / μάϥεɾΤϯήϧόʔτΒ PARC / ΞϥϯɾέΠΒ
    1984
    

    View Slide

24. © 2022 Satori MARU.
    #wwdc22gp
    HIG
    )*(ͷࠜఈʹ͋ΔجຊతͳσβΠϯͷߟ͑ํ͸
    ϓϥοτϑΥʔϜඇґଘͰ͋Γɺීวతʹద༻Ͱ͖Δ༨஍͕͋Δ
    HIGͱ͸Կͳͷ͔
    AppleϓϥοτϑΥʔϜͷͨΊͷ
    σβΠϯΨΠμϯεɺσβΠϯݴޠ
    

    View Slide

25. © 2022 Satori MARU.
    #wwdc22gp
    Design Language
    

    View Slide

26. © 2022 Satori MARU.
    #wwdc22gp
    Design Language
    σβΠϯݴޠ
    ͋Δ࢓૊Έ΍γεςϜͷཧղͷͨΊɺ
    ౷Ұݟղɾදݱɾϧʔϧɾઃܭࢥ૝Λه͢΋ͷ
    ※ొஃऀʹΑΔղऍɺݟղ
    

    View Slide

27. © 2022 Satori MARU.
    #wwdc22gp
    ʮσβΠϯΨΠυϥΠϯ͸σβΠφʔ͕ಡΉ΋ͷʯ
    ʮΤϯδχΞʹ͸σβΠϯͷӠʑ͸ແؔ܎Ͱ͋Δʯ
    ʮσβΠϯΨΠυϥΠϯʹ͸ݟͨ໨ͷࣄฑ͚ͩΛهͤ͹ྑ͍ʯ
    

    View Slide

28. ʮσβΠϯΨΠυϥΠϯ͸σβΠφʔ͕ಡΉ΋ͷʯ
    ʮΤϯδχΞʹ͸σβΠϯͷӠʑ͸ແؔ܎Ͱ͋Δʯ
    ʮσβΠϯΨΠυϥΠϯʹ͸ݟͨ໨ͷࣄฑ͚ͩΛهͤ͹ྑ͍ʯ
    © 2022 Satori MARU.
    #wwdc22gp
    ͋Δ࢓૊Έ΍γεςϜͷཧղͷͨΊɺ
    ౷Ұݟղɾදݱɾϧʔϧɾઃܭࢥ૝Λه͢΋ͷ
    

    View Slide

29. ʮσβΠϯΨΠυϥΠϯ͸σβΠφʔ͕ಡΉ΋ͷʯ
    ʮΤϯδχΞʹ͸σβΠϯͷӠʑ͸ແؔ܎Ͱ͋Δʯ
    ʮσβΠϯΨΠυϥΠϯʹ͸ݟͨ໨ͷࣄฑ͚ͩΛهͤ͹ྑ͍ʯ
    © 2022 Satori MARU.
    #wwdc22gp
    ͋Δ࢓૊Έ΍γεςϜͷཧղͷͨΊɺ
    ౷Ұݟղɾදݱɾϧʔϧɾઃܭࢥ૝Λه͢΋ͷ
    ؔ܎ऀ͸օɺňઃܭʯʹ͍ͭͯ
    ཧղ͠ͳ͚Ε͹ͳΒͳ͍
    

    View Slide

30. © 2022 Satori MARU.
    #wwdc22gp
    ΞʔΩςΫνϟ
    ϑϨʔϜϫʔΫ
    App
    ιϑτ΢ΣΞͷߏ଄ͱσβΠϯ
    ։ൃ؀ڥ͕نఆ͢Δ
    Πϝʔδ
    ։ൃ؀ڥ͕نఆ͢Δ
    ։ൃऀ͕σβΠϯ͢Δ
    04ΛؚΉ։ൃ؀ڥͱΞϓϦέʔγϣϯͷؔ܎ʢུ֓ਤʣ
    ߏ੒
    ൓ө
    

    View Slide

31. © 2022 Satori MARU.
    #wwdc22gp
    ਫ਼ਆɺઃܭࢥ૝ɺσβΠϯݴޠ
    UIϑϨʔϜϫʔΫ౳
    ϓϩμΫτ
    ιϑτ΢ΣΞͷߏ଄ͱσβΠϯ
    Πϝʔδ
    ։ൃ؀ڥ͕نఆ͢Δ
    ։ൃ؀ڥ͕نఆ͢Δ
    ։ൃऀ͕σβΠϯ͢Δ
    ιϑτ΢ΣΞϓϩμΫτͷσβΠϯ
    ߏ੒
    ൓ө
    

    View Slide

32. © 2022 Satori MARU.
    #wwdc22gp
    ਫ਼ਆɺઃܭࢥ૝ɺσβΠϯݴޠ
    UIϑϨʔϜϫʔΫ౳
    ϓϩμΫτ
    ιϑτ΢ΣΞͷߏ଄ͱσβΠϯ
    Πϝʔδ
    ։ൃ؀ڥ͕نఆ͢Δ
    ։ൃ؀ڥ͕نఆ͢Δ
    ։ൃऀ͕σβΠϯ͢Δ
    ιϑτ΢ΣΞϓϩμΫτͷσβΠϯ
    ߏ੒
    ൓ө
    ϓϥοτϑΥʔϜ
    

    View Slide

33. © 2022 Satori MARU.
    #wwdc22gp
    ਫ਼ਆɺઃܭࢥ૝ɺσβΠϯݴޠ
    UIϑϨʔϜϫʔΫ౳
    ϓϩμΫτ
    ιϑτ΢ΣΞͷߏ଄ͱσβΠϯ
    Πϝʔδ
    ։ൃ؀ڥ͕نఆ͢Δ
    ։ൃ؀ڥ͕نఆ͢Δ
    ։ൃऀ͕σβΠϯ͢Δ
    ιϑτ΢ΣΞϓϩμΫτͷσβΠϯ
    ߏ੒
    ൓ө
    ϓϥοτϑΥʔϜ
    ΞϓϦέʔγϣϯ
    

    View Slide

34. © 2022 Satori MARU.
    #wwdc22gp
    ਫ਼ਆɺઃܭࢥ૝ɺσβΠϯݴޠ
    UIϑϨʔϜϫʔΫ౳
    ϓϩμΫτ
    ιϑτ΢ΣΞͷߏ଄ͱσβΠϯ
    Πϝʔδ
    ιϑτ΢ΣΞϓϩμΫτʹ͓͚ΔσβΠϯΨΠυϥΠϯ
    ߏ੒
    ൓ө
    HIGͳͲͷσβΠϯݴޠͰ
    σβΠϯͷํ޲ੑΛࣔ͢
    ΞϓϦέʔγϣϯಠࣗͷσβΠϯݴޠͰ
    σβΠϯͷํ޲ੑΛࣔ͢
    ։ൃऀ
    
    

    View Slide

35. © 2022 Satori MARU.
    #wwdc22gp
    https://developer.apple.com/design/human-interface-guidelines/guidelines/overview
    "QQMFϓϥοτϑΥʔϜͰιϑτ΢ΣΞ։ൃΛ͢ΔͳΒɺ
    )*(౳Ͱࣔ͞ΕΔσβΠϯݴޠΛΑ͘ཧղ͠ɺ
    ňಉ͡ݴ༿ʯͰσβΠϯͷձ࿩Λ͢Δ͜ͱ͕ٻΊΒΕΔɻ
    

    View Slide

36. © 2022 Satori MARU.
    #wwdc22gp
    w λϒόʔ
    w ϘτϜφϏήʔγϣϯ
    w φϏήʔγϣϯόʔ
    w ϝχϡʔόʔ
    w ϑολʔ
    w Ϙλϯ
    w πʔϧόʔ
    نఆ͞Ε໊ͨલͱݺͼํ
    6*෦඼ʹؔ͢Δ౷ҰݟղͱσβΠϯݴޠ
    ը૾ग़యɿApple BooksΞϓϦέʔγϣϯ
    

    View Slide

37. © 2022 Satori MARU.
    #wwdc22gp
    w άϩʔόϧφϏήʔγϣϯ
    w ϩʔΧϧφϏήʔγϣϯ
    w ΞΫγϣϯπʔϧόʔ
    جຊతͳ໾ׂ
    6*෦඼ʹؔ͢Δ౷ҰݟղͱσβΠϯݴޠ
    ը૾ग़యɿApple BooksΞϓϦέʔγϣϯ
    

    View Slide

38. © 2022 Satori MARU.
    #wwdc22gp
    w ࠷େ͍ͭ͘ͷλϒΛฒ΂ΒΕΔ͔
    w ࠨதӈͲͪΒʹدͤͯ഑ஔ͢Δ͔
    w λϒΛબ୒ͨ͠Βը໘ͰԿ͕ى͜Δ͔
    w ;࣠ϨΠϠʔߏ଄ͰͷҐஔ෇͚
    w ϞʔμϧϏϡʔͱͷ݉Ͷ߹͍
    w όʔͷදࣔͱඇදࣔͷτϦΨʔ
    w ΞΠίϯͱςΩετͷදݱํ๏
    ओͳڍಈ
    6*෦඼ʹؔ͢Δ౷ҰݟղͱσβΠϯݴޠ
    ը૾ग़యɿApple BooksΞϓϦέʔγϣϯ
    

    View Slide

39. © 2022 Satori MARU.
    #wwdc22gp
    w 04ඪ४6*ϑϨʔϜϫʔΫͷઃܭʹै͏
    w ಠࣗʹ࣮૷͢Δ
    w ଞͷΞϓϦέʔγϣϯͱಉ༷ʹಈ࡞͢Δ
    w ଞͷΞϓϦέʔγϣϯͱ͸ҟͳΔৼΔ෣͍
    ࣮૷ํ๏ͱར༻ํ๏
    6*෦඼ʹؔ͢Δ౷ҰݟղͱσβΠϯݴޠ
    ը૾ग़యɿApple BooksΞϓϦέʔγϣϯ
    

    View Slide

40. © 2022 Satori MARU.
    #wwdc22gp
    6*෦඼ʹؔ͢Δ౷ҰݟղͱσβΠϯݴޠ
    نఆ͞Ε໊ͨલͱݺͼํ
    ࣮૷ํ๏ͱར༻ํ๏
    جຊతͳ໾ׂ ओͳڍಈ
    ։ൃऀ͓ΑͼϢʔβʔ͕
    ಉ͡ղऍͱೝࣝΛ͍ͯ͠Δ͜ͱ͕େ੾
    ը૾ग़యɿApple BooksΞϓϦέʔγϣϯ
    

    View Slide

41. © 2022 Satori MARU.
    #wwdc22gp
    https://developer.apple.com/design/human-interface-guidelines/guidelines/overview
    نఆ͞Ε໊ͨલͱݺͼํ
    ࣮૷ํ๏ͱར༻ํ๏
    جຊతͳ໾ׂ ओͳڍಈ
    6*෦඼ʹؔ͢Δ౷ҰݟղͱσβΠϯݴޠ
    HIG
    UIKit AppKit
    

    View Slide

42. © 2022 Satori MARU.
    #wwdc22gp
    HIG (2022.6) ͷओͳมߋ
    

    View Slide

43. © 2022 Satori MARU.
    #wwdc22gp
    Human Interface Guidelines (2022.6) / Human Interface Guidelines (2021.11)
    https://developer.apple.com/design/human-interface-guidelines/guidelines/overview
    2022.6
    2021.11
    )*(
    ͷओͳมߋ
    

    View Slide

44. © 2022 Satori MARU.
    #wwdc22gp
    Human Interface Guidelines (2022.6)
    https://developer.apple.com/design/human-interface-guidelines/guidelines/overview
    )*(
    ͷओͳมߋ
    • OSผͩͬͨϖʔδߏ੒͕౷߹
    • جຊઃܭɺύλʔϯɺίϯϙʔωϯτ౳Ͱ෼ྨ͞Εɺશମߏ੒͕มߋ
    • OS͝ͱͷݸผࢦೆ͸ϖʔδ಺ʹηΫγϣϯΛઃ͚ݴٴ
    • “Designing for *OS” ͕৽ͨʹ௥Ճ
    • ݱࡏApple͔Βਪ͞Ε͍ͯΔ߲໨Λτοϓϖʔδʹܝࡌ
    • ݕࡧػೳͷڧԽ
    • จॻͱͯ͠ͷϏδϡΞϧɾମࡋͷ࠶ઃܭ
    • ؔ࿈͢ΔWWDCηογϣϯϏσΦ΍ٕज़จॻ΁ͷϦϯΫΛઃஔ
    , etc.
    

    View Slide

45. © 2022 Satori MARU.
    #wwdc22gp
    OSؒͷσβΠϯݴޠͷ౷Ұͱ۠ผ
    macOSͱiPadOSͷ઀ۙ
    ՄೳͳݶΓͷΞʔΩςΫνϟͷ౷߹
    AppKit / UIKit͔Βͷ୤٫ɺSwiftUI΁ͷҠߦ
    )*(౷߹ͷͶΒ͍ͱ͸
    

    View Slide

46. © 2022 Satori MARU.
    #wwdc22gp
    Mac Intel ARM
    iPad Pro M1
    macOS / iPadOS Stage Manager
    iPadOS Overlapping Windows
    macOS AppKit SwiftUI
    iOS / iPadOS UIKit SwiftUI
    ※Ҡߦ్্
    CPUΞʔΩςΫνϟͷ౷߹ UIϑϨʔϜϫʔΫͷ౷߹ UIػೳɾUXͷ౷߹
    M1
    )*(౷߹ͷͶΒ͍ͱ͸
    https://developer.apple.com/xcode/swiftui/
    https://www.apple.com/jp/newsroom/2022/06/ipados-16-takes-the-versatility-of-ipad-even-further/
    

    View Slide

47. © 2022 Satori MARU.
    #wwdc22gp
    )*(౷߹ͷͶΒ͍ͱ͸
    Mac Intel ARM
    iPad Pro M1
    macOS / iPadOS Stage Manager
    iPadOS Overlapping Windows
    macOS AppKit SwiftUI
    iOS / iPadOS UIKit SwiftUI
    ※Ҡߦ్্
    CPUΞʔΩςΫνϟͷ౷߹ UIϑϨʔϜϫʔΫͷ౷߹ UIػೳɾUXͷ౷߹
    M1
    https://developer.apple.com/xcode/swiftui/
    https://www.apple.com/jp/newsroom/2022/06/ipados-16-takes-the-versatility-of-ipad-even-further/
    

    View Slide

48. © 2022 Satori MARU.
    #wwdc22gp
    Apple Human Interface Guidelines: The Apple Desktop Interface ೔ຊޠ൛ (1989–2004)
    Apple Desktop Interfaceͷϧʔπ
    Xerox ύϩΞϧτݚڀॴ
    ΞϥϯɾέΠ
    

    View Slide

49. © 2022 Satori MARU.
    #wwdc22gp
    https://developer.apple.com/design/human-interface-guidelines/guidelines/overview
    )*(ͷݕࡧػೳ
    HIG಺ʹߜͬͨจࣈྻݕࡧ จࣈྻݕࡧͱOSϑΟϧλ
    

    View Slide

50. © 2022 Satori MARU.
    #wwdc22gp
    https://developer.apple.com/design/human-interface-guidelines/foundations/inclusion
    https://developer.apple.com/design/human-interface-guidelines/foundations/right-to-left
    *ODMVTJPO35-
    Inclusive by design Right to leftϨΠΞ΢τ
    

    View Slide

51. © 2022 Satori MARU.
    #wwdc22gp
    https://developer.apple.com/wwdc22/sessions/?q=arabic
    %FTJHOGPS"SBCJD
    

    View Slide

52. © 2022 Satori MARU.
    #wwdc22gp
    ஫໨ηογϣϯ
    

    View Slide

53. © 2022 Satori MARU.
    #wwdc22gp
    https://developer.apple.com/videos/play/wwdc2022/10001/
    &YQMPSFOBWJHBUJPOEFTJHOGPSJ0488%$
    

    View Slide

54. © 2022 Satori MARU.
    #wwdc22gp
    ৘ใઃܭʹجͮ͘φϏήʔγϣϯͷઃܭʢ͔Βͷղऍʣ
    ňϗʔϜʯతͳॏ͍ͨλϒͷػೳΛܰྔԽͤ͞ɺશମόϥϯεΛऔΔ
    iOSͷλϒόʔ͸τοϓϨϕϧͷφϏήʔγϣϯ֊૚Λࣔ͢
    ňϗʔϜʯͰ͸ͳ͍ద੾ͳจݴɾΞΠίϯදݱΛݕ౼͢Δ
    γεςϜʹΑΔλϒͷࣗಈ੾Γସ͑ʢλϒδϟϯϓʣΛආ͚Δ
    Ϣʔεέʔεʹج͖ͮɺAppઃܭɺػೳઃܭɺλϒͷ۠੾ΓํΛݕ౼͢Δ
    

    View Slide

55. © 2022 Satori MARU.
    #wwdc22gp
    https://goodpatch.com/blog/appdesign-antipatterns
    Ξϯνύλʔϯ͔Βߟ͑ΔΞϓϦέʔγϣϯσβΠϯͷཧ૝ܗ(PPEQBUDI#MPHʢʣ
    

    View Slide

56. © 2022 Satori MARU.
    #wwdc22gp
    https://goodpatch.com/blog/appdesign-antipatterns
    Ξϯνύλʔϯ͔Βߟ͑ΔΞϓϦέʔγϣϯσβΠϯͷཧ૝ܗ(PPEQBUDI#MPHʢʣ
    

    View Slide

57. © 2022 Satori MARU.
    #wwdc22gp
    ϞʔμϧϏϡʔͱϞʔυઃܭʢ͔Βͷղऍʣ
    ϞʔμϧϏϡʔ͸ࣗݾ׬݁ܕλεΫʹ༻͍Δ
    UIදݱʹΑͬͯφϏήʔγϣϯͷ֊૚ߏ଄Λ໌ࣔ͢Δ
    ϞʔμϧϏϡʔ͸࡞ۀʹׂΓࠐΉͨΊɺͦͷੑ࣭ΛΑ͘ཧղ͠ઃܭʹ൓ө͢Δ
    Ϟʔυͷա৒ੵΈ্͛͸ආ͚Δ
    

    View Slide

58. © 2022 Satori MARU.
    #wwdc22gp
    https://developer.apple.com/videos/play/wwdc2022/10037/
    8SJUJOHGPSJOUFSGBDFT88%$
    

    View Slide

59. © 2022 Satori MARU.
    #wwdc22gp
    https://goodpatch.com/blog/dialog-design
    ΩϟϯηϧͷΩϟϯηϧ໰୊͔Βߟ͑ΔμΠΞϩάσβΠϯ(PPEQBUDI#MPHʢʣ
    

    View Slide

60. © 2022 Satori MARU.
    #wwdc22gp
    ιϑτ΢ΣΞUIσβΠϯͷ
    ໨౰ͯ
    

    View Slide

61. © 2022 Satori MARU.
    #wwdc22gp
    ιϑτ΢ΣΞʹ
    ͔ΜͨΜʹ৮ΕΒΕΔΑ͏ʹ͢Δ
    ػցͬΆ͞Λݟͤͳ͍
    ෳࡶͳߏ଄ΛΘ͔Γ΍͘͢
    ೝࣝ͠΍͘͢
    ѻ͍΍͘͢
    γϯϓϧͰඒ͍͠ܗ
    ৺஍ͷྑ͍ૢ࡞ੑ
    ιϑτ΢ΣΞ6*σβΠϯͷ໨౰ͯ
    

    View Slide

62. © 2022 Satori MARU.
    #wwdc22gp
    ιϑτ΢ΣΞ6*σβΠϯͷ໨౰ͯ
    ܗͷݟ͑ʹ͍͘ιϑτ΢ΣΞΛ
    ώτ͕௚઀ೝࣝͰ͖ΔΑ͏ʹ͢Δ
    

    View Slide

63. © 2022 Satori MARU.
    #wwdc22gp
    ιϑτ΢ΣΞ6*σβΠϯͷ໨౰ͯ
    ܗͷݟ͑ʹ͍͘ιϑτ΢ΣΞΛ
    ώτ͕௚઀ೝࣝͰ͖ΔΑ͏ʹ͢Δ
    UIΛ༩͑ͯͦͷ࢟Λදݱ͢Δ
    

    View Slide

64. © 2022 Satori MARU.
    #wwdc22gp
    ιϑτ΢ΣΞ6*σβΠϯͷ໨౰ͯ
    ιϑτ΢ΣΞ
    ܗͷݟ͑ʹ͍͘ιϑτ΢ΣΞΛ
    ώτ͕௚઀ೝࣝͰ͖ΔΑ͏ʹ͢Δ
    UIΛ༩͑ͯ࢟Λද͢
    UIΛհͯ͠৮ΕΒΕΔΑ͏ʹ͢Δ
    ʜ
    ιϑτ΢ΣΞͷੈք ෺ཧੈք
    
    

    View Slide

65. © 2022 Satori MARU.
    #wwdc22gp
    ιϑτ΢ΣΞ6*σβΠϯͷ໨౰ͯ
    ιϑτ΢ΣΞ UI
    ʜ
    ιϑτ΢ΣΞͷੈք ෺ཧੈք
    
    

    View Slide

66. © 2022 Satori MARU.
    #wwdc22gp
    ιϑτ΢ΣΞ6*σβΠϯͷ໨౰ͯ
    ιϑτ΢ΣΞ UI ϋʔυ΢ΣΞ
    UI
    ʂ
    ιϑτ΢ΣΞͷੈք ෺ཧੈք
    
    

    View Slide

67. © 2022 Satori MARU.
    #wwdc22gp
    ιϑτ΢ΣΞ6*σβΠϯͷ໨౰ͯ
    ιϑτ΢ΣΞ UI ϋʔυ΢ΣΞ
    UI
    )FMMP
    ιϑτ΢ΣΞͷੈք ෺ཧੈք
    
    

    View Slide

68. © 2022 Satori MARU.
    #wwdc22gp
    ιϑτ΢ΣΞ6*σβΠϯͷ໨౰ͯ
    ιϑτ΢ΣΞ UI ϋʔυ΢ΣΞ
    UI
    )FMMP
    ݟ͑ͳ͍
    ৮ΕΒΕͳ͍
    ࿦ཧ
    ݟ͑Δ
    ৮ΕΒΕΔ
    ࿦ཧ
    ݟ͑Δ
    ৮ΕΒΕΔ
    ෺ཧ
    ܗଶ
    Մࢹੑ
    ઀৮
    ݟ͑Δ
    ৮ΕΒΕΔ
    ෺ཧ
    ιϑτ΢ΣΞͷੈք ෺ཧੈք
    
    “ιϑτ΢ΣΞͷUI”Λհͯ͠௚઀ର࿩͍ͯ͠ΔΑ͏ͳײ͕֮΋ͨΒ͞ΕΔͱྑ͍
    

    View Slide

69. © 2022 Satori MARU.
    #wwdc22gp
    ιϑτ΢ΣΞ6*σβΠϯͷ໨౰ͯ
    ώτ͸ϋʔυ΢ΣΞΛհͯ͠ιϑτ΢ΣΞʹ৮ΕΒΕΔ
    ΠϯλϥΫγϣϯ
    ɾɾɾɾɾ
    ιϑτ΢ΣΞͱ௚઀తʹର࿩͢Δײ֮Λ΋ͨΒ͢
    ιϑτ΢ΣΞ
    ϋʔυ΢ΣΞ
    UI
    UI
    

    View Slide

70. © 2022 Satori MARU.
    #wwdc22gp
    ׂΓࠐΈՄೳͳ6*Ξχϝʔγϣϯʗ%FTJHOJOH'MVJE*OUFSGBDFT88%$
    Designing Fluid Interfaces
    https://developer.apple.com/videos/play/wwdc2018/803/
    

    View Slide

71. © 2022 Satori MARU.
    #wwdc22gp
    σβΠϯݴޠ
    Ϣʔεέʔε
    Ϟʔυ
    HIG౷߹ͷͶΒ͍
    HIGͷ੒Γཱͪ
    ϓϥοτϑΥʔϜͱApp
    HIG
    φϏήʔγϣϯ จݴ
    Inclusive by design
    HIGͷݕࡧػೳ
    UIσβΠϯͷ໨౰ͯ
    

    View Slide

72. #wwdc22gp
    

    View Slide