フリーランスWebデザイナーの WordPress 案件ワークフローとお見積り (Web用簡易版)

Transcript

1. 1.

   Nukaga Junko ϑϦʔϥϯεWebσβΠφʔͷ
 WordPress Ҋ݅ϫʔΫϑϩʔͱ͓ݟੵΓ WordBench ௕໺ / WEBެ։༻؆қ൛

2. 2.

   ֹլॱࢠ Nukaga Junko Profile ϑϦʔϥϯεͷWebσβΠφʔ WordCamp Kansai 2014 ࣮ߦҕһ௕ σδλϧΩϡʔϒ

   νʔϜΊ૊ 2014೥உ໦ౡ΁Ҡॅɻ
 NPO๏ਓஉ໦ౡਤॻؗɹཧࣄ௕
 WordPress 4.7 ίΞίϯτϦϏϡʔλʔ ɹ nukaga ɹɹnukagajunko
3. 3.

   ੍࡞ձࣾ΁ೖࣾ 1999 σβΠϯɾσΟϨΫγϣϯ ΨϥέʔαΠτʢezweb HDMLʣ
 LϞʔυɹςʔϒϧϨΠΞ΢τ ୈ2ͷ੍࡞ձࣾ΁ 2002 σβΠϯɾσΟϨΫγϣϯ FlashɹςʔϒϧϨΠΞ΢τ͔ΒCSS΁


   γεςϜҊ݅ଟ͠ ϑϦʔϥϯεʹ 2006 σβΠϯɾσΟϨΫγϣϯɾίʔσΟϯά EίϚʔεɹָఱɹYahoo Movable type WordPress ΛϝΠϯʹ 2011 σβΠϯɾσΟϨΫγϣϯɾίʔσΟϯάɾߏங εϚʔτϑΥϯ
 Ϩεϙϯγϒ
4. 4.

   ͓࢓ࣄͷελΠϧ உ໦ౡਤॻؗ ཧࣄ௕ ϑϦʔϥϯε WordPress Web DTP ݸਓࣄۀओ Ί૊ νʔϜͷҰһͱͯ͠

   σβΠϯΛ୲౰ ೜ऀ ༗ݶձࣾϝΨωΠυ औక໾
5. 5.

   ͓࢓ࣄͷ্Ͱͷ໾ׂ σΟϨΫγϣϯ ϥΠςΟϯά σβΠϯ ίʔσΟϯά ߏங ࣸਅ ৭࠼ઃܭ

6. 6.

   ֹۚͱͰ͖Δ͜ͱͷ݉Ͷ߹͍ σΟϨΫγϣϯ ϥΠςΟϯά σβΠϯ ίʔσΟϯά ߏங ࣸਅ ࢠςʔϚ࢖༻ ৭࠼ઃܭ

7. 7.

   ͲΜͳ෩ʹରԠ͢Δʁ εϚʔτϑΥϯରԠ Ϩεϙϯγϒʁ εϚʔτϑΥϯ༻αΠτʁ

8. 8.

   σΟϨΫγϣϯඅ ਐߦ؅ཧඅ͸ඞ͍ͣͨͩ͘ɻ ଧͪ߹Θͤ΍اըఏҊʹ΋අ༻͕͔͔͍ͬͯ Δɻ ਓ೔ʁϖʔδ਺ʁ ΫϥΠΞϯτ͕Θ͔Γ΍͍͢ܗ͕͍͍Μ͡Ό ͳ͍͔ͳɻ ΘΓͱ࠷ऴతʹಉ͘͡Β͍ͷֹۚʹͳΔɻ WordPressͷ৔߹ɺݻఆϖʔδͷ੍࡞ΛΫϥ ΠΞϯτଆ͕͢Δ৔߹΋ɻ

   ͓ݟੵΓ ෼ׂ෷͍΍ॿ੒ۚͷ૬ஊʹ΋ͷΔ αΠτΛ࡞Δͱ͍͏ͷ͸͍҆ങ͍෺Ͱ͸ͳ͍ɻ
9. 9.

   σΟϨΫλʔͱͯ͠ؾΛ͚͍ͭͯΔ͜ͱ ΫϥΠΞϯτͷཉ͍͠΋ͷ ΫϥΠΞϯτͷఏࣔͯ͘͠Δ͜ͱʹཉ͍͠΋ͷͰ ͸ͳ͍৔߹͕͋ΔɻޮՌͳͷ͔σβΠϯͳͷ͔ɻ ͦΕ͸ϢʔβʔͷٻΊΔ͜ͱͱ߹͍ͬͯΔ͔ɻ ֹۚͱ࡞ۀྔ ֹۚͱ࡞ۀྔͷόϥϯεΛݟΔɻ ༏ઌॱҐ ࡞Δ΋ͷʹରͯ͠ͷ༏ઌॱҐΛ͔ͬ͠Γ ͱೝࣝ߹ΘͤΛ͢Δɻ

   ࠷ॳʹ͖ͪΜͱ఻͑Δ Ͱ͖Δ͜ͱɺͰ͖ͳ͍͜ͱɻ௥Ճྉۚʹ ͍ͭͯɻೲظʹ͍ͭͯɻSEOʹ͍ͭͯɻ ਓͱ࢓ࣄΛ͍ͯ͠Δ ΫϥΠΞϯτ΋ਓͩ͠ɺνʔϜϝϯόʔ΋ ਓͰ͋ΔɻͲͪΒ΋कΔ࢓ࣄΛ͢Δɻ ϨεϙϯγϒʢϞόΠϧରԠʣ ରԠϒϥ΢βʹ͍ͭͯɻϨεϙϯγϒσβΠϯ࣌Ϟ όΠϧ෼͸ϫΠϠʔͷΈ͋͛Δ͜ͱ΋ɻϐΫηϧύʔ ϑΣΫτΛٻΊΔͱίετ͕͔͔Δͱ͍͏ҙࣝɻ —
10. 10.

    σβΠφʔͱͯ͠ؾΛ͚͍ͭͯΔ͜ͱ ΞΫηγϏϦςΟ΁ͷ഑ྀ ίϯτϥετ΍จࣈͷେ͖͞ͳͲ࠷௿ݶ ͷΞΫηγϏϦςΟ΁ͷ഑ྀ ԿΛ఻͍͑ͨͷ͔ ΫϥΠΞϯτ͕ͦͷαΠτͰԿΛ఻͑ͨ ͍͔ RetinaରԠ༻σʔλ RetinaରԠ༻ͷσʔλͷ༻ҙ ίʔσΟϯά͠΍͍͢σβΠϯ

    ༨നͷϧʔϧ෇͚ɺϨεϙϯγϒΛҙࣝɺ WordPressͷ৔߹ςϯϓϨʔτΛσβΠϯ͠ ͍ͯΔͱ͍͏ҙࣝ ίʔσΟϯά͠΍͍͢σʔλ σβΠϯΞϓϦέʔγϣϯͷ૬ஊɺϨΠϠʔ ෼͚ɺϨΠϠʔ໊ɺͰ͖Δ͚ͩϏοτϚο ϓʹ͠ͳ͍ɻϑΥϯτ͕Θ͔ΔΑ͏ʹ͢Δɻ
11. 11.

    Ҋ݅A

12. 12.

    Ҋ݅AͰͷ໾ׂ෼୲ σΟϨΫγϣϯ ϥΠςΟϯά σβΠϯ ίʔσΟϯά ߏங ࣸਅ ৭࠼ઃܭ ௕࡚ͷ༏लϓϩάϥϚʔK͞Μ

13. 13.

    Bootstrap ϫΠϠʔϑϨʔϜ bitbucket git Sass css Gulp.js ϏϧυγεςϜ Ҋ݅Aπʔϧ Facebook

    ϝοηʔδ Google Drive ਐḿ؅ཧ
14. 14.

    ΍Γ΍͔ͬͨ͢͜ͱ ɾgulpɺsassɺGit ͷར༻ͳͲɺ։ൃऀଆ͕։ൃ͠΍͍͢Α͏ʹ഑ྀͯ͠΋Β͑ͨ ɾσβΠϯ͕γϯϓϧͩͬͨͷ΋͋Δ͔΋͠Ε·ͤΜ͕ɺ͜ΕͲ͏΍ͬͯ૊ΉͶ Μ…Έ͍ͨͳ͍ΘΏΔࢴతͳσβΠϯ͕ͳͯ͘࡞Γ΍͔ͬͨ͢ ɾจࣈαΠζ΍༨നͳͲʹ͓͍ͯϐΫηϧύʔϑΣΫτΛٻΊΒΕͳ͔ͬͨʢϨε ϙϯγϒͰɺϒϥ΢β΍OS΋͍Ζ͍Ζ͋ΔݱࡏͰ͸ٻΊΒΕͯ΋࣮ࡍ࣮ݱ͸΄΅ ෆՄೳͳͷͰɺ͜ΕΛ͍ΘΕΔͱ͔ͳΓແବͳ͕࣌ؒͱΒΕΔͷͰ͢…ʣ ɾʢΧϨϯμʔͷ࣮૷ʹ͍ͭͯʣ͋Γ΋ͷͷϓϥάΠϯͰରԠͰ͖ΔൣғͰ͓٬༷ ͱҙࢥૄ௨Λͯ͠΋Β͑ͨ

    = ༧ࢉ಺Ͱͪ͜Β͕ରԠՄೳͳൣғͰ͓٬༷ʹཧղ͠ ͯ΋Β͑ΔΑ͏ʹσΟϨΫγϣϯͯ͠΋Β͑ͨʢSimple Calendarʣ ˕΍Γʹ͔ͬͨ͘͜ͱ ɾϝʔϧத৺ͷ΍ΓͱΓͰ͕ͨ͠ɺGitHub ΍ Backlog Ͱ՝୊؅ཧͨ͠΄͏͕ਐḿ ೺Ѳ΍֬ೝͳͲ͠΍͔͔ͬͨ͢΋ ɾͪΐͬͱͨ͠΍ΓͱΓ͸ Slack ͳͲͷνϟοτͷ΄͏͕ؾ͔ܰͩͬͨ΋ K͞Μʹฉ͍ͯΈ·ͨ͠
15. 15.

    Ҋ݅B

16. 16.

    Ҋ݅BͰͷ໾ׂ෼୲ σΟϨΫγϣϯ ϥΠςΟϯά σβΠϯ ίʔσΟϯά ߏங ৭࠼ઃܭ உ໦ౡͷ༏लϓϩάϥϚʔN͞Μ Πϥετ உ໦ౡͷ࠽ೳ͋ΔΠϥετϨʔλʔH͞Μ

17. 17.

    Basis ϑϨʔϜϫʔΫ Backlog ਐḿ؅ཧɹGit HackMD λεΫ؅ཧ Adobe XD ϫΠϠʔϑϨʔϜ

18. 18.

    ϓϥάΠϯ Ͱ͖Δ͚ͩ࢖͏ϓϥάΠϯͷ໨ࢉΛཱ͓ͯͯ ͘ 
 ʢྫʣ Contact Form 7 Flamingo Show

    Current Template
 
 
 ࠷ۙ͸
 Yoast SEO
 Slim Stat Analytics
 ΛೖΕΔ͜ͱ΋ ౤ߘɾΧελϜ౤ߘλΠϓ ౤ߘͰλά΍ΧςΰϦʔΛ࢖ͬͯ؅ཧ͢Δ͔ɺ ΧελϜ౤ߘλΠϓΛ࢖͏͔ ಛʹؾΛ͚ͭͯWordPress Ҋ݅࣌ʹܾΊ͍ͯΔ͜ͱ อक؅ཧΛ͢Δ͔Ͳ͏͔ ࠓޙอक؅ཧΛ੥͚ෛ͍͔ͬͯ͘ɺ੥͚ෛ͏ ৔߹ɺͲΕ͘Β͍ͷ͜ͱΛ͢Δ͔
19. 19.

    Ҋ݅C

20. 20.

    Ҋ݅CͰͷ໾ׂ෼୲ σΟϨΫγϣϯ ϥΠςΟϯά σβΠϯ ίʔσΟϯά ߏங ࣸਅ ৭࠼ઃܭ ࢠςʔϚ࢖༻

21. 21.

    ެࣜςʔϚ͔ΒબͿ ެࣜͰ͸ͳ͍ςʔϚͷηΩϡϦςΟ͕৺഑ɻ
 ެࣜͰ͸ͳ͍ςʔϚͷ৔߹ςʔϚࣗମʹόά ͕͋Δ͜ͱ΋ɻ Ͳ͜·ͰมߋͰ͖Δ͔ ࢠςʔϚͰͳΜͰ΋Ͱ͖ΔΘ͚Ͱ͸ͳ͍ ࢠςʔϚΛ࢖͏࣌ʹؾΛ͚͍ͭͯΔ͜ͱ

22. 22.

    ࢠςʔϚΛ࢖͏৔߹΢ΥʔλʔϑΥʔϧܕͷϫʔ Ϋϑϩʔʹ͸ͳΒͳ͍ ϒϥ΢βͰͲΜͲΜ֬ೝ͍ͯ͘͠ ࢠςʔϚΛ࢖͏৔߹΄ͱΜͲ͕ϨεϙϯγϒɻσβΠϯΛ͔̌Β্ཱ͍ͪ͛ͯΔΘ͚Ͱ͸ͳ͍ͷͰΫϥΠΞϯτͱϒϥ΢βͰ֬ೝ͠ͳ ͕ΒਐΊ͍ͯ͘ɻ ࠷ॳͷʮͲ͏͍͏ίϯςϯπ͕ཉ͍͔͠ʯͷฉ͖औΓͱɺͦΕʹ߹ͬͨςʔϚબͼ΋ॏཁɻ

23. 23.

    ͜Ε͔ΒͷWordPress WordPress 4.7 ࠓ·ͰϓϥάΠϯͩͬͨ WP-REST-API ͕ίΞʹɻ
 ΋͔͢͠Δͱ΋ͬͱࣗ༝ʹσβΠϯ͕Ͱ͖ΔΑ͏ʹͳΔ͔΋͠Εͳ͍ɻ ϫʔΫϑϩʔͷมಈ͕ى͖Δ͔΋ɻ 4.7Ͱfiltterͷ࢖͍ํ͕มΘͬͯͪΐͬͱށ࿭͍ɻͲΜͲΜਐԽͯ͠ ࢖͍΍͘͢ͳΔͱ͍͍ͳɻ

24. 24.

    ΍Γํ͸ৗʹҰͭͰ͸ͳ͍ ৽͍͜͠ͱΛऔΓೖΕΔͱಉ࣌ʹɺݹ͍΍Γํ΋όΧʹ͠ͳ͍ɻ ΫϥΠΞϯτͱࣗ෼ɻ ςʔϜͰͷ࡞ۀɻ αΠτΛ࢖͏Ϣʔβʔɻ 
 ʮͲ͏ͨ͠Β΍Γ΍͍͔͢ʯʮͲ͏ͨ͠ΒΘ͔Γ΍͍͔͢ʯ ॊೈ͕͞େࣄɻ

25. 25.

    σβΠϯσʔλ

26. 26.

    σβΠϯͷܗ͸΋ͬͱมΘ͍ͬͯ͘ ࢴɺϒϥ΢βɺ3DɺϢʔβʔମݧɺ੠ ԿΛσβΠϯ͢Δʁ Կ͕σβΠϯͱͳΔʁ