ウェブ制作に活かすユニバーサルデザインの視点 / 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. ΢Σϒ੍࡞ʹ׆͔͢ ϢχόʔαϧσβΠϯͷࢹ఺ ؒౢࠫ஌ WCAN 2019 Winter

  2. PROFILE ؒౢࠫ஌ @mjmjsachi ߴ஌ࢢࡏॅ ϑϦʔϥϯεσβΠφʔ ҹ࡮෺ ΢Σϒ

  3. ϢχόʔαϧσβΠϯͱ͸ ৭ จࣈ ʦຊ೔ͷ͓࿩ʧ

  4. The power of the Web is in its universality. Tim

    Berners-Lee
  5. ੈքதͷ͋ΒΏΔਓʹ ༷ʑͳ୺຤΍ࢧԉٕज़Λ௨ͯ͠ ৘ใΛಧ͚ΒΕΔ ΢Σϒͱ͍͏ϝσΟΞͷຊ࣭తͳಛ௃ ử

  6. ώϡʔϚϯ Ϧʔμϒϧ Ϛγϯ Ϧʔμϒϧ

  7. ࠷େԽ ώϡʔϚϯ Ϧʔμϒϧ Ϛγϯ Ϧʔμϒϧ

  8. ϢχόʔαϧσβΠϯͱ͸ What is Universal Design

  9. ϢχόʔαϧσβΠϯ Wikipedia จԽɾݴޠɾࠃ੶΍೥ྸɾੑผͳͲͷҧ͍ ো֐ͷ༗ແ΍ೳྗࠩͳͲΛ໰Θͣʹ ར༻Ͱ͖Δ͜ͱΛ໨ࢦͨ͠ ݐஙɾઃඋɾ੡඼ɾ৘ใͳͲͷઃܭ ʢσβΠϯʣ

  10. None
  11. None
  12. ಺ֳ෎ྩ࿨ݩ೥൛ߴྸࣾձനॻ ߴྸԽͷਪҠͱকདྷਪܭ 2060 38.1ˋ 2018 28.1ˋ

  13. ଟ༷ੑΛड͚ೖΕΔσβΠϯ͸ࣾձͷཁ੥

  14. όϦΞϑϦʔ Ϣχόʔαϧ σβΠϯ

  15. όϦΞϑϦʔ Ϣχόʔαϧ σβΠϯ

  16. #BSSJFSɿোน 'SFFɿऔΓআ͘ ো֐ͷ͋ΔਓͷͨΊʹ ઐ༻ͷิॿΛՃ͑Δ όϦΞϑϦʔ

  17. 6OJWFSTBMɿීวతͳ ର৅ʹ͢΂ͯͷਓ ͸͡Ί͔ΒόϦΞΛ ࡞Βͳ͍Α͏ઃܭ͢Δ Ϣχόʔαϧ σβΠϯ

  18. None
  19. ϢχόʔαϧσβΠϯͷϙΠϯτ ͞·͟·ͳঢ়گͷਓ͕ಉ͡΋ͷΛ࢖͑Δ ར༻ऀશମͷϢʔβϏϦςΟ͕޲্͢Δ

  20. ϢχόʔαϧσβΠϯ ʹΞΫηγϏϦςΟ ?

  21. ࢖͍΍͢͞ ߴྸऀ ো֐ऀ ֎ࠃਓ λʔήο τ૚ ݈ৗऀ ॳ৺ऀ ͋Δঢ়گͰͷ࢖͍΍͢͞ ϢʔβϏϦςΟ

  22. ͋Δঢ়گͰͷ࢖͍΍͢͞ ϢʔβϏϦςΟ ࢖͍΍͢͞ ࢖͑Δঢ়گͷ෯޿͞ ࢖͑Δ ࢖͑ͳ͍ ΞΫηγϏϦςΟ

  23. ͋Δঢ়گͰͷ࢖͍΍͢͞ ϢʔβϏϦςΟ ࢖͍΍͢͞ ࢖͑Δঢ়گͷ෯޿͞ ࢖͑Δ ࢖͑ͳ͍ ΞΫηγϏϦςΟ ୭΋͕࢖͍΍͍͢σβΠϯ ϢχόʔαϧσβΠϯ

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

    4.ඞཁͳ৘ใ͕஌֮Ͱ͖Δ 5. ةݥΛ๷ࢭ͠ɺ ϛεʹ׮༰Ͱ͋Δ 6. ਎ମతͳෛ୲͕গͳ͍ ࢖͍΍͍͢େ͖͞΍εϖʔε͕͋Δ 7.
  25. None
  26. ͋ΒΏΔਓʹਖ਼֬ʹ෼͔Γ΍͘͢৘ใΛ఻͑Δ ৘ใ఻ୡͷϢχόʔαϧσβΠϯ ΢Σϒ੍࡞ʹ׆͔͢

  27. ৭ Color Universal Design

  28. ʮྑ͍৭࢖͍ʯ ͬͯʁ

  29. ͲͪΒ͕ྑ͍഑৭ʁ A B

  30. σβΠϯ σβΠϯ A B ͲͪΒ͕ྑ͍഑৭ʁ

  31. ϕϏʔάοζͷϥοϐϯάʹ͢ΔͳΒʁ A B

  32. ྑ͍৭࢖͍ ໨తΛୡ੒Ͱ͖Δ৭࢖͍ ử

  33. ΠϝʔδΛ఻͑Δ ʢԋग़ʣ จࣈΛಡΜͰ΋Β͏ ঢ়ଶΛ఻͑Δ ෼ྨΛ෼͔Γ΍͘͢͢Δ ײੑత໾ׂ ػೳత໾ׂ ৭ͷ໾ׂ ʢ໨తʣ ଞͱͷ۠ผɾಛੑΛ఻͑Δ

  34. ΠϝʔδͱػೳΛཱ྆͠ͳ͕Β ৘ใΛಧ͚Δ σβΠφʔͷ࿹ͷݟͤॴʂ

  35. ৭ͷݟ͑ํ

  36. ޫ ෺ମ ࢹ֮ ৭ΛݟΔͷʹඞཁͳ3ཁૉ

  37. ͲΜͳޫͷԼͰ ͲΜͳਓ͕ݟΔ͔ʹΑͬͯ ৭ͷݟ͑ํ͸มΘΔ

  38. ޫ ෺ମ ࢹ֮ ৭ΛݟΔͷʹඞཁͳ3ཁૉ ಁա৭ ಁա ද໘৭ ൓ࣹ

  39. ৭֮ಛੑ

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

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

    ܕ৭֮ ऑ౓ ʢܕ৭֮ʣ ڧ౓ ʢܕ৭֮ʣ ऑ౓ ʢܕ৭֮ʣ ڧ౓ ʢܕ৭֮ʣ ऑ౓ ʢܕ৭֮ʣ ڧ౓ ʢܕ৭֮ʣ ੺ ྘ ੨ Ұൠ৭֮ 95% 1.5% 3.5% ೔ຊਓஉੑͷ 0.001% ೔ຊਓஉੑͷ ໿ 20 1 ਓʹ ਓ ঁੑͷ໿ਓʹਓ͕৭ऑऀ
  42. ܕ C Ұൠ৭֮ ܕ D ܕ৭֮ ܕ P ܕ৭֮ ৭ͷݟ͑ํ

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

    ࢵ ࠇ ໌Δ͍྘ ྘ ਂ྘ ੨྘ ਫ৭ ੨ ੺ ࠇ ੺ ྘ ܕ C ܕ P ܕ D
  44. ΞϓϦʮ৭ͷγϛϡϨʔλʯ iOS / Android

  45. Google Chrome ʮNoCoffeeʯ ֦ுػೳ

  46. Illustrator Photoshop Ai Ps

  47. None
  48. ݟ෼͚ʹ͍͘഑৭ʹؾͮ͘͜ͱ͸ ΧϥʔϢχόʔαϧσβΠϯͷୈҰา γϛϡϨʔλΛຯํʹ͠Α͏ʂ

  49. ߴྸऀͷݟ͑ํ

  50. ՃྸʹΑΔݟ͑ํͷมԽ ޫ ਫথମ ਫথମͷ஄ྗͷ௿Լ ಁա཰ͷ௿Լ ʜಛʹ୹೾௕ ੨ܥ ࢹྗͷ௿Լɺޫྔͷݮগ ന಺ো ʢ໨͕͔͢Ήɺޫͷࢄཚʣ

  51. ݩը૾ ന಺োγϛϡϨʔγϣϯ ߴྸऀͷݟ෼͚ʹ͍͘৭ നʷԫ৭ ࠠ৭ͱࠇ ίϯτϥετͷ௿͍഑৭

  52. ߴྸऀͷݟ෼͚ͮΒ͍഑৭͸ Ұൠ৭֮ऀ΍ϩʔϏδϣϯͷਓ΋ݟ෼͚ͮΒ͍ ഑ྀ͢Ε͹ଟ͘ͷਓʹͱͬͯݟ΍͘͢ͳΔ

  53. ΧϥʔϢχόʔαϧσβΠϯ վળͷํ๏

  54. վળͷεςοϓ ݟ෼͚ʹ͍͘৭ͷ૊߹ͤΛݟ͚ͭΔ ৭૬ΛͣΒ͢ ίϯτϥετΛ͚ͭΔ ৭Ҏ֎ͷ৘ใΛՃ͑Δ

  55. վળͷํ๏ᶃ ഑৭ͷ޻෉

  56. ഑৭ͷ޻෉ Before 1 ܕ P ܕ৭֮

  57. After ੺ΛΦϨϯδدΓʹͣΒ͢ 1 ഑৭ͷ޻෉ ܕ P ܕ৭֮

  58. After ηύϨʔγϣϯΧϥʔ ʢڥքઢɾԑऔΓʣ ഑৭ͷ޻෉ ܕ P ܕ৭֮ 1

  59. վળͷํ๏ᶄ ίϯτϥετͷ֬อ

  60. ίϯτϥετൺͱ͸ ৘ใΛ఻͍͑ͯΔཁૉͱഎܠ৭ͱͷ ૬ରతͳ໌Δ͞ ʢ૬ରً౓ʣ ͷൺ཰ 1 : 1 21 :

    1 A നʷࠇ A ࠩͳ͠
  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
  62. ԰֎ͰεϚϗΛݟΔ ബ҉͍෦԰ͰݟΔ ݹ͍Ϟχλ΍อޢϑΟϧϜ ٸ͗ͳ͕ΒݟΔ

  63. https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

  64. ίϯτϥετνΣοΫͷ͢͢Ί ײ֮Ͱ͸ͳ͘πʔϧͰνΣοΫʂ Contrast Contrast Contrast Contrast 3.54 : 1 2.28

    : 1 2.55 : 1 3.35 : 1
  65. https://contrast-ratio.com/ ϒϥ΢β πʔϧ

  66. https://developer.paciellogroup.com/resources/contrastanalyser/ Windows macOS

  67. https://usecontrast.com/ macOS

  68. ಡΊͳ͍ͱɺ ఻ΘΒͳ͍

  69. ίϯτϥετෆ଍͸ػձଛࣦʂ ίϯτϥετͷվળ

  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
  71. վળͷํ๏ᶅ ৭Ҏ֎ͷ৘ใΛఏڙ

  72. ৭ Ͱϥϕϧ෼͚

  73. ৭֮όϦΞϑϦʔϞʔυ ৭ʴ໛༷ ϋονϯά ʢฑɾύλʔϯʣ Ͱϥϕϧ෼͚

  74. None
  75. None
  76. None
  77. None
  78. ৭͚ͩʹґଘ͠ͳ͍৘ใ఻ୡ 25 50 75 100 2012 2013 2014 2015 2016

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

    ϞόΠϧ λϒϨοτ After 25 50 75 100 2012 2013 2014 2015 2016 ϞόΠϧ 1$ λϒϨοτ Before ϥϕϧ ϚʔΧʔ ઢΛଠ͘ % % ৭͚ͩʹґଘ͠ͳ͍৘ใ఻ୡ ઢͷछྨ
  80. ৭ ৭Λ།Ұͷख͕͔Γʹ͠ͳ͍ ܗঢ় αΠζ ໛༷ จࣈ ෳ਺ͷखஈͰ৘ใΛ࣮֬ʹ఻͑Δ޻෉Λ ଠ͞

  81. จࣈ Universal Typography

  82. จࣈ ೔ৗͰ࠷΋໨ʹ͢Δ৘ใϝσΟΞ ử ʮ఻ΘΔʯ Λࠨӈ͢Δॏཁͳཁૉ

  83. จࣈͷಡΈͮΒ͞

  84. ಡΈͮΒ͞ͷଟ༷ੑ ݪܗ য఺ͣΕ ޫྔաଟ ۙࢹɾԕࢹ ཚࢹɾ࿝؟ ന಺ো ऑࢹ ࠐΈೖͬͨ෦෼͕ͭͿΕΔʗࡉ͍ઢ͕ͱͿ

  85. ಡΈͮΒ͞ͷଟ༷ੑ γϧΤοτ͕ࣅͨจࣈͷҰ෦͕ӅΕΔ ʢࢹ໺ܽଛɺ΋ͷ͕ඃΔʣ ޡಡ͠΍͍͢

  86. σΟεϨΫγΞʢࣝࣈো֐ʣ ʮσΟεϨΫγΞʯͱʮਤॻؗʯʛো֐อ݈෱ࢱݚڀ৘ใγεςϜʢ%*/'ʣ ಡΈͮΒ͞ͷଟ༷ੑ

  87. 6%ϑΥϯτ

  88. 6%ϑΥϯτͷ஀ੜ ߴྸԽ ݟ͑ͮΒ͞ ଟػೳԽ খܕԽ ੡඼ͷ ʷ ϑΥϯτϝʔΧʔΠϫλͱύφιχοΫͷڞಉ։ൃ ೔ຊॳ ʮΠϫλ6%ϑΥϯτʯ

    ஀ੜ
  89. None
  90. None
  91. 6%ϑΥϯτͷಛ௃ ࣈ໘Λେ͖͘ɾըઢΛγϯϓϧʹ ;ͱ͜ΖΛ޿͘ γϯϓϧԽ ͭͿΕରࡦ ඈͼग़͠࡟আ ౦ ౦ · ·

    ೔ ೔ ϒ ϒ
  92. 6%ϑΥϯτͷಛ௃ จࣈͷܗ͕Θ͔Γ΍͘͢ɺಡΈؒҧ͑ʹ͍͘ ΞΩͷ֬อ ಠཱͨ͠γϧΤοτ 4 S3569  69 0$(3# OCGRB

    ( G
  93. จࣈͷಡΈ΍͢͞ ࢹೝੑ ൑ಡੑ Մಡੑ จࣈͷܗ͕ Θ͔Γ΍͍͢ ޡಡ͠ʹ͍͘ ݟ෼͚΍͍͢ จষ͕ ಡΈ΍͍͢

  94. ࣈ໘͕େ͖ͳ6%ϑΥϯτͷ৔߹ʜ ࢹೝੑ จࣈͷܗ͕ Θ͔Γ΍͍͢ ޡಡ͠ʹ͍͘ ݟ෼͚΍͍͢ ൑ಡੑ Մಡੑ ځ۶ͳҹ৅Ͱ ಡΈർΕΔʜ

  95. Ծ໊͕খ͞Ί

  96. ࢹೝੑ ൑ಡੑ Մಡੑ ԋग़ ʴ ༻్΍໨తʹΑͬͯϑΥϯτΛ࢖͍෼͚Δ

  97. 6%ϑΥϯτͷ࢖͍ॴ Ҋ಺දࣔɺඪࣝ ৯඼΍ༀ඼ͷ੒෼දࣔ ໾ॴ΍පӃͳͲͷॻྨ ۚ༥ɾอݥͷܖ໿ॻ औѻઆ໌ॻɺ஫ҙॻ͖ ޿ใࢽɺ৽ฉ

  98. 6%ϑΥϯτͷ࢖͍ॴ Ҋ಺දࣔɺඪࣝ ਖ਼͘͠ಡΊΔ ৯඼΍ༀ඼ͷ੒෼දࣔ εϖʔε͕ݶΒΕ͍ͯΔ ໾ॴ΍පӃͳͲͷॻྨ ༷ʑͳਓ͕ར༻͢Δ ۚ༥ɾอݥͷܖ໿ॻ ؒҧ͑ͯ͸͍͚ͳ͍ औѻઆ໌ॻɺ஫ҙॻ͖

    ҆શʹؔΘΔ ޿ใࢽɺ৽ฉ ެڞੑ͕ߴ͍
  99. 6%ϑΥϯτΛ࢖͏͚ͩͰ͸ ϢχόʔαϧσβΠϯ͸࣮ݱͰ͖ͳ͍ ϑΥϯτΛੜ͔͢΋ࡴ͢΋จࣈ૊Έ࣍ୈ

  100. ಡΈ΍͢͞ͷͨΊͷจࣈ૊

  101. จࣈαΠζ

  102. จࣈαΠζ αΠτଆͰఏڙ͢Δඞཁ͸ͳ͍

  103. None
  104. ετϨεͳ͘ಡΊΔαΠζΛ֬อ͢Δ ϢʔβʔʹΑΔจࣈαΠζ΍ϑΥϯτɺ ৭ͷมߋΛՄೳͳঢ়ଶʹ͓ͯ͘͠ ʹจࣈ৘ใ͸ςΩετͱͯ͠ఏڙ͢Δ

  105. ͦͯ͠δϣόϯχ͸͙͢͏͠Ζͷఱؾྠͷப͕͍͔ͭ΅Μ΍Γͨ͠ࡾ֯ඪͷܗʹͳͬͯɺ͠͹Β͘ܬͷΑ͏ʹɺ΃͔΃͔ফ͑ͨΓͱ΋ͬ ͨΓ͍ͯ͠ΔͷΛݟ·ͨ͠ɻͦΕ͸ͩΜͩΜ͸͖ͬΓͯ͠ɺͱ͏ͱ͏ΓΜͱ͏͔͝ͳ͍Α͏ʹͳΓɺೱ͍߯੨ͷͦΒͷ໺ݪʹͨͪ·͠ ͨɻ͍·৽Β͘͠Ḑ͍ͨ͹͔Γͷ੨͍߯ͷ൘ͷΑ͏ͳɺͦΒͷ໺ݪʹɺ·͙ͬ͢ʹ͖ͬ͢ͱཱͬͨͷͰ͢ɻ͢ΔͱͲ͔͜Ͱɺ;͗͠ͳ੠ One column ߦ͋ͨΓͷจࣈ਺

  106. ͦͯ͠δϣόϯχ͸͙͢͏͠Ζͷఱؾྠͷப͕͍͔ͭ΅Μ΍Γͨ͠ࡾ֯ඪͷܗʹͳͬͯɺ͠͹Β͘ܬͷΑ͏ʹɺ΃͔΃͔ফ͑ͨΓͱ΋ͬ ͨΓ͍ͯ͠ΔͷΛݟ·ͨ͠ɻͦΕ͸ͩΜͩΜ͸͖ͬΓͯ͠ɺͱ͏ͱ͏ΓΜͱ͏͔͝ͳ͍Α͏ʹͳΓɺೱ͍߯੨ͷͦΒͷ໺ݪʹͨͪ·͠ ͨɻ͍·৽Β͘͠Ḑ͍ͨ͹͔Γͷ੨͍߯ͷ൘ͷΑ͏ͳɺͦΒͷ໺ݪʹɺ·͙ͬ͢ʹ͖ͬ͢ͱཱͬͨͷͰ͢ɻ͢ΔͱͲ͔͜Ͱɺ;͗͠ͳ੠ ͕ɺۜՏεςʔγϣϯɺۜՏεςʔγϣϯͱӠ͏੠͕ͨ͠ͱࢥ͏ͱ͍͖ͳΓ؟ͷલ͕ɺͺͬͱ໌Δ͘ͳͬͯɺ·ΔͰԯສͷܬӊ଑ͷՐΛ Ұ΃ΜʹԽੴͤͯ͞ɺͦΒதʹ௜Ίͨͱ͍͏޻߹ɺ·ͨμΠΞϞϯυձࣾͰɺͶͩΜ͕΍͘͢ͳΒͳ͍ͨΊʹɺΘ͟ͱ֭Εͳ͍;ΓΛ͠ ͯɺ͔ͯ͘͠ஔ͍ͨۚ߶ੴΛɺ୭͔͕͍͖ͳΓͻͬ͘Γ͔͑ͯ͠ɺ͹Βࢃ͍ͨͱ͍͏෩ʹɺ؟ͷલ͕͋ͬ͞ͱ໌Δ͘ͳͬͯɺδϣόϯχ ͸ɺࢥΘͣԿ΂Μ΋؟Λࡲͬͯ͠·͍·ͨ͠ɻ ߦ͋ͨΓͷจࣈ਺

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

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

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

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

    ͬͱཱͬͨͷͰ͢ɻ͢ΔͱͲ͔͜Ͱɺ;͗͠ͳ੠͕ɺۜՏεςʔγϣϯɺۜՏεςʔγϣ ϯͱӠ͏੠͕ͨ͠ͱࢥ͏ͱ͍͖ͳΓ؟ͷલ͕ɺͺͬͱ໌Δ͘ͳͬͯɺ·ΔͰԯສͷܬӊ଑ ͦͯ͠δϣόϯχ͸͙͢͏͠Ζͷఱؾྠͷப͕͍͔ͭ΅Μ΍Γͨ͠ࡾ֯ඪͷܗʹͳͬͯɺ ͠͹Β͘ܬͷΑ͏ʹɺ΃͔΃͔ফ͑ͨΓͱ΋ͬͨΓ͍ͯ͠ΔͷΛݟ·ͨ͠ɻͦΕ͸ͩΜͩ Μ͸͖ͬΓͯ͠ɺͱ͏ͱ͏ΓΜͱ͏͔͝ͳ͍Α͏ʹͳΓɺೱ͍߯੨ͷͦΒͷ໺ݪʹͨͪ· ͨ͠ɻ͍·৽Β͘͠Ḑ͍ͨ͹͔Γͷ੨͍߯ͷ൘ͷΑ͏ͳɺͦΒͷ໺ݪʹɺ·͙ͬ͢ʹ͖͢ ͬͱཱͬͨͷͰ͢ɻ͢ΔͱͲ͔͜Ͱɺ;͗͠ͳ੠͕ɺۜՏεςʔγϣϯɺۜՏεςʔγϣ ϯͱӠ͏੠͕ͨ͠ͱࢥ͏ͱ͍͖ͳΓ؟ͷલ͕ɺͺͬͱ໌Δ͘ͳͬͯɺ·ΔͰԯສͷܬӊ଑ ͕͍͔ͭ΅Μ΍Γͨ͠ࡾ֯ඪͷܗʹͳͬͯɺ ͠͹Β͘ܬͷΑ͏ʹɺ΃͔΃͔ফ͑ͨΓͱ΋ ͬͨΓ͍ͯ͠ΔͷΛݟ·ͨ͠ɻͦΕ͸ͩΜͩ Μ͸͖ͬΓͯ͠ɺͱ͏ͱ͏ΓΜͱ͏͔͝ͳ͍ Α͏ʹͳΓɺೱ͍߯੨ͷͦΒͷ໺ݪʹͨͪ· ͦͯ͠δϣόϯχ͸͙͢͏͠Ζͷఱؾྠͷப ͕͍͔ͭ΅Μ΍Γͨ͠ࡾ֯ඪͷܗʹͳͬͯɺ ͠͹Β͘ܬͷΑ͏ʹɺ΃͔΃͔ফ͑ͨΓͱ΋ ͬͨΓ͍ͯ͠ΔͷΛݟ·ͨ͠ɻͦΕ͸ͩΜͩ Μ͸͖ͬΓͯ͠ɺͱ͏ͱ͏ΓΜͱ͏͔͝ͳ͍ Α͏ʹͳΓɺೱ͍߯੨ͷͦΒͷ໺ݪʹͨͪ· ͦͯ͠δϣόϯχ͸͙͢͏͠Ζͷఱؾྠͷப ͕͍͔ͭ΅Μ΍Γͨ͠ࡾ֯ඪͷܗʹͳͬͯɺ ͠͹Β͘ܬͷΑ͏ʹɺ΃͔΃͔ফ͑ͨΓͱ΋ ͬͨΓ͍ͯ͠ΔͷΛݟ·ͨ͠ɻͦΕ͸ͩΜͩ Μ͸͖ͬΓͯ͠ɺͱ͏ͱ͏ΓΜͱ͏͔͝ͳ͍ Α͏ʹͳΓɺೱ͍߯੨ͷͦΒͷ໺ݪʹͨͪ· ద੾ͳߦؒ͸ߦ௕ʹൺྫ͢Δ
  111. Օ৚ॻ͖ͱߦؒ ୆෩߸ɺߴ஌ݝ಺Ͱఀిສށ
 ৴߸ఀࢭ΍ݐ෺Ұ෦ଛյ ଍ḡւ༸ؗʮ4"506.*ʯγϯϘϧ
 ϚʔΫܾ·Δɹਆಸ઒ͷ؅͞Μ࡞඼ େߝҾ͖ਓ͕ྗউෛ Before

  112. Օ৚ॻ͖ͱߦؒ ୆෩߸ɺߴ஌ݝ಺Ͱఀిສށ
 ৴߸ఀࢭ΍ݐ෺Ұ෦ଛյ ଍ḡւ༸ؗʮ4"506.*ʯγϯϘϧ
 ϚʔΫܾ·Δɹਆಸ઒ͷ؅͞Μ࡞඼ େߝҾ͖ਓ͕ྗউෛ After

  113. จࣈἧ͑ ຊจͷجຊ͸ࠨἧ͑ จষͷதԝἧ͑͸ɺςΩετͷ෼ྔ΍ંΓฦ͠෦෼ɺ पΓͷཁૉ΍༨നͳͲΛ੍ޚͰ͖Δ৔߹ʹ͸ɺ จষΛҹ৅෇͚ͨΓόϥϯεΛͱͬͨΓͱޮՌతʹ࢖͑ΔςΫχοΫͰ͢ɻ ͔͠͠ը໘෯ʹΑͬͯߦ਺͕มΘΔ৔߹ʹ͸ɺ޷·͘͠ͳ͍ҐஔͰվߦ͞ΕͨΓ จষͷ಄͕ἧΘͣඇৗʹಡΈͮΒ͘ͳΔͨΊɺ جຊతʹ͸ࠨἧ͑Λ͓͢͢Ί͠·͢ɻ

  114. จࣈἧ͑ ຊจͷجຊ͸ࠨἧ͑ จষͷதԝἧ͑͸ɺςΩετͷ෼ྔ΍ંΓฦ͠෦෼ɺ पΓͷཁૉ΍༨നͳͲΛ੍ޚͰ͖Δ৔߹ʹ͸ɺ จষΛҹ৅෇͚ͨΓόϥϯεΛͱͬͨΓͱޮՌతʹ࢖͑ΔςΫ χοΫͰ͢ɻ ͔͠͠ը໘෯ʹΑͬͯߦ਺͕มΘΔ৔߹ʹ͸ɺ޷·͘͠ͳ͍Ґஔ Ͱվߦ͞ΕͨΓ จষͷ಄͕ἧΘͣඇৗʹಡΈͮΒ͘ͳΔͨΊɺ جຊతʹ͸ࠨἧ͑Λ͓͢͢Ί͠·͢ɻ

  115. จࣈἧ͑ ຊจͷجຊ͸ࠨἧ͑ จষͷதԝἧ͑͸ɺςΩετͷ෼ྔ΍ંΓฦ͠෦෼ɺ पΓͷཁૉ΍༨നͳͲΛ੍ޚͰ͖Δ৔߹ʹ͸ɺ จষΛҹ৅෇͚ͨΓόϥϯεΛͱͬͨΓͱޮՌతʹ࢖͑ΔςΫχοΫͰ͢ɻ ͔͠͠ߦ਺΍༨ന͕Մมͷ৔߹ʹ͸ɺ޷·͘͠ͳ͍ҐஔͰվߦ͞ΕͨΓ จষͷ಄͕ἧΘͣඇৗʹಡΈͮΒ͘ͳΔͨΊɺ جຊతʹ͸ࠨἧ͑Λ͓͢͢Ί͠·͢ɻ

  116. Message ͍͞͝ʹ

  117. ϢχόʔαϧσβΠϯ ʹදݱ੍͕ݶ͞ΕΔ ?

  118. ੺΍྘Λ࢖Θͳ͍ ԿͰ΋6%ϑΥϯτ ˕໨తʹ߹ͬͨબ୒ɾ૊Έ߹Θͤ

  119. ΑΓଟ͘ͷਓʹ ࣮֬ʹ৘ใΛಧ͚Δ෢ثʹͳΔ ؾΛ͚ͭΔ΂͖఺΍੍ݶ͸ੜ͡Δ͚ΕͲʜ

  120. ϢχόʔαϧσβΠϯͷ৺ಘ ͸ଘࡏ͠ͳ͍

  121. ϢχόʔαϧσβΠϯͷ৺ಘ ͔͔Ͱ͸ͳ͘ ޻෉ͱվળΛॏͶΔ͜ͱͰ ఻ΘΔਓ΍౓߹͍ΛߴΊ͍ͯ͘

  122. σβΠϯͱ͸ ݱঢ়Λগ͠Ͱ΋๬·͍͠΋ͷʹ ม͑Α͏ͱ͢ΔͨΊͷҰ࿈ͷߦҝͰ͋Δ ʠ ʡ Herbert A. Simon

  123. ಛผͳઐ༻ͷσβΠϯ͸ඞཁͳ͍

  124. ΑΓଟ͘ͷਓʹ৘ใΛಧ͚ΔͨΊʹ Ͱ͖Δ͜ͱ͔Β࢝ΊΑ͏ʂ ͋ͳͨͷσβΠϯͷԆ௕ઢ্Ͱ

  125. ͋Γ͕ͱ͏͍͟͝·ͨ͠ Enjoy Universal Design!