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

by nukaga

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ֹլॱࢠ Nukaga Junko Proﬁle ϑϦʔϥϯεͷWebσβΠφʔ WordCamp Kansai 2014 ࣮ߦҕһ௕ σδλϧΩϡʔϒ νʔϜΊ૊ 2014೥உ໦ౡ΁Ҡॅɻ  NPO๏ਓஉ໦ౡਤॻؗɹཧࣄ௕  WordPress 4.7 ίΞίϯτϦϏϡʔλʔ ɹ nukaga ɹɹnukagajunko

Slide 3

Slide 3 text

੍࡞ձࣾ΁ೖࣾ 1999 σβΠϯɾσΟϨΫγϣϯ ΨϥέʔαΠτʢezweb HDMLʣ  LϞʔυɹςʔϒϧϨΠΞ΢τ ୈ2ͷ੍࡞ձࣾ΁ 2002 σβΠϯɾσΟϨΫγϣϯ FlashɹςʔϒϧϨΠΞ΢τ͔ΒCSS΁  γεςϜҊ݅ଟ͠ ϑϦʔϥϯεʹ 2006 σβΠϯɾσΟϨΫγϣϯɾίʔσΟϯά EίϚʔεɹָఱɹYahoo Movable type WordPress ΛϝΠϯʹ 2011 σβΠϯɾσΟϨΫγϣϯɾίʔσΟϯάɾߏங εϚʔτϑΥϯ  Ϩεϙϯγϒ

Slide 4

Slide 4 text

͓࢓ࣄͷελΠϧ உ໦ౡਤॻؗ ཧࣄ௕ ϑϦʔϥϯε WordPress Web DTP ݸਓࣄۀओ Ί૊ νʔϜͷҰһͱͯ͠ σβΠϯΛ୲౰ ೜ऀ ༗ݶձࣾϝΨωΠυ औక໾

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

σΟϨΫλʔͱͯ͠ؾΛ͚͍ͭͯΔ͜ͱ ΫϥΠΞϯτͷཉ͍͠΋ͷ ΫϥΠΞϯτͷఏࣔͯ͘͠Δ͜ͱʹཉ͍͠΋ͷͰ ͸ͳ͍৔߹͕͋ΔɻޮՌͳͷ͔σβΠϯͳͷ͔ɻ ͦΕ͸ϢʔβʔͷٻΊΔ͜ͱͱ߹͍ͬͯΔ͔ɻ ֹۚͱ࡞ۀྔ ֹۚͱ࡞ۀྔͷόϥϯεΛݟΔɻ ༏ઌॱҐ ࡞Δ΋ͷʹରͯ͠ͷ༏ઌॱҐΛ͔ͬ͠Γ ͱೝࣝ߹ΘͤΛ͢Δɻ ࠷ॳʹ͖ͪΜͱ఻͑Δ Ͱ͖Δ͜ͱɺͰ͖ͳ͍͜ͱɻ௥Ճྉۚʹ ͍ͭͯɻೲظʹ͍ͭͯɻSEOʹ͍ͭͯɻ ਓͱ࢓ࣄΛ͍ͯ͠Δ ΫϥΠΞϯτ΋ਓͩ͠ɺνʔϜϝϯόʔ΋ ਓͰ͋ΔɻͲͪΒ΋कΔ࢓ࣄΛ͢Δɻ ϨεϙϯγϒʢϞόΠϧରԠʣ ରԠϒϥ΢βʹ͍ͭͯɻϨεϙϯγϒσβΠϯ࣌Ϟ όΠϧ෼͸ϫΠϠʔͷΈ͋͛Δ͜ͱ΋ɻϐΫηϧύʔ ϑΣΫτΛٻΊΔͱίετ͕͔͔Δͱ͍͏ҙࣝɻ —

Slide 10

Slide 10 text

σβΠφʔͱͯ͠ؾΛ͚͍ͭͯΔ͜ͱ ΞΫηγϏϦςΟ΁ͷ഑ྀ ίϯτϥετ΍จࣈͷେ͖͞ͳͲ࠷௿ݶ ͷΞΫηγϏϦςΟ΁ͷ഑ྀ ԿΛ఻͍͑ͨͷ͔ ΫϥΠΞϯτ͕ͦͷαΠτͰԿΛ఻͑ͨ ͍͔ RetinaରԠ༻σʔλ RetinaରԠ༻ͷσʔλͷ༻ҙ ίʔσΟϯά͠΍͍͢σβΠϯ ༨നͷϧʔϧ෇͚ɺϨεϙϯγϒΛҙࣝɺ WordPressͷ৔߹ςϯϓϨʔτΛσβΠϯ͠ ͍ͯΔͱ͍͏ҙࣝ ίʔσΟϯά͠΍͍͢σʔλ σβΠϯΞϓϦέʔγϣϯͷ૬ஊɺϨΠϠʔ ෼͚ɺϨΠϠʔ໊ɺͰ͖Δ͚ͩϏοτϚο ϓʹ͠ͳ͍ɻϑΥϯτ͕Θ͔ΔΑ͏ʹ͢Δɻ

