$30 off During Our Annual Pro Sale. View Details »

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

usagimaru
July 08, 2023

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

デスクトップアプリケーションのUIパターン - ウインドウ編(公開版)

macOSらしいウインドウをデザインするために役立つ基本パターンを紹介します。

macOS native Symposium #09
https://macos-native.github.io
https://macos-native.connpass.com/event/286455/

usagimaru

July 08, 2023
Tweet

More Decks by usagimaru

Other Decks in Design

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