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

The practice of inclusive design -WWDC21-

070d33664df274636dad3da21c9b21fc?s=47 rockname
June 25, 2021

The practice of inclusive design -WWDC21-

070d33664df274636dad3da21c9b21fc?s=128

rockname

June 25, 2021
Tweet

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!!!