Slide 11

Slide 11 text

Ҋ݅A

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Bootstrap ϫΠϠʔϑϨʔϜ bitbucket git Sass css Gulp.js ϏϧυγεςϜ Ҋ݅Aπʔϧ Facebook ϝοηʔδ Google Drive ਐḿ؅ཧ

Slide 14

Slide 14 text

΍Γ΍͔ͬͨ͢͜ͱ ɾgulpɺsassɺGit ͷར༻ͳͲɺ։ൃऀଆ͕։ൃ͠΍͍͢Α͏ʹ഑ྀͯ͠΋Β͑ͨ ɾσβΠϯ͕γϯϓϧͩͬͨͷ΋͋Δ͔΋͠Ε·ͤΜ͕ɺ͜ΕͲ͏΍ͬͯ૊ΉͶ Μ…Έ͍ͨͳ͍ΘΏΔࢴతͳσβΠϯ͕ͳͯ͘࡞Γ΍͔ͬͨ͢ ɾจࣈαΠζ΍༨നͳͲʹ͓͍ͯϐΫηϧύʔϑΣΫτΛٻΊΒΕͳ͔ͬͨʢϨε ϙϯγϒͰɺϒϥ΢β΍OS΋͍Ζ͍Ζ͋ΔݱࡏͰ͸ٻΊΒΕͯ΋࣮ࡍ࣮ݱ͸΄΅ ෆՄೳͳͷͰɺ͜ΕΛ͍ΘΕΔͱ͔ͳΓແବͳ͕࣌ؒͱΒΕΔͷͰ͢…ʣ ɾʢΧϨϯμʔͷ࣮૷ʹ͍ͭͯʣ͋Γ΋ͷͷϓϥάΠϯͰରԠͰ͖ΔൣғͰ͓٬༷ ͱҙࢥૄ௨Λͯ͠΋Β͑ͨ = ༧ࢉ಺Ͱͪ͜Β͕ରԠՄೳͳൣғͰ͓٬༷ʹཧղ͠ ͯ΋Β͑ΔΑ͏ʹσΟϨΫγϣϯͯ͠΋Β͑ͨʢSimple Calendarʣ ˕΍Γʹ͔ͬͨ͘͜ͱ ɾϝʔϧத৺ͷ΍ΓͱΓͰ͕ͨ͠ɺGitHub ΍ Backlog Ͱ՝୊؅ཧͨ͠΄͏͕ਐḿ ೺Ѳ΍֬ೝͳͲ͠΍͔͔ͬͨ͢΋ ɾͪΐͬͱͨ͠΍ΓͱΓ͸ Slack ͳͲͷνϟοτͷ΄͏͕ؾ͔ܰͩͬͨ΋ K͞Μʹฉ͍ͯΈ·ͨ͠

Slide 15

Slide 15 text

Ҋ݅B

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

ϓϥάΠϯ Ͱ͖Δ͚ͩ࢖͏ϓϥάΠϯͷ໨ࢉΛཱ͓ͯͯ ͘   ʢྫʣ Contact Form 7 Flamingo Show Current Template      ࠷ۙ͸  Yoast SEO  Slim Stat Analytics  ΛೖΕΔ͜ͱ΋ ౤ߘɾΧελϜ౤ߘλΠϓ ౤ߘͰλά΍ΧςΰϦʔΛ࢖ͬͯ؅ཧ͢Δ͔ɺ ΧελϜ౤ߘλΠϓΛ࢖͏͔ ಛʹؾΛ͚ͭͯWordPress Ҋ݅࣌ʹܾΊ͍ͯΔ͜ͱ อक؅ཧΛ͢Δ͔Ͳ͏͔ ࠓޙอक؅ཧΛ੥͚ෛ͍͔ͬͯ͘ɺ੥͚ෛ͏ ৔߹ɺͲΕ͘Β͍ͷ͜ͱΛ͢Δ͔

Slide 19

Slide 19 text

Ҋ݅C

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

σβΠϯσʔλ

Slide 26

Slide 26 text

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