Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Rikiya Ihara
May 25, 2013
11

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

Rikiya Ihara

May 25, 2013
Tweet

More Decks by Rikiya Ihara

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. ຊ୊ͦͷ̍

    View full-size slide

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

    View full-size slide

  19. ྲྀߦΓ͔ͩͬͨΒ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. ҙຯͷ͋Δॱং

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. ͦΕͰ͸ɺ࣍ͷ͓୊

    View full-size slide

  43. ຊ୊ͦͷ̎

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. ରࡦɿποίϛϝιου
    ྫɿΧϯϓ࡞੒
    4UVEZ

    3FWJFX
    ൓࿦
    ποίϛ
    π
    ο
    ί
    ϛ
    ποίϛ
    ٞ࿦
    ೲಘ
    मਖ਼

    View full-size slide

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

    3FWJFX
    4UVEZ

    3FWJFX 4UVEZ

    3FWJFX

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide