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
2. mixi, Inc. ࣗݾ঺հ ϩΫωϜ / rockname • ϛΫγΟͰʮՈ଒ΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ
 ։ൃͯ͠Δ • iOSϝΠϯɺAndroid, RailsͳͲ΋ॻ͍ͯΔ • εϚϒϥ͕޷͖
3. mixi, Inc. Inclusive Designͱ͸ • ߴྸऀ΍ো͕͍ऀ, ֎ࠃਓͷΑ͏ͳ͞·͟·ͳਓʑΛσβΠϯϓϩηεͷ্ྲྀ͔Βר͖ࠐ ΜͰઃܭ͍ͯ͘͠σβΠϯख๏ͷ͜ͱ • WWDC21ͷηογϣϯ The practice of inclusive design Ͱ͸ɺInclusive DesignΛ࣮ફ͢ Δ্Ͱେ੾ͳ6ͭͷϙΠϯτʹ͍ͭͯ঺հ͞Εͨ
4. mixi, Inc.
5. 1. Tell diverse stories
6. mixi, Inc. 1. Tell diverse stories • ͞·͟·ͳഎܠΛ࣋ͭϢʔβʔΛ૝ఆͯ͠σβΠϯʹऔΓ૊·ͳ͚Ε͹ɺҙਤͤͣʹજࡏ తͳϢʔβʔʹରͯ͠ૄ֎ײΛ࣋ͨͤͯ͠·͏͔΋͠Εͳ͍
7. mixi, Inc. 1. Tell diverse stories • ྫ͑͹ɺ৯ࣄϝϞΞϓϦͷApp StoreʹฒͿεΫϦʔϯγϣοτͰ͸ɺࠨ͸ΞϝϦΧͷ৯จԽͷࣸਅͷΈΛ࠾ ༻͍ͯ͠Δ͕ɺӈͷΑ͏ʹଟ༷ͳ৯จԽͷࣸਅΛࡌͤͨํ͕ɺΑΓଟ͘ͷਓʑ΁Ξϓϩʔν͕Ͱ͖Δ
8. 2. Avoid stereotypes
9. mixi, Inc. 2. Avoid stereotypes • εςϨΦλΠϓͱ͸ɺଟ͘ͷਓʹਁಁ͍ͯ͠Δઌೖ؍ • ݸਓؒͷҧ͍Λݟམͱͨ͠Γɺਓʑͷߦಈʹ͍ͭͯؒҧͬͨߟ͑Λ޿ΊΔཁҼͱͳΔ • ྫ͑͹ɺݴ༿΍ϏδϡΞϧʹ͓͍ͯɺʮਓ͸உੑͱঁੑͷ2ͭͷੑʹ෼͚ΒΕΔʯͱ͍͏ εςϨΦλΠϓΛ࣋ͪ΍͍͢ • ͜ͷೋݩ࿦͸Ұ෦ͷݴޠ΍จԽʹਂ͘ਁಁͯ͠͠·͓ͬͯΓɺͦͷΑ͏ͳίϛϡχςΟʹ ଐ͍ͯ͠ΔͱɺͲͪΒʹ΋ଐ͞ͳ͍Կඦສਓ΋ͷਓʑΛ஌Βͣ஌Βͣͷ͏ͪʹૄ֎͢Δ͜ ͱʹͳΔ
10. mixi, Inc. 2. Avoid stereotypes • ྫ͑͹ɺ૬खͷੑผ͕Θ͔Βͳ͍৔߹ɺ"he "΍ "she "ͱ͍͏ೋ߲ରཱͷ୅໊ࢺΛ࢖͏ͷͰ͸ͳ͘ɺ"they "ͱ͍ ͏ੑผʹؔ܎ͷͳ͍୅໊ࢺʹஔ͖׵͑Δ͜ͱ͕Ͱ͖Δ
11. mixi, Inc. 2. Avoid stereotypes • ྫ͑͹ɺ"Hey, guys!"Ͱ͸ͳ͘"Hey, everyone!"ʹ͢Δ͜ͱͰɺࢹௌऀͷҰ෦Λݟམͱ͞ͳ͍Α͏ʹ͢Δ͜ͱ΋ Ͱ͖Δ
12. mixi, Inc. 2. Avoid stereotypes • ྫ͑͹ɺਓ͕୭Ͱ͋Δ͔ΛԾఆ͠ͳ͍ɺδΣϯμʔʹͱΒΘΕͳ͍ਓؒͷΞΠίϯΛ࢖༻͢Δ͜ ͱͰɺΞΠίϯʹδΣϯμʔʹؔ͢ΔϝοηʔδੑΛ࣋ͨͤͳ͍
13. mixi, Inc. 2. Avoid stereotypes • εςϨΦλΠϓʹΑͬͯΠϯλʔϑΣʔεͷػೳ੍͕ݶ͞ΕΔ͜ͱ΋޷·͘͠ͳ͍ • ྫ͑͹ɺ্ਤ͸Ո଒ͰಈըΛڞ༗͢ΔΞϓϦͷΞΧ΢ϯτొ࿥ը໘Ͱɺ͜Ε͸ɺՈ଒Λ෕ɺ฼ɺࢠڙͷ3ͭͷ໾ׂʹ෼ྨ͍ͯ͠Δ
14. mixi, Inc. 2. Avoid stereotypes • ͜ͷΞϓϦͷΠϯλʔϑΣʔε͸ɺย਌, ಉੑͷ਌, ଟੈ୅ੈଳ, ੒ਓͨ͠ࢠͲ΋, ๏ఆޙݟਓͳͲͷՈ଒ͷܗΛ ߟྀ͍ͯ͠ͳ͍
15. mixi, Inc. 2. Avoid stereotypes • վળͷͨΊʹ͸ɺՈ଒ͷ໾ׂ͕ܾ·͍ͬͯΔͱԾఆ͢ΔͷͰ͸ͳ͘ɺͦΕͧΕͷϓϩϑΟʔϧʹ "Family member "ͷΑ͏ͳதཱతͳϥϕϧΛ෇͚Δ • ·ͨɺՈ଒Λߏ੒͢Δਓ਺Λ૝ఆ͢ΔͷͰ͸ͳ͘ɺΞΧ΢ϯτΛઃఆͨ͠ਓ͚ͩͰελʔτ͠ɺඞཁͳਓ਺ΛՈ଒ʹ௥ՃͰ͖ΔΑ͏ʹ͢Δ
16. 3. Adopt accessibility
17. mixi, Inc. 3. Adopt accessibility • ΞΫηγϏϦςΟͱ͸ɺ਎ମͷঢ়ଶ΍ೳྗͷҧ͍ʹΑΒ༷ͣʑͳਓ͔Βಉ͡Α͏ʹιϑτ ΢ΣΞΛར༻Ͱ͖Δঢ়ଶ΍ͦͷ౓߹͍ͷ͜ͱ • ੈքʹ͸ɺ໨ͷෆࣗ༝ͳํ΍ऑࢹͷํɺࣖͷෆࣗ༝ͳํɺಈ͖ʹහײͳํɺ਎ମ΍ӡಈ ʹো͕͍ͷ͋ΔํͳͲɺ͞·͟·ͳܦݧ΍ೳྗΛ࣋ͭਓʑ͕͍ͯɺԿԯਓ΋ͷํ͕গͳ ͘ͱ΋1ͭͷΞΫηγϏϦςΟઃఆΛར༻͍ͯ͠Δ
18. mixi, Inc. 3. Adopt accessibility • ΞϓϦͷςΩετΛDynamic TypeʹରԠ͓͚ͯ͠͹ΞϓϦͷจࣈͷେ͖͞ΛϢʔβʔ͕ࣗ༝ ʹઃఆՄೳʹͳΔ
19. mixi, Inc. 3. Adopt accessibility • ΞϓϦͷίϯςΩετΛ൓өͨ͠ҙຯͷ͋ΔදݱΛVoiceOverʹಡΈ্͛ͤ͞ΔΑ͏ʹ͢Δ͜ ͱͰɺ໨ͷݟ͑ͳ͍ํ΍ऑࢹͷํʹͱͬͯඇৗʹ࢖͍΍͍͢΋ͷͱͳΔ
20. 4. Localize for culture
21. mixi, Inc. 4. Localize for culture • ΑΓଟ͘ͷਓʹָ͠ΜͰ΋Β͏ͨΊʹ͸ɺΞϓϦ΍ήʔϜΛ͞·͟·ͳݴޠʹ຋༁͢Δ͜ ͱ͕େ͖ͳεςοϓͱͳΔ • ຋༁ͱ͸ɺҟͳΔ୯ޠͷ௕͞΍จࣈମܥʹରԠͰ͖ΔΑ͏ʹɺΠϯλʔϑΣʔεΛ४උ͢ Δ͜ͱ • ϩʔΧϥΠζͱ͸ɺ୯ʹݴ༿΍਺ࣈΛ຋༁͢Δ͚ͩͰͳ͘ɺίϯςϯπΛҟจԽʹద߹ ͤ͞Δ͜ͱͰ΋͋Δ • ҟจԽͷਓʑʹ׻ܴ͞ΕΔͨΊʹ·ͣͰ͖Δ͜ͱͷͻͱͭ͸ɺಛఆͷਓʹ͔͠௨͡ͳ͍ දݱΛ࢖͍ͬͯͳ͍͔Ͳ͏͔Λ࠶֬ೝ͢Δ͜ͱ͕ॏཁ
22. mixi, Inc. 4. Localize for culture • ྫ͑͹ɺΞϓϦͷίϐʔʹ "Plan your vacation from A to Z. “ͷʮA to Zʯ͸ΞϧϑΝϕοτΛ༻͍Δݴޠಛ༗ͷจԽ • ൺᄻ΍ෳࡶͳ༻ޠΛආ͚ɺྫ͑͹ʮfrom beginning to endʯͷΑ͏ʹݴ͍׵͑Δͱྑ͍
23. mixi, Inc. 4. Localize for culture • ྫ͑͹ɺΞϝϦΧͰެ։ͨ͠ྉཧΞϓϦΛΠϯυͰ΋ެ։͢ΔͨΊʹ্ਤͷΑ͏ʹώϯσΟʔޠʹ຋༁ͨ͠ͱ͢Δ • ਓޱͷେ෦෼͕ϕδλϦΞϯͰ͋ΔΠϯυͷ৯จԽΛશ͘ߟྀͰ͖͍ͯͳ͍ͷͰɺ͜ͷ··ͩͱ੒ޭ͸೉͍ͩ͠Ζ͏
24. 5. Use color mindfully
25. mixi, Inc. 5. Use color mindfully • จԽʹΑͬͯͦͷ৭͕ਓؒʹ༩͑Δҹ৅͸มΘͬͯ͘Δ • ྫ͑͹ɺੈքͷଟ͘ͷ஍ҬͰ͸ɺ੺͸Ѫͱ੺͍όϥ΍ɺ͋Δ͍͸ةݥɺωΨςΟϒɺ๫ྗͳͲΛ࿈૝ͤ͞Δ
26. mixi, Inc. 5. Use color mindfully • ҰํͰɺΞδΞͷଟ͘ͷจԽͰ͸ɺ੺͸޾ӡɺ޾෱Λҙຯ͢Δ΋ͷͱͯ͠࢖ΘΕ͍ͯΔ
27. mixi, Inc. 5. Use color mindfully • ྫ͑͹ɺStocksΞϓϦ͸རӹΛ྘ɺଛࣦΛ੺Ͱදࣔ͢Δ͕ɺ஍ҬΛதࠃຊ౔ʹઃఆ͢Δͱɺརӹ͸੺Ͱදࣔ ͞ΕΔͷ͸ɺ͜ͷΑ͏ͳ࿈૝ʹΑΔ΋ͷ
28. mixi, Inc. 5. Use color mindfully • ྫ͑͹ɺʮະಡʯͱʮطಡʯΛࣔ͢2छྨͷυοτ͕͋Δͱ͢Δ • ৭ऑͷํ͸ɺ͜ͷ2छྨͷυοτΛ৭͚ͩͰ͸؆୯ʹ۠ผͰ͖ͳ͍͔΋͠Εͳ͍ɺ୅ΘΓʹυοτͷ1ͭΛΞΠίϯʹมߋ͢Δ͜ͱΛબ୒͢Δඞཁ͕͋Δ
29. mixi, Inc. 5. Use color mindfully • ྫ͑͹্ਤͷϘλϯ͸എܠ৭ͱจࣈ৭ͷίϯτϥετ͕WCAG 2.0ͷୡ੒ج४4.5ʹຬͨͳ͍͜ͱ͕Θ͔Δ • ௿͍ίϯτϥετൺͩͱࢹೝͮ͠Β͍ͱײ͡Δਓ͕ଟ͍ͨΊɺจࣈ৭ʹࠇΛ࢖ͬͯΈΔͱ4.5Λ௒͑ΔͨΊྑ͍ͩΖ͏
30. 6. Encourage self-expression
31. mixi, Inc. 6. Encourage self-expression • ΞϓϦ΍ήʔϜ͸ɺਓʑͷݸੑΛೝΊɺ׻ܴ͢Δ͜ͱ͕Ͱ͖Δ • ͦͷͨΊʹ͸ɺਓʑ͕ࣗ෼ࣗ਎Λಛఆ͢Δํ๏Λ੍ݶͨ͠Γɺڧ੍ͨ͠Γ͠ͳ͍͜ͱ͕ Ұ൪େ੾Ͱ͋Δ
32. mixi, Inc. 6. Encourage self-expression • ϑΝʔετωʔϜͱϥετωʔϜͷΑ͏ͳ֓೦͸ɺ஍ҬʹΑͬͯେ͖͘ҟͳΔ͜ͱΛೝࣝ͢΂͖ • ྫ͑͹ɺϥςϯΞϝϦΧग़਎ͳΒɺ྆਌͔ΒͦΕͧΕ2ͭͷϑΝϛϦʔωʔϜΛ΋Β͍ͬͯΔ͸ͣ
33. mixi, Inc. 6. Encourage self-expression • ԿͷͨΊʹ໊લΛ࢖͏ͷ͔ʹ΋ΑΔ͕ɺΑΓจԽతʹแׅతͳղܾࡦͱͯ͠ɺϑϧωʔϜΛೖྗ ͢ΔͨΊͷ୯ҰͷςΩετϑΟʔϧυΛఏڙ͢Δͷ͕ྑ͍
34. mixi, Inc. 6. Encourage self-expression • ྫ͑͹ɺਓؒͷΩϟϥΫλʔΛ࡞੒͢Δը໘͕͋ΔήʔϜͰ͸ɺͲͷΑ͏ʹΧελϚΠζͤ͞Δ ͔͕ɺΞΠσϯςΟςΟΛೝΊΔେ͖ͳํ๏ͱͳΔ
35. mixi, Inc.
36. mixi, Inc. Inclusive Design on Family Album • ྫ͑͹ɺΈͯͶͷՈ଒ট଴ը໘Ͱ͸ΧελϜʹϝϯ όʔͷ໾ׂΛೖྗͰ͖Δ߲໨Λ༻ҙ͍ͯ͠Δ • ଞʹ΋InclusiveͳσβΠϯʹ͢΂͖Օॴ͸छʑ͋Γɺ ӶҙରԠத
37. mixi, Inc. Inclusive Codebase • Inclusive͸σβΠϯ͚ͩʹద༻͞ΕΔߟ͑ํͰ͸ͳ͍ • ΤϯδχΞ΋ɺίʔυΛॻ্͘Ͱ࢖༻͢Δม਺΍ϝιουͷ໋໊ʹ͸஫ҙΛ෷͏ඞཁ͕͋Δ • AirbnbͰ͸ʮwhitelistʯ΍ʮdummyʯͷΑ͏ͳࠩผతදݱʹͳΓ͏Δࠩ෼ΛlinterͰܯࠂ͢Δ࢓૊ ΈΛಋೖ͍ͯ͠Δ https://medium.com/airbnb-engineering/building-an-inclusive-codebase-bbaa2315e5b8
38. mixi, Inc. Human Interface Guidelines https://developer.apple.com/design/human-interface-guidelines/inclusion/overview/
39. mixi, Inc. Apple Style Guide https://help.apple.com/applestyleguide/#/apdcb2a65d68
40. Thank you!!!