ウェブ制作に活かすユニバーサルデザインの視点 / Universal design for web design

73239a63bba7e11d6f2621caceef76d1?s=47 majimasachi
December 07, 2019

ウェブ制作に活かすユニバーサルデザインの視点 / Universal design for web design

2019年12月7日に名古屋で開催された WCAN 2019 winter での登壇資料です。
発表内容のテキスト版はこちら:https://press.mjmj.co/2019/12/universal-design-for-web-design/

73239a63bba7e11d6f2621caceef76d1?s=128

majimasachi

December 07, 2019
Tweet

Transcript

  1. 10.
  2. 11.
  3. 18.
  4. 24.

    ݪଇ ୭΋͕ެฏʹར༻Ͱ͖Δ 1. Ϣχόʔαϧ σβΠϯͷ 7 ॊೈͳ࢖͍ํ͕Ͱ͖Δ 2. ࢖͍ํ͕؆୯Ͱ௚ײతͰ͋Δ 3.

    4.ඞཁͳ৘ใ͕஌֮Ͱ͖Δ 5. ةݥΛ๷ࢭ͠ɺ ϛεʹ׮༰Ͱ͋Δ 6. ਎ମతͳෛ୲͕গͳ͍ ࢖͍΍͍͢େ͖͞΍εϖʔε͕͋Δ 7.
  5. 25.
  6. 40.

    ؟ͷߏ଄ͱࢹࡉ๔ ޫ ໢ບ ᑈମ ᑈମ ੺ ྘ ੨ ਲ਼ମ ਲ਼ମ

    ਲ਼ମ छྨͷਲ਼ମͷ൓ԠͷόϥϯεͰ৭Λೝࣝ ࢹ ࡉ ๔
  7. 41.

    ܕ C ܕ P ܕ D ܕ T ܕ৭֮ ܕ৭֮

    ܕ৭֮ ऑ౓ ʢܕ৭֮ʣ ڧ౓ ʢܕ৭֮ʣ ऑ౓ ʢܕ৭֮ʣ ڧ౓ ʢܕ৭֮ʣ ऑ౓ ʢܕ৭֮ʣ ڧ౓ ʢܕ৭֮ʣ ੺ ྘ ੨ Ұൠ৭֮ 95% 1.5% 3.5% ೔ຊਓஉੑͷ 0.001% ೔ຊਓஉੑͷ ໿ 20 1 ਓʹ ਓ ঁੑͷ໿ਓʹਓ͕৭ऑऀ
  8. 43.

    Ұൠ৭֮ ܕ৭֮ ܕ৭֮ ݟ෼͚ʹ͍͘৭ͷ૊Έ߹Θͤྫ ੺ ΦϨϯδ ੺ ஡ άϨʔ ϐϯΫ

    ࢵ ࠇ ໌Δ͍྘ ྘ ਂ྘ ੨྘ ਫ৭ ੨ ੺ ࠇ ੺ ྘ ܕ C ܕ P ܕ D
  9. 47.
  10. 61.

    ίϯτϥετͷ֬อ 1.0 : 1 #FFF 21.00 : 1 ίϯτϥετͷ֬อ #000

    12.63 : 1 ίϯτϥετͷ֬อ #333 5.74 : 1 ίϯτϥετͷ֬อ #666 1.61 : 1 ίϯτϥετͷ֬อ #CCC 2.85 : 1 ίϯτϥετͷ֬อ #999
  11. 70.

    ίϯτϥετΛ֬อͨ͠ΧϥʔύϨοτ Brand Color ϝΠϯΧϥʔͷίϯτϥετ֬อ 1. 4.7 : 1 Light ࠇࣈ

    ʢനࣈʣ Ͱίϯτϥετ֬อ 2. 6.8 : 1 Dark Darker Lighter ҉͍όϦΤʔγϣϯΛ࡞Δ 3. 6.9 : 1 10.0 : 1 ໌Δ͍όϦΤʔγϣϯΛ࡞Δ 3. 8.5 : 1
  12. 74.
  13. 75.
  14. 76.
  15. 77.
  16. 78.

    ৭͚ͩʹґଘ͠ͳ͍৘ใ఻ୡ 25 50 75 100 2012 2013 2014 2015 2016

    ϞόΠϧ 1$ λϒϨοτ % Before % ܕ D ܕ৭֮
  17. 79.

    25 50 75 100 2012 2013 2014 2015 2016 PC

    ϞόΠϧ λϒϨοτ After 25 50 75 100 2012 2013 2014 2015 2016 ϞόΠϧ 1$ λϒϨοτ Before ϥϕϧ ϚʔΧʔ ઢΛଠ͘ % % ৭͚ͩʹґଘ͠ͳ͍৘ใ఻ୡ ઢͷछྨ
  18. 89.
  19. 90.
  20. 103.
  21. 107.

    ͦͯ͠δϣόϯχ ͸͙͢͏͠Ζͷఱ ؾྠͷப͕͍͔ͭ ΅Μ΍Γͨ͠ࡾ֯ ඪͷܗʹͳͬͯɺ ͠͹Β͘ܬͷΑ͏ ʹɺ΃͔΃͔ফ͑ ͨΓͱ΋ͬͨΓ͠ ͍ͯΔͷΛݟ·͠ ͨɻͦΕ͸ೱ͍߯

    ੨ͷͦΒͷ໺ݪʹ ͨͪ·ͨ͠ɻ ͦΕ͸ͩΜͩΜ ͸͖ͬΓͯ͠ɺͱ ͏ͱ͏ΓΜͱ͏͝ ͔ͳ͍Α͏ʹͳ Γɺೱ͍߯੨ͷͦ Βͷ໺ݪʹͨͪ· ͨ͠ɻ͍·৽Β͠ ͘Ḑ͍ͨ͹͔Γͷ ੨͍߯ͷ൘ͷΑ͏ ͳɺͦΒͷ໺ݪ ʹɺ·͙ͬ͢ʹ͢ ͖ͬͱཱͬͨͷͰ ͢ɻ ͢ΔͱͲ͔͜Ͱ; ͗͠ͳ੠͕ɺۜՏ εςʔγϣϯɺۜ Տεςʔγϣϯͱ Ӡ͏੠͕ͨ͠ͱࢥ ͏ͱ͍͖ͳΓ؟ͷ લ͕ɺͺͬͱ໌Δ ͘ͳͬͯɺ·ΔͰ ԯສͷܬӊ଑ͷՐ ΛҰ΃ΜʹԽੴ͞ ͤͯɺͦΒதʹ௜ Ίͨͱ͍͏޻߹ ߦ͋ͨΓͷจࣈ਺
  22. 108.

    ௕͗ͯ͢΋୹͗ͯ͢΋ ಡΈͮΒ͍ ࣈҎ্ ʙࣈ͘Β͍ ˞೔ຊޠຊจͷ৔߹ ͦͯ͠δϣόϯχ ͸͙͢͏͠Ζͷఱ ؾྠͷப͕͍͔ͭ ΅Μ΍Γͨ͠ࡾ֯ ඪͷܗʹͳͬͯɺ

    ͠͹Β͘ܬͷΑ͏ ʹɺ΃͔΃͔ফ͑ ͨΓͱ΋ͬͨΓ͠ ͍ͯΔͷΛݟ·͠ ͨɻͦΕ͸ೱ͍߯ ੨ͷͦΒͷ໺ݪʹ ͨͪ·ͨ͠ɻ ͦΕ͸ͩΜͩΜ ͸͖ͬΓͯ͠ɺͱ ͏ͱ͏ΓΜͱ͏͝ ͔ͳ͍Α͏ʹͳ Γɺೱ͍߯੨ͷͦ Βͷ໺ݪʹͨͪ· ͨ͠ɻ͍·৽Β͠ ͘Ḑ͍ͨ͹͔Γͷ ੨͍߯ͷ൘ͷΑ͏ ͳɺͦΒͷ໺ݪ ʹɺ·͙ͬ͢ʹ͢ ͖ͬͱཱͬͨͷͰ ͢ɻ ͢ΔͱͲ͔͜Ͱ; ͗͠ͳ੠͕ɺۜՏ εςʔγϣϯɺۜ Տεςʔγϣϯͱ Ӡ͏੠͕ͨ͠ͱࢥ ͏ͱ͍͖ͳΓ؟ͷ લ͕ɺͺͬͱ໌Δ ͘ͳͬͯɺ·ΔͰ ԯສͷܬӊ଑ͷՐ ΛҰ΃ΜʹԽੴ͞ ͤͯɺͦΒதʹ௜ Ίͨͱ͍͏޻߹ ߦ͋ͨΓͷจࣈ਺
  23. 110.

    ద੾ͳߦؒ ͠͹Β͘ܬͷΑ͏ʹɺ΃͔΃͔ফ͑ͨΓͱ΋ͬͨΓ͍ͯ͠ΔͷΛݟ·ͨ͠ɻͦΕ͸ͩΜͩ Μ͸͖ͬΓͯ͠ɺͱ͏ͱ͏ΓΜͱ͏͔͝ͳ͍Α͏ʹͳΓɺೱ͍߯੨ͷͦΒͷ໺ݪʹͨͪ· ͨ͠ɻ͍·৽Β͘͠Ḑ͍ͨ͹͔Γͷ੨͍߯ͷ൘ͷΑ͏ͳɺͦΒͷ໺ݪʹɺ·͙ͬ͢ʹ͖͢ ͬͱཱͬͨͷͰ͢ɻ͢ΔͱͲ͔͜Ͱɺ;͗͠ͳ੠͕ɺۜՏεςʔγϣϯɺۜՏεςʔγϣ ϯͱӠ͏੠͕ͨ͠ͱࢥ͏ͱ͍͖ͳΓ؟ͷલ͕ɺͺͬͱ໌Δ͘ͳͬͯɺ·ΔͰԯສͷܬӊ଑ ͦͯ͠δϣόϯχ͸͙͢͏͠Ζͷఱؾྠͷப͕͍͔ͭ΅Μ΍Γͨ͠ࡾ֯ඪͷܗʹͳͬͯɺ ͠͹Β͘ܬͷΑ͏ʹɺ΃͔΃͔ফ͑ͨΓͱ΋ͬͨΓ͍ͯ͠ΔͷΛݟ·ͨ͠ɻͦΕ͸ͩΜͩ Μ͸͖ͬΓͯ͠ɺͱ͏ͱ͏ΓΜͱ͏͔͝ͳ͍Α͏ʹͳΓɺೱ͍߯੨ͷͦΒͷ໺ݪʹͨͪ· ͨ͠ɻ͍·৽Β͘͠Ḑ͍ͨ͹͔Γͷ੨͍߯ͷ൘ͷΑ͏ͳɺͦΒͷ໺ݪʹɺ·͙ͬ͢ʹ͖͢

    ͬͱཱͬͨͷͰ͢ɻ͢ΔͱͲ͔͜Ͱɺ;͗͠ͳ੠͕ɺۜՏεςʔγϣϯɺۜՏεςʔγϣ ϯͱӠ͏੠͕ͨ͠ͱࢥ͏ͱ͍͖ͳΓ؟ͷલ͕ɺͺͬͱ໌Δ͘ͳͬͯɺ·ΔͰԯສͷܬӊ଑ ͦͯ͠δϣόϯχ͸͙͢͏͠Ζͷఱؾྠͷப͕͍͔ͭ΅Μ΍Γͨ͠ࡾ֯ඪͷܗʹͳͬͯɺ ͠͹Β͘ܬͷΑ͏ʹɺ΃͔΃͔ফ͑ͨΓͱ΋ͬͨΓ͍ͯ͠ΔͷΛݟ·ͨ͠ɻͦΕ͸ͩΜͩ Μ͸͖ͬΓͯ͠ɺͱ͏ͱ͏ΓΜͱ͏͔͝ͳ͍Α͏ʹͳΓɺೱ͍߯੨ͷͦΒͷ໺ݪʹͨͪ· ͨ͠ɻ͍·৽Β͘͠Ḑ͍ͨ͹͔Γͷ੨͍߯ͷ൘ͷΑ͏ͳɺͦΒͷ໺ݪʹɺ·͙ͬ͢ʹ͖͢ ͬͱཱͬͨͷͰ͢ɻ͢ΔͱͲ͔͜Ͱɺ;͗͠ͳ੠͕ɺۜՏεςʔγϣϯɺۜՏεςʔγϣ ϯͱӠ͏੠͕ͨ͠ͱࢥ͏ͱ͍͖ͳΓ؟ͷલ͕ɺͺͬͱ໌Δ͘ͳͬͯɺ·ΔͰԯສͷܬӊ଑ ͕͍͔ͭ΅Μ΍Γͨ͠ࡾ֯ඪͷܗʹͳͬͯɺ ͠͹Β͘ܬͷΑ͏ʹɺ΃͔΃͔ফ͑ͨΓͱ΋ ͬͨΓ͍ͯ͠ΔͷΛݟ·ͨ͠ɻͦΕ͸ͩΜͩ Μ͸͖ͬΓͯ͠ɺͱ͏ͱ͏ΓΜͱ͏͔͝ͳ͍ Α͏ʹͳΓɺೱ͍߯੨ͷͦΒͷ໺ݪʹͨͪ· ͦͯ͠δϣόϯχ͸͙͢͏͠Ζͷఱؾྠͷப ͕͍͔ͭ΅Μ΍Γͨ͠ࡾ֯ඪͷܗʹͳͬͯɺ ͠͹Β͘ܬͷΑ͏ʹɺ΃͔΃͔ফ͑ͨΓͱ΋ ͬͨΓ͍ͯ͠ΔͷΛݟ·ͨ͠ɻͦΕ͸ͩΜͩ Μ͸͖ͬΓͯ͠ɺͱ͏ͱ͏ΓΜͱ͏͔͝ͳ͍ Α͏ʹͳΓɺೱ͍߯੨ͷͦΒͷ໺ݪʹͨͪ· ͦͯ͠δϣόϯχ͸͙͢͏͠Ζͷఱؾྠͷப ͕͍͔ͭ΅Μ΍Γͨ͠ࡾ֯ඪͷܗʹͳͬͯɺ ͠͹Β͘ܬͷΑ͏ʹɺ΃͔΃͔ফ͑ͨΓͱ΋ ͬͨΓ͍ͯ͠ΔͷΛݟ·ͨ͠ɻͦΕ͸ͩΜͩ Μ͸͖ͬΓͯ͠ɺͱ͏ͱ͏ΓΜͱ͏͔͝ͳ͍ Α͏ʹͳΓɺೱ͍߯੨ͷͦΒͷ໺ݪʹͨͪ· ద੾ͳߦؒ͸ߦ௕ʹൺྫ͢Δ