Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NTTデータグループウェブサイトのマルチデバイス対応
Search
Rikiya Ihara / magi
May 25, 2013
0
24
NTTデータグループウェブサイトのマルチデバイス対応
Rikiya Ihara / magi
May 25, 2013
Tweet
Share
More Decks by Rikiya Ihara / magi
See All by Rikiya Ihara / magi
アクセシビリティに取り組むメリット
magi1125
2
270
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
AIで加速するアクセシビリティのこれから
magi1125
4
780
アクセシビリティの社内浸透
magi1125
0
120
信念を持つ方法
magi1125
1
220
スマホのアクセシビリティ機能お試し大会
magi1125
0
43
『モバイルアプリアクセシビリティ入門』入門
magi1125
0
42
最速[要出典]アクセシビリティチェック
magi1125
3
380
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
26
12k
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Keith and Marios Guide to Fast Websites
keithpitt
412
23k
GraphQLとの向き合い方2022年版
quramy
49
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Mobile First: as difficult as doing things right
swwweet
225
10k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Facilitating Awesome Meetings
lara
57
6.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Transcript
None
/55σʔλάϧʔϓΣϒαΠτͷ ϚϧνσόΠεରԠ ҏݪ ྗ
͡Ίʹ w IUUQXXXOUUEBUBDPNKQKB w ʮ/55σʔλʯͰݕࡧ
ࣗݾհ w ҏݪྗ r ϏδωεɾΞʔΩςΫπ w γχΞΠϯϑΥϝʔγϣϯΞʔΩςΫτ r NPLVWB r
5XJUUFS NBHJ r 'BDFCPPL3JLJZB*IBSB
None
ࣄྫΛ௨ͯ͠ Ͳ͏͍͏ͱ͖ʹϨεϙϯγϒ ΣϒσβΠϯʢ38%ʣΛ બΜͩΒ͍͍ͷʁ 38%ΔͳΒ σβΠχϯάΠϯϒϥβͰ ࡞Βͳ͖Ό͍͚ͳ͍ͷʁ
ຊʹೖΔɺͦͷલʹ
ͰΘ͔Δʂ/55σʔλ άϧʔϓΣϒαΠτઓུ http://www.nttdata.com/jp/ja/corporate/ir/library/tool/ar/pdf/2012/ar12_J_all.pdf
/55σʔλͱʁ w ਓʑͷΒ͠Λ*5Ͱࢧ͑Δձࣾ r ۜߦৼࠐͷΈ r ඈߦػͷܦ࿏ઃܭγεςϜ r ੫ۚͷిࢠਃࠂγεςϜ r
ٹٸंͱපӃͷ࿈ܞγεςϜ w ଓ͖8FCͰʂ
ੈքͰୈҐ http://www.nttdata.com/jp/ja/corporate/ir/library/tool/ar/pdf/2012/ar12_J_all.pdf
ւ֎άϧʔϓձࣾͷਪҠ http://www.nttdata.com/jp/ja/corporate/ir/library/tool/ar/pdf/2012/ar12_J_all.pdf
άϩʔόϧاۀͷಓ http://www.nttdata.com/jp/ja/corporate/ir/library/tool/ar/pdf/2012/ar12_J_all.pdf
ٻΊΒΕΔҰମײ http://www.nttdata.com/global/en/onecontents/future.html
ϓϩδΣΫτͷҐஔ͚ͮ • ੈքنͷϦϒϥϯσΟϯά w ΣϒαΠτ ৽ͨͳίϛϡχέʔγϣϯߏஙͷ த֩తͳׂΛՌͨ͢ r ੈքʹ/55σʔλϒϥϯυΛ͑Δ r
֤ࠃͷϏδωεΛޙԡ͢͠Δ
తΛ࣮ݱ͢Δखஈ άϩʔόϧڞ௨ςϯϓϨʔτΛ ΨΠυϥΠϯͰఏڙ ֤ࠃͷखͰαΠτϦχϡʔΞϧ (MPCBM4JUF +BQBO /PSUI"NFSJDB 4XJU[FSMBOE
5VSLFZ 6OJUFE,JOHEPN #SB[JM $IJOB %FONBSL &.&" (FSNBOZ *UBMZ
֤ࠃώΞϦϯάɾௐࠪɾੳ 6TFS $POUFOU $POUFYU w֤ࠃͷఆϢʔβʔͱχʔζ wϢʔβʔςετΠϯλϏϡʔ݁Ռ w͍߹ΘͤϑΥʔϜͷ༰ wݱঢ়ͷΞΫηεϩά wͦͷࠃͰͷར༻ͷঢ়گ wίϯςϯπ
wίϯςϯπಉ࢜ͷؔੑ wίϯςϯπͷׂత wߋ৽සقઅੑ wϦχϡʔΞϧ࣌ͷՃɾআ w֤ࠃͷձࣾͷϏδωεཁ݅ wΣϒαΠτͷ,1* w֤ࠃͷڝ߹ଞࣾͷαΠτ w$.4ͷಋೖঢ়گɺӡ༻ϑϩʔ w֤छΣϒαΠτධՁϥϯΩϯά
ϓϩδΣΫτظؒɿ ઓུ ݄ʙ݄ ઃܭɺσβΠϯ ݄ʙ݄ ࣮ɺΨΠυϥΠϯ ݄ʙ݄
/55σʔλຊࣾϏϧ http://www.flickr.com/photos/peta_peta/350630421/ Photo by Hiroyuki-H
/55σʔλຊࣾʢ๛ऱʣۙͷ ͓͢͢Ίϥϯνʮ͍ͪΉΒʯ ৯ϩάɿhttp://tabelog.com/tokyo/A1313/A131307/13007585/
ຊͦͷ̍
/55σʔλ ͳͥ38%ΛબΜ͔ͩ
ͦΕ
ྲྀߦΓ͔ͩͬͨΒ
ཁ݅ʹԊ͍͔ͬͯͨΒ ϓϩδΣΫτཁ݅ɿ ϚϧνσόΠεʹରԠ ಉҰੑͷอ࣋ ϫϯιʔεͰରԠ ༻ظؒΛ͘
ΞΫηγϏϦςΟͷ֬อ
ϚϧνσόΠεʹରԠ http://wirelesswire.jp/Mobile_Market_Survey/201206131700.html ੈքओཁࠃͷεϚʔτϑΥϯීٴʢୈ࢛ظʣ
ಉҰੑͷอ࣋ w 63-ʹର͢ΔϦιʔεͷಉҰੑ w σόΠεԣஅ࣌ͷϒϥϯυͷಉҰੑ
ࢀߟɿ6"ৼΓ͚Ͱઐ༻αΠτ http://www.aeonmall.co.jp/
ϞόΠϧಛ༗ͷߦಈ͕͋Δ͔ʁ http://www.sapporobeer.jp/
ϫϯιʔεʢ)5.-ʣ Japan $.4 w ֤ࠃ͝ͱʹಠࣗͷ$.4Ͱӡ༻ w ϞόΠϧ൛Λผ)5.-Ͱग़͢ʹ େنͳվम͕ඞཁͳέʔε w ༏ઌʮ/55%"5"ϒϥϯυʯͷ౷Ұ
North America $.4 China EMEA $.4 Global Germany $.4 $.4 $.4
ࢀߟɿϫϯιʔεͰઐ༻αΠτ http://www.fujifilm.com/
༻ظؒΛ͘ http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
ΞΫηγϏϦςΟ w ʮࣾձͷެثʯͱͯ͠ɺ ੈքͷγεςϜΛ࡞Δձࣾ w ͦͷଘࡏΛ֤Ҭͷਓʹड͚ೖΕͯΒ͏ w ͦͷͨΊͷαΠτ ଟ༷ͳݴޠɾจԽɾঢ়گͰ༻͞ΕΔ ʮଟ༷ͳਓɾଟ༷ͳڥʹରԠͰ͖Δʯ
ΞΫηγϏϦςΟ
The power of the Web is in its universality. Access
by everyone regardless of disability is an essential aspect. Tim Berners-Lee Webのもつ力とはその普遍性にあり、 障害の有無にかかわらずアクセスできることは、 Webの本質的な側面のひとつである ティム・バーナーズ=リー http://www.w3.org/WAI/ http://www.mitsue.co.jp/help/accessibility.html
EBUBGPSUIFQFPQMF ʮ/55σʔλੈքதͰɺਓΛࢧ͑Δ ιϦϡʔγϣϯΛ͍ͭͬͯ͘·͢ɻʯ http://www.nttdata.com/jp/ja/corporate/profile/pr/ad/pdf/ad_toyosu_01.pdf
/55σʔλͱΞΫηγϏϦςΟ w ʮਓΛࢧ͑ΔΈΛ࡞Δʯ ͱ͍͏ͰɺΣϒͷࢥͱॏͳΔ w ʮ/55%"5"ͷإʯͰ͋Δ ΣϒαΠτͷʮࠜװʯ ΞΫηγϏϦςΟ
ϓϩδΣΫτཁ݅ͱ38% ϚϧνσόΠεʹରԠ ಉҰੑͷอ࣋ ϫϯιʔεͰରԠ ༻ظؒΛ͘
ΞΫηγϏϦςΟͷ֬อ 38%ͷࠜຊ 38%ͷಛ৭ 8%ͷج൫ 38%ʹҰ෦ؔ࿈
݁ w ϓϩδΣΫτཁ݅ͱ38%ʹੑ͋Γ w 38%Λ࠾༻ͨ͠͏͑Ͱ ʮཁ݅Λຬͨ͢Α͏ʹʯ ઃܭɾσβΠϯɾ࣮͢Δ w ͔͠͠38%ʹ͢Ε ࣗಈతʹຬͨͤΔΘ͚Ͱͳ͍
ྫ͑ɺΞΫηγϏϦςΟ
ΞΫηγϏϦςΟͱ38% w#"% ࡞Γ͕ϚζΠͱɺߏͱදݱ͕ෆҰகʹ w(00% ࡞Γ্͕ख͍ͱɺ ෳσόΠεͰՄಡੑɾૢ࡞ੑ্͕
#"% ߏͱදݱͷෆҰக w σόΠε͝ͱʹόϥόϥͷͷΛ ແཧΓ߹ମ͢Δߟ͑ํͩͱ ʮ΄͜Ζͼʯ͕ग़Δ r UBCMFཁૉΛྻ͝ͱʹͬͯGMPBUͰฒΔ r ࣅͨཁૉΛෳࠐΜͰɺ෯ʹΑͬͯදࣔɾඇදࣔ
r CPYPSEJOBMHSPVQͷ͍͗͢ ˠεΫϦʔϯϦʔμʔར༻࣌ ϒϥβͱεΫϦʔϯϦʔμʔซ༻࣌ʹ ൃੜʢݟͨͱ)5.-ߏ͕ဃʣ
ҙຯͷ͋Δॱং
38%ʹ͢Δҙຯ ʹ ಉҰੑ w σόΠε͝ͱʹόϥόϥͷߏͳΒ ແཧʹ38%ʹͤͣɺઐ༻αΠτΛ w 38%ͳΒɺը໘෯ʹ༝དྷ͢Δ෦Λ ͪΐͼͬͱௐ͢Δ͙Β͍ͷؾ࣋ͪͰ
(00% ෳσόΠεͰՄಡੑɾૢ࡞ੑ্͕ w λονσόΠεͰ ԡ͍͢͠ w ෯͕ڱͯ͘ ಡΈ͍͢
σόΠεΘ্ͣ w ϚεͰ ԡ͍͢͠ w 1$ϒϥβͰ ֦େͯ͠ݟ͍͢
ΞΫηγϏϦςΟͱ ϢʔβϏϦςΟͱͷަ w ͍ʹ͍͚͘Ͳ͑Δ ˠ ঢ়گʹΑͬͯ͑ͳ͍ w ͑ͳ͔ͬͨͷ͕͑Δ ˠ େͷ্͍͍͍ͩͨ͢͢͞Δ
ϢʔβϏϦςΟ ΞΫηγϏϦςΟ
·ͱΊ • ཁ݅ʹԊ࣮ͬͯํ๏ΛબͿ – ϫϯιʔεʹ38%Ͱͳ͍ – ӡ༻ੑͱσόΠεಛԽͷόϥϯε – ϋΠϒϦου͋ΓಘΔ w
ʮཁ݅Λຬͨ͢Α͏ʹʯ࡞Δ r ࣮ํ๏ΛܾΊͯࣗಈͰຬͨ͞Εͳ͍ – ํΛ͖ͪΜͱཱͯΔ͜ͱ͕ඞཁ
ͦΕͰɺ࣍ͷ͓
ຊͦͷ̎
σβΠϯΧϯϓѱ͔ σβΠχϯάΠϯϒϥβਖ਼͔ٛ
ͲͪΒɺ ѱʹਖ਼ٛʹͳΔͰ͠ΐ͏
38%͚ϫʔΫϑϩʔ w ΥʔλʔϑΥʔϧΛΊΑ͏ r ࣮͔ͯͯ͢͠Β͕Θ͔Δͱ ΞλϚ·ͰΔ͜ͱ͕͋Δ ઃܭ σβΠϯ ࣮ ݕূ
ൃੜʂ
38%͚ϫʔΫϑϩʔ w σβΠϯΧϯϓΛΊΑ͏ r σβΠϯ࣌Ͱ͔Βͳ͍ ্࣮ͷෆ߹͕͋Δ͔ r ΧϯϓΛԿຕ࡞ͬͯ ͦΕ݁ہࣺͯΔͷ r
ϐΫηϧύʔϑΣΫτʹ ͩ͜ΘΓ͕ͪ ˠ σβΠχϯάΠϯϒϥβͰ ΞδϟΠϧ͠Α͏
σβΠχϯάΠϯϒϥβ
͔͠͠ʂ w ͜ͷͱ͖σβΠϯ ΧϯϓΛ࡞ͬͨ w දϖʔδ͍͔ͭ͘ ʴϞδϡʔϧϦετ w ෯ͱڱ෯ͷ ύλʔϯ
ͳͥʁ w ଟ͘ͷϓϩδΣΫτϝϯόʔؔऀ r ࠃ͚ͩͰͳ͘ɺւ֎ʹଟ w Ұؙͱͳͬͯࢦ͢ʮضʯ͕ඞཁ w ͰλΠτͳεέδϡʔϧ ˠ
σβΠφʔ͕1IPUPTIPQͰ όοͱΩϝͷֆΛ࡞Δͷ͕ ߹ҙܗͷҰ൪ͷۙಓͩͬͨ
ͬ͘͟Γൺֱ ߴ͍ ˢ ͍ ˣ ࣗ༝ ѱ͍ ˣ ྑ͍ ˢ
ޮ ͍ ˣ ߴ͍ ˢ ࣮ ૣ͍ ˢ ͍ ˣ ࡞ۀ 1IPUPTIPQͰ σβΠϯΧϯϓ σβΠχϯά Πϯϒϥβ
ΧϯϓͰ࡞͚ͬͨͲ w ҎԼશͯճආͰ͖ͨ r ࣮͔ͯͯ͢͠Β͕Θ͔Δͱɺ ΞλϚ·ͰΔ͜ͱ͕͋Δ r σβΠϯ࣌Ͱ͔Βͳ͍ ্࣮ͷෆ߹͕͋Δ͔ r
ΧϯϓΛԿຕ࡞ͬͯ ͦΕ݁ہࣺͯΔͷ r ϐΫηϧύʔϑΣΫτʹͩ͜ΘΓ͕ͪ
ରࡦɿποίϛϝιου ྫɿΧϯϓ࡞ 4UVEZ 3FWJFX ποίϛ π ο ί
ϛ ποίϛ ٞ ೲಘ मਖ਼
ποίϛͰୟ͖ͳ͕ΒਐΊΔ ϫΠϠʔ Χϯϓ )5.- 4UVEZ 3FWJFX 4UVEZ 3FWJFX
4UVEZ 3FWJFX
ରࡦɿޙ࣮ϕʔεʹҠߦ w ύʔπͷల։తͳͷɺΞʔτσΟϨΫλʔ ͱ࣮ऀ͕ϖΞσβΠχϯάʢʁʣ w ৽͍͠ύʔπ1IPUPTIPQͰσβΠϯ Photo by Esti Alvarez
http://www.flickr.com/photos/esti/4638056301/
σβΠχϯάΠϯϒϥβͷਅͷར w ͦΕʮר͖ࠐΈྗʯͳͷͰ r ը໘ઃܭޙʹɺ͙͢ຊͬΆ͘ಈ͘ r ϓϩδΣΫτϝϯόʔͷࢹઢ͕ूத r ΈΜͳ͕ר͖ࠐ·ΕΔ r
εϖγϟϦετͷίϝϯτ͕ू·Δ r ୟ্͖͛ΒΕ͍ͯ͘
ΧϯϓͰר͖ࠐΈىͤ͜Δ w ͭ·Γɺׂͱ࡞ۀͰ͖Δ r ઃܭɾσβΠϯɾ࣮ͷϝϯόʔ͕ σβΠϯΧϯϓʹʮר͖ࠐ·Εʯͯ ποίϛΛ͖ͪΜͱೖΕΕΑ͍ r ͜Ε͚ͩͰɺલఏͷצҧ͍ɺ ࣮ޙͷखΓճආՄೳ
Ͱɺຊʹඞཁͳͷʁ w ϝϯόʔؒͷʠͷΓ͠Ζʡ r ϓϩδΣΫτͷઓུ ͱཁ݅ͷཧղ r Ϣʔβʔͷཧղ r σόΠεͷཧղ
r ΣϒσβΠϯͷཧղ r Σϒͷ༷ͱ τϨϯυͷཧղ w ࡞͍ͬͯΔͷΛ ࣗҎ֎ͷϝϯόʔ આ໌Ͱ͖ΔϨϕϧͰͷཧղ σ β Π φ ʔ ΤϯδχΞ σ Ο Ϩ Ϋ λ ʔ
ͷΓ͠Ζ͕ແ͍ͱʜʜ w σβΠχϯάΠϯϒϥβ͍͠ r ޡͬͨઃܭσβΠϯͷߟ͑ํΛ ԡ͚͠ΒΕ࣮ͯऀͷෛ୲͕૿͑Δ r ϓϩδΣΫτશମͰݟͨͱ͖ͷ ख͕ݮΒͣɺޮతʹͳΒͳ͍ ࣮ऀ͕ؤுΔ
͚ͩͰ0,ʁ
ͷΓ͠Ζ͕͋Εʜʜ w Ωϟϯόεঢ়گʹΑͬͯࣗ༝ʹબΔ r खॻ͖ͷϫΠϠʔϑϨʔϜ r σβΠϯΧϯϓ r ࢴࣳډϓϩτλΠϓ r
'MBTIͰ࡞ͬͨϓϩτλΠϓ r σβΠχϯάΠϯϒϥβ
ͷΓ͠ΖΛͭͳ͛Δͷʁ w νʔϜͱͯ͠ͷงғؾ r ποίϛΛೖΕ͍͢งғؾ r ποίϛΛड͚͍͢งғؾ r ଞͷϝϯόʔΛ৴པ͢Δงғؾ r
ΫϥΠΞϯτͱҰॹʹ࡞͍ͬͯ͘งғؾ ποίϛ π ο ί ϛ ποίϛ ٞ ೲಘ मਖ਼
݁ w ຊͷѱ ͷΓ͠ΖΛ࣋ͨͳ͍ਓɺ ποί·ͳ͍งғؾ w ຊͷਖ਼ٛ ͷΓ͠ΖΛ࣋ͬͨਓ͕ ποίϛ͋͏νʔϜ
͜ͷηογϣϯͷ·ͱΊ
これとあれのどちらが正しいのかと考えず、 「正しいのは何か」と考えるようにしましょう。 http://www.kurashi-no-techo.co.jp/hint/h_130501.html
http://www.kurashi-no-techo.co.jp/
͋Γ͕ͱ͏͍͟͝·ͨ͠
࣭ٙԠ