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

「すべて」の人にWebコンテンツの価値を届ける品質 / readable_na_cybozu_191102

「すべて」の人にWebコンテンツの価値を届ける品質 / readable_na_cybozu_191102

2019年11月2日「リーダブルな昼下がり」で発表したスライドです:
https://readable-na.connpass.com/event/145881/

Daisuke Kobayashi

November 02, 2019
Tweet

More Decks by Daisuke Kobayashi

Other Decks in Technology

Transcript

  1. ʮ͢΂ͯʯͷਓʹ
    8FCίϯςϯπͷՁ஋Λಧ͚Δ඼࣭
    খྛେี
    αΠϘ΢ζגࣜձࣾ
    ΞΫηγϏϦςΟΤΩεύʔτ

    View full-size slide

  2. ೥ αΠϘ΢ζגࣜձࣾ ৽ଔೖࣾˠϓϩάϥϚʔ
    ೥ ΞΫηγϏϦςΟΤΩεύʔτ݉೚
    ೥ ΞΫηγϏϦςΟΤΩεύʔτઐ೚
    ΢ΣϒΞΫηγϏϦςΟج൫ҕһձ 8(ҕһ
    झຯɿଠޑͷୡਓɺΧϑΣɺϥʔϝϯɺόΠΫ
    খྛେีʢ!TVLPZBLBSJ[VNVʣ

    View full-size slide

  3. αΠϘ΢ζάϧʔϓ΢ΣΞͷ։ൃ
    ϝοηʔδ ϑΝΠϧ؅ཧ εέδϡʔϧ ϫʔΫϑϩʔ ձٞࣨ༧໿

    View full-size slide

  4. αΠϘ΢ζͷཧ૝
    νʔϜϫʔΫ͋;ΕΔࣾձΛ૑Δ

    View full-size slide

  5. ΞΫηγϏϦςΟͱ͸ͳΜͩΖ͏ʁ

    View full-size slide

  6. ΞΫηγϏϦςΟ
    ো֐ऀͷͨΊͷಛผରԠʁ

    View full-size slide

  7. ো֐ %JTBCJMJUZ
    ͱ͸ͳʹ͔ʁ

    View full-size slide

  8. ंҜࢠϢʔβ͕ҿ৯ళʹೖΔͱ͖

    View full-size slide

  9. ໨͕ݟ͑ͳ͍ਓ͕௨ۈ͢Δͱ͖

    View full-size slide

  10. • ࣗ෼ࣗ਎͕౒ྗͯ͠ղܾ͢Δ
    • पΓͷ؀ڥΛվળͨ͠ΓɺपΓͷਓͷৼΔ෣͍Ͱղܾ͢Δ
    ໰୊ͷղܾํ๏ͱো֐ %JTBCJMJUZ

    View full-size slide

  11. %JTBCJMJUZͱ͸ɺਓؒʹͱͬͯ௨ৗͷൣғ಺Ͱߦಈ͢ΔͨΊͷ
    ೳྗ͕ɺ৺਎ͷܽଛͷ݁Ռͱͯ͠ɺ੍ݶɾෆ଍͍ͯ͠Δ͜ͱ
    8)0ͷ %JTBCJMJUZͷఆٛ

    %JTBCJMJUZJTBOZSFTUSJDUJPOPSMBDLPGBCJMJUZ SFTVMUJOHGSPNBO
    JNQBJSNFOU
    UPQFSGPSNBOBDUJWJUZJOUIFNBOOFSPSXJUIJOUIFSBOHF
    DPOTJEFSFEOPSNBMGPSBIVNBOCFJOH
    ʢখྛ༁ʣ

    View full-size slide

  12. %JTBCJMJUZͱ͸݈߁໰୊͚ͩͰ͸ͳ͍ɻ͜Ε͸ෳࡶͳݱ৅Ͱ͋Γ
    ਓؒͷ਎ମͷಛ௃ͱࣾձͱͷ૬ޓ࡞༻Λ൓өͨ͠΋ͷͰ͋Δ
    8)0ͷ %JTBCJMJUZͷఆٛ ݱࡏ

    %JTBCJMJUZJTOPUKVTUBIFBMUIQSPCMFN*UJTBDPNQMFYQIFOPNFOPO
    SFGMFDUJOHUIFJOUFSBDUJPOCFUXFFOGFBUVSFTPGBQFSTPO`TCPEZBOE
    GFBUVSFTPGUIFTPDJFUZJOXIJDIIFPSTIFMJWFT
    ʢখྛ༁ʣ

    View full-size slide

  13. https://www.microsoft.com/design/inclusive/

    View full-size slide

  14. %JTBCJMJUZ͸ࣗ෼ʹؔ܎ͳ͍ͷ͔ʁ
    ো֐ऀ
    ࣗ෼

    View full-size slide

  15. ʮಇ͖ํͷଟ༷Խʯͷઌʹى͍ͬͯ͜Δ͜ͱ
    ਓ௨Γͷಇ͖ํ

    View full-size slide

  16. • ࡏ୐ۈ຿0,
    • ࣌ࠩग़ۈ0,
    • ࣌୹ۈ຿0,ʢҭࣇɾհޢͳͲʣ
    • ෭ۀɾෳۀ0,
    ಇ࣌ؒ͘ͱ৔ॴΛࣗ༝ʹ

    View full-size slide

  17. • ͨ͘͞Μͷࠃ಺ڌ఺ւ֎ڌ఺
    • ίϫʔΩϯάεϖʔε
    • ςϨϏձٞΛ࢖ͬͯෳ਺ਓͰσβΠϯɾϓϩάϥϛϯά
    ଟڌ఺ԽɾάϩʔόϧԽ

    View full-size slide

  18. • ίϛϡχέʔγϣϯΛଅ͢นͷͳ͍ΦϑΟε
    • ެ໌ਖ਼େͳٞ࿦Λଅ͢֎͔Βݟ͑Δձٞࣨ
    • ϗϫΠτϘʔυʹΑΔίϛϡχέʔγϣϯ
    ΦʔϓϯΦϑΟε

    View full-size slide

  19. ʮଟ༷ͳಇ͖ํʯ͕΋ͨΒ͢%JTBCJMJUZ

    View full-size slide

  20. ςϨϏձٞʹΑΔ%JTBCJMJUZ
    • ૬खͷԻ੠͕ฉ͑͜ͳ͍ɾԻ੠͕഑৴Ͱ͖ͳ͍
    • ૬खͷө૾͕ݟ͑ͳ͍ɾө૾͕഑৴Ͱ͖ͳ͍
    • ෺ཧతͳܝࣔ෺͕֬ೝͰ͖ͳ͍
    • ͪΐͬͱͨ͠࿩୊Ͱ࿩͔͚ͮ͠Β͍
    • ෳ਺ਓͰࡶஊͰ͖ͳ͍

    View full-size slide

  21. ΦʔϓϯΦϑΟεʹΑΔ%JTBCJMJUZ
    • ۀ຿தͷձ࿩΍ి࿩ͷԻ੠ʹूத͕๦͛ΒΕΔ
    • ࢹքʹਓ͕ೖͬͯؾ͕ࢄΔ
    • ϗϫΠτϘʔυ͕अຐͰҠಈͮ͠Β͍

    View full-size slide

  22. ҭࣇɾհޢʹΑΔ%JTBCJMJUZ
    • อҭԂ͔Βͷి࿩Ͱ࡞ۀ͕தஅ͞ΕΔ
    • ѱఱީͷ೔ͷࢠڙͷؼΓ͕৺഑
    • ୹࣌ؒͰࡉ੾Εʹ͔͠࡞ۀͰ͖ͳ͍
    • ਭ຾ෆ଍΍ർ࿑Ͱ࡞ۀʹूதͰ͖ͳ͍

    View full-size slide

  23. άϩʔόϧԽʹΑΔ%JTBCJMJUZ
    • ͕࣌ࠩ͋ΓϦΞϧλΠϜʹ΍ΓͱΓͰ͖ͳ͍
    • ձٞͰൃݴͰ͖ͳ͍
    • ϓϨθϯͷ಺༰͕ཧղͰ͖ͳ͍
    • पғͷਓ͕স͍ͬͯΔδϣʔΫ͕ཧղͰ͖ͳ͍
    • จষΛಡΉͷʹ͕͔͔࣌ؒΔ

    View full-size slide

  24. ಈ͘
    ࿩͢
    ฉ͘ ूத͢Δ
    ಡΉ
    ݟΔ
    ϩʔϏδϣϯ
    ೉ௌ
    ݴޠো֐ ࢶମෆࣗ༝
    શ໡
    Ζ͏
    "%)%
    ࠎંɾոզ
    ͏ͭ
    σΟεϨΫγΞ

    View full-size slide

  25. ಈ͘
    ࿩͢
    ฉ͘ ूத͢Δ
    ಡΉ
    ݟΔ
    ϩʔϏδϣϯ
    ೉ௌ
    ݴޠো֐ ࢶମෆࣗ༝
    શ໡
    Ζ͏
    "%)%
    ന಺ো
    ࿝Խ ࠎંɾոզ
    ࡶԻ
    ෩अ
    ւ֎ग़ு
    ࡏ୐ϫʔΫ
    ͏ͭ
    ೔ޫԼ
    σΟεϨΫγΞ
    ٸͳ༧ఆ
    ҭࣇத
    ຬһిं
    ӡసத
    ӳจ ૽Ի
    ੩Ի؀ڥ

    View full-size slide

  26. https://www.amazon.co.jp/dp/B07PFNRPQF/

    View full-size slide

  27. ඪ४తͳϢʔβʔͳͲ͍ͳ͍ͳΒɺۃ୺ͳϢʔβʔ΋͍ͳ͍ɻ
    ۂઢͷ୺ʹҐஔ͢ΔਓؒͳͲ͍ͳ͍ɻඇඪ४తͳγφϦΦ΋ͳ͍ɻ
    Τοδέʔε΋ͳ͍ɻ
    ͦΕΑΓ΋ɺਓؒͷଟ༷ੑΛද͠ɺฏۉਓͷͨΊʹσβΠϯ͢Δ
    ڽΓݻ·ͬͨश׳ʹҟΛএ͑Δ৽͍͠πʔϧ͕ඞཁͳͷͩɻ

    View full-size slide

  28. ϖϧιφɾεϖΫτϥϜ
    ݟΔ
    ߃ৗత
    ന಺ো
    ௿଎ճઢ
    ࡏ୐ϫʔΫ
    ฉ͘ ೉ௌ
    தࣖԌ
    ෩अ
    ւ֎ग़ு
    ిंͰҠಈத
    શ໡
    Ұ࣌త ঢ়گత

    View full-size slide

  29. 4PMWFGPSPOF FYUFOEUPNBOZ

    View full-size slide

  30. ܦݧͨ͠%JTBCJMJUZͷେ͖͞ɾਂࠁ͕ͦ͜͞ʮͷΓ͠Ζʯ

    View full-size slide

  31. • ΦϑΟεσβΠϯͷଟ༷Խ
    • 73"3ٕज़ͷൃల
    • ෳۀͷҰൠԽ
    • ϫʔΫγΣΞϦϯά
    • ௒ߴྸԽࣾձ
    • μΠόʔγςΟܦӦ
    • ϩϘοτɾ"*ɾࣗಈӡస
    • ςΟʔϧ૊৫ɾϗϥΫϥγʔ
    কདྷɺࢲͨͪ͸ͲͷΑ͏ʹಇ͍͍ͯΔͷͩΖ͏ʁ

    View full-size slide

  32. Θͨͨͪ͠ͷະདྷͷ՝୊͸
    ࠷΋େ͖ͳϛεϚονΛܦݧ͍ͯ͠Δਓ͕஌͍ͬͯΔ

    View full-size slide

  33. *5ͷ
    ଟ༷ੑ
    ਎ମతͳ
    ଟ༷ੑ
    ಇ͖ํͷ
    ଟ༷ੑ
    ͢΂ͯͷଟ༷ੑ͸ͭͳ͕͍ͬͯΔ

    View full-size slide

  34. "DDFTTJCJMJUZ"DDFTT"CJMJUZ

    View full-size slide

  35. Ϣʔβ͸ɺΘͨͨͪ͠ͷ੡඼ʹΞΫηε͢Δ͜ͱͰ
    ԿʹΞΫηε͠Α͏ͱ͍ͯ͠Δͷ͔ʁ

    View full-size slide

  36. ユーザ サイボウズ製品 チーム

    View full-size slide

  37. αΠϘ΢ζʹͱͬͯɺΞΫηγϏϦςΟͱ͸
    ʮϢʔβ͕νʔϜʹΞΫηεͰ͖Δೳྗʯ

    View full-size slide

  38. ΞΫηγϏϦςΟΛ֬อ͢Δ͜ͱ͸
    ʮνʔϜʹࢀՃ͍ͨ͠ʯͱ͍͏
    ϢʔβͷͶ͕͍Λଚॏ͢Δ͜ͱ

    View full-size slide

  39. ʮνʔϜʹࢀՃ͍ͨ͠ʯͱ͍͏Ͷ͕͍͚͕ͩ
    ࢲͨͪͷϢʔβ͔Ͳ͏͔ͷ൑அج४

    View full-size slide

  40. Ͳ͏͢Ε͹%JTBCJMJUZ͔Βղ์Ͱ͖Δʁ

    View full-size slide

  41. • ๏཯ɾ੍౓ͷน
    • ෩౔ɾจԽͷน
    • ෺ཧత؀ڥͷน
    • *$5ɾ8FCͷน
    ࢲཱ͕ͨͪͪ޲͔Θͳ͚Ε͹ͳΒͳ͍͜ͱ

    View full-size slide

  42. ΞΫηγϏϦςΟ
    ো֐ऀͷͨΊͷಛผରԠʁ

    View full-size slide

  43. 8FC͸ͲΜͳʮ͔ͨͪʯʁ

    View full-size slide

  44. • ϏδϡΞϧϒϥ΢β
    • εϚʔτϑΥϯ
    • ݕࡧΤϯδϯͷݕࡧ݁Ռ
    • εΫϨΠϐϯάαʔϏε
    • ςΩετϒϥ΢β
    • ఺ࣈσΟεϓϨΠ
    • εΫϦʔϯϦʔμʔ
    • 7PJDF6*
    • εϚʔτ΢Υον
    • ະདྷͷσόΠε
    8FCίϯςϯπͷʮ͔ͨͪʯ͸͞·͟·

    View full-size slide

  45. 8FCίϯςϯπ͕ϢʔβʹʮΞΫηεʯ͞ΕΔ·Ͱ
    ੍࡞ऀ Ϣʔβ
    ϋʔυ΢ΣΞ
    ʢ1$ɾεϚϗʜ

    ιϑτ΢ΣΞ
    ϒϥ΢βʜʣ
    ೖग़ྗ
    ػث

    View full-size slide

  46. 8FCίϯςϯπ͕ϢʔβʹʮΞΫηεʯ͞ΕΔ·Ͱ
    ੍࡞ऀ Ϣʔβ
    ϋʔυ΢ΣΞ
    ʢ1$ɾεϚϗʜ

    ιϑτ΢ΣΞ
    ϒϥ΢βʜʣ
    ೖग़ྗ
    ػث
    ײ֮৘ใ
    ʢࢹ֮ɾௌ֮ɾ৮֮ʜʣ
    8FCٕज़
    )5.-ɾ$44ɾ+4ʜ

    View full-size slide

  47. ΞΫηγϏϦςΟͷ̎ͭͷཁૉ
    Ϛγϯ
    ϦʔμϏϦςΟ
    ώϡʔϚϯ
    ϦʔμϏϦςΟ
    ੍࡞ऀ Ϣʔβ

    View full-size slide

  48. • ʮػցʯʹͱͬͯղऍ͠΍͍͔͢
    • ʮػցʯ͕ਖ਼͘͠ղऍ͢Ε͹ɺ෯޿͍දݱʹม׵Ͱ͖Δ
    ϚγϯϦʔμϏϦςΟ

    View full-size slide

  49. • ਖ਼֬ͳϖʔδλΠτϧΛॻ͘
    • ਖ਼֬ͳϦϯΫςΩετΛॻ͘
    • ը૾ʹ୅ସςΩετΛॻ͘
    ਖ਼֬ͳςΩετΛॻ͘

    View full-size slide

  50. • ϥϯυϚʔΫʹ͸IFBEFSGPPUFSNBJOʜ࢖͏
    • ݟग़͠ʹ͸IIʜΛ࢖͏
    • ϦϯΫʹ͸BΛ࢖͏
    • Ϙλϯʹ͸CVUUPOΛ࢖͏
    • Ϧετʹ͸VMPMMJʜΛ࢖͏
    ςΩετʹਖ਼͍͠ҙຯΛ༩͑Δ

    View full-size slide

  51. • ʮਓʯʹͱͬͯɺݟ΍͘͢ɾૢ࡞͠΍͘͢ɾΘ͔Γ΍͍͔͢
    ώϡʔϚϯϦʔμϏϦςΟ

    View full-size slide

  52. ը໘ͷେ͖͞΍޲͖ʹΑΒͣɺΘ͔Γ΍͘͢දࣔ͢Δ

    View full-size slide

  53. ֦େॖখͯ͠΋Θ͔Γ΍͘͢දࣔ͢Δ

    View full-size slide

  54. ৭͚ͩʹཔΒͣදݱ͢Δ

    View full-size slide


  55. " " " " " " " " " "
    ͸͖ͬΓ͖ͬ͘Γͨ͠৭Λ࢖͏

    View full-size slide

  56. ೖྗ͢΂͖಺༰΍ΤϥʔΛΘ͔Γ΍͘͢͢Δ
    TVLPZBLBSJ[VNʜ
    ϝʔϧΞυϨε
    ********
    ύεϫʔυ
    TVLPZBLBSJ[VNV!HNBJMDPN
    ϝʔϧΞυϨε
    ********
    ύεϫʔυ
    Τϥʔ
    ύεϫʔυ͸จࣈҎ্Ͱ͢
    ඞਢ

    View full-size slide

  57. • ը໘ͷେ͖͞΍޲͖ʹΑΒͣɺΘ͔Γ΍͘͢දࣔ͢Δ
    • ֦େॖখͯ͠΋ɺΘ͔Γ΍͘͢දࣔ͢Δ
    • ৭͚ͩʹཔΒͣදݱ͢Δ
    • ͸͖ͬΓ͖ͬ͘Γͱͨ͠৭Λ࢖͏
    • ೖྗ͢΂͖಺༰΍ΤϥʔΛΘ͔Γ΍͘͢͢Δ
    • ूதΛ๦͛ΔදݱΛճආͰ͖ΔΑ͏ʹ͢Δ
    ώϡʔϚϯϦʔμϏϦςΟͷ۩ମྫ

    View full-size slide

  58. ΞΫηγϏϦςΟ
    ো֐ऀͷͨΊͷಛผରԠʁ

    View full-size slide

  59. ΞΫηγϏϦςΟ
    8FCຊདྷͷྗΛ׆͔͖͠Δ͜ͱ

    View full-size slide

  60. 8FCͷྗ͸ͦͷීวੑʹ͋Δɻ
    %JTBCJMJUZʹ͔͔ΘΒͣɺ͢΂ͯͷਓ͕ΞΫηεͰ͖Δ͜ͱ͕
    8FCͷຊ࣭ͳͷͩɻ
    8FC૑ઃऀͷݴ༿
    5IFQPXFSPGUIF8FCJTJOJUTVOJWFSTBMJUZ"DDFTTCZFWFSZPOF
    SFHBSEMFTTPGEJTBCJMJUZJTBOFTTFOUJBMBTQFDU
    5JN#FSOFST-FF 8$%JSFDUPSBOEJOWFOUPSPGUIF8PSME8JEF8FC
    ʢখྛ༁ʣ

    View full-size slide

  61. • ো֐ʢ%JTBCJMJUZʣͱ͸ɺݸਓͱࣾձͷϛεϚονͷ͜ͱ
    • ղܾͷ伴͸ɺ࠷΋େ͖ͳϛεϚονΛܦݧͨ͠ਓ͕Ѳ͍ͬͯΔ
    • ΞΫηγϏϦςΟ͸ɺ8FCຊདྷͷྗΛ׆͔͖͠Δ͜ͱ
    ·ͱΊ

    View full-size slide