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

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

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

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

Transcript

1. View Slide

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

   View Slide

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

   View Slide

4. ࣗݾ঺հ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. "GUFS
    

    View Slide

27. ͞Βʹɻɻɻ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. ·ͱΊ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide