デスクトップアプリケーションのUIパターン - ウインドウ編（公開版） / UI Patterns of Desktop Applications - Window Layouts

Transcript

1. usagimaru
   σεΫτοϓΞϓϦέʔγϣϯͷ
   UIύλʔϯ
   #macosnative
   © 2023 usagimaru
   macOS native Symposium #09
   2023.07.08
   ΢Πϯυ΢ฤ
   

   View Slide

2. ! Software Designer / Architect / Developer
   usagimaru
   @usagimaru
   @usagimaruma
   bento.me/usagimaru
   @[email protected]
   macOS nativeίΞϝϯόʔ
   © 2023 usagimaru
   @usagimaru.bsky.social
   

   View Slide

3. © 2023 usagimaru
   1 4
   

   View Slide

4. © 2023 usagimaru
   1
   https://speakerdeck.com/usagimaru/designing-desktop-interactions
   Designing Desktop Interactions – macOS native Symposium #01
   

   View Slide

5. © 2023 usagimaru https://note.com/usagimaruma/n/n6ceb19a71890
   GUI ͷ “ͪ͜Βଆ” ͔ΒͷσβΠϯ – macOS native Symposium #04
   4
   

   View Slide

6. UI
   © 2023 usagimaru
   ࠓճ΋…
   

   View Slide

7. “MacΒ͍͠ιϑτ΢ΣΞ”
   © 2023 usagimaru
   Β͠͞Λߏ੒͢ΔσβΠϯύλʔϯΛ஌Δ
   

   View Slide

8. © 2023 usagimaru
   https://developer.apple.com/jp/design/human-interface-guidelines/designing-for-macos
   HIG
   

   View Slide

9. © 2023 usagimaru
   https://developer.apple.com/jp/design/human-interface-guidelines/designing-for-macos
   HIG
   

   View Slide

10. ύλʔϯʹΑͬͯ
    ֤छUI͕ઃܭɾ࣮૷͞Ε͍ͯΔ
    “MacΒ͠͞”ͷݯ
    © 2023 usagimaru
    !
    PopUp ! Check
    

    View Slide

11. © 2023 usagimaru
    ΢Πϯυ΢σβΠϯ
    ͷجຊ
    

    View Slide

12. ΢Πϯυ΢σβΠϯͷجຊ
    ΢Πϯυ΢
    © 2023 usagimaru
    

    View Slide

13. ΢Πϯυ΢σβΠϯͷجຊ
    ΢Πϯυ΢
    © 2023 usagimaru
    

    View Slide

14. ΢Πϯυ΢σβΠϯͷجຊ
    Φʔόʔϥοϐϯά΢Πϯυ΢
    © 2023 usagimaru
    

    View Slide

15. Š"MBO,BZʮϢʔβʔΠϯλʔϑΣʔεݸਓతݟղʯΑΓ
    © 2023 usagimaru
    l΢Οϯυ΢Λར༻͢Δͱ͖ͷ௚؍తͳํ๏͸ɺ
    Ϛ΢εΛͦͷ΢Οϯυ΢ʹೖΕͯɺ΢Οϯυ΢
    Λl্zʹͯ͠΢Οϯυ΢ΛΞΫςΟϒʹ͢Δ͜
    ͱͰ͋Δɻz
    lΞΫςΟϒͳ΢Οϯυ΢͸ϞʔυΛߏ੒͍ͯ͠
    Δɻ͔͠͠ɺԿ͔Λ͢Δͱ͖ʹ͸ఀࢭͤͣʹྡ
    ͷ΢Οϯυ΢ʹҠΔ͜ͱ͕Ͱ͖Δɻ͜Ε͕ࢲʹ
    ͱͬͯϞʔυϨεͨΔ༝ԑͳͷͰ͋Δɻz
    

    View Slide

16. ΢Πϯυ΢σβΠϯͷجຊ
    Φʔόʔϥοϐϯά΢Πϯυ΢
    © 2023 usagimaru
    

    View Slide

17. ΢Πϯυ΢σβΠϯͷجຊ
    Φʔόʔϥοϐϯά΢Πϯυ΢
    © 2023 usagimaru
    

    View Slide

18. ΢Πϯυ΢σβΠϯͷجຊ
    Φʔόʔϥοϐϯά΢Πϯυ΢
    © 2023 usagimaru
    

    View Slide

19. ΢Πϯυ΢σβΠϯͷجຊ
    Φʔόʔϥοϐϯά΢Πϯυ΢
    © 2023 usagimaru
    

    View Slide

20. ΢Πϯυ΢σβΠϯͷجຊ
    Φʔόʔϥοϐϯά΢Πϯυ΢
    © 2023 usagimaru
    

    View Slide

21. ΢Πϯυ΢σβΠϯͷجຊ
    Φʔόʔϥοϐϯά΢Πϯυ΢
    © 2023 usagimaru
    

    View Slide

22. ΢Πϯυ΢σβΠϯͷجຊ
    Φʔόʔϥοϐϯά΢Πϯυ΢
    © 2023 usagimaru
    

    View Slide

23. ΢Πϯυ΢σβΠϯͷجຊ
    Φʔόʔϥοϐϯά΢Πϯυ΢
    © 2023 usagimaru
    

    View Slide

24. ΢Πϯυ΢σβΠϯͷجຊ
    Φʔόʔϥοϐϯά΢Πϯυ΢
    © 2023 usagimaru
    

    View Slide

25. ΢Πϯυ΢σβΠϯͷجຊ
    Φʔόʔϥοϐϯά΢Πϯυ΢
    © 2023 usagimaru
    

    View Slide

26. ΢Πϯυ΢σβΠϯͷجຊ
    Φʔόʔϥοϐϯά΢Πϯυ΢
    © 2023 usagimaru
    ΄͔ͷ΢Πϯυ΢ʹ
    ੾Γସ͑ͯ΋ྑ͍Ͱ͔͢ʁ
    ੾Γସ͑Δ
    Ωϟϯηϧ
    ϞʔμϧͳΠϯλϥΫγϣϯ
    

    View Slide

27. © 2023 usagimaru
    ϞʔυϨε Ϟʔμϧ
    ৼΔ෣͍ํ࣍ୈͰ࢖͍উख͕ஈҧ͍ʹมΘΔ͜ͱ΋͋Δ
    

    View Slide

28. © 2023 usagimaru
    ΢Πϯυ΢ͷ
    ϨΠΞ΢τύλʔϯ
    

    View Slide

29. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    © 2023 usagimaru
    

    View Slide

30. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Main + DetailʢϤίʣ
    © 2023 usagimaru
    Main Detail
    

    View Slide

31. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Main + DetailʢϤίʣ
    © 2023 usagimaru
    Main Detail
    Pane
    ૭ͷҰ۠ը
    

    View Slide

32. © 2023 usagimaru
    https://www.shutterstock.com
    

    View Slide

33. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Main + DetailʢϤίʣ
    © 2023 usagimaru
    Main Detail
    ֓ཁ ৄࡉ
    ࠨ͔Βӈʹల։
    

    View Slide

34. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Main + Detailʢλςʣ
    © 2023 usagimaru
    Main
    Detail
    

    View Slide

35. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Main + Detailʢλςʣ
    © 2023 usagimaru
    Main
    Detail
    ֓ཁ
    ৄࡉ
    ্͔ΒԼʹల։
    

    View Slide

36. © 2023 usagimaru
    ϨΠΞ΢τͷجຊݪଇ
    ‣ ࠨʹ͋Δ৘ใ͸ૈ͘ɺӈʹ͋Δ৘ใ͸ࡉ͔͍
    ‣ ্ʹ͋Δ৘ใ͸ૈ͘ɺԼʹ͋Δ৘ใ͸ࡉ͔͍
    ‣ άϧʔϓͱࢠཁૉͷೖΕࢠߏ଄Ͱද͢
    ‣ άϧʔϓ͸ૈ͘ɺࢠཁૉ͸ࡉ͔͍
    粗 細
    *ࠨԣॻ͖ϨΠΞ΢τͷ৔߹
    

    View Slide

37. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    جຊཁૉ
    © 2023 usagimaru
    Pane Sidebar Inspector
    

    View Slide

38. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    جຊཁૉ
    © 2023 usagimaru
    Pane Sidebar Inspector
    ۠੾ΒΕͨྖҬ ࠨଆͷΦϒδΣΫτҰཡ બ୒ͨ͠ΦϒδΣΫτͷ
    ৄࡉ৘ใ
    

    View Slide

39. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Sidebars
    © 2023 usagimaru
    Sidebar Inspector
    

    View Slide

40. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Sidebars
    © 2023 usagimaru
    Sidebar Inspector
    ֓ཁ ৄࡉ ৄࡉ
    

    View Slide

41. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    ඪ४ϨΠΞ΢τ
    © 2023 usagimaru
    Title bar
    Untitled
    Content area
    

    View Slide

42. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Toolbar
    © 2023 usagimaru
    Content area
    Title bar / Toolbar
    Untitled
    

    View Slide

43. © 2023 usagimaru
    Title bar / Toolbar
    Untitled
    Content area
    Optional area
    ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Toolbar + ௥ՃϖΠϯ
    

    View Slide

44. © 2023 usagimaru
    Untitled Title bar / Toolbar
    ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Toolbar + Sidebar
    Sidebar Content area
    

    View Slide

45. © 2023 usagimaru
    Title bar / Toolbar
    Untitled
    ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Toolbar + Inspector
    Content area Inspector
    

    View Slide

46. © 2023 usagimaru
    Untitled Title bar / Toolbar
    ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Toolbar + Sidebars
    Sidebar Content area Inspector
    

    View Slide

47. © 2023 usagimaru
    Untitled Title bar / Toolbar
    ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Toolbar + Sidebars (Big SurελΠϧ)
    Sidebar
    Content area Inspector
    

    View Slide

48. © 2023 usagimaru
    Untitled Title bar / Toolbar
    Inspector
    ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Toolbar + Sidebars (Big Sur / XcodeελΠϧ)
    Sidebar
    Content area
    

    View Slide

49. © 2023 usagimaru
    Untitled Title bar / Toolbar
    Optional area
    Content area
    ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Toolbar + Sidebar (Big SurελΠϧ) + ௥ՃϖΠϯ
    Sidebar
    

    View Slide

50. © 2023 usagimaru
    Content area
    ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Toolbar + Sidebars (Big SurελΠϧ) + ௥ՃϖΠϯ
    Title bar / Toolbar
    Untitled
    Optional area
    Inspector
    Sidebar
    

    View Slide

51. © 2023 usagimaru
    Untitled Title bar / Toolbar
    Sidebar Inspector
    Optional area
    Content area
    ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Toolbar + Sidebars (Big Sur / XcodeελΠϧ) + ௥ՃϖΠϯ
    

    View Slide

52. © 2023 usagimaru
    Untitled Title bar / Toolbar
    ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Toolbar + Sidebars / ଟஈαΠυόʔ
    Primary
    sidebar
    Secondary
    sidebar
    Content area
    

    View Slide

53. © 2023 usagimaru
    Untitled Title bar / Toolbar
    Primary
    sidebar
    Inspector
    Optional area
    Content area
    Secondary
    sidebar
    ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Toolbar + Sidebars (Big Sur / XcodeελΠϧ) + etc. / ଟॏϖΠϯ
    

    View Slide

54. © 2023 usagimaru
    Untitled Title bar / Toolbar
    ΢Πϯυ΢ϨΠΞ΢τύλʔϯ
    Toolbar + Sidebar + Inspector Panel
    Inspector
    Panel
    Sidebar Content area
    

    View Slide

55. ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹ΘͤͰߟ͑Δ
    © 2023 usagimaru
    

    View Slide

56. © 2023 usagimaru
    ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ
    ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ
    Title bar / Toolbar
    Untitled
    Sidebar
    Inspector
    Optional area
    Content area
    

    View Slide

57. © 2023 usagimaru
    ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ
    ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ
    

    View Slide

58. © 2023 usagimaru
    ֓ཁ ৄࡉ
    ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ
    ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ
    SidebarͰ֓ཁΛૢ࡞͠ɺ࢒ΓͷϖΠϯͰৄࡉΛૢ࡞͢Δ
    

    View Slide

59. © 2023 usagimaru
    ֓ཁ
    ৄࡉ
    ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ
    ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ
    ToolbarͰ֓ཁΛૢ࡞͠ɺ࢒ΓͷϖΠϯͰৄࡉΛૢ࡞͢Δ
    

    View Slide

60. © 2023 usagimaru
    ֓ཁ ৄࡉ
    ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ
    ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ
    Content areaͰ֓ཁΛૢ࡞͠ɺInspectorͰৄࡉΛૢ࡞͢Δ
    

    View Slide

61. © 2023 usagimaru
    ֓ཁ
    ৄࡉ
    ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ
    ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ
    SidebarͰ֓ཁΛૢ࡞͠ɺInspectorͰৄࡉΛૢ࡞͢Δ
    

    View Slide

