$30 off During Our Annual Pro Sale. View Details »

The practice of inclusive design -WWDC21-

rockname
June 25, 2021

The practice of inclusive design -WWDC21-

rockname

June 25, 2021
Tweet

More Decks by rockname

Other Decks in Design

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