$30 off During Our Annual Pro Sale. View Details »

ユニバーサルHTMLとWebのポテンシャル

 ユニバーサルHTMLとWebのポテンシャル

SaCSS Special23: Accessibility
多様化する環境やニーズに対して、WebサイトやWebアプリケーションはどのような開発をしたらいいのか。
ユニバーサル(普遍的)なHTMLを設計することで、様々な環境やデバイス・ユーザーの利用に耐えうるサイトやアプリケーションにすることができます。そのためには、Webがどんなポテンシャル(潜在的価値)を持っているのか知ることが鍵となります。
Webはまだまだ可能性が秘められているはずです。
それを皆さんと探っていきましょう。

Yusuke Hirao

August 24, 2019
Tweet

More Decks by Yusuke Hirao

Other Decks in Technology

Transcript

  1. ©2019 Yusuke Hirao
    גࣜձࣾσΟʔθϩ
    8FCΞΫηγϏϦςΟΤϯδχΞ
    ฏඌΏ͏ͯΜ
    Ϣχόʔαϧ)5.-ͱ
    8FCͷϙςϯγϟϧ
    4B$444QFDJBM"DDFTTJCJMJUZ 4B$447PM

    View Slide

  2. ©2019 Yusuke Hirao
    ࣗݾ঺հ
    ฏඌ༏యʢͻΒ͓Ώ͏ͯΜʣ
    גࣜձࣾσΟʔθϩ
    8FCΞΫηγϏϦςΟΤϯδχΞ
    ϑϩϯτΤϯυΤϯδχΞ
    #-0(IUUQTOPUFNVZVTVLFIJSBP
    Yusuke Hirao
    @cloud10designs

    View Slide

  3. ©2019 Yusuke Hirao
    8FCΞΫηγϏϦςΟΤϯδχΞʜʁ
    8FCϖʔδɾ8FCΞϓϦ͕ΑΓΞΫηγϒϧʹͳΔΑ͏ʹ
    ઃܭɾ࣮૷ɾϨϏϡʔɾςετͳͲΛߦ͍ͬͯ·͢ɻ
    ΞυόΠβʔͱͯ͠#BDLMPHͷ
    ΞΫηγϏϦςΟվળʹڠྗ͠·ͨ͠ɻ
    ࣗݾ঺հ

    View Slide

  4. ©2019 Yusuke Hirao
    ࠓ೔ɺ࿩͢͜ͱ
    ։ൃͷߟ͑ํ

    View Slide

  5. ©2019 Yusuke Hirao
    ۩ମతͳ࣮૷ํ๏
    ίʔσΟϯάςΫχοΫ
    ࠓ೔ɺ࿩͞ͳ͍͜ͱ

    View Slide

  6. ©2019 Yusuke Hirao
    Ϣχόʔαϧ)5.-ͱ8FCͷϙςϯγϟϧ
    ଟ༷Խ͢Δ؀ڥ΍χʔζʹରͯ͠ɺ8FCαΠτ΍8FCΞϓϦέʔγϣϯ
    ͸ͲͷΑ͏ͳ։ൃΛͨ͠Β͍͍ͷ͔ɻ
    Ϣχόʔαϧʢීวతʣͳ)5.-Λઃܭ͢Δ͜ͱͰɺ༷ʑͳ؀ڥ΍σό
    ΠεɾϢʔβʔͷར༻ʹ଱͑͏ΔαΠτ΍ΞϓϦέʔγϣϯʹ͢Δ͜ͱ
    ͕Ͱ͖·͢ɻͦͷͨΊʹ͸ɺ8FC͕ͲΜͳϙςϯγϟϧʢજࡏతՁ஋ʣ
    Λ͍࣋ͬͯΔͷ͔஌Δ͜ͱ͕伴ͱͳΓ·͢ɻ
    8FC͸·ͩ·ͩՄೳੑ͕ൿΊΒΕ͍ͯΔ͸ͣͰ͢ɻ
    ͦΕΛօ͞Μͱ୳͍͖ͬͯ·͠ΐ͏ɻ

    View Slide

  7. ©2019 Yusuke Hirao
    ΞδΣϯμ
    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ
    8FCͷϙςϯγϟϧ

    View Slide

  8. ©2019 Yusuke Hirao
    ΞδΣϯμ
    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ
    8FCͷϙςϯγϟϧ

    View Slide

  9. ©2019 Yusuke Hirao
    Έͳ͞ΜͷੜΈग़͢
    αΠτɾΞϓϦɾαʔϏε
    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ

    View Slide

  10. ©2019 Yusuke Hirao
    ͍ΖΜͳਓʹ
    ࢖ͬͯ΄͍͠Ͱ͢ΑͶʁ
    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ

    View Slide

  11. ©2019 Yusuke Hirao
    ͍ΖΜͳਓͬͯͳΜ͚ͩͬʁ

    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ

    View Slide

  12. ©2019 Yusuke Hirao
    ͍ΖΜͳਓଟ༷Խͨ͠ਓʑ
    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ

    View Slide

  13. ©2019 Yusuke Hirao
    ͪΐͬͱࡶʹ޿͛ͯΈ·͢
    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ

    View Slide

  14. ©2019 Yusuke Hirao
    ؀ڥ
    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ
    ώτ σόΠε
    ۭ࣌
    ো֕
    ոզ
    පؾ
    ਎ମ೥ྸ
    ਫ਼ਆ೥ྸ
    ੑผ
    -(#52
    ਓछ
    ݴޠ
    ֎ࠃޠ
    ه߸
    ఺ࣈ
    ख࿩
    จԽ
    ෩श
    फڭ
    ᅂ޷
    झຯ
    ఩ֶ
    श׳
    Ϧςϥγʔ
    ڭҭ ֶྺ
    ମ֨
    ਎௕
    ମॏ
    ख͕࠹͕͍ͬͯΔ
    ͩͬ͜
    ͓ΜͿ
    ཱ͍ͬͯΔ
    ࠲͍ͬͯΔ
    ৯ࣄத
    ೖཋத
    ӡసத
    ར͖ख
    ҉͍
    ໌Δ͍
    ڱ͍
    ޿͍ ͏Δ͍͞ ੩͔
    ఱؾ
    ఀి
    ࡂ֐
    ࣄނ
    ԻΛग़ͯ͠͸͍͚ͳ͍ ໌Δͯ͘͠͸͍͚ͳ͍
    ؾԹ
    ࣪౓
    ϝΨω
    ٛख
    ٛ଍
    ॵ͕Γ
    ମௐ
    γϥϑ
    టਲ
    ύιίϯ
    εΫϦʔϯ
    Ψϥέʔ
    λϒϨοτ
    εϚʔτ΢Υον
    ੑೳ
    εϚʔτεϐʔΧʔ
    λονεΫϦʔϯ
    Ϛ΢ε
    ༗ઢ
    ి஑ ιϑτ΢ΣΞΩʔϘʔυ
    ϋʔυ΢ΣΞΩʔϘʔυ
    Ի੠ೖྗ
    ΞΠτϥοΧʔ
    εΫϦʔϯϦʔμʔ
    ఺ࣈσΟεϓϨΠ
    ࠓ͸ݟΕͳ͍ ͋ͱͰݟ͍ͨ
    Ң౓
    ܦ౓
    ߴ౓

    ԰಺ ԰֎
    ނো
    ΦϑϥΠϯ
    ूதྗ
    ຬෲ౓
    Ջ
    ڵฃ
    ϦϥοΫε
    εϚϗ
    ർ࿑౓
    8Jp

    View Slide

  15. ©2019 Yusuke Hirao
    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ
    ޒମຬ଍ͰόονϦ৸ͯ
    ͝͸Μ΋ෲീ෼৯΂ͯ
    ࠷దͳۭௐ͕ޮ͍ͨ
    ԿΛͯ͠΋ڐ͞ΕΔ৔ॴͰ
    ॆి֬อͰ͖ͯͯ8Jp଎౓࠷ߴͷ
    ࢖͍׳ΕͨσόΠεͰ
    ༧ఆ΋ͳ͘ϦϥοΫε͠ͳ͕Β
    ňͦΕʼnΛར༻Ͱ͖Δਓ
    ͚͕ͩλʔήοτ͡Όͳ͍ΑͶʁ

    View Slide

  16. ©2019 Yusuke Hirao
    ͲΜͳঢ়گͷਓʹ΋
    ར༻ͯ͠΋Β͍͍ͨ
    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ

    View Slide

  17. ©2019 Yusuke Hirao
    ΞδΣϯμ
    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ
    8FCͷϙςϯγϟϧ

    View Slide

  18. ©2019 Yusuke Hirao
    ͱ͸͍͑ɺ
    ΠϯΫϧʔγϒ แׅత
    ʹ
    ରԠ͢Δͷ͸
    ෆՄೳͰ͠ΐʁ
    ΠϯΫϧʔδϣϯͱඪ४ن֨

    View Slide

  19. ©2019 Yusuke Hirao
    ͔ͨ͠ʹ೉͍͠Ͱ͢Ͷ
    ΠϯΫϧʔδϣϯͱඪ४ن֨

    View Slide

  20. ©2019 Yusuke Hirao
    ໊ҩͰ΋ະ஌ͷපؾɾো֕͸͋Δ
    ࠓޙͲΜͳσόΠε͕ݱΕΔ͔୭΋஌Βͳ͍
    ͲΜͳΠϊϕʔςΟϒͳ͜ͱ͕
    ͲΜͳύϥμΠϜγϑτ͕
    γϯΪϡϥϦςΟ͕
    Ӊ஦ਓ͕΍ͬͯ͘Δ͔΋͠Εͳ͍
    ΠϯΫϧʔδϣϯͱඪ४ن֨

    View Slide

  21. ©2019 Yusuke Hirao
    ΋͠Ծʹ͖ͬ͞ͷ
    ΠϯΫϧʔδϣϯ͕Ͱ͖ͨͱͯ͠΋
    ະདྷͷະ஌ͷଟ༷ੑ͕଴͍ͬͯΔ
    ΠϯΫϧʔδϣϯͱඪ४ن֨

    View Slide

  22. ©2019 Yusuke Hirao
    ݸਓ΍খ͍͞૊৫Ͱ
    ͜ΕΒΛݚڀŋ෼ੳŋݕূŋղܾ
    Ͱ͖Δͷ͔ʜʁʁ
    ΠϯΫϧʔδϣϯͱඪ४ن֨

    View Slide

  23. ©2019 Yusuke Hirao
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    Ͱ͸
    Ͳ͏ͨ͠Β͍͍ͷ͔

    View Slide

  24. ©2019 Yusuke Hirao
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    ج४ʹै͏

    View Slide

  25. ©2019 Yusuke Hirao
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    ඪ४ن֨ʹै͏

    View Slide

  26. ©2019 Yusuke Hirao
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    )5.--JWJOH4UBOEBSE
    8FC$POUFOUT"DDFTTJCJMJUZ(VJEFMJOF
    "DDFTTJCJMJUZ0CKFDU.PEFM

    View Slide

  27. ©2019 Yusuke Hirao
    )5.--JWJOH4UBOEBSE
    8)"58(͕؅ཧΛ͍ͯ͠Δ)5.-ͷن֨
    8FC$POUFOUT"DDFTTJCJMJUZ(VJEFMJOF
    8$͕؅ཧΛ͍ͯ͠Δ΢ΣϒίϯςϯπͷΞΫηγϏϦςΟͷ
    ୲อΛ໨తͱͨ͠ΨΠυϥΠϯ
    +*4 ೔ຊ࢈ۀن֨
    9ͷݩͱͳΔจॻ
    "DDFTTJCJMJUZ0CKFDU.PEFM
    8$ͷ8*$(͕։ൃ͍ͯ͠Δࢧԉٕज़ͷͨΊͷ"1*
    ΠϯΫϧʔδϣϯͱඪ४ن֨

    View Slide

  28. ©2019 Yusuke Hirao
    )5.--JWJOH4UBOEBSE
    σʔλϑΥʔϚοτͷج४
    8FC$POUFOUT"DDFTTJCJMJUZ(VJEFMJOF
    ࡞Γํͷج४
    "DDFTTJCJMJUZ0CKFDU.PEFM
    ࢧԉٕज़ͷͨΊͷج४
    ΠϯΫϧʔδϣϯͱඪ४ن֨

    View Slide

  29. ©2019 Yusuke Hirao
    )5.--JWJOH4UBOEBSE
    8FC$POUFOUT"DDFTTJCJMJUZ(VJEFMJOF
    "DDFTTJCJMJUZ0CKFDU.PEFM
    ੈքதͷ༗ࣝऀͨͪʹΑͬͯ
    ଟ༷Խ΁ͷݕ౼͕͞Εͨج४΁Ξοϓσʔτ͞Ε͍͍ͯͬͯΔ
    ΠϯΫϧʔδϣϯͱඪ४ن֨

    View Slide

  30. ©2019 Yusuke Hirao
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    ͜ΕΛར༻͠ͳ͍ख͸ͳ͍ͳʁ

    View Slide

  31. ©2019 Yusuke Hirao
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    ˞஫ҙ˞
    ن֨͸͋͘·Ͱن֨
    ΨΠυϥΠϯ͸͋͘·ͰΨΠυϥΠϯ
    ňकΔ׬ᘳʼnͰ͸ͳ͍

    View Slide

  32. ©2019 Yusuke Hirao
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    ͳͥ͜͏͍͏ن֨ʹͳͬͨͷ͔ʁ
    ΨΠυϥΠϯͷݴΘΜͱ͍ͯ͠Δຊ࣭͸ʁ

    ͜ΕΛҙࣝ͢Δ͜ͱ͕େ੾

    View Slide

  33. ©2019 Yusuke Hirao
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    ن֨ͷҙਤɾΨΠυϥΠϯͷຊ࣭
    ͜ΕΒΛཧղͯ͠
    Ϣχόʔαϧ ීวతͳ
    )5.-Λॻ͘

    View Slide

  34. ©2019 Yusuke Hirao
    ΞδΣϯμ
    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ
    8FCͷϙςϯγϟϧ

    View Slide

  35. ©2019 Yusuke Hirao
    8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ
    IUUQTXXXTMJEFTIBSFOFUSJLJIBXFC
    ҏݪྗ໵͞Μ
    !NBHJ

    View Slide

  36. ©2019 Yusuke Hirao
    8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ
    ࢴഔମ
    Ϣʔβʔ"
    Ϣʔβʔ#
    Ϣʔβʔ$
    Ϣʔβʔ%

    ͦ΋ͦ΋৔ॴ͕ԕ͍
    ෺ཧతʹೖखࠔ೉

    ໨͕ෆࣗ༝ͰಡΊͳ͍

    View Slide

  37. ©2019 Yusuke Hirao
    8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ
    8FCίϯςϯπ
    Ϣʔβʔ"
    Ϣʔβʔ#
    Ϣʔβʔ$
    Ϣʔβʔ%
    ѹ౗తʹΞΫηγϒϧ
    ˞σόΠεͷॆి΍8Jpঢ়گͷ໰୊ͳͲ͸΋ͪΖΜ͋Δ

    View Slide

  38. ©2019 Yusuke Hirao
    8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ
    8FCίϯςϯπ
    Ϣʔβʔ"
    Ϣʔβʔ#
    Ϣʔβʔ$
    Ϣʔβʔ%
    ͔ͤͬ͘ΞΫηγϒϧͩͬͨͷʹ
    ࡞ΓํΛؒҧ͑Δͱ΋͍ͬͨͳ͍͜ͱʹͳΔ
    ࡞ΓํΛؒҧ͑ͨ ❌
    Χϥʔίϯτϥετ͕௿ͯ͘ಡΊͳ͍

    View Slide

  39. ©2019 Yusuke Hirao
    8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ
    .055"*/"*

    View Slide

  40. ©2019 Yusuke Hirao
    8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ
    8FCͷ
    ಛੑΛ׆͔͢
    ಛੑΛࡴ͞ͳ͍

    View Slide

  41. ©2019 Yusuke Hirao
    ΞδΣϯμ
    ଟ༷Խͱ͍͏෩࿊ෑΛ޿͛Δ
    ΠϯΫϧʔδϣϯͱඪ४ن֨
    8FCʹࡌΔ͚ͩͰѹ౗తʹΞΫηγϒϧ
    8FCͷϙςϯγϟϧ

    View Slide

  42. ©2019 Yusuke Hirao
    8FCͷϙςϯγϟϧ
    $44ͷՁ஋
    จࣈ΍ΦϒδΣΫτͷαΠζΛมߋͰ͖Δ
    ϑΥϯτΛมߋͰ͖Δ
    ৭ΛมߋͰ͖Δ
    Ϣʔβʔ͕೚ҙʹมߋͰ͖Δ
    8FCϖʔδͱͯ͠ͷՁ஋
    μ΢ϯϩʔυͯ͠อଘͰ͖Δ
    ܦ೥ྼԽ͕ͳ͍
    ҹ࡮Ͱ͖Δ
    63-Ͱѻ͏͜ͱ͕Ͱ͖Δ
    γΣΞ͠΍͍͢
    ·ͩ·ͩଞʹ΋΋ͬͱ͋Δ͸ͣ
    ςΩετσʔλͷՁ஋
    จࣈͱͯ͠දࣔ͢Δ͜ͱ͕Ͱ͖Δ
    Ի੠ͱͯ͠ಡΈ্͛Δ͜ͱ͕Ͱ͖Δ
    ఺ࣈσΟεϓϨΠʹग़ྗͰ͖Δ
    બ୒ͯ͠ίϐʔͰ͖Δ
    ػց຋༁Ͱ͖Δ
    σʔλྔ͕খ͍͞
    )5.-ͷՁ஋
    ϋΠύʔϦϯΫͰ͖Δ
    ϝλσʔλΛ΋ͯΔ
    ςΩετʹϝλ৘ใΛ෇ՃͰ͖Δ
    ϥϯυϚʔΫΛஔ͚Δ
    ػց͕ߏ଄Λ༰қʹղऍͰ͖Δ

    View Slide

  43. ©2019 Yusuke Hirao
    ςΩετσʔλͷՁ஋
    จࣈͱͯ͠දࣔ͢Δ͜ͱ͕Ͱ͖Δ
    Ի੠ͱͯ͠ಡΈ্͛Δ͜ͱ͕Ͱ͖Δ
    ఺ࣈσΟεϓϨΠʹग़ྗͰ͖Δ
    બ୒ͯ͠ίϐʔͰ͖Δ
    ػց຋༁Ͱ͖Δ
    σʔλྔ͕খ͍͞
    )5.-ͷՁ஋
    ϋΠύʔϦϯΫͰ͖Δ
    ϝλσʔλΛ΋ͯΔ
    ςΩετʹϝλ৘ใΛ෇ՃͰ͖Δ
    ϥϯυϚʔΫΛஔ͚Δ
    ػց͕ߏ଄Λ༰қʹղऍͰ͖Δ
    8FCͷϙςϯγϟϧ
    $44ͷՁ஋
    จࣈ΍ΦϒδΣΫτͷαΠζΛมߋͰ͖Δ
    ϑΥϯτΛมߋͰ͖Δ
    ৭ΛมߋͰ͖Δ
    Ϣʔβʔ͕೚ҙʹมߋͰ͖Δ
    8FCϖʔδͱͯ͠ͷՁ஋
    μ΢ϯϩʔυͯ͠อଘͰ͖Δ
    ܦ೥ྼԽ͕ͳ͍
    ҹ࡮Ͱ͖Δ
    63-Ͱѻ͏͜ͱ͕Ͱ͖Δ
    γΣΞ͠΍͍͢
    ·ͩ·ͩଞʹ΋΋ͬͱ͋Δ͸ͣ

    View Slide

  44. ©2019 Yusuke Hirao
    8FCͷϙςϯγϟϧ
    ѹ౗తΧελϚΠβϒϧ

    View Slide

  45. ©2019 Yusuke Hirao
    8FCͷϙςϯγϟϧ
    Ϣʔβʔ͕೚ҙʹελΠϧΛมߋͰ͖Δ
    αΠζ͕ݻఆ͞Εͳ͍
    ϒϥ΢βͷػೳҎ্ʹɺϢʔβʔͷಛੑ΍ো֕ɾ࿝Խʹ߹ΘͤͯରԠ͕Ͱ͖Δ
    Χϥʔ͕ݻఆ͞Εͳ͍
    ΧϥʔϢχόʔαϧσβΠϯ͚ͩͰ͸ղܾͰ͖ͳ͍໰୊΋ղফͰ͖Δ͔΋
    ৭֮ಛੑɾֶशো֐΁ͷରԠ͕Ͱ͖Δ
    ϑΥϯτ͕ݻఆ͞Εͳ͍
    ϢχόʔαϧσβΠϯϑΥϯτ͚ͩͰ͸ղܾͰ͖ͳ͍໰୊΋ղফͰ͖Δ͔΋
    ֶशো֐ ಛʹࣝࣈো֐
    ΁ͷରԠ͕Ͱ͖Δ

    View Slide

  46. ©2019 Yusuke Hirao
    8FCͷϙςϯγϟϧ
    8FCͷಛੑ
    8FCͳΒͰ͸ͷՁ஋
    ͜ΕΛਂງΓ͢Δ͜ͱͰ
    ࠓޙͷଟ༷ੑ΁ͷରԠΛ͞Βʹ޿͛ΒΕΔ

    View Slide

  47. ©2019 Yusuke Hirao
    8FCͷϙςϯγϟϧ
    8FCͷՄೳੑ͸ແݶͩ

    View Slide

  48. ©2019 Yusuke Hirao
    גࣜձࣾσΟʔθϩ
    8FCΞΫηγϏϦςΟΤϯδχΞ
    ฏඌΏ͏ͯΜ
    Ϣχόʔαϧ)5.-ͱ
    8FCͷϙςϯγϟϧ
    4B$444QFDJBM"DDFTTJCJMJUZ 4B$447PM

    View Slide