62. © 2023 usagimaru
    ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ
    ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ
    

    View Slide

63. © 2023 usagimaru
    ֓ཁ
    ৄࡉ
    ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ
    ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ
    Content areaͰ֓ཁΛૢ࡞͠ɺOptional areaͰৄࡉΛૢ࡞͢Δ
    

    View Slide

64. © 2023 usagimaru
    ϏϡʔA
    ϏϡʔB
    ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ
    ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ
    Optional area͸Content areaͷผϏϡʔͱͯ͠ৼΔ෣͏৔߹΋͋Δ
    ͜ͷ৔߹͸AͱBͷ໾ׂ͸ಉ౳ͱݟ၏ͤΔ
    

    View Slide

65. Big SurελΠϧͱΫϥγοΫελΠϧͷ
    ໾ׂͷҧ͍
    © 2023 usagimaru
    

    View Slide

66. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    ToolbarͱSidebarͷݐͯ෇͚Ͱҙຯ͕มΘΔ
    Untitled
    Sidebar
    Title bar / Toolbar
    Big SurελΠϧ
    Sidebar͕Title bar·Ͱ͸Έग़͍ͯΔ
    

    View Slide

67. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    ToolbarͱSidebarͷݐͯ෇͚Ͱҙຯ͕มΘΔ
    Sidebar
    Title bar / Toolbar
    ΫϥγοΫελΠϧ
    Sidebar͕Title barͷԼʹऩ·͍ͬͯΔ
    Untitled
    

    View Slide

68. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    ToolbarͱSidebarͷݐͯ෇͚Ͱҙຯ͕มΘΔ
    ࠨ্Λਞऔ͍ͬͯΔํ͕ʮ্Ґʯάϧʔϓ
    Untitled Untitled
    

    View Slide

69. © 2023 usagimaru
    ϨΠΞ΢τͷجຊݪଇ
    ‣ ࠨʹ͋Δ৘ใ͸ૈ͘ɺӈʹ͋Δ৘ใ͸ࡉ͔͍
    ‣ ্ʹ͋Δ৘ใ͸ૈ͘ɺԼʹ͋Δ৘ใ͸ࡉ͔͍
    ‣ άϧʔϓͱࢠཁૉͷೖΕࢠߏ଄Ͱද͢
    ‣ άϧʔϓ͸ૈ͘ɺࢠཁૉ͸ࡉ͔͍
    粗 細
    *ࠨԣॻ͖ϨΠΞ΢τͷ৔߹
    ࠶ܝ
    

    View Slide

70. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    ToolbarͱSidebarͷݐͯ෇͚Ͱҙຯ͕มΘΔ
    Sidebar্͕Ґ
    Untitled Untitled
    Toolbar্͕Ґ
    

    View Slide

71. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    Sidebarத৺ϨΠΞ΢τ
    Sidebar্͕Ґ
    Untitled
    ‣ SidebarΛ΢Πϯυ΢શମͷάϩʔόϧ
    φϏήʔγϣϯ໾ʹ͢Δ
    ‣ SidebarʹϏϡʔ΍ΤσΟλͷ੾Γସ͑ػೳ
    Λ࣋ͨͤΔ
    ‣ SidebarͰબΜ߲ͩ໨ʹΑͬͯɺToolbarͷ
    ಺༰͕มԽ͢Δ৔߹
    

    View Slide

72. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    Sidebarத৺ϨΠΞ΢τ
    

    View Slide

73. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    Sidebarத৺ϨΠΞ΢τ
    

    View Slide

74. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    Sidebarத৺ϨΠΞ΢τ
    

    View Slide

75. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    Toolbarத৺ϨΠΞ΢τ
    Toolbar্͕Ґ
    Untitled
    ‣ ToolbarΛ΢Πϯυ΢શମͷάϩʔόϧ
    φϏήʔγϣϯ໾ʹ͢Δ
    ‣ ToolbarʹϏϡʔ΍ΤσΟλͷ੾Γସ͑ػೳ
    Λ࣋ͨͤΔ
    ‣ SidebarΛContent areaͷ֓ཁϦετͱͯ͠
    ػೳͤ͞Δ৔߹
    

    View Slide

76. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    Toolbarத৺ϨΠΞ΢τ
    

    View Slide

77. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    Toolbarத৺ϨΠΞ΢τ
    

    View Slide

78. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    Toolbarத৺ϨΠΞ΢τ
    

    View Slide

79. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    Toolbarத৺ϨΠΞ΢τ
    

    View Slide

80. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    Toolbarத৺ϨΠΞ΢τ
    

    View Slide

81. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    Toolbarத৺ϨΠΞ΢τ
    

    View Slide

82. "
    © 2023 usagimaru
    

    View Slide

83. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    Tab barͷ༗ແͰϨΠΞ΢τ͕มԽ͢Δڍಈ
    

    View Slide

84. © 2023 usagimaru
    Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍
    Tab barͷ༗ແͰϨΠΞ΢τ͕มԽ͢Δڍಈ
    

    View Slide

85. ݕࡧϑΟʔϧυͷҐஔ
    © 2023 usagimaru
    !
    

    View Slide

86. © 2023 usagimaru
    ݕࡧϑΟʔϧυͷҐஔ
    Sidebar্୺ vs. Toolbarӈ୺
    

    View Slide

87. © 2023 usagimaru
    ݕࡧϑΟʔϧυͷҐஔ
    Sidebar্୺ vs. Toolbarӈ୺
    

    View Slide

88. © 2023 usagimaru
    ݕࡧϑΟʔϧυͷҐஔ
    Sidebar্୺ vs. Toolbarӈ୺
    Sidebar্୺ Toolbarӈ୺
    

    View Slide

89. © 2023 usagimaru
    ݕࡧϑΟʔϧυͷҐஔ
    Sidebar্୺ vs. Toolbarӈ୺
    Toolbarӈ୺
    https://pc.watch.impress.co.jp/docs/2004/0629/wwdc03.htm
    ‣ ओʹυϝΠϯΛލ͍ͩԣஅݕࡧͷ໾ׂ͕͋Δ
    ‣ 10.4 TigerҎདྷɺݕࡧ͸ʮӈ্ʯʹઃஔ͢Δ
    ΋ͷͱͯ͠ఆٛ͞Ε͖ͯͨ
    ‣ ఻౷తͳmacOSΒ͍͠ελΠϧ
    

    View Slide

90. © 2023 usagimaru
    ݕࡧϑΟʔϧυͷҐஔ
    Sidebar্୺ vs. Toolbarӈ୺
    Sidebar্୺
    ‣ ҰཡͷϑΟϧλϦϯάͷΑ͏ʹݟ͑Δ
    ‣ Sidebar͕άϩʔόϧφϏήʔγϣϯͷػೳΛ
    ࣋ͭͷͰɺҰཡͷϑΟϧλϦϯάͰ΋υϝΠϯ
    Λލ͍ͩԣஅݕࡧʹͳΓಘΔʢͷͰ͸ͳ͍͔ʁʣ
    ‣ iPadOSͷελΠϧͱ΋߹Θ͍ͤͨ৔߹
    

    View Slide

91. © 2023 usagimaru
    ݕࡧϑΟʔϧυͷҐஔ
    Sidebar্୺ vs. Toolbarӈ୺
    

    View Slide

92. ΫϩʔζϘλϯʢόπʣ͸ࠨଆ
    © 2023 usagimaru
    

    View Slide

93. ΫϩʔζϘλϯʢόπʣ͸ࠨଆ
    Mac OSͷΫϩʔζϘοΫε
    © 2023 usagimaru
    

    View Slide

94. ΫϩʔζϘλϯʢόπʣ͸ࠨଆ
    Safariͷλϒ
    © 2023 usagimaru
    

    View Slide

95. ΫϩʔζϘλϯʢόπʣ͸ࠨଆ
    visionOSͷ΢Πϯυ΢ίϯτϩʔϧ
    © 2023 usagimaru
    

    View Slide

96. © 2023 usagimaru
    Pane
    Φʔόʔϥοϐϯά΢Πϯυ΢
    Alan Kay
    ϨΠΞ΢τͷجຊݪଇ
    ֓ཁͱৄࡉ
    MacΒ͠͞
    ϞʔυϨε Ϟʔμϧ
    Big SurελΠϧ
    Sidebarத৺ Toolbarத৺
    Sidebar্୺ݕࡧ Toolbarӈ୺ݕࡧ όπ͸ࠨଆ
    

    View Slide

97. 9
    #macosnative
    

    View Slide