Snow Monkey での自社サービスサイト構築事例

by DigitalCube Inc.

Slide 1

Slide 1 text

#JP_LabWorks © LabWorks. 1 ىҊഎܠʙ։ൃɾϩʔϯνޙͷӡ༻·ͰͷาΈ Snow Monkey Ͱͷ ࣗࣾαʔϏεαΠτߏஙࣄྫ

Slide 2

Slide 2 text

#JP_LabWorks © LabWorks. 2 1. ࢲͨͪʹ͍ͭͯ 2. ࣗࣾαʔϏεαΠτʮLabWorksʯΛ࡞ͬͨഎܠ 3. ཁ݅ఆٛɾઃܭ΁ͷམͱ͠ࠐΈ 4. ։ൃɺӡ༻·ͰɻͿͬͪΌ͚ηογϣϯ ຊ೔͓࿩͢͠Δ͜ͱ

Slide 3

Slide 3 text

#JP_LabWorks © LabWorks. ੢ଜ भฏɹShuhei NISHIMURA •Πϯό΢ϯυηʔϧε/ SNS ͷதͷਓ •ݩ͸ WordPress ͷςʔϚ։ൃɾϓϥάΠϯ։ൃΛߦ͏  ϑϩϯτΤϯυ։ൃऀɻSnow Monkey Λ࢖ͬͨ  αΠτߏஙܦݧ͋Γ 3 ࣗݾ঺հ @marushu marushu https://private.hibou-web.com/

Slide 4

Slide 4 text

#JP_LabWorks © LabWorks. Ըా ३ࢠɹJunko ONDA •ݩίϯςϯπϚʔέλʔɺϊϯΤϯδχΞ •LabWorks Ͱ͸اըߏ૝ஈ֊ͰͷऔΓ·ͱΊͱਐḿ؅ཧɺ  ίϯςϯπاըɾ੍࡞ɺϩʔϯνޙͷӡ༻Λ୲౰ 4 ϓϩδΣΫτϝϯόʔ঺հʢϓϩδΣΫτϚωδϝϯτΦϑΟεʣ @OnYun https://mamelogy.com/

Slide 5

Slide 5 text

#JP_LabWorks © LabWorks. ޒेཛྷ ࿨ܙɹKazue IGARASHI •WordPress 10೥ઓ࢜ɻͦͷલ͸ϑϧεΫϥονɺMovable Type ΋ར༻ɻ࠷ۙ͸ WordPress ͱ֎෦αʔϏε (HubSpot, Algolia, Shopify)ͱͷྑ͍ؔ܎ੑΛ໛ࡧத •LabWorks Ͱ͸ཁ݅ఆٛɾઃܭΛ୲౰ 5 ϓϩδΣΫτϝϯόʔ঺հʢςΫχΧϧσΟϨΫλʔʣ @gatespace_k https://qiita.com/gatespace https://gatespace.jp/

Slide 6

Slide 6 text

#JP_LabWorks © LabWorks. ਿຊ ३ɹJun SUGIMOTO •ओʹHTML/ CSS/ JavaScript Λ༻͍࣮ͨ૷ͱ  WordPressͰͷαΠτߏஙΛ୲౰ •2011೥͔Βݸਓࣄۀओͱͯ͠ಠཱɺ  2019೥ʹσδλϧΩϡʔϒʹδϣΠϯ 6 ϓϩδΣΫτϝϯόʔ঺հʢWordPress ςʔϚ։ൃɾϓϥάΠϯ։ൃʣ @understandard understandard

Slide 7

Slide 7 text

#JP_LabWorks © LabWorks. ࢲͨͪσδλϧΩϡʔϒʹ͍ͭͯ WordPress ͰʮWeb αΠτΛ࡞ΔɾकΔɾྑ͘͢ΔʯΛ׎͑ΔձࣾͰ͢ 7 • https://www.digitalcube.jp/ • ઃཱɿ2006೥11݄17೔ • ࣄۀ಺༰ ◦ίϯαϧςΟϯάࣄۀ ◦ϗεςΟϯάࣄۀ ◦ΦʔϓϯιʔεCMSࣄۀ • ೝఆ ◦Amazon Web Services ISV Partner • ύʔτφʔγοϓ ◦Algolia/ AWS/ Hubspot/ Netlify/ Shopify/ Stripe/ Wovn.io

Slide 8

Slide 8 text

#JP_LabWorks © LabWorks. 8 ຊ೔͸͜ͷ࿩Λɻ

Slide 9

Slide 9 text

#JP_LabWorks © LabWorks. LabWorks (ϥϘϫʔΫε) ʹ͍ͭͯ https://labworks.digitalcube.jp/ 9 ࢖༻ςʔϚ: Snow Monkey 🎉 ಺༰ : डୗ։ൃαʔϏεɾอकαʔϏεͷ঺հ • ੍࡞ظؒ: اըߏ૝͔Β໿3ϲ݄ • 1stϩʔϯν: 2021/8/25ɹ2ndϩʔϯν: 2021/10/1 • ϓϩδΣΫτϝϯόʔ: 10໊  - PO ݉ PM/ηʔϧε/CS/σΟϨΫλʔ/ςΫχΧϧσΟϨΫλʔ/  Web σβΠφʔ/ϩΰɾάϥϑΟοΫσβΠφʔ/։ൃऀ  ΄͔ɺ֎෦ύʔτφʔͱͯ͠ϥΠλʔɾΧϝϥϚϯ

Slide 10

Slide 10 text

#JP_LabWorks © LabWorks. LabWorks (ϥϘϫʔΫε) ʹ͍ͭͯ LabWorks ͷαΠτΛ࡞ͬͨഎܠ 10 WordPress ઐۀͰ  डୗ։ൃʙอकɾ  ӡ༻·ͰରԠͰ͖Δ  ͜ͱΛൃ৴ ҆ఆతͳ঎ஊԽɾ  Ҋ݅ड஫ (ཪ໨త) ҉໧஌ͷ  ܗࣜ஌ԽɾݴޠԽ 1 2 3

Slide 11

Slide 11 text

#JP_LabWorks © LabWorks. αΠτߏஙܾఆ·Ͱʹݕ౼ͨ͜͠ͱ ΞΠσΞ΍ҙݟ͸ͨ͘͞Μग़ΔɻͦͷதͰɺԿΛͲ͏ߟ͑ͯɺͲ͏ܾΊ͍͔͕ͯ͘ΩϞ 11 ೔ถͷಉۀଞࣾ͸ Ͳ͏͍ͯ͠Δʁ αΠτΛ৽͘͠࡞Δʁ طଘͷαΠτʹࡌͤΔʁ ࠓ͋ΔଞͷࣗࣾαΠτͱͷ ݉Ͷ߹͍͸Ͳ͏͠Α͏͔ʁ ͲΜͳ৘ใΛࡌͤΑ͏͔ʁ ୭͕͍ͭɾͲ͏΍ͬͯ ࡞Ζ͏͔ʁ ӡ༻͸୭͕ Ͳ͏΍ͬͯ΍Ζ͏͔ʁ αΠτ࡞ΔͳΒ ϩΰ࡞Βͳ͍ͱͩΑͶʁ

Slide 12

Slide 12 text

#JP_LabWorks © LabWorks. αΠτߏஙܾఆ·Ͱʹݕ౼ͨ͜͠ͱ ʮͦ΋ͦ΋αΠτΛ৽͘͠࡞Δͷ͔Ͳ͏͔ʁʯΛݕ౼ 12 ೔ถͷಉۀଞࣾ͸ Ͳ͏͍ͯ͠Δʁ αΠτΛ৽͘͠࡞Δʁ طଘͷαΠτʹࡌͤΔʁ ࠓ͋ΔଞͷࣗࣾαΠτͱͷ ݉Ͷ߹͍͸Ͳ͏͠Α͏͔ʁ αΠτ࡞ΔͳΒ ϩΰ࡞Βͳ͍ͱͩΑͶʁ • ϝϦοτɾσϝϦοτΛ੔ཧ • σΟεΧογϣϯ • ࠷ޙ͸ PO ͷҙࢤͱϝϯόʔͷϋϥΦνײ • Ϧιʔε֬อ͸ PO ʹґཔ ͦ΋ͦ΋ɺαΠτ࡞Δͷ͔Ͳ͏͔໰୊

Slide 13

Slide 13 text

#JP_LabWorks © LabWorks. αΠτߏஙܾఆ·Ͱʹݕ౼ͨ͜͠ͱ ͦͷ্Ͱʮ୭͕ɾ͍ͭɾͲ͏΍ͬͯɾԿΛ࡞Ζ͏͔ʁʯͷ࿩ʹɻͰ΋ɺ͕࣠ͳ͍ͱٞ࿦͕ࢄΔ 13 ͲΜͳ৘ใΛࡌͤΑ͏͔ʁ ୭͕͍ͭɾͲ͏΍ͬͯ ࡞Ζ͏͔ʁ ӡ༻͸୭͕ Ͳ͏΍ͬͯ΍Ζ͏͔ʁ • Ͳ͏ͱͰ΋ߟ͑ΒΕΔ෦෼ • ࠜͬ͜ͷ෦෼͔Βݕ౼ How, What ͷ۩ମతͳ࿩

Slide 14

Slide 14 text

#JP_LabWorks © LabWorks. ཁ݅΁ͷམͱ͠ࠐΈ ʮԿʹࠔ͍ͬͯΔ୭ʹɺͲΜͳՁ஋͕ఏڙͰ͖Δͷ͔ʁʯ͔Β੔ཧ 14 ސ٬ ࣗࣾ Կʹࠔ͍ͬͯΔ ͲΜͳਓ͔ͨͪʁ ఏڙՁ஋/ ӡ༻ମ੍͸ʁ ސ٬͕ٻΊΔ΋ͷ͸ʁ ࢲ͕ͨͪ఻͑Δ͜ͱ͸ʁ

Slide 15

Slide 15 text

#JP_LabWorks © LabWorks. ཁ݅΁ͷམͱ͠ࠐΈ Կʹࠔ͍ͬͯΔɺͲΜͳਓ͕ͨͪର৅͔ 15 ૝ఆλʔήοτ • ෛՙΛ͔͚ͣʹϏδωεͱͯ͠ Web αΠτΛӡӦ͍ͨ͠ࣄۀձࣾɾ୅ཧళ౳ͷϓϩδΣΫτνʔϜ • ৘ใऩूஈ֊ͷ Web ୲౰ɺΠϯϑϥ୲౰ɻWordPressɺຢ͸ CMS ͷར༻Λݕ౼ • ʮWordPress αΠτ੍࡞ʯʮWordPress αΠτอकʯ౳Ͱݕࡧͨ͠Γਓʹฉ͍ͨΓ͍ͯ͠Δ ๊͍͑ͯΔ՝୊ɾχʔζ • Web αΠτ੍࡞ɾվળɾอक͢ΔͨΊͷϦιʔε΍஌ݟ͕ͳ͍ɺ·ͨ͸ෆ଍͍ͯ͠Δ • ৴པͰ͖Δɾ࣮੷ͷ͋Δձࣾʹґཔ͍ͨ͠ʢ͕ɺௐ΂ͳ͍ͱΘ͔Βͳ͍ʣ

Slide 16

Slide 16 text

#JP_LabWorks © LabWorks. ཁ݅΁ͷམͱ͠ࠐΈ ࢲ͕ͨͪఏڙͰ͖Δ͜ͱ 16 ఏڙՁ஋ • WordPress ʹಛԽͨ͠ Web αΠτͷ੍࡞ɾΠϯϑϥอकɾվળͷͨΊͷ  ௐࠪٴͼվળରԠ·ͰҰؾ௨؏ɺ·ͨ͸ύοέʔδ୯ҐͰఏڙͰ͖Δ • WordPress ઐۀ15೥Ҏ্ɻ৴པͱ࣮੷ɺଞࣾʹͳ͍ٕज़ྗͱϊ΢ϋ΢

Slide 17

Slide 17 text

#JP_LabWorks © LabWorks. ཁ݅΁ͷམͱ͠ࠐΈ ࢲ͕ͨͪސ٬ʹ఻͑ΒΕΔ͜ͱΛϝοηʔδʹམͱ͠ࠐΈ 17 ϝοηʔδϯάҊ • WordPress ʹಛԽͨ͠ ։ൃձࣾͰ͢ɻWordPress Λ࢖ͬͨ Web αΠτ੍࡞ɺ  Πϯϑϥͷอकɺϝϯςφϯε͓ΑͼௐࠪɾվળͳΒ͓೚͍ͤͩ͘͞ • ͓٬༷ͷϓϩδΣΫτνʔϜͷҰһͱͯ͠ɺʮWeb αΠτΛ࡞ΔɾकΔɾྑ͘͢ΔʯΛ׎͑·͢ ϝοηʔδϯάʢ΄΅֬ఆʣ • ͋ͳͨ (ސ٬) ͷϏδωεΛ੒ޭʹಋ͘ϓϩδΣΫτͷνʔϜϝϯόʔͱͯ͠  σδλϧΩϡʔϒͷٕज़νʔϜ͕ WordPress ʹΑΔ Web ੍࡞͔Βӡ༻·ͰΛ͓ख఻͍͠·͢

Slide 18

Slide 18 text

#JP_LabWorks © LabWorks. LabWorks (ϥϘϫʔΫε) https://labworks.digitalcube.jp/ 18

Slide 19

Slide 19 text

#JP_LabWorks © LabWorks. ཁ݅΁ͷམͱ͠ࠐΈ ࢲͨͪͷମ੍Λߟྀ͠ɺݱ࣮తͳϥΠϯ͔Βཁ݅େ࿮ (جຊํ਑) Λ࡞੒ 19 αΠτӡ༻ʗ͓໰͍߹ΘͤରԠͷମ੍ • ίϯςϯπ੍࡞ɺ໰͍߹ΘͤରԠ͸ͦΕͧΕ3໊ɺଟͯ͘5໊΄Ͳ • ίϯςϯπߋ৽ස౓͸݄ʹ2ʙ3ճ΄ͲΛ૝ఆ • ໰͍߹ΘͤରԠ͸εϐʔυॏࢹ [ཁ݅େ࿮1] ͳΔ΂͘खؒͳ͘ӡ༻Ͱ͖Δ (ࣗಈԽͰ͖Δͱ͜Ζ͸ࣗಈԽ) [ཁ݅େ࿮2] ໰͍߹Θͤલͷސ٬͕ࣗ෼Ͱ৘ใऩूͰ͖ΔΑ͏ʹ͢Δ

Slide 20

Slide 20 text

#JP_LabWorks © LabWorks. ཁ݅΁ͷམͱ͠ࠐΈ ސ٬͕ͲΜͳ৘ใΛٻΊ͍ͯΔ͔ʁ ͔ΒαΠτϚοϓΛ࡞੒ 20

Slide 21

Slide 21 text

#JP_LabWorks © LabWorks. 21 ͔͜͜Β ཁ݅ఆٛɾઃܭϑΣʔζ΁

Slide 22

Slide 22 text

#JP_LabWorks © LabWorks. ཁ݅ఆٛɾઃܭϑΣʔζ ઃܭํ਑ʗΞʔΩςΫνϟͰ࠷ॳʹߟ͑Δ͜ͱ 22 ٕज़ɾݟͨ໨ɾςΫχοΫͰ͸ͳ͘ ʮӡ༻୲౰ऀͷ͜ͱΛߟ͑Δʯ ୭͕ӡ༻͢Δͷ͔ʁӡ༻͢ΔਓͷεΩϧɾߋ৽ͷखؒ͸ʁ

Slide 23

Slide 23 text

#JP_LabWorks © LabWorks. ཁ݅ఆٛɾઃܭϑΣʔζ LabWorks͸୭͕ӡ༻͢Δͷ͔ʁ →ཁ݅ 23 ߋ৽୲౰ CS/Ϛʔέ୲౰ɺडୗ։ൃσΟϨΫλʔʢඇΤϯδχΞ͔ͭ௨ৗۀ຿ͱ݉຿ʣ ߋ৽୲౰ऀͷؾ࣋ͪ ίϯςϯπͷฤू͸ WordPress μογϡϘʔυͰ׬͍݁ͨ͠ɻ ߋ৽ස౓ ͦΕ΄Ͳଟ͘ͳ͍ɻ ηΩϡϦςΟରࡦɾ  Ξοϓσʔτ ౎౓ΤϯδχΞʹཔ·ͳ͍Ͱɺӡ༻୲౰Ͱ׬͍݁ͨ͠ɻ ݟͨ໨ ϨεϙϯγϒɻඇΤϯδχΞͰ΋͖Ε͍ʹ࡞ΕΔɻ  ͏͔ͬΓϛεͰϨΠΞ΢τ่͕ΕΔͷ͸ࠔΔɻ ͓໰͍߹ΘͤϑΥʔϜ ࣗ෼ͨͪͰઃஔͯ͠ӡ༻͍ͨ͠ɻ SEOɾܭଌɾղੳ ϊʔίʔυʹͯࣗ͠෼ͨͪͰӡ༻͍ͨ͠ɻ

