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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Rikiya Ihara / magi
May 25, 2013
34
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
NTTデータグループウェブサイトのマルチデバイス対応
Rikiya Ihara / magi
May 25, 2013
More Decks by Rikiya Ihara / magi
See All by Rikiya Ihara / magi
アクセシビリティに取り組むメリット
magi1125
2
340
CMS管理画面のアクセシビリティ
magi1125
8
2.8k
AIで加速するアクセシビリティのこれから
magi1125
4
1.1k
アクセシビリティの社内浸透
magi1125
1
200
信念を持つ方法
magi1125
2
290
スマホのアクセシビリティ機能お試し大会
magi1125
1
86
『モバイルアプリアクセシビリティ入門』入門
magi1125
1
96
最速[要出典]アクセシビリティチェック
magi1125
4
520
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
55
16k
Featured
See All Featured
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
370
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
340
Thoughts on Productivity
jonyablonski
76
5.3k
Rebuilding a faster, lazier Slack
samanthasiow
85
9.6k
Designing for Performance
lara
611
70k
Building an army of robots
kneath
306
46k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
640
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
180
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
3.9k
WENDY [Excerpt]
tessaabrams
11
38k
It's Worth the Effort
3n
188
29k
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/
͋Γ͕ͱ͏͍͟͝·ͨ͠
࣭ٙԠ