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

「タブレットファーストになってない!」から始まったWebサイトのリニューアル・運用で伝えたいこと

 「タブレットファーストになってない!」から始まったWebサイトのリニューアル・運用で伝えたいこと

「WordCamp Osaka2019」で登壇したスライドです。

やるやる詐欺が多かった自身のWebサイトのリニューアルを動かしたきっかけは「タブレットファーストになってない!」ということから始まったWebサイトのリニューアルについてお話します。

ブログ記事「タブレットファースト」になってない!から始まったWebサイトリニューアルのはなし」に書いた内容をもとに、リニューアルについて伝えたいことをお話します。
https://www.bluefieldnet.com/tablet-first-web-renewal/

More Decks by アイ@旅するイルカちゃん

Other Decks in Design

Transcript

  1. ʮλϒϨοτϑΝʔετʹͳͬͯͳ͍ʂʯ
    ͔Β࢝·ͬͨ8FCαΠτͷϦχϡʔΞϧ
    ӡ༻Ͱ఻͍͑ͨ͜ͱ
    γϟν

    View full-size slide

  2. ຊ೔ͷϝϯγϣϯ
    8FCαΠτͷϦχϡʔΞϧͷ͖͔͚ͬ
    λϒϨοτϑΝʔετͰ͋Δཧ༝
    8FCαΠτͷϦχϡʔΞϧͷʮ໨తʯ
    8FCαΠτͷϒϥϯσΟϯάͷݟ௚͠
    ࣮ࡍʹߦͬͨϦχϡʔΞϧʹ͍ͭͯ
    ࠓճͷ͓࿩͢͠Δ
    ಺༰Ͱ̇͢

    View full-size slide

  3. 海洋生物(特にイルカ)
    大好き♪
    ཱͬͯ஻ͬͯΔώτͷϓϩϑΟʔϧ
    େࡕΛϕʔεΩϟϯϓʹɺւͱ஍Ҭ׆ੑͷ
    ໌Δ͍ະདྷΛ໨ࢦ͠
    ഑৭ΞΠσΞͰັྗΛҾ͖ग़͙͢σβΠϯ͕ಘҙ
    ΩλϜϥΞΠʢΩλϜϥˋʣ
    ϑϦʔϥϯεͷւΛѪ͢Δ
    8FCσβΠφʔɾΫϦΤΠλʔ
    ւ༸ੜ෺ઐ໳ΠϥετϨʔλʔ
    ʮՄѪͯ͘Χϥϑϧͳւ༸ੜ෺Λ΋ͬͱ਎ۙʹʯ
    ίϯηϓτʹͨܵ͠ྨɺւ༸ੜ෺ͷΠϥετ੍࡞

    View full-size slide

  4. ͓࢓ࣄʹ͍ͭͯ
    σβΠϯʢ8FCɾ%51ɾΠϥετʣ
    େࡕΛڌ఺ʹւ΍஍ํΛѪ͢Δશͯͷํ΁
    ະདྷΛܨ͗૑଄͢ΔΫϦΤΠςΟϒ
    ഑৭ΞΠσΞͱ෼ੳΛ׆͔ͨ͠σβΠϯΛఏڙ

    View full-size slide

  5. ͓࢓ࣄʹ͍ͭͯ
    ՄѪͯ͘Χϥϑϧͳւ༸ੜ෺Λ΋ͬͱ਎ۙʹ
    ίϯηϓτʹͨܵ͠ྨʢΫδϥɾΠϧΧɾγϟνʣ
    ւ༸ੜ෺ʢδϯϕΤβϝͳͲʣͷΠϥετάοζ঺հ
    ਫ଒ؗϨϙ΍μΠϏϯάϩάͳͲهࡌ͍ͯ͠·͢ɻ
    ˣओͳ࡞඼͸ͪ͜Βˣ

    View full-size slide

  6. ৽αʔϏε͸͡Ί·ͨ͠ʂ
    ੍ֹ݄ͷ஍ํͷ8FC੍࡞αʔϏε
    ݱࡏߴ஌ɾ࿨ՎࢁͰ։୓த
    ϩʔΧϧ ΫϦΤʔγϣϯ

    View full-size slide

  7. 8FCαΠτͷϦχϡʔΞϧ͖͔͚ͬ
    λϒϨοτϑΝʔετʹͳͬͯͳ͍ʂ

    View full-size slide

  8. օ༷ʹ࣭໰
    λϒϨοτ୺຤
    ࣋ͬͯ·͔͢ʁ

    View full-size slide

  9. ͦ΋ͦ΋ͷ͖͔͚ͬ
    ࠷ۙɺλϒϨοτͰ΋
    8FCαΠτݟΔώτ
    ଟ͍΍Μ͔ʔɻ

    View full-size slide

  10. ͦ΋ͦ΋ͷ͖͔͚ͬ
    J1BEΛങ͍·ͨ͠
    ݄๭೔ʢฏ੒͕ऴΘΔͪΐ͏Ͳखલʣʹ
    J1BEʢJ1BENJOJʣΛങ͍·ͨ͠ɻ

    View full-size slide

  11. J1BEͰࣗ෼ͷ8FCαΠτΛݟͨΒɻɻɻ
    ่ΕͯΔ΍Μ

    View full-size slide

  12. λϒϨοτදࣔ֬ೝΛΘ͢Ε͕ͪɻɻɻ
    ͓࢓ࣄͰରԠ͍ͯͨ͠8FCαΠτͰλϒϨοτϑΝʔετʹͳͬͯͳ͍ͷ͸
    ɹ#MVF'JFMEOFUʢࣗࣾαΠτʣͷαΠτͷΈͰͨ͠ɻ
    あぁ。。。
    wεϚϗදࣔ͸͏·͍ͬͯ͘΋
    λϒϨοτʹͳΔͱͳ͔ͨ͸ͣͷ
    Χʔιϧόʔ͕ൃੜ͢Δʂ
    wλϒϨοτΛॎʹͨ͠Β໰୊ͳ͍͕
    ԣʹͨ͠Βɻɻɻ
    wͱʹ͔͘ҧ࿨ײײ͡Δɻɻɻ
    w࣮ػ֬ೝ͍ͯ͠ͳ͍ʂʂ

    View full-size slide

  13. λϒϨοτϑΝʔετͰ͋Δཧ༝
    ΞΫηεղੳ͔Βݟͨधཁ

    View full-size slide

  14. λϒϨοτϑΝʔετͰ͋ͬͨ΄͏͕ྑ͍ཧ༝
    w4&0ରࡦ
    wεϚʔτϑΥϯͷը໘͕Ͱ͔͍
    ୺຤΋͋Δ
    wλϒϨοτ୺຤ͷීٴ
    ˞ΩλϜϥௐ΂

    View full-size slide

  15. ΞΫηεղੳ͔Β๚໰ઌσόΠεΛݟΔͱ
    ͱ͋ΔαΠτͷσόΠεʢ୺຤ʣผΞΫηε
    UBCMFU

    EFTLUPQ

    NPCJMF

    View full-size slide

  16. λϒϨοτϑΝʔετͰ͋ͬͨ΄͏͕ྑ͍ཧ༝
    ஌Βͳ͍͏ͪʹ
    Α͘࢖ΘΕͯ·͢
    ೥͔Β࢖༻͍ͯ͠Δώτ͕
    ૿͍͑ͯ·͢ʢ૯຿লௐ΂ʣ

    View full-size slide

  17. ͨͩλϒϨοτ୺຤ʹ߹ΘͤΔमਖ਼͡Ό΋͍ͬͨͳ͍ʂ
    ͜Ε͔Βग़ΔεϚʔτϑΥϯ΋ը໘͕େ͖͘ͳͬͨΓ
    λϒϨοτ୺຤Λ࣋ͭώτ΋૿͍͑ͯΔ
    ͦ͏ͳͬͨ࣌ʹରԠͰ͖Δ
    αΠτͰ͋Γ͍ͨ

    View full-size slide

  18. 8FCαΠτϦχϡʔΞϧͷ໨త
    ͳͥ8FCαΠτΛϦχϡʔΞϧ͢Δ͔

    View full-size slide

  19. ·ͣ࠷ॳʹ
    λϒϨοτϑΝʔετ͕
    ΰʔϧͰ͸͋Γ·ͤΜ

    View full-size slide

  20. ౰વͰ͕͢
    ҋӢͳϦχϡʔΞϧ͸
    Ωέϯʂʂ
    ͨͩͨͩΧοί͚͕ͭͨΓͳߟ͑ͩͱ
    ʮબ͹Εͳ͍ώτʯʹͳͬͪΌ͍·͢ɻ

    View full-size slide

  21. ໨త͸ͨͩͻͱͭʁ
    ʮઓུΛ࿅Γ௚͢ʯ

    View full-size slide

  22. ઓུΛ࿅Γ௚͖͔͚ͬ͢
    ʮ#MVF'JFMEOFUʢࣗࣾʣʯ͸
    ͲΜͳαʔϏεΛఏڙ͠
    ͲΜͳώτͨͪʹಧ͚͍͔ͨΛ
    վΊΔ͜ͱ
    ϑϦʔϥϯεͷ8FCσβΠφʔ
    ͱͯ͠ಠཱ͠·ͨ͠ʂͱ͍͏Ωϟονίϐʔ

    View full-size slide

  23. ϝΠϯϏδϡΞϧ͔ΒݟͨϦχϡʔΞϧ

    View full-size slide

  24. ͞Βʹɻɻɻ

    View full-size slide

  25. 8FCαΠτϒϥϯσΟϯάͷݟ௚͠
    టष͍΋ΜͰ͕͢ɺͲΜͲΜҭͯͯΞοϓσʔτ

    View full-size slide

  26. ݕࡧΩʔϫʔυ͔ΒݟΔϒϥϯσΟϯάͷݟ௚͠
    ͱ͋Δ8FCαΠτͷݕࡧύϑΥʔϚϯε
    ຊ౰ʹདྷͯ΄͍͠
    ΩʔϫʔυͰ
    ݕࡧ͞ΕͯΔ͔ͳʁ

    View full-size slide

  27. ʮ΍Γ͍ͨ͜ͱʯʮ΍ΕΔ͜ͱʯΛॻ͖ग़͢
    ւܥͷσβΠϯ
    ւ༸ੜ෺ͷΠϥετ
    ஍Ҭߩݙɾ஍Ҭ׆ੑ
    ΧϥʔΞυόΠβʔ
    هࣄΛॻ͘࢓ࣄʢಘҙ෼
    ໺ʣ
    FUDʜ
    σβΠϯ
    Πϥετʢւ༸ੜ෺ʣ
    8FCʢσβΠϯɾίʔσΟϯά
    8PSE1SFTTߏஙʢࢠςʔϚʣ
    ഑৭ʢΧϥʔʣΞυόΠε
    ϒϩάهࣄ
    ϥΠςΟϯάʢւܥͳΒ̇ʣ
    FUDʜ
    ΍Γ͍ͨ͜ͱ Ͱ͖Δ͜ͱ

    View full-size slide

  28. ͔ͦ͜ΒʮधཁʯΛݟ͚ͭΔ
    ւܥͷσβΠϯ
    ւ༸ੜ෺ͷΠϥετ
    ஍Ҭߩݙɾ஍Ҭ׆ੑ
    ΧϥʔΞυόΠβʔ
    هࣄΛॻ͘࢓ࣄʢಘҙ෼
    ໺ʣ
    FUDʜ
    σβΠϯ
    Πϥετʢւ༸ੜ෺ʣ
    8FCʢσβΠϯɾίʔσΟϯά
    8PSE1SFTTߏஙʢࢠςʔϚʣ
    ഑৭ʢΧϥʔʣΞυόΠε
    ϒϩάهࣄ
    ϥΠςΟϯάʢւܥͳΒ̇ʣ
    FUDʜ
    ΍Γ͍ͨ͜ͱ Ͱ͖Δ͜ͱ
    ʮधཁʯ
    ߪങྗͷཪ͚ͮͷ͋Δཉٻ

    View full-size slide

  29. धཁͱ͸
    ೥ݱࡏͰʮधཁʯ͕ߴ͍ͱࢥΘΕΔ࢓ࣄͱ͸
    wྲྀߦʹࠨӈ͞Εͳ͍࢓ࣄ
    w"*ʢਓ޻஌ೳʣ͕Ͱ͖ͳ͍࢓ࣄ
    wϧʔνϯϫʔΫͰ͸ͳ͍࢓ࣄ
    ্هʹࣗ෼͕
    ʮ΍Γ͍ͨ͜ͱʯͱʮͰ͖Δ͜ͱʯ
    ซͤ࣋ͭ͜ͱͳΜͰ͢Ͷɻ

    View full-size slide

  30. ࣮ࡍʹߦͬͨ
    8FCαΠτͷϦχϡʔΞϧʹ͍ͭͯ

    View full-size slide

  31. 8PSE1SFTTͷʮςʔϚʯΛܾΊΔͭͷ֬ೝ
    wλϒϨοτ୺຤Ͱ֬ೝ
    wσϑΥϧτͰඒ͍͔֬͠ೝ
    w(1-͔Ͳ͏͔֬ೝ
    wѻ͍΍͍͢ςʔϚ͔֬ೝ
    w(VUFOCFSHରԠ͔֬ೝ

    View full-size slide

  32. ࢖༻ͨ͠8PSE1SFTTͷςʔϚ
    #VTJOFTT1SFTT IUUQTCVTJOFTTQSFTTKQ

    View full-size slide

  33. ࠷ޙ·Ͱݕ౼ͨ͠ςʔϚ
    w4OPX.POLFZʢ༗ྉʣ
    w0OF1SFTTʢҰ෦༗ྉʣ
    ଞ͍Ζ͍Ζɻɻɻ
    ༗ྉςʔϚ΋
    ߟ͑ͯ·ͨ͠

    View full-size slide

  34. ࣮ࡍʹ΍ͬͨϦχϡʔΞϧ࡞ۀΛ঺հ
    IUUQTMPDBMCZqZXIFFMDPN

    View full-size slide

  35. ࣮ࡍʹ΍ͬͨϦχϡʔΞϧ࡞ۀΛ঺հ
    ࣌୅ͷྲྀΕʹ
    ৐Δ͔͠ͳ͍ʂ
    શϖʔδΛ(VUFOCFSHԽ

    View full-size slide

  36. ࣮ࡍʹ΍ͬͨϦχϡʔΞϧ࡞ۀΛ঺հ
    ॳΊͯ:PBTU4&0Λ
    ࢖͍·ͨ͠
    ϓϥάΠϯͷޓ׵ੑΛ֬ೝ

    View full-size slide

  37. ࣮ࡍʹ΍ͬͨϦχϡʔΞϧ࡞ۀΛ঺հ
    ഑৭͸
    ʮ഑৭ΞΠσΞखாʯΛ
    ࢖͍·͢
    $44૷০ͱ8FCશମͷ഑৭

    View full-size slide

  38. ࣮ػͰͷಈ࡞֬ೝʢҰ൪େࣄͳ͜ͱʣ
    λϒϨοτʢJ1BEʣ
    εϚʔτϑΥϯʢJ1IPOFʣͰ
    ֬ೝ͠·͢
    ՄೳͰ͋Ε͹"OESPJEͳͲͷ୺຤Ͱͷ֬ೝ΋

    View full-size slide

  39. ϦχϡʔΞϧޙͷ͜ͱ
    (PPHMFλάϚωʔδϟʔΛ
    ઃஔ͠·ͨ͠
    ΞΫηεղੳͷ࠶ઃఆ
    IUUQTUBHNBOBHFSHPPHMFDPN

    View full-size slide

  40. ϦχϡʔΞϧޙͷ͜ͱʢը૾͸Ծͷ΋ͷͰઃஔʣ
    ݟམͱ͠ϙΠϯτͰ͢
    ϒϩάهࣄͷݟग़͠ฤू

    View full-size slide

  41. ݱࡏͷݟग़͠ʢ݄೔ݱࡏʣ
    ϒϩάهࣄͷݟग़͠ฤू

    View full-size slide

  42. 8FCղੳαʔϏεΛར༻ͯ͠վળΛ͠ଓ͚Δ
    ࢀߟɿόέϞϊגࣜձࣾʢIUUQTCBLFNPOPDPKQʣ
    ϒϥϯσΟϯάͱ
    ू٬͕ऑ఺ɾɾɾ

    View full-size slide

  43. ϦχϡʔΞϧޙͷޮՌ
    wຊ౰ʹҾ͔͔ͬͬͯ΄͍͠ݕࡧϫʔυ͕
    Ҿ͔͔ͬΔʢ4%(T΍8JOEZΞϓϦͳͲʣ
    wӦۀͷࡍʹɺ8FCαΠτ͚ͩͰ
    Կ΍ͬͯΔώτ͕Θ͔Γ΍͘͢ͳͬͨ
    wεϚʔτϑΥϯɾλϒϨοτ͔Βͷ
    ΞΫηε਺͕৳ͼͨ
    wઓུ͕ఆ·ͬͨʂ

    View full-size slide

  44. ·ͱΊ
    w͋Δఔ౓ͷ࣌୅ͷྲྀΕʹ৐Δ͔͠ͳ͍ΜͰ͢ʂ
    wҋӢͳϦχϡʔΞϧΑΓ
    ໨తͷ͋ΔϦχϡʔΞϧΛߟ͑Δ
    wʮϦχϡʔΞϧˏʯ
    ʢྫɿεΩϧΞοϓͷͨΊͷνϟϨϯδͳͲʣ

    View full-size slide

  45. ·ͱΊ
    8FCαΠτϦχϡʔΞϧͱͱ΋ʹ
    ࣗ਎ͷϒϥϯσΟϯάΛ
    ݟ௚͖͔͚ͬ͢ʹͳΕͨΒ
    خ͍͠Ͱ̇͢

    View full-size slide

  46. ࠓճ঺հͨ͠8FCαΠτͷ·ͱΊʢ͝ࢀߟʹʣ
    ɾ୊ࡐʹͳͬͨʮ#MVF'JFMEOFUʯͷهࣄ
    IUUQTXXXCMVFpFMEOFUDPNUBCMFUpSTUXFCSFOFXBM
    ɾλϒϨοτϑΝʔετʹؾ͔ͮͤͯ͘Εͨ:"5͞Μͷϒϩά
    IUUQTXQZBUOFUDPN Q
    ɾ࢖༻ͨ͠ςʔϚʮ#VTJOFTT1SFTTʯ
    IUUQTCVTJOFTTQSFTTKQ
    ɾϦχϡʔΞϧݕূͨ͠ʮ-PDBMCZ'MZXIFFMʯ
    IUUQTMPDBMCZqZXIFFMDPN

    View full-size slide

  47. ࠓճ঺հͨ͠8FCαΠτͷ·ͱΊʢ͝ࢀߟʹʣ
    ɾʮ഑৭ΞΠσΞखாʯ͸ΞϚκϯͰ̇
    ɾΞΫηεղੳͳͲͷ࠶ઃఆ͸ʮ(PPHMFλάϚωʔδϟʔʯ
    IUUQTUBHNBOBHFSHPPHMFDPN
    ɾαΠτݕূΛ͓ئ͍ͨ͠ʮόέϞϊגࣜձࣾʯ
    IUUQTCBLFNPOPDPKQ
    ˣ࢖༻ྫ͸ͪ͜ΒͷهࣄΛޚཡ͍ͩ͘͞ɻ
    IUUQTXXXCMVFpFMEOFUDPNDPMPS@TDIFNF@JEFB@OPUFCPPL

    View full-size slide

  48. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ

    View full-size slide