Slide 24

Slide 24 text

#JP_LabWorks © LabWorks. ཁ݅ఆٛɾઃܭϑΣʔζ ཁ๬͔ΒͷબఆɿςʔϚͱϓϥάΠϯ 24 Snow Monkey ʴ ϒϩοΫΤσΟλʢϓϥάΠϯɺࣗ࡞ϒϩοΫʣ HTML΍JSʹৄ͘͠ͳ͍ඇΤϯδχΞ  த৺ͷӡ༻νʔϜͰ΋ɺ  ϨΠΞ΢τɾϨεϙϯγϒσβΠϯɾ  ಈ͖ͷ͋ΔίϯςϯπΛ༰қʹ࡞ΓࠐΊΔ

Slide 25

Slide 25 text

#JP_LabWorks © LabWorks. ྫ͑͹εϥΠμʔ 25 ཁ݅ఆٛɾઃܭϑΣʔζ ςʔϚʹ Snow Monkey ΛબΜͩཧ༝

Slide 26

Slide 26 text

#JP_LabWorks © LabWorks. ཁ݅ఆٛɾઃܭϑΣʔζ ςʔϚʹ Snow Monkey ΛબΜͩཧ༝ 26 ٕज़ʢ։ൃऀ໨ઢʣ WordPress ςʔϚͷ৔߹ɺPage Speed Insights / Core Web Vital ʹରԠ͠Α͏ͱ͢Δͱ   JS/CSS ͷઃܭʢར༻ՕॴʹΑΔϑΝΠϧͷ෼ׂʣ͕ॏཁɻ   θϩ͔ΒςʔϚΛ࡞Δ৔߹ɺWordPress ͷػೳɺHTML ϚʔΫΞοϓͱ   ಉ͙͡Β͍ؾΛݣΘͳ͍ͱ͍͚ͳ͍ɻ • HTML ઃܭɾϚʔΫΞοϓ→ WordPress ςʔϚ΁ͷམͱ͠ࠐΈ • CSS ઃܭɿHTML ͱσβΠϯσʔλΛݟͳ͕Β CSS Ϋϥεͷ໋໊نଇ΍   ɹɹɹɹɹϚʔΫΞοϓɾม਺ͳͲ • JSͷઃܭɿػೳ͝ͱͷ෼ׂɺWordPressؔ਺Λར༻ͯ͠৚݅෼ذͯ͠ಡΈࠐΈ • ػೳ։ൃͰPHP΋ඞཁʹͳΔ

Slide 27

Slide 27 text

#JP_LabWorks © LabWorks. ཁ݅ఆٛɾઃܭϑΣʔζ ཁ๬͔Βͷબఆɿػೳฤʢ֎෦αʔϏεʣ 27 ϑΥʔϜɾνϟοτɿHubSpot + Box + Backlog • HubSpot → Backlog ΛࣗಈͰ՝୊࡞੒ʢλεΫ؅ཧʣ • ࢿྉ͸ Box ͰҰݩ؅ཧ ݕࡧɿAlgolia SEOɾGoogle λάϚωʔδϟʔʢΞφϦςΟΫεʣ

Slide 28

Slide 28 text

#JP_LabWorks © LabWorks. ϩʔϯνޙͷ੒Ռ LabWorks ͷ WebPageTest είΞ 28

Slide 29

Slide 29 text

#JP_LabWorks © LabWorks. 29 ×

Slide 30

Slide 30 text

#JP_LabWorks © LabWorks. 30 Q. ΧελϚΠζͨ͠ͱ͜Ζɾ͠ͳ͔ͬͨͱ͜Ζ͸ʁ ཁ݅ఆٛɾઃܭʙ։ൃɾϦϦʔεʙӡ༻

