The practice of inclusive design -WWDC21-

集まれSwift好き！Swift愛好会スピンオフ WWDC21セッション要約会 @オンライン
https://love-swift.connpass.com/event/215687/

WWDC21 Session: https://developer.apple.com/videos/play/wwdc2021/10275/
Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines/inclusion/overview/
Apple Style Guide: https://help.apple.com/applestyleguide/#/apdcb2a65d68

Building an Inclusive Codebase: https://medium.com/airbnb-engineering/building-an-inclusive-codebase-bbaa2315e5b8

Transcript

1. ʰThe practice of inclusive designʱ

   -WWDC21-
   גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦
   ϩΫωϜ @_rockname
   

   View Slide

2. mixi, Inc.
   ࣗݾ঺հ
   ϩΫωϜ / rockname
   • ϛΫγΟͰʮՈ଒ΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ

   ։ൃͯ͠Δ
   • iOSϝΠϯɺAndroid, RailsͳͲ΋ॻ͍ͯΔ
   • εϚϒϥ͕޷͖
   

   View Slide

3. mixi, Inc.
   Inclusive Designͱ͸
   • ߴྸऀ΍ো͕͍ऀ, ֎ࠃਓͷΑ͏ͳ͞·͟·ͳਓʑΛσβΠϯϓϩηεͷ্ྲྀ͔Βר͖ࠐ
   ΜͰઃܭ͍ͯ͘͠σβΠϯख๏ͷ͜ͱ
   • WWDC21ͷηογϣϯ The practice of inclusive design Ͱ͸ɺInclusive DesignΛ࣮ફ͢
   Δ্Ͱେ੾ͳ6ͭͷϙΠϯτʹ͍ͭͯ঺հ͞Εͨ
   

   View Slide

4. mixi, Inc.
   

   View Slide

5. 1. Tell diverse stories
   

   View Slide

6. mixi, Inc.
   1. Tell diverse stories
   • ͞·͟·ͳഎܠΛ࣋ͭϢʔβʔΛ૝ఆͯ͠σβΠϯʹऔΓ૊·ͳ͚Ε͹ɺҙਤͤͣʹજࡏ
   తͳϢʔβʔʹରͯ͠ૄ֎ײΛ࣋ͨͤͯ͠·͏͔΋͠Εͳ͍
   

   View Slide

7. mixi, Inc.
   1. Tell diverse stories
   • ྫ͑͹ɺ৯ࣄϝϞΞϓϦͷApp StoreʹฒͿεΫϦʔϯγϣοτͰ͸ɺࠨ͸ΞϝϦΧͷ৯จԽͷࣸਅͷΈΛ࠾
   ༻͍ͯ͠Δ͕ɺӈͷΑ͏ʹଟ༷ͳ৯จԽͷࣸਅΛࡌͤͨํ͕ɺΑΓଟ͘ͷਓʑ΁Ξϓϩʔν͕Ͱ͖Δ
   

   View Slide

8. 2. Avoid stereotypes
   

   View Slide

9. mixi, Inc.
   2. Avoid stereotypes
   • εςϨΦλΠϓͱ͸ɺଟ͘ͷਓʹਁಁ͍ͯ͠Δઌೖ؍
   • ݸਓؒͷҧ͍Λݟམͱͨ͠Γɺਓʑͷߦಈʹ͍ͭͯؒҧͬͨߟ͑Λ޿ΊΔཁҼͱͳΔ
   • ྫ͑͹ɺݴ༿΍ϏδϡΞϧʹ͓͍ͯɺʮਓ͸உੑͱঁੑͷ2ͭͷੑʹ෼͚ΒΕΔʯͱ͍͏
   εςϨΦλΠϓΛ࣋ͪ΍͍͢
   • ͜ͷೋݩ࿦͸Ұ෦ͷݴޠ΍จԽʹਂ͘ਁಁͯ͠͠·͓ͬͯΓɺͦͷΑ͏ͳίϛϡχςΟʹ
   ଐ͍ͯ͠ΔͱɺͲͪΒʹ΋ଐ͞ͳ͍Կඦສਓ΋ͷਓʑΛ஌Βͣ஌Βͣͷ͏ͪʹૄ֎͢Δ͜
   ͱʹͳΔ
   

   View Slide

10. mixi, Inc.
    2. Avoid stereotypes
    • ྫ͑͹ɺ૬खͷੑผ͕Θ͔Βͳ͍৔߹ɺ"he "΍ "she "ͱ͍͏ೋ߲ରཱͷ୅໊ࢺΛ࢖͏ͷͰ͸ͳ͘ɺ"they "ͱ͍
    ͏ੑผʹؔ܎ͷͳ͍୅໊ࢺʹஔ͖׵͑Δ͜ͱ͕Ͱ͖Δ
    

    View Slide

11. mixi, Inc.
    2. Avoid stereotypes
    • ྫ͑͹ɺ"Hey, guys!"Ͱ͸ͳ͘"Hey, everyone!"ʹ͢Δ͜ͱͰɺࢹௌऀͷҰ෦Λݟམͱ͞ͳ͍Α͏ʹ͢Δ͜ͱ΋
    Ͱ͖Δ
    

    View Slide

12. mixi, Inc.
    2. Avoid stereotypes
    • ྫ͑͹ɺਓ͕୭Ͱ͋Δ͔ΛԾఆ͠ͳ͍ɺδΣϯμʔʹͱΒΘΕͳ͍ਓؒͷΞΠίϯΛ࢖༻͢Δ͜
    ͱͰɺΞΠίϯʹδΣϯμʔʹؔ͢ΔϝοηʔδੑΛ࣋ͨͤͳ͍
    

    View Slide

13. mixi, Inc.
    2. Avoid stereotypes
    • εςϨΦλΠϓʹΑͬͯΠϯλʔϑΣʔεͷػೳ੍͕ݶ͞ΕΔ͜ͱ΋޷·͘͠ͳ͍
    • ྫ͑͹ɺ্ਤ͸Ո଒ͰಈըΛڞ༗͢ΔΞϓϦͷΞΧ΢ϯτొ࿥ը໘Ͱɺ͜Ε͸ɺՈ଒Λ෕ɺ฼ɺࢠڙͷ3ͭͷ໾ׂʹ෼ྨ͍ͯ͠Δ
    

    View Slide

14. mixi, Inc.
    2. Avoid stereotypes
    • ͜ͷΞϓϦͷΠϯλʔϑΣʔε͸ɺย਌, ಉੑͷ਌, ଟੈ୅ੈଳ, ੒ਓͨ͠ࢠͲ΋, ๏ఆޙݟਓͳͲͷՈ଒ͷܗΛ
    ߟྀ͍ͯ͠ͳ͍
    

    View Slide

15. mixi, Inc.
    2. Avoid stereotypes
    • վળͷͨΊʹ͸ɺՈ଒ͷ໾ׂ͕ܾ·͍ͬͯΔͱԾఆ͢ΔͷͰ͸ͳ͘ɺͦΕͧΕͷϓϩϑΟʔϧʹ "Family member "ͷΑ͏ͳதཱతͳϥϕϧΛ෇͚Δ
    • ·ͨɺՈ଒Λߏ੒͢Δਓ਺Λ૝ఆ͢ΔͷͰ͸ͳ͘ɺΞΧ΢ϯτΛઃఆͨ͠ਓ͚ͩͰελʔτ͠ɺඞཁͳਓ਺ΛՈ଒ʹ௥ՃͰ͖ΔΑ͏ʹ͢Δ
    

    View Slide

16. 3. Adopt accessibility
    

    View Slide

17. mixi, Inc.
    3. Adopt accessibility
    • ΞΫηγϏϦςΟͱ͸ɺ਎ମͷঢ়ଶ΍ೳྗͷҧ͍ʹΑΒ༷ͣʑͳਓ͔Βಉ͡Α͏ʹιϑτ
    ΢ΣΞΛར༻Ͱ͖Δঢ়ଶ΍ͦͷ౓߹͍ͷ͜ͱ
    • ੈքʹ͸ɺ໨ͷෆࣗ༝ͳํ΍ऑࢹͷํɺࣖͷෆࣗ༝ͳํɺಈ͖ʹහײͳํɺ਎ମ΍ӡಈ
    ʹো͕͍ͷ͋ΔํͳͲɺ͞·͟·ͳܦݧ΍ೳྗΛ࣋ͭਓʑ͕͍ͯɺԿԯਓ΋ͷํ͕গͳ
    ͘ͱ΋1ͭͷΞΫηγϏϦςΟઃఆΛར༻͍ͯ͠Δ
    

    View Slide

18. mixi, Inc.
    3. Adopt accessibility
    • ΞϓϦͷςΩετΛDynamic TypeʹରԠ͓͚ͯ͠͹ΞϓϦͷจࣈͷେ͖͞ΛϢʔβʔ͕ࣗ༝
    ʹઃఆՄೳʹͳΔ
    

    View Slide

19. mixi, Inc.
    3. Adopt accessibility
    • ΞϓϦͷίϯςΩετΛ൓өͨ͠ҙຯͷ͋ΔදݱΛVoiceOverʹಡΈ্͛ͤ͞ΔΑ͏ʹ͢Δ͜
    ͱͰɺ໨ͷݟ͑ͳ͍ํ΍ऑࢹͷํʹͱͬͯඇৗʹ࢖͍΍͍͢΋ͷͱͳΔ
    

    View Slide

20. 4. Localize for culture
    

    View Slide

21. mixi, Inc.
    4. Localize for culture
    • ΑΓଟ͘ͷਓʹָ͠ΜͰ΋Β͏ͨΊʹ͸ɺΞϓϦ΍ήʔϜΛ͞·͟·ͳݴޠʹ຋༁͢Δ͜
    ͱ͕େ͖ͳεςοϓͱͳΔ
    • ຋༁ͱ͸ɺҟͳΔ୯ޠͷ௕͞΍จࣈମܥʹରԠͰ͖ΔΑ͏ʹɺΠϯλʔϑΣʔεΛ४උ͢
    Δ͜ͱ
    • ϩʔΧϥΠζͱ͸ɺ୯ʹݴ༿΍਺ࣈΛ຋༁͢Δ͚ͩͰͳ͘ɺίϯςϯπΛҟจԽʹద߹
    ͤ͞Δ͜ͱͰ΋͋Δ
    • ҟจԽͷਓʑʹ׻ܴ͞ΕΔͨΊʹ·ͣͰ͖Δ͜ͱͷͻͱͭ͸ɺಛఆͷਓʹ͔͠௨͡ͳ͍
    දݱΛ࢖͍ͬͯͳ͍͔Ͳ͏͔Λ࠶֬ೝ͢Δ͜ͱ͕ॏཁ
    

    View Slide

22. mixi, Inc.
    4. Localize for culture
    • ྫ͑͹ɺΞϓϦͷίϐʔʹ "Plan your vacation from A to Z. “ͷʮA to Zʯ͸ΞϧϑΝϕοτΛ༻͍Δݴޠಛ༗ͷจԽ
    • ൺᄻ΍ෳࡶͳ༻ޠΛආ͚ɺྫ͑͹ʮfrom beginning to endʯͷΑ͏ʹݴ͍׵͑Δͱྑ͍
    

    View Slide

23. mixi, Inc.
    4. Localize for culture
    • ྫ͑͹ɺΞϝϦΧͰެ։ͨ͠ྉཧΞϓϦΛΠϯυͰ΋ެ։͢ΔͨΊʹ্ਤͷΑ͏ʹώϯσΟʔޠʹ຋༁ͨ͠ͱ͢Δ
    • ਓޱͷେ෦෼͕ϕδλϦΞϯͰ͋ΔΠϯυͷ৯จԽΛશ͘ߟྀͰ͖͍ͯͳ͍ͷͰɺ͜ͷ··ͩͱ੒ޭ͸೉͍ͩ͠Ζ͏
    

    View Slide

24. 5. Use color mindfully
    

    View Slide

25. mixi, Inc.
    5. Use color mindfully
    • จԽʹΑͬͯͦͷ৭͕ਓؒʹ༩͑Δҹ৅͸มΘͬͯ͘Δ
    • ྫ͑͹ɺੈքͷଟ͘ͷ஍ҬͰ͸ɺ੺͸Ѫͱ੺͍όϥ΍ɺ͋Δ͍͸ةݥɺωΨςΟϒɺ๫ྗͳͲΛ࿈૝ͤ͞Δ
    

    View Slide

26. mixi, Inc.
    5. Use color mindfully
    • ҰํͰɺΞδΞͷଟ͘ͷจԽͰ͸ɺ੺͸޾ӡɺ޾෱Λҙຯ͢Δ΋ͷͱͯ͠࢖ΘΕ͍ͯΔ
    

    View Slide

27. mixi, Inc.
    5. Use color mindfully
    • ྫ͑͹ɺStocksΞϓϦ͸རӹΛ྘ɺଛࣦΛ੺Ͱදࣔ͢Δ͕ɺ஍ҬΛதࠃຊ౔ʹઃఆ͢Δͱɺརӹ͸੺Ͱදࣔ
    ͞ΕΔͷ͸ɺ͜ͷΑ͏ͳ࿈૝ʹΑΔ΋ͷ
    

    View Slide

28. mixi, Inc.
    5. Use color mindfully
    • ྫ͑͹ɺʮະಡʯͱʮطಡʯΛࣔ͢2छྨͷυοτ͕͋Δͱ͢Δ
    • ৭ऑͷํ͸ɺ͜ͷ2छྨͷυοτΛ৭͚ͩͰ͸؆୯ʹ۠ผͰ͖ͳ͍͔΋͠Εͳ͍ɺ୅ΘΓʹυοτͷ1ͭΛΞΠίϯʹมߋ͢Δ͜ͱΛબ୒͢Δඞཁ͕͋Δ
    

    View Slide

29. mixi, Inc.
    5. Use color mindfully
    • ྫ͑͹্ਤͷϘλϯ͸എܠ৭ͱจࣈ৭ͷίϯτϥετ͕WCAG 2.0ͷୡ੒ج४4.5ʹຬͨͳ͍͜ͱ͕Θ͔Δ
    • ௿͍ίϯτϥετൺͩͱࢹೝͮ͠Β͍ͱײ͡Δਓ͕ଟ͍ͨΊɺจࣈ৭ʹࠇΛ࢖ͬͯΈΔͱ4.5Λ௒͑ΔͨΊྑ͍ͩΖ͏
    

    View Slide

30. 6. Encourage self-expression
    

    View Slide

31. mixi, Inc.
    6. Encourage self-expression
    • ΞϓϦ΍ήʔϜ͸ɺਓʑͷݸੑΛೝΊɺ׻ܴ͢Δ͜ͱ͕Ͱ͖Δ
    • ͦͷͨΊʹ͸ɺਓʑ͕ࣗ෼ࣗ਎Λಛఆ͢Δํ๏Λ੍ݶͨ͠Γɺڧ੍ͨ͠Γ͠ͳ͍͜ͱ͕
    Ұ൪େ੾Ͱ͋Δ
    

    View Slide

32. mixi, Inc.
    6. Encourage self-expression
    • ϑΝʔετωʔϜͱϥετωʔϜͷΑ͏ͳ֓೦͸ɺ஍ҬʹΑͬͯେ͖͘ҟͳΔ͜ͱΛೝࣝ͢΂͖
    • ྫ͑͹ɺϥςϯΞϝϦΧग़਎ͳΒɺ྆਌͔ΒͦΕͧΕ2ͭͷϑΝϛϦʔωʔϜΛ΋Β͍ͬͯΔ͸ͣ
    

    View Slide

33. mixi, Inc.
    6. Encourage self-expression
    • ԿͷͨΊʹ໊લΛ࢖͏ͷ͔ʹ΋ΑΔ͕ɺΑΓจԽతʹแׅతͳղܾࡦͱͯ͠ɺϑϧωʔϜΛೖྗ
    ͢ΔͨΊͷ୯ҰͷςΩετϑΟʔϧυΛఏڙ͢Δͷ͕ྑ͍
    

    View Slide

34. mixi, Inc.
    6. Encourage self-expression
    • ྫ͑͹ɺਓؒͷΩϟϥΫλʔΛ࡞੒͢Δը໘͕͋ΔήʔϜͰ͸ɺͲͷΑ͏ʹΧελϚΠζͤ͞Δ
    ͔͕ɺΞΠσϯςΟςΟΛೝΊΔେ͖ͳํ๏ͱͳΔ
    

    View Slide

35. mixi, Inc.
    

    View Slide

36. mixi, Inc.
    Inclusive Design on Family Album
    • ྫ͑͹ɺΈͯͶͷՈ଒ট଴ը໘Ͱ͸ΧελϜʹϝϯ
    όʔͷ໾ׂΛೖྗͰ͖Δ߲໨Λ༻ҙ͍ͯ͠Δ
    • ଞʹ΋InclusiveͳσβΠϯʹ͢΂͖Օॴ͸छʑ͋Γɺ
    ӶҙରԠத
    

    View Slide

37. mixi, Inc.
    Inclusive Codebase
    • Inclusive͸σβΠϯ͚ͩʹద༻͞ΕΔߟ͑ํͰ͸ͳ͍
    • ΤϯδχΞ΋ɺίʔυΛॻ্͘Ͱ࢖༻͢Δม਺΍ϝιουͷ໋໊ʹ͸஫ҙΛ෷͏ඞཁ͕͋Δ
    • AirbnbͰ͸ʮwhitelistʯ΍ʮdummyʯͷΑ͏ͳࠩผతදݱʹͳΓ͏Δࠩ෼ΛlinterͰܯࠂ͢Δ࢓૊
    ΈΛಋೖ͍ͯ͠Δ
    https://medium.com/airbnb-engineering/building-an-inclusive-codebase-bbaa2315e5b8
    

    View Slide

38. mixi, Inc.
    Human Interface Guidelines
    https://developer.apple.com/design/human-interface-guidelines/inclusion/overview/
    

    View Slide

39. mixi, Inc.
    Apple Style Guide
    https://help.apple.com/applestyleguide/#/apdcb2a65d68
    

    View Slide

40. Thank you!!!
    

    View Slide