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
19
NTTデータグループウェブサイトのマルチデバイス対応
Rikiya Ihara / magi
May 25, 2013
Tweet
Share
More Decks by Rikiya Ihara / magi
See All by Rikiya Ihara / magi
最速[要出典]アクセシビリティチェック
magi1125
2
220
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
8
7k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
380
ゼロから学ぶWebアクセシビリティ~導入編~
magi1125
6
2.5k
アクセシビリティに関わる職種とは?〜freee編〜
magi1125
0
21k
アクセシビリティの効果測定
magi1125
1
8.2k
電子決済等代行事業者協会 アクセシビリティ勉強会「Webアクセシビリティの概要」
magi1125
0
15k
noteアクセシビリティ勉強会 〜画像編〜
magi1125
0
6.9k
自社サービスのアクセシビリティ向上、良いパターンとアンチパターン
magi1125
0
7k
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Docker and Python
trallard
44
3.3k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Designing Experiences People Love
moore
140
23k
A designer walks into a library…
pauljervisheath
205
24k
For a Future-Friendly Web
brad_frost
176
9.6k
Writing Fast Ruby
sferik
628
61k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Code Review Best Practice
trishagee
67
18k
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/
͋Γ͕ͱ͏͍͟͝·ͨ͠
࣭ٙԠ