Slide 31

Slide 31 text

#JP_LabWorks © LabWorks. 31 Q. ΧελϚΠζੑൈ܈ͳ Snow Monkeyɻ  ɹςʔϚΧελϚΠβʔɺ։ൃऀ໨ઢͰͲ͏Ͱͨ͠ʁ ཁ݅ఆٛɾઃܭʙ։ൃɾϦϦʔεʙӡ༻

Slide 32

Slide 32 text

#JP_LabWorks © LabWorks. 32 Q. Snow Monkey Ͱۤ࿑ͨ͠ͱ͜Ζ & Α͔ͬͨͱ͜Ζ͸ʁ ཁ݅ఆٛɾઃܭʙ։ൃɾϦϦʔεʙӡ༻

Slide 33

Slide 33 text

#JP_LabWorks © LabWorks. 33 Q. Snow Monkey Λ࢖͏࣌ʹ஫ҙͨ͠ํ͕ྑ͍ͱײͨ͡఺͸ʁ ཁ݅ఆٛɾઃܭʙ։ൃɾϦϦʔεʙӡ༻

Slide 34

Slide 34 text

#JP_LabWorks © LabWorks. 34 Q. Ξοϓσʔτʹඋ͑Δίπɺ͋Δʁ ཁ݅ఆٛɾઃܭʙ։ൃɾϦϦʔεʙӡ༻

Slide 35

Slide 35 text

#JP_LabWorks © LabWorks. 35 Q. ࢖͍౗ͯ͠ΈͯɺSnow Monkey ΁ͷఏҊɾཁ๬͋Δʁ ཁ݅ఆٛɾઃܭʙ։ൃɾϦϦʔεʙӡ༻

Slide 36

Slide 36 text

#JP_LabWorks © LabWorks. 36 ͪΐͬͱ͚ͩɺLabWorks Ͱ࢖ͬͨΠϯϑϥͷ͓࿩Λɻ

Slide 37

Slide 37 text

Shifter WebαΠτͷӡӦʹؔΘΔશͯͷਓΛ޾ͤʹ

Slide 38

Slide 38 text

WordPress Πϯετʔϧෆཁ WordPress ߋ৽؅ཧෆཁ αʔόʔܖ໿ෆཁ ϛυϧ΢ΣΞͷ؅ཧෆཁ Shifter ͷಛ௕ɾϝΧχζϜ WordPress ىಈ WordPress ఀࢭ Shifter ϩάΠϯ ੩తԽ (δΣωϨʔτ) ެ։ HTML, CSS, JavaScript هࣄߋ৽ αΠτฤू ഑৴ ⚡ Shifter ͷ ϥΠϑαΠΫϧ

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

WordPress Ͱ Web αΠτΛ࡞Δͱ͖ͷ՝୊ • ϝϯςφϯε • ηΩϡϦςΟ • ίετ

Slide 47

Slide 47 text

WordPress Πϯετʔϧෆཁ WordPress ߋ৽؅ཧෆཁ αʔόʔܖ໿ෆཁ ϛυϧ΢ΣΞͷ؅ཧෆཁ ͜Εશ෦ Shifter ͕΍Γ·͢

Slide 48

Slide 48 text

ηΩϡϦςΟ΋҆৺ WordPress ىಈ WordPress ఀࢭ Shifter ϩάΠϯ ੩తԽ (δΣωϨʔτ) ެ։ HTML, CSS, JavaScript هࣄߋ৽ αΠτฤू ഑৴ ⚡ Shifter ͷ ϥΠϑαΠΫϧ

Slide 49

Slide 49 text

https://www.webpagetest.org/

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

·ͣ͸͓ࢼ͠Λɻ

Slide 52

Slide 52 text

Shifter ؔ࿈৘ใ

Slide 53

Slide 53 text

Shifter Twitter @JP_GetShifter https://twitter.com/JP_Getshifter

Slide 54

Slide 54 text

[12/10 ։࠵] Shifter Φϯ ϥΠϯϛʔτΞοϓʂ ΦϯϥΠϯݸผ૬ஊձ ࣮ࢪதʂ Shifter ؔ࿈Πϕϯτ