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

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

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/

majimasachi

December 07, 2019
Tweet

More Decks by majimasachi

Other Decks in Design

Transcript

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

    4.ඞཁͳ৘ใ͕஌֮Ͱ͖Δ 5. ةݥΛ๷ࢭ͠ɺ ϛεʹ׮༰Ͱ͋Δ 6. ਎ମతͳෛ୲͕গͳ͍ ࢖͍΍͍͢େ͖͞΍εϖʔε͕͋Δ 7.
  2. ؟ͷߏ଄ͱࢹࡉ๔ ޫ ໢ບ ᑈମ ᑈମ ੺ ྘ ੨ ਲ਼ମ ਲ਼ମ

    ਲ਼ମ छྨͷਲ਼ମͷ൓ԠͷόϥϯεͰ৭Λೝࣝ ࢹ ࡉ ๔
  3. ܕ C ܕ P ܕ D ܕ T ܕ৭֮ ܕ৭֮

    ܕ৭֮ ऑ౓ ʢܕ৭֮ʣ ڧ౓ ʢܕ৭֮ʣ ऑ౓ ʢܕ৭֮ʣ ڧ౓ ʢܕ৭֮ʣ ऑ౓ ʢܕ৭֮ʣ ڧ౓ ʢܕ৭֮ʣ ੺ ྘ ੨ Ұൠ৭֮ 95% 1.5% 3.5% ೔ຊਓஉੑͷ 0.001% ೔ຊਓஉੑͷ ໿ 20 1 ਓʹ ਓ ঁੑͷ໿ਓʹਓ͕৭ऑऀ
  4. Ұൠ৭֮ ܕ৭֮ ܕ৭֮ ݟ෼͚ʹ͍͘৭ͷ૊Έ߹Θͤྫ ੺ ΦϨϯδ ੺ ஡ άϨʔ ϐϯΫ

    ࢵ ࠇ ໌Δ͍྘ ྘ ਂ྘ ੨྘ ਫ৭ ੨ ੺ ࠇ ੺ ྘ ܕ C ܕ P ܕ D
  5. ίϯτϥετͷ֬อ 1.0 : 1 #FFF 21.00 : 1 ίϯτϥετͷ֬อ #000

    12.63 : 1 ίϯτϥετͷ֬อ #333 5.74 : 1 ίϯτϥετͷ֬อ #666 1.61 : 1 ίϯτϥετͷ֬อ #CCC 2.85 : 1 ίϯτϥετͷ֬อ #999
  6. ίϯτϥετΛ֬อͨ͠ΧϥʔύϨοτ 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
  7. ৭͚ͩʹґଘ͠ͳ͍৘ใ఻ୡ 25 50 75 100 2012 2013 2014 2015 2016

    ϞόΠϧ 1$ λϒϨοτ % Before % ܕ D ܕ৭֮
  8. 25 50 75 100 2012 2013 2014 2015 2016 PC

    ϞόΠϧ λϒϨοτ After 25 50 75 100 2012 2013 2014 2015 2016 ϞόΠϧ 1$ λϒϨοτ Before ϥϕϧ ϚʔΧʔ ઢΛଠ͘ % % ৭͚ͩʹґଘ͠ͳ͍৘ใ఻ୡ ઢͷछྨ
  9. ͦͯ͠δϣόϯχ ͸͙͢͏͠Ζͷఱ ؾྠͷப͕͍͔ͭ ΅Μ΍Γͨ͠ࡾ֯ ඪͷܗʹͳͬͯɺ ͠͹Β͘ܬͷΑ͏ ʹɺ΃͔΃͔ফ͑ ͨΓͱ΋ͬͨΓ͠ ͍ͯΔͷΛݟ·͠ ͨɻͦΕ͸ೱ͍߯

    ੨ͷͦΒͷ໺ݪʹ ͨͪ·ͨ͠ɻ ͦΕ͸ͩΜͩΜ ͸͖ͬΓͯ͠ɺͱ ͏ͱ͏ΓΜͱ͏͝ ͔ͳ͍Α͏ʹͳ Γɺೱ͍߯੨ͷͦ Βͷ໺ݪʹͨͪ· ͨ͠ɻ͍·৽Β͠ ͘Ḑ͍ͨ͹͔Γͷ ੨͍߯ͷ൘ͷΑ͏ ͳɺͦΒͷ໺ݪ ʹɺ·͙ͬ͢ʹ͢ ͖ͬͱཱͬͨͷͰ ͢ɻ ͢ΔͱͲ͔͜Ͱ; ͗͠ͳ੠͕ɺۜՏ εςʔγϣϯɺۜ Տεςʔγϣϯͱ Ӡ͏੠͕ͨ͠ͱࢥ ͏ͱ͍͖ͳΓ؟ͷ લ͕ɺͺͬͱ໌Δ ͘ͳͬͯɺ·ΔͰ ԯສͷܬӊ଑ͷՐ ΛҰ΃ΜʹԽੴ͞ ͤͯɺͦΒதʹ௜ Ίͨͱ͍͏޻߹ ߦ͋ͨΓͷจࣈ਺
  10. ௕͗ͯ͢΋୹͗ͯ͢΋ ಡΈͮΒ͍ ࣈҎ্ ʙࣈ͘Β͍ ˞೔ຊޠຊจͷ৔߹ ͦͯ͠δϣόϯχ ͸͙͢͏͠Ζͷఱ ؾྠͷப͕͍͔ͭ ΅Μ΍Γͨ͠ࡾ֯ ඪͷܗʹͳͬͯɺ

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

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