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

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

Transcript

1. ΢Σϒ੍࡞ʹ׆͔͢
   ϢχόʔαϧσβΠϯͷࢹ఺
   ؒౢࠫ஌
   WCAN 2019 Winter
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. View Slide

11. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. ݪଇ
    ୭΋͕ެฏʹར༻Ͱ͖Δ
    1.
    Ϣχόʔαϧ
    σβΠϯͷ
    7
    ॊೈͳ࢖͍ํ͕Ͱ͖Δ
    2.
    ࢖͍ํ͕؆୯Ͱ௚ײతͰ͋Δ
    3.
    4.ඞཁͳ৘ใ͕஌֮Ͱ͖Δ
    5. ةݥΛ๷ࢭ͠ɺ
    ϛεʹ׮༰Ͱ͋Δ
    6. ਎ମతͳෛ୲͕গͳ͍
    ࢖͍΍͍͢େ͖͞΍εϖʔε͕͋Δ
    7.
    

    View Slide

25. View Slide

26. ͋ΒΏΔਓʹਖ਼֬ʹ෼͔Γ΍͘͢৘ใΛ఻͑Δ
    ৘ใ఻ୡͷϢχόʔαϧσβΠϯ
    ΢Σϒ੍࡞ʹ׆͔͢
    

    View Slide

27. ৭
    Color Universal Design
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. ৭ͷݟ͑ํ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

39. ৭֮ಛੑ
    

    View Slide

40. ؟ͷߏ଄ͱࢹࡉ๔
    ޫ
    ໢ບ
    ᑈମ
    ᑈମ
    ੺
    ྘
    ੨
    ਲ਼ମ
    ਲ਼ମ
    ਲ਼ମ
    छྨͷਲ਼ମͷ൓ԠͷόϥϯεͰ৭Λೝࣝ
    ࢹ
    ࡉ
    ๔
    

    View Slide

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

    View Slide

42. ܕ
    C
    Ұൠ৭֮
    ܕ
    D
    ܕ৭֮
    ܕ
    P
    ܕ৭֮
    ৭ͷݟ͑ํ
    

    View Slide

43. Ұൠ৭֮ ܕ৭֮
    ܕ৭֮
    ݟ෼͚ʹ͍͘৭ͷ૊Έ߹Θͤྫ
    ੺
    ΦϨϯδ
    ੺
    ஡
    άϨʔ
    ϐϯΫ
    ࢵ
    ࠇ
    ໌Δ͍྘
    ྘
    ਂ྘
    ੨྘
    ਫ৭
    ੨
    ੺ ࠇ
    ੺ ྘
    ܕ
    C ܕ
    P ܕ
    D
    

    View Slide

44. ΞϓϦʮ৭ͷγϛϡϨʔλʯ
    iOS / Android
    

    View Slide

45. Google Chrome ʮNoCoffeeʯ
    ֦ுػೳ
    

    View Slide

46. Illustrator
    Photoshop
    Ai
    Ps
    

    View Slide

47. View Slide

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

    View Slide

49. ߴྸऀͷݟ͑ํ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

62. ԰֎ͰεϚϗΛݟΔ
    ബ҉͍෦԰ͰݟΔ
    ݹ͍Ϟχλ΍อޢϑΟϧϜ
    ٸ͗ͳ͕ΒݟΔ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

67. https://usecontrast.com/
    macOS
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

71. վળͷํ๏ᶅ
    ৭Ҏ֎ͷ৘ใΛఏڙ
    

    View Slide

72. ৭
    Ͱϥϕϧ෼͚
    

    View Slide

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

    View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. ৭͚ͩʹґଘ͠ͳ͍৘ใ఻ୡ
    25
    50
    75
    100
    2012 2013 2014 2015 2016
    ϞόΠϧ 1$ λϒϨοτ
    %
    Before
    %
    ܕ
    D
    ܕ৭֮
    

    View Slide

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

    View Slide

80. ৭
    ৭Λ།Ұͷख͕͔Γʹ͠ͳ͍
    ܗঢ় αΠζ ໛༷ จࣈ
    ෳ਺ͷखஈͰ৘ใΛ࣮֬ʹ఻͑Δ޻෉Λ
    ଠ͞
    

    View Slide

81. จࣈ
    Universal Typography
    

    View Slide

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

    View Slide

83. จࣈͷಡΈͮΒ͞
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

87. 6%ϑΥϯτ
    

    View Slide

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

    View Slide

89. View Slide

90. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

95. Ծ໊͕খ͞Ί
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

99. 6%ϑΥϯτΛ࢖͏͚ͩͰ͸
    ϢχόʔαϧσβΠϯ͸࣮ݱͰ͖ͳ͍
    ϑΥϯτΛੜ͔͢΋ࡴ͢΋จࣈ૊Έ࣍ୈ
    

    View Slide

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

     View Slide

101. จࣈαΠζ
     

     View Slide

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

     View Slide

103. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

111. Օ৚ॻ͖ͱߦؒ
     ୆෩߸ɺߴ஌ݝ಺Ͱఀిສށ

     ৴߸ఀࢭ΍ݐ෺Ұ෦ଛյ
     ଍ḡւ༸ؗʮ4"506.*ʯγϯϘϧ

     ϚʔΫܾ·Δɹਆಸ઒ͷ؅͞Μ࡞඼
     େߝҾ͖ਓ͕ྗউෛ
     Before
     

     View Slide

112. Օ৚ॻ͖ͱߦؒ
     ୆෩߸ɺߴ஌ݝ಺Ͱఀిສށ

     ৴߸ఀࢭ΍ݐ෺Ұ෦ଛյ
     ଍ḡւ༸ؗʮ4"506.*ʯγϯϘϧ

     ϚʔΫܾ·Δɹਆಸ઒ͷ؅͞Μ࡞඼
     େߝҾ͖ਓ͕ྗউෛ
     After
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

116. Message
     ͍͞͝ʹ
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide