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

2021年11月13日に開催された「Snow Monkey x Shifter ミートアップ」でのセッションです。
Snow Monkey テーマで構築された LabWorks の要件定義からサイト構築までを詳しく紹介しています。

Transcript

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

   View Slide

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

   View Slide

3. #JP_LabWorks © LabWorks.
   ੢ଜ भฏɹShuhei NISHIMURA
   •Πϯό΢ϯυηʔϧε/ SNS ͷதͷਓ
   •ݩ͸ WordPress ͷςʔϚ։ൃɾϓϥάΠϯ։ൃΛߦ͏

   ϑϩϯτΤϯυ։ൃऀɻSnow Monkey Λ࢖ͬͨ

   αΠτߏஙܦݧ͋Γ
   3
   ࣗݾ঺հ
   @marushu
   marushu
   https://private.hibou-web.com/
   

   View Slide

4. #JP_LabWorks © LabWorks.
   Ըా ३ࢠɹJunko ONDA
   •ݩίϯςϯπϚʔέλʔɺϊϯΤϯδχΞ
   •LabWorks Ͱ͸اըߏ૝ஈ֊ͰͷऔΓ·ͱΊͱਐḿ؅ཧɺ

   ίϯςϯπاըɾ੍࡞ɺϩʔϯνޙͷӡ༻Λ୲౰
   4
   ϓϩδΣΫτϝϯόʔ঺հʢϓϩδΣΫτϚωδϝϯτΦϑΟεʣ
   @OnYun
   https://mamelogy.com/
   

   View Slide

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

   View Slide

6. #JP_LabWorks © LabWorks.
   ਿຊ ३ɹJun SUGIMOTO
   •ओʹHTML/ CSS/ JavaScript Λ༻͍࣮ͨ૷ͱ

   WordPressͰͷαΠτߏஙΛ୲౰
   •2011೥͔Βݸਓࣄۀओͱͯ͠ಠཱɺ

   2019೥ʹσδλϧΩϡʔϒʹδϣΠϯ
   6
   ϓϩδΣΫτϝϯόʔ঺հʢWordPress ςʔϚ։ൃɾϓϥάΠϯ։ൃʣ
   @understandard
   understandard
   

   View Slide

7. #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
   

   View Slide

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

   View Slide

9. #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 σβΠφʔ/ϩΰɾάϥϑΟοΫσβΠφʔ/։ൃऀ

   ΄͔ɺ֎෦ύʔτφʔͱͯ͠ϥΠλʔɾΧϝϥϚϯ
   

   View Slide

10. #JP_LabWorks © LabWorks.
    LabWorks (ϥϘϫʔΫε) ʹ͍ͭͯ
    LabWorks ͷαΠτΛ࡞ͬͨഎܠ
    10
    WordPress ઐۀͰ

    डୗ։ൃʙอकɾ

    ӡ༻·ͰରԠͰ͖Δ

    ͜ͱΛൃ৴
    ҆ఆతͳ঎ஊԽɾ

    Ҋ݅ड஫
    (ཪ໨త) ҉໧஌ͷ

    ܗࣜ஌ԽɾݴޠԽ
    1 2 3
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. #JP_LabWorks © LabWorks.
    ཁ݅΁ͷམͱ͠ࠐΈ
    ࢲ͕ͨͪఏڙͰ͖Δ͜ͱ
    16
    ఏڙՁ஋
    • WordPress ʹಛԽͨ͠ Web αΠτͷ੍࡞ɾΠϯϑϥอकɾվળͷͨΊͷ

    ௐࠪٴͼվળରԠ·ͰҰؾ௨؏ɺ·ͨ͸ύοέʔδ୯ҐͰఏڙͰ͖Δ
    • WordPress ઐۀ15೥Ҏ্ɻ৴པͱ࣮੷ɺଞࣾʹͳ͍ٕज़ྗͱϊ΢ϋ΢
    

    View Slide

17. #JP_LabWorks © LabWorks.
    ཁ݅΁ͷམͱ͠ࠐΈ
    ࢲ͕ͨͪސ٬ʹ఻͑ΒΕΔ͜ͱΛϝοηʔδʹམͱ͠ࠐΈ
    17
    ϝοηʔδϯάҊ
    • WordPress ʹಛԽͨ͠ ։ൃձࣾͰ͢ɻWordPress Λ࢖ͬͨ Web αΠτ੍࡞ɺ

    Πϯϑϥͷอकɺϝϯςφϯε͓ΑͼௐࠪɾվળͳΒ͓೚͍ͤͩ͘͞
    • ͓٬༷ͷϓϩδΣΫτνʔϜͷҰһͱͯ͠ɺʮWeb αΠτΛ࡞ΔɾकΔɾྑ͘͢ΔʯΛ׎͑·͢
    ϝοηʔδϯάʢ΄΅֬ఆʣ
    • ͋ͳͨ (ސ٬) ͷϏδωεΛ੒ޭʹಋ͘ϓϩδΣΫτͷνʔϜϝϯόʔͱͯ͠

    σδλϧΩϡʔϒͷٕज़νʔϜ͕ WordPress ʹΑΔ Web ੍࡞͔Βӡ༻·ͰΛ͓ख఻͍͠·͢
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. #JP_LabWorks © LabWorks.
    ཁ݅ఆٛɾઃܭϑΣʔζ
    LabWorks͸୭͕ӡ༻͢Δͷ͔ʁ →ཁ݅
    23
    ߋ৽୲౰ CS/Ϛʔέ୲౰ɺडୗ։ൃσΟϨΫλʔʢඇΤϯδχΞ͔ͭ௨ৗۀ຿ͱ݉຿ʣ
    ߋ৽୲౰ऀͷؾ࣋ͪ ίϯςϯπͷฤू͸ WordPress μογϡϘʔυͰ׬͍݁ͨ͠ɻ
    ߋ৽ස౓ ͦΕ΄Ͳଟ͘ͳ͍ɻ
    ηΩϡϦςΟରࡦɾ

    Ξοϓσʔτ
    ౎౓ΤϯδχΞʹཔ·ͳ͍Ͱɺӡ༻୲౰Ͱ׬͍݁ͨ͠ɻ
    ݟͨ໨
    ϨεϙϯγϒɻඇΤϯδχΞͰ΋͖Ε͍ʹ࡞ΕΔɻ

    ͏͔ͬΓϛεͰϨΠΞ΢τ่͕ΕΔͷ͸ࠔΔɻ
    ͓໰͍߹ΘͤϑΥʔϜ ࣗ෼ͨͪͰઃஔͯ͠ӡ༻͍ͨ͠ɻ
    SEOɾܭଌɾղੳ ϊʔίʔυʹͯࣗ͠෼ͨͪͰӡ༻͍ͨ͠ɻ
    

    View Slide

24. #JP_LabWorks © LabWorks.
    ཁ݅ఆٛɾઃܭϑΣʔζ
    ཁ๬͔ΒͷબఆɿςʔϚͱϓϥάΠϯ
    24
    Snow Monkey ʴ ϒϩοΫΤσΟλʢϓϥάΠϯɺࣗ࡞ϒϩοΫʣ
    HTML΍JSʹৄ͘͠ͳ͍ඇΤϯδχΞ

    த৺ͷӡ༻νʔϜͰ΋ɺ

    ϨΠΞ΢τɾϨεϙϯγϒσβΠϯɾ

    ಈ͖ͷ͋ΔίϯςϯπΛ༰қʹ࡞ΓࠐΊΔ
    

    View Slide

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

    View Slide

26. #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΋ඞཁʹͳΔ
    

    View Slide

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

    View Slide

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

    View Slide

29. #JP_LabWorks © LabWorks. 29
    ×
    

    View Slide

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

    View Slide

31. #JP_LabWorks © LabWorks. 31
    Q. ΧελϚΠζੑൈ܈ͳ Snow Monkeyɻ

    ɹςʔϚΧελϚΠβʔɺ։ൃऀ໨ઢͰͲ͏Ͱͨ͠ʁ
    ཁ݅ఆٛɾઃܭʙ։ൃɾϦϦʔεʙӡ༻
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

49. https://www.webpagetest.org/
    

    View Slide

50. View Slide

51. ·ͣ͸͓ࢼ͠Λɻ
    

    View Slide

52. Shifter ؔ࿈৘ใ
    

    View Slide

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

    View Slide

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

    View Slide

55. #JP_LabWorks © LabWorks. 55
    ͜Ε͔Β΋ΑΖ͓͘͠ئ͍͠·͢ʂ
    

    View Slide