NTTデータグループウェブサイトのマルチデバイス対応

Transcript

1. View Slide

2. /55σʔλάϧʔϓ΢ΣϒαΠτͷ
   ϚϧνσόΠεରԠ
   ҏݪ ྗ໵
   

   View Slide

3. ͸͡Ίʹ
   w IUUQXXXOUUEBUBDPNKQKB
   w ʮ/55σʔλʯͰݕࡧ
   

   View Slide

4. ࣗݾ঺հ
   w ҏݪྗ໵
   r ϏδωεɾΞʔΩςΫπ
   w γχΞΠϯϑΥϝʔγϣϯΞʔΩςΫτ
   r NPLVWB
   r 5XJUUFS NBHJ
   r 'BDFCPPL3JLJZB*IBSB
   

   View Slide

5. View Slide

6. ࣄྫΛ௨ͯ͠
   Ͳ͏͍͏ͱ͖ʹϨεϙϯγϒ
   ΢ΣϒσβΠϯʢ38%ʣΛ
   બΜͩΒ͍͍ͷʁ
   38%΍ΔͳΒ
   σβΠχϯάΠϯϒϥ΢βͰ
   ࡞Βͳ͖Ό͍͚ͳ͍ͷʁ
   

   View Slide

7. ຊ୊ʹೖΔɺͦͷલʹ
   

   View Slide

8. ෼ͰΘ͔Δʂ/55σʔλ
   άϧʔϓ΢ΣϒαΠτઓུ
   http://www.nttdata.com/jp/ja/corporate/ir/library/tool/ar/pdf/2012/ar12_J_all.pdf
   

   View Slide

9. /55σʔλͱ͸ʁ
   w ਓʑͷ฻Β͠Λ*5Ͱࢧ͑Δձࣾ
   r ۜߦৼࠐͷ࢓૊Έ
   r ඈߦػͷܦ࿏ઃܭγεςϜ
   r ੫ۚͷిࢠਃࠂγεςϜ
   r ٹٸंͱපӃͷ࿈ܞγεςϜ
   w ଓ͖͸8FCͰʂ
   

   View Slide

10. ੈքͰୈҐ
    http://www.nttdata.com/jp/ja/corporate/ir/library/tool/ar/pdf/2012/ar12_J_all.pdf
    

    View Slide

11. ւ֎άϧʔϓձࣾ਺ͷਪҠ
    http://www.nttdata.com/jp/ja/corporate/ir/library/tool/ar/pdf/2012/ar12_J_all.pdf
    

    View Slide

12. άϩʔόϧاۀ΁ͷಓ
    http://www.nttdata.com/jp/ja/corporate/ir/library/tool/ar/pdf/2012/ar12_J_all.pdf
    

    View Slide

13. ٻΊΒΕΔҰମײ
    http://www.nttdata.com/global/en/onecontents/future.html
    

    View Slide

14. ϓϩδΣΫτͷҐஔ͚ͮ
    • ੈքن໛ͷϦϒϥϯσΟϯά
    w ΢ΣϒαΠτ͸
    ৽ͨͳίϛϡχέʔγϣϯߏஙͷ
    த֩తͳ໾ׂΛՌͨ͢
    r ੈքʹ/55σʔλϒϥϯυΛ఻͑Δ
    r ֤ࠃͷϏδωεΛޙԡ͢͠Δ
    

    View Slide

15. ໨తΛ࣮ݱ͢Δखஈ
    άϩʔόϧڞ௨ςϯϓϨʔτΛ
    ΨΠυϥΠϯͰఏڙ
    ֤ࠃͷखͰαΠτϦχϡʔΞϧ
    (MPCBM4JUF
    +BQBO
    /PSUI"NFSJDB
    4XJU[FSMBOE
    5VSLFZ
    6OJUFE,JOHEPN
    #SB[JM
    $IJOB
    %FONBSL
    &.&"
    (FSNBOZ
    *UBMZ
    

    View Slide

16. ֤ࠃώΞϦϯάɾௐࠪɾ෼ੳ
    6TFS
    $POUFOU $POUFYU
    w֤ࠃͷ૝ఆϢʔβʔͱχʔζ
    wϢʔβʔςετ΍ΠϯλϏϡʔ݁Ռ
    w໰͍߹ΘͤϑΥʔϜͷ಺༰
    wݱঢ়ͷΞΫηεϩά
    wͦͷࠃͰͷར༻୺຤ͷঢ়گ
    wίϯςϯπ໨࿥
    wίϯςϯπಉ࢜ͷؔ܎ੑ
    wίϯςϯπͷ໾ׂ΍໨త
    wߋ৽ස౓΍قઅੑ
    wϦχϡʔΞϧ࣌ͷ௥Ճɾ࡟আ
    w֤ࠃͷձࣾͷϏδωεཁ݅
    w΢ΣϒαΠτͷ,1*
    w֤ࠃͷڝ߹ଞࣾͷαΠτ
    w$.4ͷಋೖঢ়گɺӡ༻ϑϩʔ
    w֤छ΢ΣϒαΠτධՁϥϯΩϯά
    

    View Slide

17. ϓϩδΣΫτظؒɿ໿൒೥
    ઓུ
    ೥ ݄ʙ݄
    ઃܭɺσβΠϯ
    ೥ ݄ʙ݄
    ࣮૷ɺΨΠυϥΠϯ
    ೥ ݄ʙ݄
    /55σʔλຊࣾϏϧ
    http://www.flickr.com/photos/peta_peta/350630421/
    Photo by Hiroyuki-H
    

    View Slide

18. /55σʔλຊࣾʢ๛ऱʣ෇ۙͷ
    ͓͢͢Ίϥϯνʮ͍ͪΉΒʯ
    ৯΂ϩάɿhttp://tabelog.com/tokyo/A1313/A131307/13007585/
    

    View Slide

19. ຊ୊ͦͷ̍
    

    View Slide

20. /55σʔλ͸
    ͳͥ38%ΛબΜ͔ͩ
    

    View Slide

21. ͦΕ͸
    

    View Slide

22. ྲྀߦΓ͔ͩͬͨΒ
    

    View Slide

23. ཁ݅ʹԊ͍͔ͬͯͨΒ
    ϓϩδΣΫτཁ݅ɿ
    ϚϧνσόΠεʹରԠ
    ಉҰੑͷอ࣋
    ϫϯιʔεͰରԠ
    ଱༻ظؒΛ௕͘
    ΞΫηγϏϦςΟͷ֬อ
    

    View Slide

24. ϚϧνσόΠεʹରԠ
    http://wirelesswire.jp/Mobile_Market_Survey/201206131700.html
    ੈքओཁࠃͷεϚʔτϑΥϯීٴ཰ʢ೥ୈ࢛൒ظʣ
    

    View Slide

25. ಉҰੑͷอ࣋
    w 63-ʹର͢ΔϦιʔεͷಉҰੑ
    w σόΠεԣஅ࣌ͷϒϥϯυͷಉҰੑ
    

    View Slide

26. ࢀߟɿ6"ৼΓ෼͚Ͱઐ༻αΠτ
    http://www.aeonmall.co.jp/
    

    View Slide

27. ϞόΠϧಛ༗ͷߦಈ͕͋Δ͔ʁ
    http://www.sapporobeer.jp/
    

    View Slide

28. ϫϯιʔεʢ)5.-ʣ
    Japan
    $.4
    w ֤ࠃ͝ͱʹಠࣗͷ$.4Ͱӡ༻
    w ϞόΠϧ൛Λผ)5.-Ͱग़͢ʹ͸
    େن໛ͳվम͕ඞཁͳέʔε΋
    w ༏ઌ͸ʮ/55%"5"ϒϥϯυʯͷ౷Ұ
    North
    America
    $.4
    China EMEA
    $.4
    Global Germany
    $.4
    $.4 $.4
    

    View Slide

29. ࢀߟɿϫϯιʔεͰઐ༻αΠτ
    http://www.fujifilm.com/
    

    View Slide

30. ଱༻ظؒΛ௕͘
    http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
    

    View Slide

31. ΞΫηγϏϦςΟ
    w ʮࣾձͷެثʯͱͯ͠ɺ
    ੈքͷγεςϜΛ࡞Δձࣾ
    w ͦͷଘࡏΛ֤஍Ҭͷਓʹड͚ೖΕͯ΋Β͏
    w ͦͷͨΊͷαΠτ͸
    ଟ༷ͳݴޠɾจԽɾঢ়گͰ࢖༻͞ΕΔ
    ʮଟ༷ͳਓɾଟ༷ͳ؀ڥʹରԠͰ͖Δʯ
    ΞΫηγϏϦςΟ
    

    View Slide

32. 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
    

    View Slide

33. EBUBGPSUIFQFPQMF
    ʮ/55σʔλ͸ੈքதͰɺਓΛࢧ͑Δ
    ιϦϡʔγϣϯΛ͍ͭͬͯ͘·͢ɻʯ
    http://www.nttdata.com/jp/ja/corporate/profile/pr/ad/pdf/ad_toyosu_01.pdf
    

    View Slide

34. /55σʔλͱΞΫηγϏϦςΟ
    w ʮਓΛࢧ͑Δ࢓૊ΈΛ࡞Δʯ
    ͱ͍͏఺Ͱɺ΢Σϒͷࢥ૝ͱॏͳΔ
    w ʮ/55%"5"ͷإʯͰ͋Δ
    ΢ΣϒαΠτͷʮࠜװʯ͸
    ΞΫηγϏϦςΟ
    

    View Slide

35. ϓϩδΣΫτཁ݅ͱ38%
    ϚϧνσόΠεʹରԠ
    ಉҰੑͷอ࣋
    ϫϯιʔεͰରԠ
    ଱༻ظؒΛ௕͘
    ΞΫηγϏϦςΟͷ֬อ
    38%ͷࠜຊ
    38%ͷಛ৭
    8%ͷج൫
    38%ʹҰ෦ؔ࿈
    

    View Slide

36. ݁࿦
    w ϓϩδΣΫτཁ݅ͱ38%ʹ਌࿨ੑ͋Γ
    w 38%Λ࠾༻ͨ͠͏͑Ͱ
    ʮཁ݅Λຬͨ͢Α͏ʹʯ
    ઃܭɾσβΠϯɾ࣮૷͢Δ
    w ͔͠͠38%ʹ͢Ε͹
    ࣗಈతʹຬͨͤΔΘ͚Ͱ͸ͳ͍
    ྫ͑͹ɺΞΫηγϏϦςΟ
    

    View Slide

37. ΞΫηγϏϦςΟͱ38%
    w#"%
    ࡞Γ͕ϚζΠͱɺߏ଄ͱදݱ͕ෆҰகʹ
    w(00%
    ࡞Γ্͕ख͍ͱɺ
    ෳ਺σόΠεͰՄಡੑɾૢ࡞ੑ͕޲্
    

    View Slide

38. #"%
    ߏ଄ͱදݱͷෆҰக
    w σόΠε͝ͱʹόϥόϥͷ΋ͷΛ
    ແཧ΍Γ߹ମ͢Δߟ͑ํͩͱ
    ʮ΄͜Ζͼʯ͕ग़Δ
    r UBCMFཁૉΛྻ͝ͱʹ੾ͬͯGMPBUͰฒ΂Δ
    r ࣅͨཁૉΛෳ਺࢓ࠐΜͰɺ෯ʹΑͬͯදࣔɾඇදࣔ
    r CPYPSEJOBMHSPVQͷ࢖͍͗͢
    ˠεΫϦʔϯϦʔμʔར༻࣌΍
    ϒϥ΢βͱεΫϦʔϯϦʔμʔซ༻࣌ʹ
    ໰୊ൃੜʢݟͨ໨ͱ)5.-ߏ଄͕ဃ཭ʣ
    

    View Slide

39. ҙຯͷ͋Δॱং
    

    View Slide

40. 38%ʹ͢Δҙຯ ʹ ಉҰੑ
    w σόΠε͝ͱʹόϥόϥͷߏ੒ͳΒ
    ແཧʹ38%ʹͤͣɺઐ༻αΠτΛ
    w 38%ͳΒɺը໘෯ʹ༝དྷ͢Δ෦෼Λ
    ͪΐͼͬͱௐ੔͢Δ͙Β͍ͷؾ࣋ͪͰ
    

    View Slide

41. (00%
    ෳ਺σόΠεͰՄಡੑɾૢ࡞ੑ͕޲্
    w λονσόΠεͰ
    ԡ͠΍͍͢
    w ෯͕ڱͯ͘΋
    ಡΈ΍͍͢
    

    View Slide

42. σόΠε໰Θͣ޲্
    w Ϛ΢εͰ΋
    ԡ͠΍͍͢
    w 1$ϒϥ΢βͰ
    ֦େͯ͠΋ݟ΍͍͢
    

    View Slide

43. ΞΫηγϏϦςΟͱ
    ϢʔβϏϦςΟͱͷަ఺
    w ࢖͍ʹ͍͚͘Ͳ࢖͑Δ
    ˠ ঢ়گʹΑͬͯ͸࢖͑ͳ͍
    w ࢖͑ͳ͔ͬͨ΋ͷ͕࢖͑Δ
    ˠ େ੎ͷ࢖͍΍͢͞΋͍͍ͩͨ޲্͢Δ
    ϢʔβϏϦςΟ
    ΞΫηγϏϦςΟ
    

    View Slide

44. ·ͱΊ
    • ཁ݅ʹԊ࣮ͬͯ૷ํ๏ΛબͿ
    – ϫϯιʔεʹ38%Ͱ͸ͳ͍
    – ӡ༻ੑͱσόΠεಛԽͷόϥϯε
    – ϋΠϒϦου΋͋ΓಘΔ
    w ʮཁ݅Λຬͨ͢Α͏ʹʯ࡞Δ
    r ࣮૷ํ๏ΛܾΊͯ΋ࣗಈͰ͸ຬͨ͞Εͳ͍
    – ํ਑Λ͖ͪΜͱཱͯΔ͜ͱ͕ඞཁ
    

    View Slide

45. ͦΕͰ͸ɺ࣍ͷ͓୊
    

    View Slide

46. ຊ୊ͦͷ̎
    

    View Slide

47. σβΠϯΧϯϓ͸ѱ͔
    σβΠχϯάΠϯϒϥ΢β͸ਖ਼͔ٛ
    

    View Slide

48. ͲͪΒ΋ɺ
    ѱʹ΋ਖ਼ٛʹ΋ͳΔͰ͠ΐ͏
    

    View Slide

49. 38%޲͚ϫʔΫϑϩʔ
    w ΢ΥʔλʔϑΥʔϧΛ΍ΊΑ͏
    r ͢΂࣮ͯ૷͔ͯ͠Β໰୊͕Θ͔Δͱ
    ΞλϚ·Ͱ໭Δ͜ͱ͕͋Δ
    ઃܭ
    σβΠϯ
    ࣮૷
    ݕূ
    ໰୊ൃੜʂ
    

    View Slide

50. 38%޲͚ϫʔΫϑϩʔ
    w σβΠϯΧϯϓΛ΍ΊΑ͏
    r σβΠϯ࣌఺Ͱ͸෼͔Βͳ͍
    ࣮૷্ͷෆ౎߹͕͋Δ͔΋
    r ΧϯϓΛԿຕ΋࡞ͬͯ΋
    ͦΕ͸݁ہࣺͯΔ΋ͷ
    r ϐΫηϧύʔϑΣΫτʹ
    ͩ͜ΘΓ͕ͪ
    ˠ σβΠχϯάΠϯϒϥ΢βͰ
    ΞδϟΠϧ͠Α͏
    

    View Slide

51. σβΠχϯάΠϯϒϥ΢β
    

    View Slide

52. ͔͠͠ʂ
    w ͜ͷͱ͖͸σβΠϯ
    ΧϯϓΛ࡞ͬͨ
    w ୅දϖʔδ͍͔ͭ͘
    ʴϞδϡʔϧϦετ
    w ޿෯ͱڱ෯ͷ
    ύλʔϯ
    

    View Slide

53. ͳͥʁ
    w ଟ͘ͷϓϩδΣΫτϝϯόʔ΍ؔ܎ऀ
    r ࠃ಺͚ͩͰͳ͘ɺւ֎ʹ΋ଟ਺
    w Ұؙͱͳͬͯ໨ࢦ͢ʮضʯ͕ඞཁ
    w Ͱ΋λΠτͳεέδϡʔϧ
    ˠ σβΠφʔ͕1IPUPTIPQͰ
    όοͱΩϝͷֆΛ࡞Δͷ͕
    ߹ҙܗ੒΁ͷҰ൪ͷۙಓͩͬͨ
    

    View Slide

54. ͬ͘͟Γൺֱ
    ߴ͍ ˢ
    ௿͍ ˣ
    ࣗ༝౓
    ѱ͍ ˣ
    ྑ͍ ˢ
    ޮ཰
    ௿͍ ˣ
    ߴ͍ ˢ
    ஧࣮౓
    ૣ͍ ˢ
    ஗͍ ˣ
    ࡞ۀ଎౓
    1IPUPTIPQͰ
    σβΠϯΧϯϓ
    σβΠχϯά
    Πϯϒϥ΢β
    

    View Slide

55. ΧϯϓͰ࡞͚ͬͨͲ
    w ҎԼ͸શͯճආͰ͖ͨ
    r ͢΂࣮ͯ૷͔ͯ͠Β໰୊͕Θ͔Δͱɺ
    ΞλϚ·Ͱ໭Δ͜ͱ͕͋Δ
    r σβΠϯ࣌఺Ͱ͸෼͔Βͳ͍
    ࣮૷্ͷෆ౎߹͕͋Δ͔΋
    r ΧϯϓΛԿຕ΋࡞ͬͯ΋
    ͦΕ͸݁ہࣺͯΔ΋ͷ
    r ϐΫηϧύʔϑΣΫτʹͩ͜ΘΓ͕ͪ
    

    View Slide

56. ରࡦɿποίϛϝιου
    ྫɿΧϯϓ࡞੒
    4UVEZ
    
    3FWJFX
    ൓࿦
    ποίϛ
    π
    ο
    ί
    ϛ
    ποίϛ
    ٞ࿦
    ೲಘ
    मਖ਼
    

    View Slide

57. ποίϛͰୟ͖ͳ͕ΒਐΊΔ
    ϫΠϠʔ
    Χϯϓ
    )5.-
    4UVEZ
    
    3FWJFX
    4UVEZ
    
    3FWJFX 4UVEZ
    
    3FWJFX
    

    View Slide

58. ରࡦɿޙ൒͸࣮૷ϕʔεʹҠߦ
    w ύʔπͷల։తͳ΋ͷ͸ɺΞʔτσΟϨΫλʔ
    ͱ࣮૷ऀ͕ϖΞσβΠχϯάʢʁʣ
    w ৽͍͠ύʔπ͸1IPUPTIPQͰσβΠϯ
    Photo by Esti Alvarez
    http://www.flickr.com/photos/esti/4638056301/
    

    View Slide

59. σβΠχϯάΠϯϒϥ΢βͷਅͷར఺
    w ͦΕ͸ʮר͖ࠐΈྗʯͳͷͰ͸
    r ը໘ઃܭޙʹɺ͙͢ຊ෺ͬΆ͘ಈ͘
    r ϓϩδΣΫτϝϯόʔͷࢹઢ͕ूத
    r ΈΜͳ͕ר͖ࠐ·ΕΔ
    r εϖγϟϦετͷίϝϯτ͕ू·Δ
    r ୟ্͖͛ΒΕ͍ͯ͘
    

    View Slide

60. ΧϯϓͰ΋ר͖ࠐΈ͸ىͤ͜Δ
    w ͭ·Γɺ໾ׂͱ࡞ۀ෺͸෼཭Ͱ͖Δ
    r ઃܭɾσβΠϯɾ࣮૷ͷϝϯόʔ͕
    σβΠϯΧϯϓʹʮר͖ࠐ·Εʯͯ
    ποίϛΛ͖ͪΜͱೖΕΕ͹Α͍
    r ͜Ε͚ͩͰɺલఏͷצҧ͍΍ɺ
    ࣮૷ޙͷख໭Γ͸ճආՄೳ
    

    View Slide

61. Ͱ͸ɺຊ౰ʹඞཁͳͷ͸ʁ
    w ϝϯόʔؒͷʠͷΓ͠Ζʡ
    r ϓϩδΣΫτͷઓུ
    ͱཁ݅ͷཧղ
    r Ϣʔβʔͷཧղ
    r σόΠεͷཧղ
    r ΢ΣϒσβΠϯͷཧղ
    r ΢Σϒͷ࢓༷ͱ
    τϨϯυͷཧղ
    w ࡞͍ͬͯΔ΋ͷΛ
    ࣗ෼Ҏ֎ͷϝϯόʔ΋
    આ໌Ͱ͖ΔϨϕϧͰͷཧղ
    σ
    β
    Π
    φ
    ʔ
    ΤϯδχΞ
    σ
    Ο
    Ϩ
    Ϋ
    λ
    ʔ
    

    View Slide

62. ͷΓ͠Ζ͕ແ͍ͱʜʜ
    w σβΠχϯάΠϯϒϥ΢β΋೉͍͠
    r ޡͬͨઃܭ΍σβΠϯͷߟ͑ํΛ
    ԡ͠෇͚ΒΕ࣮ͯ૷ऀͷෛ୲͕૿͑Δ
    r ϓϩδΣΫτશମͰݟͨͱ͖ͷ
    ख਺͕ݮΒͣɺޮ཰తʹ͸ͳΒͳ͍
    ࣮૷ऀ͕ؤுΔ
    ͚ͩͰ0,ʁ
    

    View Slide

63. ͷΓ͠Ζ͕͋Ε͹ʜʜ
    w Ωϟϯόε͸ঢ়گʹΑͬͯࣗ༝ʹબ΂Δ
    r खॻ͖ͷϫΠϠʔϑϨʔϜ
    r σβΠϯΧϯϓ
    r ࢴࣳډϓϩτλΠϓ
    r 'MBTIͰ࡞ͬͨϓϩτλΠϓ
    r σβΠχϯάΠϯϒϥ΢β
    

    View Slide

64. ͷΓ͠ΖΛͭͳ͛Δͷ͸ʁ
    w νʔϜͱͯ͠ͷงғؾ
    r ποίϛΛೖΕ΍͍͢งғؾ
    r ποίϛΛड͚΍͍͢งғؾ
    r ଞͷϝϯόʔΛ৴པ͢Δงғؾ
    r ΫϥΠΞϯτͱҰॹʹ࡞͍ͬͯ͘งғؾ
    ൓࿦
    ποίϛ
    π
    ο
    ί
    ϛ
    ποίϛ
    ٞ࿦
    ೲಘ
    मਖ਼
    

    View Slide

65. ݁࿦
    w ຊ౰ͷѱ͸
    ͷΓ͠ΖΛ࣋ͨͳ͍ਓɺ
    ποί·ͳ͍งғؾ
    w ຊ౰ͷਖ਼ٛ͸
    ͷΓ͠ΖΛ࣋ͬͨਓ͕
    ποίϛ͋͏νʔϜ
    

    View Slide

66. ͜ͷηογϣϯͷ·ͱΊ
    

    View Slide

67. これとあれのどちらが正しいのかと考えず、
    「正しいのは何か」と考えるようにしましょう。
    http://www.kurashi-no-techo.co.jp/hint/h_130501.html
    

    View Slide

68. http://www.kurashi-no-techo.co.jp/
    

    View Slide

69. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide

70. ࣭ٙԠ౴
    

    View Slide