デスクトップアプリケーションのUIパターン - ウインドウ編(公開版)
macOSらしいウインドウをデザインするために役立つ基本パターンを紹介します。
macOS native Symposium #09 https://macos-native.github.io https://macos-native.connpass.com/event/286455/
usagimaruσεΫτοϓΞϓϦέʔγϣϯͷUIύλʔϯ#macosnative© 2023 usagimarumacOS native Symposium #092023.07.08Πϯυฤ
View Slide
! Software Designer / Architect / Developerusagimaru@usagimaru@usagimarumabento.me/usagimaru@[email protected]macOS nativeίΞϝϯόʔ© 2023 usagimaru@usagimaru.bsky.social
© 2023 usagimaru1 4
© 2023 usagimaru1https://speakerdeck.com/usagimaru/designing-desktop-interactionsDesigning Desktop Interactions – macOS native Symposium #01
© 2023 usagimaru https://note.com/usagimaruma/n/n6ceb19a71890GUI ͷ “ͪ͜Βଆ” ͔ΒͷσβΠϯ – macOS native Symposium #044
UI© 2023 usagimaruࠓճ…
“MacΒ͍͠ιϑτΣΞ”© 2023 usagimaruΒ͠͞Λߏ͢ΔσβΠϯύλʔϯΛΔ
© 2023 usagimaruhttps://developer.apple.com/jp/design/human-interface-guidelines/designing-for-macosHIG
ύλʔϯʹΑ֤ͬͯछUI͕ઃܭɾ࣮͞Ε͍ͯΔ“MacΒ͠͞”ͷݯ© 2023 usagimaru!PopUp ! Check
© 2023 usagimaruΠϯυσβΠϯͷجຊ
ΠϯυσβΠϯͷجຊΠϯυ© 2023 usagimaru
ΠϯυσβΠϯͷجຊΦʔόʔϥοϐϯάΠϯυ© 2023 usagimaru
"MBO,BZʮϢʔβʔΠϯλʔϑΣʔεݸਓతݟղʯΑΓ© 2023 usagimarulΟϯυΛར༻͢Δͱ͖ͷ؍తͳํ๏ɺϚεΛͦͷΟϯυʹೖΕͯɺΟϯυΛl্zʹͯ͠ΟϯυΛΞΫςΟϒʹ͢Δ͜ͱͰ͋ΔɻzlΞΫςΟϒͳΟϯυϞʔυΛߏ͍ͯ͠Δɻ͔͠͠ɺԿ͔Λ͢Δͱ͖ʹఀࢭͤͣʹྡͷΟϯυʹҠΔ͜ͱ͕Ͱ͖Δɻ͜Ε͕ࢲʹͱͬͯϞʔυϨεͨΔ༝ԑͳͷͰ͋Δɻz
ΠϯυσβΠϯͷجຊΦʔόʔϥοϐϯάΠϯυ© 2023 usagimaru΄͔ͷΠϯυʹΓସ͑ͯྑ͍Ͱ͔͢ʁΓସ͑ΔΩϟϯηϧϞʔμϧͳΠϯλϥΫγϣϯ
© 2023 usagimaruϞʔυϨε ϞʔμϧৼΔ͍ํ࣍ୈͰ͍উख͕ஈҧ͍ʹมΘΔ͜ͱ͋Δ
© 2023 usagimaruΠϯυͷϨΠΞτύλʔϯ
ΠϯυϨΠΞτύλʔϯ© 2023 usagimaru
ΠϯυϨΠΞτύλʔϯMain + DetailʢϤίʣ© 2023 usagimaruMain Detail
ΠϯυϨΠΞτύλʔϯMain + DetailʢϤίʣ© 2023 usagimaruMain DetailPane૭ͷҰ۠ը
© 2023 usagimaruhttps://www.shutterstock.com
ΠϯυϨΠΞτύλʔϯMain + DetailʢϤίʣ© 2023 usagimaruMain Detail֓ཁ ৄࡉࠨ͔Βӈʹల։
ΠϯυϨΠΞτύλʔϯMain + Detailʢλςʣ© 2023 usagimaruMainDetail
ΠϯυϨΠΞτύλʔϯMain + Detailʢλςʣ© 2023 usagimaruMainDetail֓ཁৄࡉ্͔ΒԼʹల։
© 2023 usagimaruϨΠΞτͷجຊݪଇ‣ ࠨʹ͋Δใૈ͘ɺӈʹ͋Δใࡉ͔͍‣ ্ʹ͋Δใૈ͘ɺԼʹ͋Δใࡉ͔͍‣ άϧʔϓͱࢠཁૉͷೖΕࢠߏͰද͢‣ άϧʔϓૈ͘ɺࢠཁૉࡉ͔͍粗 細*ࠨԣॻ͖ϨΠΞτͷ߹
ΠϯυϨΠΞτύλʔϯجຊཁૉ© 2023 usagimaruPane Sidebar Inspector
ΠϯυϨΠΞτύλʔϯجຊཁૉ© 2023 usagimaruPane Sidebar Inspector۠ΒΕͨྖҬ ࠨଆͷΦϒδΣΫτҰཡ બͨ͠ΦϒδΣΫτͷৄࡉใ
ΠϯυϨΠΞτύλʔϯSidebars© 2023 usagimaruSidebar Inspector
ΠϯυϨΠΞτύλʔϯSidebars© 2023 usagimaruSidebar Inspector֓ཁ ৄࡉ ৄࡉ
ΠϯυϨΠΞτύλʔϯඪ४ϨΠΞτ© 2023 usagimaruTitle barUntitledContent area
ΠϯυϨΠΞτύλʔϯToolbar© 2023 usagimaruContent areaTitle bar / ToolbarUntitled
© 2023 usagimaruTitle bar / ToolbarUntitledContent areaOptional areaΠϯυϨΠΞτύλʔϯToolbar + ՃϖΠϯ
© 2023 usagimaruUntitled Title bar / ToolbarΠϯυϨΠΞτύλʔϯToolbar + SidebarSidebar Content area
© 2023 usagimaruTitle bar / ToolbarUntitledΠϯυϨΠΞτύλʔϯToolbar + InspectorContent area Inspector
© 2023 usagimaruUntitled Title bar / ToolbarΠϯυϨΠΞτύλʔϯToolbar + SidebarsSidebar Content area Inspector
© 2023 usagimaruUntitled Title bar / ToolbarΠϯυϨΠΞτύλʔϯToolbar + Sidebars (Big SurελΠϧ)SidebarContent area Inspector
© 2023 usagimaruUntitled Title bar / ToolbarInspectorΠϯυϨΠΞτύλʔϯToolbar + Sidebars (Big Sur / XcodeελΠϧ)SidebarContent area
© 2023 usagimaruUntitled Title bar / ToolbarOptional areaContent areaΠϯυϨΠΞτύλʔϯToolbar + Sidebar (Big SurελΠϧ) + ՃϖΠϯSidebar
© 2023 usagimaruContent areaΠϯυϨΠΞτύλʔϯToolbar + Sidebars (Big SurελΠϧ) + ՃϖΠϯTitle bar / ToolbarUntitledOptional areaInspectorSidebar
© 2023 usagimaruUntitled Title bar / ToolbarSidebar InspectorOptional areaContent areaΠϯυϨΠΞτύλʔϯToolbar + Sidebars (Big Sur / XcodeελΠϧ) + ՃϖΠϯ
© 2023 usagimaruUntitled Title bar / ToolbarΠϯυϨΠΞτύλʔϯToolbar + Sidebars / ଟஈαΠυόʔPrimarysidebarSecondarysidebarContent area
© 2023 usagimaruUntitled Title bar / ToolbarPrimarysidebarInspectorOptional areaContent areaSecondarysidebarΠϯυϨΠΞτύλʔϯToolbar + Sidebars (Big Sur / XcodeελΠϧ) + etc. / ଟॏϖΠϯ
© 2023 usagimaruUntitled Title bar / ToolbarΠϯυϨΠΞτύλʔϯToolbar + Sidebar + Inspector PanelInspectorPanelSidebar Content area
֓ཁ + ৄࡉύλʔϯͷΈ߹ΘͤͰߟ͑Δ© 2023 usagimaru
© 2023 usagimaru֓ཁ + ৄࡉύλʔϯͷΈ߹ΘͤϖΠϯΛղׂͯ͠Λఆٛ͢ΔTitle bar / ToolbarUntitledSidebarInspectorOptional areaContent area
© 2023 usagimaru֓ཁ + ৄࡉύλʔϯͷΈ߹ΘͤϖΠϯΛղׂͯ͠Λఆٛ͢Δ
© 2023 usagimaru֓ཁ ৄࡉ֓ཁ + ৄࡉύλʔϯͷΈ߹ΘͤϖΠϯΛղׂͯ͠Λఆٛ͢ΔSidebarͰ֓ཁΛૢ࡞͠ɺΓͷϖΠϯͰৄࡉΛૢ࡞͢Δ
© 2023 usagimaru֓ཁৄࡉ֓ཁ + ৄࡉύλʔϯͷΈ߹ΘͤϖΠϯΛղׂͯ͠Λఆٛ͢ΔToolbarͰ֓ཁΛૢ࡞͠ɺΓͷϖΠϯͰৄࡉΛૢ࡞͢Δ
© 2023 usagimaru֓ཁ ৄࡉ֓ཁ + ৄࡉύλʔϯͷΈ߹ΘͤϖΠϯΛղׂͯ͠Λఆٛ͢ΔContent areaͰ֓ཁΛૢ࡞͠ɺInspectorͰৄࡉΛૢ࡞͢Δ
© 2023 usagimaru֓ཁৄࡉ֓ཁ + ৄࡉύλʔϯͷΈ߹ΘͤϖΠϯΛղׂͯ͠Λఆٛ͢ΔSidebarͰ֓ཁΛૢ࡞͠ɺInspectorͰৄࡉΛૢ࡞͢Δ
© 2023 usagimaru֓ཁৄࡉ֓ཁ + ৄࡉύλʔϯͷΈ߹ΘͤϖΠϯΛղׂͯ͠Λఆٛ͢ΔContent areaͰ֓ཁΛૢ࡞͠ɺOptional areaͰৄࡉΛૢ࡞͢Δ
© 2023 usagimaruϏϡʔAϏϡʔB֓ཁ + ৄࡉύλʔϯͷΈ߹ΘͤϖΠϯΛղׂͯ͠Λఆٛ͢ΔOptional areaContent areaͷผϏϡʔͱͯ͠ৼΔ͏߹͋Δ͜ͷ߹AͱBͷׂಉͱݟ၏ͤΔ
Big SurελΠϧͱΫϥγοΫελΠϧͷׂͷҧ͍© 2023 usagimaru
© 2023 usagimaruBig SurελΠϧͱΫϥγοΫελΠϧͷׂͷҧ͍ToolbarͱSidebarͷݐ͚ͯͰҙຯ͕มΘΔUntitledSidebarTitle bar / ToolbarBig SurελΠϧSidebar͕Title bar·ͰΈग़͍ͯΔ
© 2023 usagimaruBig SurελΠϧͱΫϥγοΫελΠϧͷׂͷҧ͍ToolbarͱSidebarͷݐ͚ͯͰҙຯ͕มΘΔSidebarTitle bar / ToolbarΫϥγοΫελΠϧSidebar͕Title barͷԼʹऩ·͍ͬͯΔUntitled
© 2023 usagimaruBig SurελΠϧͱΫϥγοΫελΠϧͷׂͷҧ͍ToolbarͱSidebarͷݐ͚ͯͰҙຯ͕มΘΔࠨ্Λਞऔ͍ͬͯΔํ͕ʮ্ҐʯάϧʔϓUntitled Untitled
© 2023 usagimaruϨΠΞτͷجຊݪଇ‣ ࠨʹ͋Δใૈ͘ɺӈʹ͋Δใࡉ͔͍‣ ্ʹ͋Δใૈ͘ɺԼʹ͋Δใࡉ͔͍‣ άϧʔϓͱࢠཁૉͷೖΕࢠߏͰද͢‣ άϧʔϓૈ͘ɺࢠཁૉࡉ͔͍粗 細*ࠨԣॻ͖ϨΠΞτͷ߹࠶ܝ
© 2023 usagimaruBig SurελΠϧͱΫϥγοΫελΠϧͷׂͷҧ͍ToolbarͱSidebarͷݐ͚ͯͰҙຯ͕มΘΔSidebar্͕ҐUntitled UntitledToolbar্͕Ґ
© 2023 usagimaruBig SurελΠϧͱΫϥγοΫελΠϧͷׂͷҧ͍Sidebarத৺ϨΠΞτSidebar্͕ҐUntitled‣ SidebarΛΠϯυશମͷάϩʔόϧφϏήʔγϣϯʹ͢Δ‣ SidebarʹϏϡʔΤσΟλͷΓସ͑ػೳΛ࣋ͨͤΔ‣ SidebarͰબΜ߲ͩʹΑͬͯɺToolbarͷ༰͕มԽ͢Δ߹
© 2023 usagimaruBig SurελΠϧͱΫϥγοΫελΠϧͷׂͷҧ͍Sidebarத৺ϨΠΞτ
© 2023 usagimaruBig SurελΠϧͱΫϥγοΫελΠϧͷׂͷҧ͍Toolbarத৺ϨΠΞτToolbar্͕ҐUntitled‣ ToolbarΛΠϯυશମͷάϩʔόϧφϏήʔγϣϯʹ͢Δ‣ ToolbarʹϏϡʔΤσΟλͷΓସ͑ػೳΛ࣋ͨͤΔ‣ SidebarΛContent areaͷ֓ཁϦετͱͯ͠ػೳͤ͞Δ߹
© 2023 usagimaruBig SurελΠϧͱΫϥγοΫελΠϧͷׂͷҧ͍Toolbarத৺ϨΠΞτ
"© 2023 usagimaru
© 2023 usagimaruBig SurελΠϧͱΫϥγοΫελΠϧͷׂͷҧ͍Tab barͷ༗ແͰϨΠΞτ͕มԽ͢Δڍಈ
ݕࡧϑΟʔϧυͷҐஔ© 2023 usagimaru!
© 2023 usagimaruݕࡧϑΟʔϧυͷҐஔSidebar্ vs. Toolbarӈ
© 2023 usagimaruݕࡧϑΟʔϧυͷҐஔSidebar্ vs. ToolbarӈSidebar্ Toolbarӈ
© 2023 usagimaruݕࡧϑΟʔϧυͷҐஔSidebar্ vs. ToolbarӈToolbarӈhttps://pc.watch.impress.co.jp/docs/2004/0629/wwdc03.htm‣ ओʹυϝΠϯΛލ͍ͩԣஅݕࡧͷׂ͕͋Δ‣ 10.4 TigerҎདྷɺݕࡧʮӈ্ʯʹઃஔ͢Δͷͱͯ͠ఆٛ͞Ε͖ͯͨ‣ ౷తͳmacOSΒ͍͠ελΠϧ
© 2023 usagimaruݕࡧϑΟʔϧυͷҐஔSidebar্ vs. ToolbarӈSidebar্‣ ҰཡͷϑΟϧλϦϯάͷΑ͏ʹݟ͑Δ‣ Sidebar͕άϩʔόϧφϏήʔγϣϯͷػೳΛ࣋ͭͷͰɺҰཡͷϑΟϧλϦϯάͰυϝΠϯΛލ͍ͩԣஅݕࡧʹͳΓಘΔʢͷͰͳ͍͔ʁʣ‣ iPadOSͷελΠϧͱ߹Θ͍ͤͨ߹
ΫϩʔζϘλϯʢόπʣࠨଆ© 2023 usagimaru
ΫϩʔζϘλϯʢόπʣࠨଆMac OSͷΫϩʔζϘοΫε© 2023 usagimaru
ΫϩʔζϘλϯʢόπʣࠨଆSafariͷλϒ© 2023 usagimaru
ΫϩʔζϘλϯʢόπʣࠨଆvisionOSͷΠϯυίϯτϩʔϧ© 2023 usagimaru
© 2023 usagimaruPaneΦʔόʔϥοϐϯάΠϯυAlan KayϨΠΞτͷجຊݪଇ֓ཁͱৄࡉMacΒ͠͞ϞʔυϨε ϞʔμϧBig SurελΠϧSidebarத৺ Toolbarத৺Sidebar্ݕࡧ Toolbarӈݕࡧ όπࠨଆ
9#macosnative