Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Human Interface Guidelinesから読み解く標準アプリの素晴らしい体験

K-Torishima
September 03, 2023

Human Interface Guidelinesから読み解く標準アプリの素晴らしい体験

K-Torishima

September 03, 2023
Tweet

More Decks by K-Torishima

Other Decks in Technology

Transcript

  1. Koji Torishima
    Human Interface Guidelines͔ΒಡΈղ͘


    ඪ४ΞϓϦͷૉ੖Β͍͠ମݧ
    iOSDC Japan 2023

    View Slide

  2. Human Interface Guidelines

    View Slide

  3. https://developer.apple.com/design

    View Slide

  4. https://developer.apple.com/jp/news/?id=v8a3aetj

    View Slide

  5. https://developer.apple.com/jp/design/human-interface-guidelines/

    View Slide

  6. https://developer.apple.com/jp/design/human-interface-guidelines/

    View Slide

  7. ಺༰͕ଟ͍

    View Slide

  8. ๩͍͠🧑💻👩💻


    ͕࣌ؒͳ͍🕓

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. • Ұ؏ͯ͠ඪ४తͳύλʔϯΛ࢖༻
    ͠ɺϢʔβʹର͠շదͳૢ࡞ײ
    Λఏڙ͢Δ
    جຊཁૉ/ϒϥϯσΟϯάҾ༻

    View Slide

  13. • ࢹ֮తʹάϧʔϓ෼͚ͯ͠ඞཁͳ
    ৘ใΛݟ͚ͭ΍͘͢͢Δ
    جຊཁૉ/ϨΠΞ΢τҾ༻

    View Slide

  14. • ςΩεταΠζͷมߋʹରԠͰ͖
    ΔΑ͏ʹ͓ͯ͘͠
    جຊཁૉ/ϨΠΞ΢τҾ༻

    View Slide

  15. ύλʔϯ/ϞμϦςΟҾ༻
    • ϞμϦςΟͰ͸ɺॏཁͳ৘ใΛ
    ࣮֬ʹϢʔβʔʹ఻͑ɺඞཁʹ
    Ԡͯ͡ରԠͰ͖ΔΑ͏ʹ͢Δ

    View Slide

  16. ύλʔϯ/ϞμϦςΟҾ༻
    • ͍ͭ͘΋ͷखॱΛܦΔಠཱͨ͠
    λεΫʹूதͰ͖ΔΑ͏ʹ͢Δ
    ʹ͸ϑϧεΫϦʔϯϞʔμϧදࣔ
    Λఏڙ͢Δ

    View Slide

  17. ύλʔϯ/ϞμϦςΟҾ༻
    • ϞʔμϧϏϡʔΛด͡Δ෼͔Γ
    ΍͍͢ํ๏Λৗʹఏࣔ͢Δ


    • ඞཁͳ৔߹͸ϞʔμϧϏϡʔΛ
    ด͡Δલʹ֬ೝΛදࣔͯ͠σʔ
    λ͕ࣦΘΕͳ͍Α͏ʹ͢Δɻ

    View Slide

  18. View Slide

  19. ύλʔϯ/υϥοάˍυϩοϓҾ༻
    • ՄೳͳݶΓΞϓϦͷશҬͰυϥ
    οάˍυϩοϓʹରԠ͢Δ

    View Slide

  20. ύλʔϯ/υϥοάˍυϩοϓҾ༻
    • ΞϓϦ಺Ͱͷίϯςϯπͷυϥ
    οάˍυϩοϓΛҠಈʹ͢Δ͔
    ίϐʔʹ͢Δ͔Λܾఆ͢Δ

    View Slide

  21. ύλʔϯ/औΓফ͠/΍Γ௚͠Ҿ༻
    • औΓফ͠/΍Γ௚͠Ϙλϯ͸ඞཁ
    ͳ৔߹ͷΈఏڙ͢Δ

    View Slide

  22. ύλʔϯ/औΓফ͠/΍Γ௚͠Ҿ༻
    • औΓফ͠/΍Γ௚͠ͷ݁ՌΛࣔ͢

    View Slide

  23. ίϯϙʔωϯτ/ίϯςϯπ/ςΩετϏϡʔҾ༻
    • ςΩετϏϡʔ͸௕͍ςΩετ
    ΍ฤूՄೳͳςΩετɺಛघͳ
    ϑΥʔϚοτͷςΩετΛදݱ
    ͢Δ৔߹ʹ࢖༻͢Δ

    View Slide

  24. ίϯϙʔωϯτ/දࣔ/γʔτҾ༻
    • ϞʔμϧͰͳ͍Ϗϡʔ͸ɺ਌Ϗ
    ϡʔͷϝΠϯλεΫʹӨڹ͢Δ
    ิ଍తͳ߲໨Λද͍ࣔͨ͠৔߹
    ʹ࢖༻͢Δ

    View Slide

  25. View Slide

  26. ύλʔϯ/υϥοάˍυϩοϓҾ༻
    • υϥοάˍυϩοϓͱಉ͡ॲཧ
    Λ࣮ߦͰ͖Δ୅ସखஈΛఏڙ͢
    Δ

    View Slide

  27. ύλʔϯ/υϥοάˍυϩοϓҾ༻
    • ඞཁʹԠͯ͡υϥοΫઌͷίϯ
    ςϯπΛεΫϩʔϧ͢Δ

    View Slide

  28. ύλʔϯ/υϥοάˍυϩοϓҾ༻
    • υϩοϓޙ͸υϥοΫઌͷίϯ
    ςϯπͷબ୒ঢ়ଶ͸ҡ࣋͠ɺι
    ʔεͷબ୒ঢ়ଶ͸ඞཁʹԠͯ͡
    ߋ৽͢Δ

    View Slide

  29. ίϯϙʔωϯτ/બ୒ͱೖྗ/ϐοΧʔҾ༻
    • ೔෇ϐοΧʔͰ෼Λࢦఆ͢Δ৔
    ߹͸ࡉ͔͗͘͢͠ͳ͍Α͏ʹ͢
    Δ

    View Slide

  30. ίϯϙʔωϯτ/બ୒ͱೖྗ/ϐοΧʔҾ༻
    • ಺ଂ·ͨ͸֎෦ΩʔϘʔυʹΑ
    Δσʔλೖྗʹ΋ରԠ͍ͯ͠·
    ͢

    View Slide

  31. View Slide

  32. ύλʔϯ/σʔλͷάϥϑԽҾ༻
    • σʔληοτʹ͍ͭͯͷॏཁͳ
    ৘ใΛڧௐ͍ͨ͠৔߹ʹάϥϑ
    Λ࢖༻͢Δ

    View Slide

  33. ύλʔϯ/σʔλͷάϥϑԽҾ༻
    • άϥϑΛγϯϓϧʹ͠ɺৄࡉͳ
    ৘ใ͸ඞཁʹԠͯ͡Ϣʔβʔ͕
    ֬ೝͰ͖ΔΑ͏ʹ͢Δ

    View Slide

  34. ύλʔϯ/σʔλͷάϥϑԽҾ༻
    • ಉ͡σʔλΛର৅ͱ͢Δෳ਺ͷ
    άϥϑؒͰҰ؏ੑΛҡ࣋͢Δ

    View Slide

  35. ίϯϙʔωϯτ/ϨΠΞ΢τͱฤ੒/ϘοΫεҾ༻
    • ࿦ཧతʹؔ࿈͋Δ৘ใ΍ίϯϙ
    ʔωϯτΛࢹ֮తʹ·ͱΊΔ

    View Slide

  36. ίϯϙʔωϯτ/ϨΠΞ΢τͱฤ੒/ϦετͱςʔϒϧҾ༻
    • දࣔ͢Δඞཁͷ͋Δ৘ใʹద͠
    ͨߦͷελΠϧΛબͿ

    View Slide

  37. View Slide

  38. φϏήʔγϣϯͱݕࡧ/φϏήʔγϣϯόʔҾ༻
    • λΠτϧ͸؆ܿʹ͢Δ


    • ൒֯15จࣈҎ಺ʹͲͲΊΔͱྑ
    ͍

    View Slide

  39. φϏήʔγϣϯͱݕࡧ/φϏήʔγϣϯόʔҾ༻
    • ඪ४ͷ໭ΔϘλϯΛ࢖༻͢Δ

    View Slide

  40. φϏήʔγϣϯͱݕࡧ/φϏήʔγϣϯόʔҾ༻
    • Ϣʔβ͕Ҡಈͨ͠ΓεΫϩʔϧ
    ͨ͠Γͯ͠΋ৗʹࣗ෼ͷҐஔ͕
    ෼͔ΔΑ͏ʹɺϥʔδλΠτϧ
    Λ࢖༻͢Δ

    View Slide

  41. φϏήʔγϣϯͱݕࡧ/λϒόʔҾ༻
    • λϒόʔ͸ɺΞΫγϣϯͷ࣮ߦͰ
    ͸ͳ͘φϏήʔγϣϯͷͨΊʹ
    ࢖༻͢Δ

    View Slide

  42. φϏήʔγϣϯͱݕࡧ/λϒόʔҾ༻
    • ֤λϒλΠτϧʹ؆ܿͳ༻ޠΛ
    ࢖༻͢Δ

    View Slide

  43. ·ͱΊ

    View Slide

  44. ·ͱΊ
    • Appleඪ४ΞϓϦ͸ੵۃతʹ࢖ͬͯΈΔͱྑ͍


    • جຊΛϕʔεʹΞϓϦ։ൃΛ͢Δ͜ͱ͸ޮ཰తͰྑ͍


    • ਓΛר͖ࠐΜͰHIGಡΜͰ͍͘ͱྑ͍

    View Slide

  45. "QQMFඪ४ΞϓϦ͸ੵۃతʹ࢖ͬ
    ͯΈΔͱྑ͍📱💻

    View Slide

  46. جຊΛϕʔεʹΞϓϦ։ൃΛ͢Δ
    ͜ͱ͸ޮ཰తͰྑ͍🧑💻👩💻

    View Slide

  47. ਓΛר͖ࠐΜͰ)*(ಡΜͰ͍͘ͱ
    ྑ͍🧍🧍🧍🏢

    View Slide

  48. ࠷ޙʹ

    View Slide

  49. ࣗݾ঺հ
    • ௗౢߊ࣍


    • @k_torishima


    • ߹ಉձࣾDMM.com


    • iOSΤϯδχΞ


    • DMMΦϯϥΠϯαϩϯͷiOSΞϓ
    ϦΛ։ൃ͍ͯ͠·͢ɻ

    View Slide

  50. https://inside.dmm.com/articles/salon-ios-reading-human-interface-guidelines/

    View Slide

  51. End

    View Slide