デスクトップアプリケーションの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/

別途解説記事を用意しました。文章で理解されたい方におすすめです。
https://note.com/usagimaruma/n/ne6ce2a63c4ec

Transcript

1. usagimaru σεΫτοϓΞϓϦέʔγϣϯͷ UIύλʔϯ #macosnative © 2023 usagimaru macOS native Symposium #09 2023.07.08 ΢Πϯυ΢ฤ
2. ! Software Designer / Architect / Developer usagimaru @usagimaru @usagimaruma bento.me/usagimaru @usagimaru@mastodon.social macOS nativeίΞϝϯόʔ © 2023 usagimaru @usagimaru.bsky.social
3. © 2023 usagimaru 1 4
4. © 2023 usagimaru 1 https://speakerdeck.com/usagimaru/designing-desktop-interactions Designing Desktop Interactions – macOS native Symposium #01
5. © 2023 usagimaru https://note.com/usagimaruma/n/n6ceb19a71890 GUI ͷ “ͪ͜Βଆ” ͔ΒͷσβΠϯ – macOS native Symposium #04 4
6. UI © 2023 usagimaru ࠓճ΋…
7. “MacΒ͍͠ιϑτ΢ΣΞ” © 2023 usagimaru Β͠͞Λߏ੒͢ΔσβΠϯύλʔϯΛ஌Δ
8. © 2023 usagimaru https://developer.apple.com/jp/design/human-interface-guidelines/designing-for-macos HIG
9. © 2023 usagimaru https://developer.apple.com/jp/design/human-interface-guidelines/designing-for-macos HIG
10. ύλʔϯʹΑͬͯ ֤छUI͕ઃܭɾ࣮૷͞Ε͍ͯΔ “MacΒ͠͞”ͷݯ © 2023 usagimaru ! PopUp ! Check
11. © 2023 usagimaru ΢Πϯυ΢σβΠϯ ͷجຊ
12. ΢Πϯυ΢σβΠϯͷجຊ ΢Πϯυ΢ © 2023 usagimaru
13. ΢Πϯυ΢σβΠϯͷجຊ ΢Πϯυ΢ © 2023 usagimaru
14. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru
15. Š
    "MBO
    ,BZ
    ʮϢʔβʔΠϯλʔϑΣʔε
    ݸਓతݟղʯΑΓ © 2023 usagimaru l΢Οϯυ΢Λར༻͢Δͱ͖ͷ௚؍తͳํ๏͸ɺ Ϛ΢εΛͦͷ΢Οϯυ΢ʹೖΕͯɺ΢Οϯυ΢ Λl্zʹͯ͠΢Οϯυ΢ΛΞΫςΟϒʹ͢Δ͜ ͱͰ͋Δɻz lΞΫςΟϒͳ΢Οϯυ΢͸ϞʔυΛߏ੒͍ͯ͠ Δɻ͔͠͠ɺԿ͔Λ͢Δͱ͖ʹ͸ఀࢭͤͣʹྡ ͷ΢Οϯυ΢ʹҠΔ͜ͱ͕Ͱ͖Δɻ͜Ε͕ࢲʹ ͱͬͯϞʔυϨεͨΔ༝ԑͳͷͰ͋Δɻ
    z
16. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru
17. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru
18. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru
19. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru
20. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru
21. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru
22. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru
23. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru
24. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru
25. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru
26. ΢Πϯυ΢σβΠϯͷجຊ Φʔόʔϥοϐϯά΢Πϯυ΢ © 2023 usagimaru ΄͔ͷ΢Πϯυ΢ʹ ੾Γସ͑ͯ΋ྑ͍Ͱ͔͢ʁ ੾Γସ͑Δ Ωϟϯηϧ ϞʔμϧͳΠϯλϥΫγϣϯ
27. © 2023 usagimaru ϞʔυϨε Ϟʔμϧ ৼΔ෣͍ํ࣍ୈͰ࢖͍উख͕ஈҧ͍ʹมΘΔ͜ͱ΋͋Δ
28. © 2023 usagimaru ΢Πϯυ΢ͷ ϨΠΞ΢τύλʔϯ
29. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ © 2023 usagimaru
30. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Main + DetailʢϤίʣ © 2023 usagimaru Main Detail
31. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Main + DetailʢϤίʣ © 2023 usagimaru Main Detail Pane ૭ͷҰ۠ը
32. © 2023 usagimaru https://www.shutterstock.com
33. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Main + DetailʢϤίʣ © 2023 usagimaru Main Detail ֓ཁ ৄࡉ ࠨ͔Βӈʹల։
34. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Main + Detailʢλςʣ © 2023 usagimaru Main Detail
35. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Main + Detailʢλςʣ © 2023 usagimaru Main Detail ֓ཁ ৄࡉ ্͔ΒԼʹల։
36. © 2023 usagimaru ϨΠΞ΢τͷجຊݪଇ ‣ ࠨʹ͋Δ৘ใ͸ૈ͘ɺӈʹ͋Δ৘ใ͸ࡉ͔͍ ‣ ্ʹ͋Δ৘ใ͸ૈ͘ɺԼʹ͋Δ৘ใ͸ࡉ͔͍ ‣ άϧʔϓͱࢠཁૉͷೖΕࢠߏ଄Ͱද͢ ‣ άϧʔϓ͸ૈ͘ɺࢠཁૉ͸ࡉ͔͍ 粗 細 *ࠨԣॻ͖ϨΠΞ΢τͷ৔߹
37. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ جຊཁૉ © 2023 usagimaru Pane Sidebar Inspector
38. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ جຊཁૉ © 2023 usagimaru Pane Sidebar Inspector ۠੾ΒΕͨྖҬ ࠨଆͷΦϒδΣΫτҰཡ બ୒ͨ͠ΦϒδΣΫτͷ ৄࡉ৘ใ
39. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Sidebars © 2023 usagimaru Sidebar Inspector
40. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Sidebars © 2023 usagimaru Sidebar Inspector ֓ཁ ৄࡉ ৄࡉ
41. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ ඪ४ϨΠΞ΢τ © 2023 usagimaru Title bar Untitled Content area
42. ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar © 2023 usagimaru Content area Title bar / Toolbar Untitled
43. © 2023 usagimaru Title bar / Toolbar Untitled Content area Optional area ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + ௥ՃϖΠϯ
44. © 2023 usagimaru Untitled Title bar / Toolbar ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Sidebar Sidebar Content area
45. © 2023 usagimaru Title bar / Toolbar Untitled ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Inspector Content area Inspector
46. © 2023 usagimaru Untitled Title bar / Toolbar ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Sidebars Sidebar Content area Inspector
47. © 2023 usagimaru Untitled Title bar / Toolbar ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Sidebars (Big SurελΠϧ) Sidebar Content area Inspector
48. © 2023 usagimaru Untitled Title bar / Toolbar Inspector ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Sidebars (Big Sur / XcodeελΠϧ) Sidebar Content area
49. © 2023 usagimaru Untitled Title bar / Toolbar Optional area Content area ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Sidebar (Big SurελΠϧ) + ௥ՃϖΠϯ Sidebar
50. © 2023 usagimaru Content area ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Sidebars (Big SurελΠϧ) + ௥ՃϖΠϯ Title bar / Toolbar Untitled Optional area Inspector Sidebar
51. © 2023 usagimaru Untitled Title bar / Toolbar Sidebar Inspector Optional area Content area ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Sidebars (Big Sur / XcodeελΠϧ) + ௥ՃϖΠϯ
52. © 2023 usagimaru Untitled Title bar / Toolbar ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Sidebars / ଟஈαΠυόʔ Primary sidebar Secondary sidebar Content area
53. © 2023 usagimaru Untitled Title bar / Toolbar Primary sidebar Inspector Optional area Content area Secondary sidebar ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Sidebars (Big Sur / XcodeελΠϧ) + etc. / ଟॏϖΠϯ
54. © 2023 usagimaru Untitled Title bar / Toolbar ΢Πϯυ΢ϨΠΞ΢τύλʔϯ Toolbar + Sidebar + Inspector Panel Inspector Panel Sidebar Content area
55. ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹ΘͤͰߟ͑Δ © 2023 usagimaru
56. © 2023 usagimaru ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ Title bar / Toolbar Untitled Sidebar Inspector Optional area Content area
57. © 2023 usagimaru ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ
58. © 2023 usagimaru ֓ཁ ৄࡉ ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ SidebarͰ֓ཁΛૢ࡞͠ɺ࢒ΓͷϖΠϯͰৄࡉΛૢ࡞͢Δ
59. © 2023 usagimaru ֓ཁ ৄࡉ ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ ToolbarͰ֓ཁΛૢ࡞͠ɺ࢒ΓͷϖΠϯͰৄࡉΛૢ࡞͢Δ
60. © 2023 usagimaru ֓ཁ ৄࡉ ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ Content areaͰ֓ཁΛૢ࡞͠ɺInspectorͰৄࡉΛૢ࡞͢Δ
61. © 2023 usagimaru ֓ཁ ৄࡉ ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ SidebarͰ֓ཁΛૢ࡞͠ɺInspectorͰৄࡉΛૢ࡞͢Δ
62. © 2023 usagimaru ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ
63. © 2023 usagimaru ֓ཁ ৄࡉ ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ Content areaͰ֓ཁΛૢ࡞͠ɺOptional areaͰৄࡉΛૢ࡞͢Δ
64. © 2023 usagimaru ϏϡʔA ϏϡʔB ֓ཁ + ৄࡉύλʔϯͷ૊Έ߹Θͤ ϖΠϯΛ෼ղͯ͠໾ׂΛఆٛ͢Δ Optional area͸Content areaͷผϏϡʔͱͯ͠ৼΔ෣͏৔߹΋͋Δ ͜ͷ৔߹͸AͱBͷ໾ׂ͸ಉ౳ͱݟ၏ͤΔ
65. Big SurελΠϧͱΫϥγοΫελΠϧͷ ໾ׂͷҧ͍ © 2023 usagimaru
66. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ ToolbarͱSidebarͷݐͯ෇͚Ͱҙຯ͕มΘΔ Untitled Sidebar Title bar / Toolbar Big SurελΠϧ Sidebar͕Title bar·Ͱ͸Έग़͍ͯΔ
67. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ ToolbarͱSidebarͷݐͯ෇͚Ͱҙຯ͕มΘΔ Sidebar Title bar / Toolbar ΫϥγοΫελΠϧ Sidebar͕Title barͷԼʹऩ·͍ͬͯΔ Untitled
68. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ ToolbarͱSidebarͷݐͯ෇͚Ͱҙຯ͕มΘΔ ࠨ্Λਞऔ͍ͬͯΔํ͕ʮ্Ґʯάϧʔϓ Untitled Untitled
69. © 2023 usagimaru ϨΠΞ΢τͷجຊݪଇ ‣ ࠨʹ͋Δ৘ใ͸ૈ͘ɺӈʹ͋Δ৘ใ͸ࡉ͔͍ ‣ ্ʹ͋Δ৘ใ͸ૈ͘ɺԼʹ͋Δ৘ใ͸ࡉ͔͍ ‣ άϧʔϓͱࢠཁૉͷೖΕࢠߏ଄Ͱද͢ ‣ άϧʔϓ͸ૈ͘ɺࢠཁૉ͸ࡉ͔͍ 粗 細 *ࠨԣॻ͖ϨΠΞ΢τͷ৔߹ ࠶ܝ
70. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ ToolbarͱSidebarͷݐͯ෇͚Ͱҙຯ͕มΘΔ Sidebar্͕Ґ Untitled Untitled Toolbar্͕Ґ
71. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Sidebarத৺ϨΠΞ΢τ Sidebar্͕Ґ Untitled ‣ SidebarΛ΢Πϯυ΢શମͷάϩʔόϧ φϏήʔγϣϯ໾ʹ͢Δ ‣ SidebarʹϏϡʔ΍ΤσΟλͷ੾Γସ͑ػೳ Λ࣋ͨͤΔ ‣ SidebarͰબΜ߲ͩ໨ʹΑͬͯɺToolbarͷ ಺༰͕มԽ͢Δ৔߹
72. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Sidebarத৺ϨΠΞ΢τ
73. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Sidebarத৺ϨΠΞ΢τ
74. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Sidebarத৺ϨΠΞ΢τ
75. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Toolbarத৺ϨΠΞ΢τ Toolbar্͕Ґ Untitled ‣ ToolbarΛ΢Πϯυ΢શମͷάϩʔόϧ φϏήʔγϣϯ໾ʹ͢Δ ‣ ToolbarʹϏϡʔ΍ΤσΟλͷ੾Γସ͑ػೳ Λ࣋ͨͤΔ ‣ SidebarΛContent areaͷ֓ཁϦετͱͯ͠ ػೳͤ͞Δ৔߹
76. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Toolbarத৺ϨΠΞ΢τ
77. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Toolbarத৺ϨΠΞ΢τ
78. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Toolbarத৺ϨΠΞ΢τ
79. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Toolbarத৺ϨΠΞ΢τ
80. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Toolbarத৺ϨΠΞ΢τ
81. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Toolbarத৺ϨΠΞ΢τ
82. " © 2023 usagimaru
83. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Tab barͷ༗ແͰϨΠΞ΢τ͕มԽ͢Δڍಈ
84. © 2023 usagimaru Big SurελΠϧͱΫϥγοΫελΠϧͷ໾ׂͷҧ͍ Tab barͷ༗ແͰϨΠΞ΢τ͕มԽ͢Δڍಈ
85. ݕࡧϑΟʔϧυͷҐஔ © 2023 usagimaru !
86. © 2023 usagimaru ݕࡧϑΟʔϧυͷҐஔ Sidebar্୺ vs. Toolbarӈ୺
87. © 2023 usagimaru ݕࡧϑΟʔϧυͷҐஔ Sidebar্୺ vs. Toolbarӈ୺
88. © 2023 usagimaru ݕࡧϑΟʔϧυͷҐஔ Sidebar্୺ vs. Toolbarӈ୺ Sidebar্୺ Toolbarӈ୺
89. © 2023 usagimaru ݕࡧϑΟʔϧυͷҐஔ Sidebar্୺ vs. Toolbarӈ୺ Toolbarӈ୺ https://pc.watch.impress.co.jp/docs/2004/0629/wwdc03.htm ‣ ओʹυϝΠϯΛލ͍ͩԣஅݕࡧͷ໾ׂ͕͋Δ ‣ 10.4 TigerҎདྷɺݕࡧ͸ʮӈ্ʯʹઃஔ͢Δ ΋ͷͱͯ͠ఆٛ͞Ε͖ͯͨ ‣ ఻౷తͳmacOSΒ͍͠ελΠϧ
90. © 2023 usagimaru ݕࡧϑΟʔϧυͷҐஔ Sidebar্୺ vs. Toolbarӈ୺ Sidebar্୺ ‣ ҰཡͷϑΟϧλϦϯάͷΑ͏ʹݟ͑Δ ‣ Sidebar͕άϩʔόϧφϏήʔγϣϯͷػೳΛ ࣋ͭͷͰɺҰཡͷϑΟϧλϦϯάͰ΋υϝΠϯ Λލ͍ͩԣஅݕࡧʹͳΓಘΔʢͷͰ͸ͳ͍͔ʁʣ ‣ iPadOSͷελΠϧͱ΋߹Θ͍ͤͨ৔߹
91. © 2023 usagimaru ݕࡧϑΟʔϧυͷҐஔ Sidebar্୺ vs. Toolbarӈ୺
92. ΫϩʔζϘλϯʢόπʣ͸ࠨଆ © 2023 usagimaru
93. ΫϩʔζϘλϯʢόπʣ͸ࠨଆ Mac OSͷΫϩʔζϘοΫε © 2023 usagimaru
94. ΫϩʔζϘλϯʢόπʣ͸ࠨଆ Safariͷλϒ © 2023 usagimaru
95. ΫϩʔζϘλϯʢόπʣ͸ࠨଆ visionOSͷ΢Πϯυ΢ίϯτϩʔϧ © 2023 usagimaru
96. © 2023 usagimaru Pane Φʔόʔϥοϐϯά΢Πϯυ΢ Alan Kay ϨΠΞ΢τͷجຊݪଇ ֓ཁͱৄࡉ MacΒ͠͞ ϞʔυϨε Ϟʔμϧ Big SurελΠϧ Sidebarத৺ Toolbarத৺ Sidebar্୺ݕࡧ Toolbarӈ୺ݕࡧ όπ͸ࠨଆ
97. 9 #macosnative