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

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

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

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

Transcript

2. ʮλϒϨοτϑΝʔετʹͳͬͯͳ͍ʂʯ
   ͔Β࢝·ͬͨ8FCαΠτͷϦχϡʔΞϧ
   ӡ༻Ͱ఻͍͑ͨ͜ͱ γϟν
3. ຊ೔ͷϝϯγϣϯ 
   8FCαΠτͷϦχϡʔΞϧͷ͖͔͚ͬ
   
   λϒϨοτϑΝʔετͰ͋Δཧ༝
   
   8FCαΠτͷϦχϡʔΞϧͷʮ໨తʯ
   
   8FCαΠτͷϒϥϯσΟϯάͷݟ௚͠
   
   ࣮ࡍʹߦͬͨϦχϡʔΞϧʹ͍ͭͯ ࠓճͷ͓࿩͢͠Δ
   ಺༰Ͱ̇͢
4. ࣗݾ঺հ
5. 海洋生物（特にイルカ） 大好き♪ ཱͬͯ஻ͬͯΔώτͷϓϩϑΟʔϧ େࡕΛϕʔεΩϟϯϓʹɺւͱ஍Ҭ׆ੑͷ
   ໌Δ͍ະདྷΛ໨ࢦ͠
   ഑৭ΞΠσΞͰັྗΛҾ͖ग़͙͢σβΠϯ͕ಘҙ ΩλϜϥ
   ΞΠʢΩλϜϥˋʣ ϑϦʔϥϯεͷւΛѪ͢Δ
   8FCσβΠφʔɾΫϦΤΠλʔ
   ւ༸ੜ෺ઐ໳ΠϥετϨʔλʔ ʮՄѪͯ͘Χϥϑϧͳւ༸ੜ෺Λ΋ͬͱ਎ۙʹʯ
   ίϯηϓτʹͨܵ͠ྨɺւ༸ੜ෺ͷΠϥετ੍࡞
6. ͓࢓ࣄʹ͍ͭͯ σβΠϯʢ8FCɾ%51ɾΠϥετʣ
   େࡕΛڌ఺ʹւ΍஍ํΛѪ͢Δશͯͷํ΁
   ະདྷΛܨ͗૑଄͢ΔΫϦΤΠςΟϒ
   ഑৭ΞΠσΞͱ෼ੳΛ׆͔ͨ͠σβΠϯΛఏڙ
7. ͓࢓ࣄʹ͍ͭͯ ՄѪͯ͘Χϥϑϧͳւ༸ੜ෺Λ΋ͬͱ਎ۙʹ
   ίϯηϓτʹͨܵ͠ྨʢΫδϥɾΠϧΧɾγϟνʣ
   ւ༸ੜ෺ʢδϯϕΤβϝͳͲʣͷΠϥετάοζ঺հ
   ਫ଒ؗϨϙ΍μΠϏϯάϩάͳͲهࡌ͍ͯ͠·͢ɻ ˣओͳ࡞඼͸ͪ͜Βˣ
8. ৽αʔϏε͸͡Ί·ͨ͠ʂ ੍ֹ݄ͷ஍ํͷ8FC੍࡞αʔϏε
   ݱࡏߴ஌ɾ࿨ՎࢁͰ։୓த ϩʔΧϧ ΫϦΤʔγϣϯ
9. 8FCαΠτͷϦχϡʔΞϧ͖͔͚ͬ λϒϨοτϑΝʔετʹͳͬͯͳ͍ʂ
10. օ༷ʹ࣭໰ λϒϨοτ୺຤
    ࣋ͬͯ·͔͢ʁ
11. ͦ΋ͦ΋ͷ͖͔͚ͬ ࠷ۙɺλϒϨοτͰ΋
    8FCαΠτݟΔώτ
    ଟ͍΍Μ͔ʔɻ
12. ͦ΋ͦ΋ͷ͖͔͚ͬ J1BEΛങ͍·ͨ͠ ݄๭೔ʢฏ੒͕ऴΘΔͪΐ͏Ͳखલʣʹ
    J1BEʢJ1BE
    NJOJʣΛങ͍·ͨ͠ɻ
13. J1BEͰࣗ෼ͷ8FCαΠτΛݟͨΒɻɻɻ ่ΕͯΔ΍Μ
14. λϒϨοτදࣔ֬ೝΛΘ͢Ε͕ͪɻɻɻ ͓࢓ࣄͰରԠ͍ͯͨ͠8FCαΠτͰλϒϨοτϑΝʔετʹͳͬͯͳ͍ͷ͸
    ɹ#MVF'JFMEOFUʢࣗࣾαΠτʣͷαΠτͷΈͰͨ͠ɻ あぁ。。。 wεϚϗදࣔ͸͏·͍ͬͯ͘΋
    λϒϨοτʹͳΔͱͳ͔ͨ͸ͣͷ
    Χʔιϧόʔ͕ൃੜ͢Δʂ
    wλϒϨοτΛॎʹͨ͠Β໰୊ͳ͍͕
    ԣʹͨ͠Βɻɻɻ
    wͱʹ͔͘ҧ࿨ײײ͡Δɻɻɻ
    w࣮ػ֬ೝ͍ͯ͠ͳ͍ʂʂ
15. λϒϨοτϑΝʔετͰ͋Δཧ༝ ΞΫηεղੳ͔Βݟͨधཁ
16. λϒϨοτϑΝʔετͰ͋ͬͨ΄͏͕ྑ͍ཧ༝ w
    4&0ରࡦ
    w
    εϚʔτϑΥϯͷը໘͕Ͱ͔͍
    
    
    ୺຤΋͋Δ
    w
    λϒϨοτ୺຤ͷීٴ ˞ΩλϜϥௐ΂
17. ΞΫηεղੳ͔Β๚໰ઌσόΠεΛݟΔͱ ͱ͋ΔαΠτͷσόΠεʢ୺຤ʣผΞΫηε UBCMFU  EFTLUPQ  NPCJMF 
18. λϒϨοτϑΝʔετͰ͋ͬͨ΄͏͕ྑ͍ཧ༝ ஌Βͳ͍͏ͪʹ
    Α͘࢖ΘΕͯ·͢ ೥͔Β࢖༻͍ͯ͠Δώτ͕
    ૿͍͑ͯ·͢ʢ૯຿লௐ΂ʣ
19. ͨͩλϒϨοτ୺຤ʹ߹ΘͤΔमਖ਼͡Ό΋͍ͬͨͳ͍ʂ ͜Ε͔Βग़ΔεϚʔτϑΥϯ΋ը໘͕େ͖͘ͳͬͨΓ
    λϒϨοτ୺຤Λ࣋ͭώτ΋૿͍͑ͯΔ ͦ͏ͳͬͨ࣌ʹରԠͰ͖Δ
    αΠτͰ͋Γ͍ͨ
20. 8FCαΠτϦχϡʔΞϧͷ໨త ͳͥ
    8FCαΠτΛϦχϡʔΞϧ͢Δ͔
21. ·ͣ࠷ॳʹ λϒϨοτϑΝʔετ͕
    ΰʔϧͰ͸͋Γ·ͤΜ
22. ౰વͰ͕͢ ҋӢͳϦχϡʔΞϧ͸
    Ωέϯʂʂ ͨͩͨͩΧοί͚͕ͭͨΓͳߟ͑ͩͱ
    ʮબ͹Εͳ͍ώτʯʹͳͬͪΌ͍·͢ɻ
23. ໨త͸ͨͩͻͱͭʁ ʮઓུΛ࿅Γ௚͢ʯ
24. ઓུΛ࿅Γ௚͖͔͚ͬ͢ ʮ#MVF'JFMEOFUʢࣗࣾʣʯ͸
    ͲΜͳαʔϏεΛఏڙ͠
    ͲΜͳώτͨͪʹಧ͚͍͔ͨΛ
    վΊΔ͜ͱ ϑϦʔϥϯεͷ8FCσβΠφʔ
    ͱͯ͠ಠཱ͠·ͨ͠ʂͱ͍͏Ωϟονίϐʔ
25. ϝΠϯϏδϡΞϧ͔ΒݟͨϦχϡʔΞϧ
26. "GUFS
27. ͞Βʹɻɻɻ
28. 8FCαΠτϒϥϯσΟϯάͷݟ௚͠ టष͍΋ΜͰ͕͢ɺͲΜͲΜҭͯͯΞοϓσʔτ
29. ݕࡧΩʔϫʔυ͔ΒݟΔϒϥϯσΟϯάͷݟ௚͠ ͱ͋Δ8FCαΠτͷݕࡧύϑΥʔϚϯε ຊ౰ʹདྷͯ΄͍͠
    ΩʔϫʔυͰ
    ݕࡧ͞ΕͯΔ͔ͳʁ
30. ʮ΍Γ͍ͨ͜ͱʯʮ΍ΕΔ͜ͱʯΛॻ͖ग़͢ ւܥͷσβΠϯ
    ւ༸ੜ෺ͷΠϥετ
    ஍Ҭߩݙɾ஍Ҭ׆ੑ
    ΧϥʔΞυόΠβʔ
    هࣄΛॻ͘࢓ࣄʢಘҙ෼ ໺ʣ
    FUDʜ σβΠϯ
    Πϥετʢւ༸ੜ෺ʣ
    8FCʢσβΠϯɾίʔσΟϯά
    8PSE1SFTTߏஙʢࢠςʔϚʣ
    ഑৭ʢΧϥʔʣΞυόΠε
    ϒϩάهࣄ
    ϥΠςΟϯάʢւܥͳΒ̇ʣ
    FUDʜ ΍Γ͍ͨ͜ͱ Ͱ͖Δ͜ͱ
31. ͔ͦ͜ΒʮधཁʯΛݟ͚ͭΔ ւܥͷσβΠϯ
    ւ༸ੜ෺ͷΠϥετ
    ஍Ҭߩݙɾ஍Ҭ׆ੑ
    ΧϥʔΞυόΠβʔ
    هࣄΛॻ͘࢓ࣄʢಘҙ෼ ໺ʣ
    FUDʜ σβΠϯ
    Πϥετʢւ༸ੜ෺ʣ
    8FCʢσβΠϯɾίʔσΟϯά
    8PSE1SFTTߏஙʢࢠςʔϚʣ
    ഑৭ʢΧϥʔʣΞυόΠε
    ϒϩάهࣄ
    ϥΠςΟϯάʢւܥͳΒ̇ʣ
    FUDʜ ΍Γ͍ͨ͜ͱ Ͱ͖Δ͜ͱ ʮधཁʯ
    ߪങྗͷཪ͚ͮͷ͋Δཉٻ
32. धཁͱ͸ ೥ݱࡏͰʮधཁʯ͕ߴ͍ͱࢥΘΕΔ࢓ࣄͱ͸ w
    ྲྀߦʹࠨӈ͞Εͳ͍࢓ࣄ
    w
    "*ʢਓ޻஌ೳʣ͕Ͱ͖ͳ͍࢓ࣄ
    w
    ϧʔνϯϫʔΫͰ͸ͳ͍࢓ࣄ ্هʹࣗ෼͕
    ʮ΍Γ͍ͨ͜ͱʯͱʮͰ͖Δ͜ͱʯ
    ซͤ࣋ͭ͜ͱͳΜͰ͢Ͷɻ
33. ࣮ࡍʹߦͬͨ
    8FCαΠτͷϦχϡʔΞϧʹ͍ͭͯ
34. 8PSE1SFTTͷʮςʔϚʯΛܾΊΔͭͷ֬ೝ w
    λϒϨοτ୺຤Ͱ֬ೝ
    w
    σϑΥϧτͰඒ͍͔֬͠ೝ
    w
    (1-͔Ͳ͏͔֬ೝ
    w
    ѻ͍΍͍͢ςʔϚ͔֬ೝ
    w
    (VUFOCFSHରԠ͔֬ೝ
35. ࢖༻ͨ͠8PSE1SFTTͷςʔϚ #VTJOFTT1SFTT IUUQTCVTJOFTTQSFTTKQ
36. ࠷ޙ·Ͱݕ౼ͨ͠ςʔϚ w
    4OPX
    .POLFZʢ༗ྉʣ
    w
    0OF1SFTTʢҰ෦༗ྉʣ
    ଞ͍Ζ͍Ζɻɻɻ ༗ྉςʔϚ΋
    ߟ͑ͯ·ͨ͠
37. ࣮ࡍʹ΍ͬͨϦχϡʔΞϧ࡞ۀΛ঺հ IUUQTMPDBMCZqZXIFFMDPN
38. ࣮ࡍʹ΍ͬͨϦχϡʔΞϧ࡞ۀΛ঺հ ࣌୅ͷྲྀΕʹ
    ৐Δ͔͠ͳ͍ʂ શϖʔδΛ(VUFOCFSHԽ
39. ࣮ࡍʹ΍ͬͨϦχϡʔΞϧ࡞ۀΛ঺հ ॳΊͯ:PBTU4&0Λ
    ࢖͍·ͨ͠ ϓϥάΠϯͷޓ׵ੑΛ֬ೝ
40. ࣮ࡍʹ΍ͬͨϦχϡʔΞϧ࡞ۀΛ঺հ ഑৭͸
    ʮ഑৭ΞΠσΞखாʯΛ
    ࢖͍·͢ $44૷০ͱ8FCશମͷ഑৭
41. ࣮ػͰͷಈ࡞֬ೝʢҰ൪େࣄͳ͜ͱʣ λϒϨοτʢJ1BEʣ
    εϚʔτϑΥϯʢJ1IPOFʣͰ
    ֬ೝ͠·͢
    ՄೳͰ͋Ε͹"OESPJEͳͲͷ୺຤Ͱͷ֬ೝ΋
42. ϦχϡʔΞϧޙͷ͜ͱ (PPHMFλάϚωʔδϟʔΛ
    ઃஔ͠·ͨ͠ ΞΫηεղੳͷ࠶ઃఆ IUUQTUBHNBOBHFSHPPHMFDPN
43. ϦχϡʔΞϧޙͷ͜ͱʢը૾͸Ծͷ΋ͷͰઃஔʣ ݟམͱ͠ϙΠϯτͰ͢ ϒϩάهࣄͷݟग़͠ฤू
44. ݱࡏͷݟग़͠ʢ݄೔ݱࡏʣ ϒϩάهࣄͷݟग़͠ฤू
45. 8FCղੳαʔϏεΛར༻ͯ͠վળΛ͠ଓ͚Δ ࢀߟɿόέϞϊגࣜձࣾʢIUUQTCBLFNPOPDPKQʣ ϒϥϯσΟϯάͱ
    ू٬͕ऑ఺ɾɾɾ
46. ϦχϡʔΞϧޙͷޮՌ w
    ຊ౰ʹҾ͔͔ͬͬͯ΄͍͠ݕࡧϫʔυ͕
    
    
    Ҿ͔͔ͬΔʢ4%(T΍8JOEZΞϓϦͳͲʣ
    w
    Ӧۀͷࡍʹɺ8FCαΠτ͚ͩͰ
    
    
    Կ΍ͬͯΔώ
    τ͕Θ͔Γ΍͘͢ͳͬͨ
    w
    εϚʔτϑΥϯɾλϒϨοτ͔Βͷ
    
    
    ΞΫηε਺͕৳ͼͨ
    w
    ઓུ͕ఆ·ͬͨʂ
47. ·ͱΊ
48. ·ͱΊ w
    
    ͋Δఔ౓ͷ࣌୅ͷྲྀΕʹ৐Δ͔͠ͳ͍ΜͰ͢ʂ
    w
    
    ҋӢͳϦχϡʔΞϧΑΓ
    
    
    ໨తͷ͋ΔϦχϡʔΞϧΛߟ͑Δ
    wʮϦχϡʔΞϧ ˏʯ
    ʢྫɿεΩϧΞοϓͷͨΊͷνϟϨϯδͳͲʣ
49. ·ͱΊ 8FCαΠτϦχϡʔΞϧͱͱ΋ʹ
    ࣗ਎ͷϒϥϯσΟϯάΛ
    ݟ௚͖͔͚ͬ͢ʹͳΕͨΒ
    خ͍͠Ͱ̇͢
50. ࠓճ঺հͨ͠8FCαΠτͷ·ͱΊʢ͝ࢀߟʹʣ ɾ୊ࡐʹͳͬͨʮ#MVF'JFMEOFUʯͷهࣄ IUUQTXXXCMVFpFMEOFUDPNUBCMFUpSTUXFCSFOFXBM ɾλϒϨοτϑΝʔετʹؾ͔ͮͤͯ͘Εͨ:"5͞Μͷϒϩά IUUQTXQZBUOFUDPN Q ɾ࢖༻ͨ͠ςʔϚʮ#VTJOFTT1SFTTʯ IUUQTCVTJOFTTQSFTTKQ ɾϦχϡʔΞϧݕূͨ͠ʮ-PDBM
    CZ
    'MZXIFFMʯ IUUQTMPDBMCZqZXIFFMDPN
51. ࠓճ঺հͨ͠8FCαΠτͷ·ͱΊʢ͝ࢀߟʹʣ ɾʮ഑৭ΞΠσΞखாʯ͸ΞϚκϯͰ̇ ɾΞΫηεղੳͳͲͷ࠶ઃఆ͸ʮ(PPHMFλάϚωʔδϟʔʯ IUUQTUBHNBOBHFSHPPHMFDPN ɾαΠτݕূΛ͓ئ͍ͨ͠ʮόέϞϊגࣜձࣾʯ IUUQTCBLFNPOPDPKQ ˣ࢖༻ྫ͸ͪ͜ΒͷهࣄΛޚཡ͍ͩ͘͞ɻ IUUQTXXXCMVFpFMEOFUDPNDPMPS@TDIFNF@JEFB@OPUFCPPL
52. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