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
210
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
8
6.9k
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
6.9k
Featured
See All Featured
Navigating Team Friction
lara
183
15k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Visualization
eitanlees
146
15k
Automating Front-end Workflow
addyosmani
1368
200k
Scaling GitHub
holman
459
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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/
͋Γ͕ͱ͏͍͟͝·ͨ͠
࣭ٙԠ