Big Surからの四角いアイコン / Rounded Rectangle Icons since Big Sur

macOS native symposium (https://macos-native.github.io) #07 登壇資料

Big Surからアプリケーションアイコンのルールが変わりました。どうするとそれっぽくなるのでしょうか。実例を交えながら考察します。

Transcript

1. 題: 場所: 日付: #JH
   4VS͔Βͷ࢛͍֯ΞΠίϯ NBD04
   OBUJWF
   4ZNQPTJVN
    ೥
   ݄
   ೔ KQ 発表者:
2. macOS native #JH
   4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp ࣗݾ঺հ KQ ͸ NBD04 ΞϓϦέʔγϣϯઐ໳ͷϗϏʔ։ൃऀɻ 044 ϓϩδΣΫτӡӦ͔ΒϓϩάϥϛϯάɺΞΠίϯͷσ βΠϯ·ͰɺNBD04 ͷΞϓϦέʔγϣϯ։ൃʹؔΘΔ͜ ͱͳΒશ෦΍ΔϚϯͰ͋Δɻ
3. macOS native #JH
   4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp ࣗݾ঺հ CotEditor Gapplin BathyScaphe Qli application work plain-text editor SVG viewer 5ch browser movie player 2014年に 
 正式引き継ぎ サポーtメンバー 
 （主にデザイン・UI）
4. macOS native #JH
   4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp #JH
   4VSΞοϓσʔτ
5. macOS native #JH
   4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp #JH
   4VSΞοϓσʔτ
6. macOS native #JH
   4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp #JH
   4VSΞοϓσʔτ
7. macOS native #JH
   4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQMFͷΞοϓσʔτ Safari Preview Mail TextEdit Calculator Terminal Xcode System Information Migration Assistant
8. macOS native #JH
   4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQMFͷΞοϓσʔτ Safari Preview Mail TextEdit Calculator Terminal Xcode System Information Migration Assistant ?
9. macOS native #JH
   4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp )VNBO
   *OUFSGBDF
   (VJEFMJOFT ref. https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/
10. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp )VNBO
    *OUFSGBDF
    (VJEFMJOFT 1. Design a beautiful icon that clearly represents your app. 2. Embrace simplicity. 3. Establish a single focus point. 4. To give people a familiar and consistent experience, prefer a design that works well across multiple platforms. 5. Consider depicting a familiar tool to communicate what people use your app to do. 6. Make real objects look real. 7. If text is essential for communicating your app’s purpose, consider creating a graphic abstraction of it. 8. To depict photos or parts of your app’s UI, create idealized images that emphasize the features you want people to notice. 9. Don’t use replicas of Apple hardware products. 10. Use the drop shadow in the icon-design template. 11. Consider using interior shadows and highlights to add definition and realism. 12. Avoid defining contours that suggest a shape other than a rounded rectangle. 13. Consider adding a slight glow just inside the edges of your icon. 14. Keep primary content within the icon grid bounding box; keep all content within the outer bounding box.
11. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp )VNBO
    *OUFSGBDF
    (VJEFMJOFT 1. ΞϓϦέʔγϣϯΛ໌֬ʹࣔ͢ඒ͍͠ΞΠίϯΛσ βΠϯ͢Δ 2. γϯϓϧʹ͢Δ 3. য఺Λ̍ͭʹߜΔ 4. ਌͠Έ΍͘͢Ұ؏ͨ͠ମݧΛ༩͑ΔͨΊʹɺෳ਺ͷ ϓϥοτϑΥʔϜͰػೳ͢ΔσβΠϯ͕๬·͍͠ 5. ΞϓϦέʔγϣϯͷػೳΛྨਪͰ͖ΔΑ͏ʹ਎ۙͳ πʔϧΛඳ͘ 6. ࣮ଶͷ͋Δ෺͸ϦΞϧʹඳ͘ 7. ΞϓϦέʔγϣϯͷ༻్Λ఻͑ΔͨΊʹςΩετ͕ ෆՄܽͳ৔߹͸ɺάϥϑΟοΫΛந৅Խ͢Δ͜ͱΛ ৺͕͚Δ 8. ࣸਅ΍UIͷҰ෦Λඳը͢Δ৔߹͸ɺ஫໨͍ͤͨ͞ಛ ௃Λڧௐͨ͠ը૾Λ࡞੒͢Δ 9. Appleͷϋʔυ΢ΣΞΛ໛฿͠ͳ͍ 10. ΞΠίϯςϯϓϨʔτͷυϩοϓγϟυ΢Λ࢖͏ 11. ಺ଆͷӨ΍ϋΠϥΠτΛ༻͍ͯɺϦΞϧ͞Λ௥Ճ͢ Δ 12. ؙ࢛֯֯Ҏ֎ͷγϧΤοτΛࣔࠦ͢ΔΑ͏ͳܗঢ়Λ ༩͑ͳ͍ 13. ΞΠίϯͷΤοδͷ಺ଆʹϋΠϥΠτΛ௥Ճ͢Δ͜ ͱΛݕ౼͢Δ 14. ओཁͳίϯςϯπ͸಺ଆͷό΢ϯσΟϯάϘοΫε ʹೲΊɺશͯͷίϯςϯπΛը૾಺ʹऩΊΔ
12. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ
13. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ ref. https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/
14. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ
15. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ
16. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ
17. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ
18. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ
19. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ macOS iOS
20. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp ඞཁͳαΠζ @1x @2x 512 256 128 32 16 @1x @2x 512 ① 256 128 ② 32 ④ ③ 16 ⑤ ④ 412 824 206 412 104 206 28 52 14 28
21. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp ඞཁͳαΠζ @1x @2x 512 ① 256 128 ② 32 ④ ③ 16 ⑤ ④
22. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp )VNBO
    *OUFSGBDF
    (VJEFMJOFT
    ͓͞Β͍ 1. ΞϓϦέʔγϣϯΛ໌֬ʹࣔ͢ඒ͍͠ΞΠίϯΛσ βΠϯ͢Δ 2. γϯϓϧʹ͢Δ 3. য఺Λ̍ͭʹߜΔ 4. ਌͠Έ΍͘͢Ұ؏ͨ͠ମݧΛ༩͑ΔͨΊʹɺෳ਺ͷ ϓϥοτϑΥʔϜͰػೳ͢ΔσβΠϯ͕๬·͍͠ 5. ΞϓϦέʔγϣϯͷػೳΛྨਪͰ͖ΔΑ͏ʹ਎ۙͳ πʔϧΛඳ͘ 6. ࣮ଶͷ͋Δ෺͸ϦΞϧʹඳ͘ 7. ΞϓϦέʔγϣϯͷ༻్Λ఻͑ΔͨΊʹςΩετ͕ ෆՄܽͳ৔߹͸ɺάϥϑΟοΫΛந৅Խ͢Δ͜ͱΛ ৺͕͚Δ 8. ࣸਅ΍UIͷҰ෦Λඳը͢Δ৔߹͸ɺ஫໨͍ͤͨ͞ಛ ௃Λڧௐͨ͠ը૾Λ࡞੒͢Δ 9. Appleͷϋʔυ΢ΣΞΛ໛฿͠ͳ͍ 10. ΞΠίϯςϯϓϨʔτͷυϩοϓγϟυ΢Λ࢖͏ 11. ಺ଆͷӨ΍ϋΠϥΠτΛ༻͍ͯɺϦΞϧ͞Λ௥Ճ͢ Δ 12. ؙ࢛֯֯Ҏ֎ͷγϧΤοτΛࣔࠦ͢ΔΑ͏ͳܗঢ়Λ ༩͑ͳ͍ 13. ΞΠίϯͷΤοδͷ಺ଆʹϋΠϥΠτΛ௥Ճ͢Δ͜ ͱΛݕ౼͢Δ 14. ओཁͳίϯςϯπ͸಺ଆͷό΢ϯσΟϯάϘοΫε ʹೲΊɺશͯͷίϯςϯπΛը૾಺ʹऩΊΔ
23. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp )VNBO
    *OUFSGBDF
    (VJEFMJOFT
24. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp ϦΞϧʹɾγϯϓϧʹɾσϑΥϧϝΛͯ͠ඳ͘
25. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp ϦΞϧʹɾγϯϓϧʹɾσϑΥϧϝΛͯ͠ඳ͘
26. macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp ·ͱΊ ① AppleఏڙͷςϯϓϨʔτʹԊ͏ ② πʔϧ͸࣮ࣸతʹॻ͘ ③ ࡉ෦Λলུ͠ڧ͘σϑΥϧϝ͢Δ ④ πʔϧ͸͸Έग़͢ ⑤ πʔϧ͸ਖ਼ରɺ·ͨ͸26°܏͚Δ 26° Big SurΒ͍͠ΞΠίϯ
27. ©2022 1024jp macOS native #JH
    4VS͔Βͷ࢛͍֯ΞΠίϯ ͓ΘΓ