The practice of inclusive design -WWDC21-

by rockname

Slide 1

Slide 1 text

ʰThe practice of inclusive designʱ  -WWDC21- גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ϩΫωϜ @_rockname

Slide 2

Slide 2 text

mixi, Inc. ࣗݾ঺հ ϩΫωϜ / rockname • ϛΫγΟͰʮՈ଒ΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ  ։ൃͯ͠Δ • iOSϝΠϯɺAndroid, RailsͳͲ΋ॻ͍ͯΔ • εϚϒϥ͕޷͖

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

mixi, Inc.

Slide 5

Slide 5 text

1. Tell diverse stories

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

2. Avoid stereotypes

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

3. Adopt accessibility

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

4. Localize for culture

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

5. Use color mindfully

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

6. Encourage self-expression

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

mixi, Inc.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Thank you!!!