WordPressとShopifyでECサイトを作ろう

https://wpzoom.connpass.com/event/191421/

Transcript

1. WordPressͱShopifyͰECαΠτΛ࡞Ζ͏
   2020.10.30 @ WP ZOOMUP #51
   Junichi Okamura

   

   View Slide

2. • Junichi Okamura, Sr. Technical Partner Manager at Shopify
   • @benzookapi
   • API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker
   Who am I?
   

   View Slide

3. ͍͖ͳΓαϯϓϧʂ
   01
   ຊ೔ͷ͓୊
   ʢલ൒ʣ
   02
   Shopifyͱ͸ʁ
   03 ShopifyύʔτφʔϓϩάϥϜͷ֓ཁ
   04 ShopifyΞϓϦͱςʔϚͷ֓ཁ
   05 WordPressͱShopifyͰECΛߏங͢Δํ๏
   

   View Slide

4. ShopifyͱଞͷECϓϥάΠϯͷҧ͍
   06
   07
   ShopifyΛ࢖͏ϝϦοτɺσϝϦοτ
   08 WordPressͱShopifyͷྨࣅ఺ͱ૬ҧ఺
   09 αΠτ੍࡞ͱEC੍࡞ͷྨࣅ఺ͱ૬ҧ఺
   10 ࠓ͔ΒShopifyύʔτφʔΛ࢝ΊΔͨΊͷࢿྉ
   ຊ೔ͷ͓୊
   ʢޙ൒ʣ
   

   View Slide

5. ShopifyʢγϣοϐϑΝΠʣʹ͍ͭͯ
   

   View Slide

6. Shopify͸Ϋϥ΢υϕʔεͷΦϜχνϟωϧΛ࣮ݱͨ͠ϓϥοτϑΥʔϜͰ
   ͢ɻݸਓͷํ͔Βେاۀ·Ͱ҆৺ͯ͠͝ར༻͍͚ͨͩ·͢ɻ
   2006
   αʔϏε։࢝
   $2,080M
   ऩӹֹ
   (աڈ12ϱ݄)
   $202B
   ࣄۀऀ༷ͷ૯ྲྀ௨ֹ
   (ྦྷܭ)
   2.9 million
   ϚʔνϟϯτελοϑΞΧ΢ϯτ਺
   (2019೥12݄31೔࣌఺)
   1,000,000+
   ళฮ
   ——
   ~175ϱࠃ
   5,000+
   ࣾһ਺
   Shopifyʹؔͯ͠
   (2020೥6݄30೔࣌఺)
   4,600
   ΞϓϦετΞʹެ։͞Ε͍ͯΔΞϓϦͷ਺
   30,300
   ΞΫςΟϒύʔτφʔ਺
   աڈ12Χ݄ͷؒͰ1ళฮҎ্ͷShopifyετΞΛϦϦʔεͨ͠ύʔτφʔͷ਺
   $180M
   2019೥ͷύʔτφʔΤίγεςϜʹΑΔརӹֹ
   (2020೥6݄30೔࣌఺)
   (2020೥6݄30೔࣌఺)
   

   View Slide

7. ECۀքʹ͓͚ΔShopifyͷϙδγϣϯ
   Share of U.S. Retail eCommerce Sales 2019
   Amazon
   Shopify*
   eBay
   Walmart
   Apple
   The Home Depot
   Wayfair
   Best Buy
   Macy's
   QVC
   Costco
   37.3%
   5.9%
   5.7%
   4.7%
   3.8%
   1.6%
   1.3%
   1.2%
   1.2%
   1.2%
   1.3%
   Source: eMarketer, October 2019, Shopify
   * Market share based on Shopify’s 2019 US GMV (excluding merchant sales made through POS)
   

   View Slide

8. ϝσΟΞใಓ
   

   View Slide

9. View Slide

10. View Slide

11. Shopifyͷಛ௃
    

    View Slide

12. ϚϧννϟωϧίϚʔεϓϥοτϑΥʔϜ
    

    View Slide

13. Shopify͸ൢചʹඞཁͳશͯΛαϙʔτ
    σβΠϯ
    ϗετ
    ܾࡁ SEO
    ෼ੳ σʔλ
    ϓϥΠόγʔ
    ड஫
    υϝΠϯ
    ετΞ࡞੒ όοΫΤϯυ ϚʔέςΟϯά ҆શੑ
    ϒϩά
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. ग़యɿNewsPicks Brand Design
    

    View Slide

20. ଟ௨՟ܾࡁ
    

    View Slide

21. ଟݴޠରԠ
    

    View Slide

22. νΣοΫΞ΢τΛεϐʔυΞοϓ
    ΫϨδοτΧʔυΛ࢖༻͢Δ͜ͱͳ͘ಠཱͨ͠ετΞͰ҆શ
    ʹങ͍෺Λ͠·͠ΐ͏ɻ
    • ϑΥʔϜ΁ͷهೖ͸ෆཁ

    Shop PayʹΑͬͯνΣοΫΞ΢τ͕ॲཧ͞ΕΔͷͰɺ
    ࢧ෷͍Ͱ͸ͳ͘ങ͍෺ʹ࣌ؒΛ͔͚Δ͜ͱ͕Ͱ͖·͢ɻ
    • ύεϫʔυͷهԱ͸ෆཁ

    Shop PayͰ͸ɺ࠷΋҆શͰศརͳೝূํ๏͕ৗʹબ୒
    ͞Ε·͢ɻ
    

    View Slide

23. Server uptime
    99.98%
    Bandwidth and transactions
    Unlimited
    PCI DSS compliance
    Level 1
    ߴ͍৴པੑ
    

    View Slide

24. ൚༻ੑ͕ߴࣗ͘༝౓ͷߴ͍ΧελϚΠζ͕Մೳ
    ෳ਺։ൃݴޠͰࣗ༝ͳΧελϚΠζΛՄೳͱ͢Δ๛෋ͳAPI
    Access APIs Inventory APIs Product APIs
    Analytics APIs MarketingEvent Sales channel APIs
    Billing APIs Metafield
    Shipping and
    fulfillment APIs
    Customer APIs Online store APIs
    Shopify Payments
    APIs
    Discount APIs Order APIs
    Store property
    APIs
    Event APIs Plus APIs TenderTransaction
    

    View Slide

25. 4,600
    ΞϓϦʹΑΔػೳ֦ு աڈ1೥ؒͷΞΫςΟϒύʔτφʔ਺
    30,300
    Apps Agencies & Web Designers
    ೔ʑ੒௕͢ΔShopifyύʔτφʔΤίγεςϜ
    

    View Slide

26. 26
    ೔ຊͰ΋ΞϓϦΤίγεςϜ͸ٸ֦େ
    ֦େ͢Δ
    Τίγε
    ςϜ
    ϨϕχϡʔγΣΞ
    ΞϓϦ՝ۚɿ
    20% Shopify 80% ύʔτφʔ
    ετΞֹ݄අ༻ɿ
    20% ύʔτφʔ 80% Shopify
    

    View Slide

27. 27
    νΣοΫΞ΢τ
    ετΞϑϩϯτ
    ૔ݿ
    ΫʔϦΤ
    ϚʔέςΟϯά

    ΞφϦςΟΫε
    CMS
    ഑ૹͱ
    ϩδεςΟΫε
    ΦϯϥΠϯετΞ
    ϞόΠϧΞϓϦ
    PWA
    ϙοϓΞοϓͳͲͷ׆ಈ
    ϘΠεγϣοϐϯά
    όοΫΤϯυͷ֦ுੑ ސ٬ͱͷλονϙΠϯτ
    ϔουϨείϚʔε
    

    View Slide

28. େاۀ
    LARGER BRANDS
    தখاۀ
    SMB’S
    ݸਓϏδωε
    ENTREPRENEURS
    29 υϧ
    ֹ݄
    79
    2,000
    ϕʔγοΫ
    ελϯμʔυ
    ϓϨϛΞϜ
    SHOPIFY PLUS
    υϧ
    ֹ݄
    υϧ
    ֹ݄
    υϧ
    ֹ݄
    299
    ੒௕Λαϙʔτ͢Δϓϥϯମܥ
    Ϗδωε͕੒௕ͯ͠΋ϓϥοτϑΥʔϜͷ৐Γ׵͑͸ෆཁɾ঎඼ొ࿥਺ແ੍ݶ
    

    View Slide

29. 29
    ͍͖ͳΓαϯϓϧʂ
    

    View Slide

30. ShopifyύʔτφʔϓϩάϥϜʹ͍ͭͯ
    

    View Slide

31. 31
    ύʔτφʔొ࿥
    ֦େ͢Δ
    Τίγε
    ςϜ
    Shopify ύʔτφʔ
    

    View Slide

32. 32
    ։ൃετΞͷ࡞੒
    ֦େ͢Δ
    Τίγε
    ςϜ
    

    View Slide

33. 33
    ΞϓϦͷ࡞੒
    ֦େ͢Δ
    Τίγε
    ςϜ
    

    View Slide

34. 34
    ऩӹͷ֬ೝ
    ֦େ͢Δ
    Τίγε
    ςϜ
    

    View Slide

35. ShopifyΞϓϦͱςʔϚͷ֓ཁ
    

    View Slide

36. 36
    ShopifyΞϓϦ
    ֦େ͢Δ
    Τίγε
    ςϜ
    

    View Slide

37. 37
    ShopifyΞϓϦͷΞʔΩςΫνϟ
    ΞϓϦͷ
    ߏ੒
    

    View Slide

38. 38
    ஌ࣝ
    • ΞϓϦͷछྨʢPublic: ެ։༻ Custom/Private: Ҋ݅༻ʣ
    • ϓϩάϥϛϯάʢݴޠ͸໰Θͳ͍͕Node.js/Reactਪ঑ʣ
    • GraphQLʢREST API΋࢖͑Δ͕ͪ͜Β͕ਪ঑ʣ
    ShopifyΞϓϦΛ࡞Δͷʹඞཁͳ஌ࣝ
    

    View Slide

39. 39
    ShopifyςʔϚ
    ֦େ͢Δ
    Τίγε
    ςϜ
    

    View Slide

40. 40
    ShopifyςʔϚͷΞʔΩςΫνϟ
    ΞϓϦͷ
    ߏ੒
    

    View Slide

41. 41
    ஌ࣝ
    • ςʔϚͷߏ੒ɺ࢓༷ͷཧղʢ։ൃυΩϡϝϯτʣ
    • HTML/CSS(Sass)/JavaScript
    • Liquidʢආ͚ͯ௨Εͳ͍͕ɺࠩผԽཁҼʣ
    ShopifyςʔϚͷσβΠϯʹඞཁͳ஌ࣝ
    

    View Slide

42. WordPressͱShopifyͰECΛߏங͢Δํ๏
    

    View Slide

43. 43
    Shopify Buy Button Channel
    ΞϓϦ
    Shopify Buy Button
    

    View Slide

44. 44
    Shopify BuyButton.js
    JS
    Shopify Buy Button JS
    

    View Slide

45. 45
    ShopifyͱWordPressͷؔ܎
    ఆٛ
    Backend Frontend
    • ঎඼؅ཧ
    • ஫จ؅ཧ
    • ഑ૹ؅ཧ
    • ܾࡁ
    • ސ٬؅ཧ
    …etc
    • ঎඼లࣔ
    • ϒϩά
    • SEO
    • ϞόΠϧରԠ
    • σβΠϯ
    …etc
    APIɾSDK
    

    View Slide

46. 46
    ެࣜϖʔδ΍ϔϧϓ΋͋Γ·͢
    ͦͷଞ
    Shopify WordPress ࿈ܞ
    

    View Slide

47. ShopifyΛ࢖͏ϝϦοτɺσϝϦοτ
    

    View Slide

48. 48
    ϝϦοτ
    • Shopifyͷߴ౓ͳίϚʔεػೳΛͦͷ··ར༻Ͱ͖Δ
    • ShopifyͷηΩϡϦςΟ΍৴པੑΛڗडͰ͖Δ
    • ࢖͍׳ΕͨWordPress templateʢCMSʣΛͦͷ··࢖͑Δ
    • طଘࢿ࢈ʢSEO ɺϒϩάͳͲʣΛͦͷ··࢖͑Δ
    ShopifyΛ࢖ͬͯಘΒΕΔ΋ͷ
    

    View Slide

49. 49
    σϝϦοτ
    • ϑϧΧελϚΠζͱશͯͷίʔυͷ೺Ѳ
    • WordPressͷΈͰͷҰݩ؅ཧ
    • ೔ຊޠͷΈͰͷ৘ใऩू
    ShopifyΛ࢖ࣦͬͯ͏΋ͷ
    

    View Slide

50. ShopifyͱଞͷECϓϥάΠϯͷҧ͍
    

    View Slide

51. 51
    ओͳҧ͍ Shopify͸Ϋϥ΢υϓϥοτϑΥʔϜ
    Shopify WordPressϓϥάΠϯ
    WordPress؅ཧը໘
    ΁ͷ౷߹
    ෆՄ Մೳ
    Ξοϓσʔτ΍ηΩϡϦ
    ςΟʔύον
    ෆཁ ඞཁ
    ίʔυվม ෆՄ Մೳ
    ར༻අ༻ ֹ݄ ങ͍੾Γ
    ֎෦ػೳͱͷ֦ுੑ ߴ͍ ௿͍
    

    View Slide

52. WordPressͱShopifyͷྨࣅ఺ͱ૬ҧ఺
    

    View Slide

53. 53
    ྨࣅ఺
    • ίΞͱ֦ுػೳͰ༷ʑͳχʔζʹԠ͑ͳ͕Β੒௕
    • Ϣʔβʔ΍ػೳΛ։ൃ͢ΔਓͷίϛϡχςΟΛ௨ͯ͡੒௕
    • ଟछଟ༷ͷ༷ʑͳن໛ͷϢʔβʔ͕ࠞࡏ
    • ςϯϓϨʔτͱςʔϚɺϓϥάΠϯͱΞϓϦͷಉ༷ͷ࢓૊Έ
    ͕ଘࡏ
    ֦ுੑͱίϛϡχςΟͰ੒௕
    

    View Slide

54. 54
    ૬ҧ఺
    • Shopify͸Ϋϥ΢υSaasͰ͋ΓɺWordPress͸ʢجຊ͸ʣ
    ΦϯϓϨϛεͷOSS
    • Shopifyͷίετ͸Shopify͕ఆΊͨڞ௨ྉۚɺWordPress
    ͸ߏஙऀ΍Ϣʔβʔ͕ܾΊΔ
    • ςϯϓϨʔτ΍ςʔϚɺϓϥάΠϯ΍ΞϓϦͷଘࡏํ๏͕ҟ
    ͳΔ
    OSS͔Ϋϥ΢υ͔ʁ
    WordPressͷϢʔβʔ͞Μɺ
    ύʔτφʔ͞Μ͔Βݟͨ͝ҙݟΛฉ
    ͍ͯΈ͍ͨͰ͢ʂ
    

    View Slide

55. αΠτ੍࡞ͱEC੍࡞ͷྨࣅ఺ͱ૬ҧ఺
    

    View Slide

56. 56
    ྨࣅ఺
    • ͓٬༷ͷ࣮ݱ͍ͨ͜͠ͱΛώΞϦϯάͯͦ͠ΕΛπʔϧʹམ
    ͱ͠ࠐΈɺ΢Σϒ্ͷ੒Ռ෺ͱͯ͠ೲ඼
    • ཁ݅ఆٛྗɺσβΠϯྗɺ։ൃྗͳͲ͕໰ΘΕΔ
    • ΢Σϒͷ஌ࣝͱٕज़͕ඞཁ
    ཁ݅ఆٛ > ੍࡞ > ೲ඼
    

    View Slide

57. 57
    ૬ҧ఺
    • αΠτ੍࡞͸ೲ඼લʹॏ͖͕ஔ͔Ε͕ͪʢσβΠϯͷಠࣗ
    ੑɺཁ๬ͷΧόʔ཰ͳͲʣɻEC੍࡞͸ೲ඼ޙʹॏ͖͕ஔ͔
    Ε͕ͪʢചΓ্͛ߩݙɺมԽʹԠͨ͡ࢪࡦͳͲʣɻ
    • αΠτ੍࡞͸੍࡞෺ͦͷ΋ͷ΁ͷظ଴஋ίϯτϩʔϧ͕ॏ
    ཁɺEC੍࡞͸੍࡞෺ͷޮՌ΁ͷظ଴஋ίϯτϩʔϧ͕ඞ
    ཁɻ
    ೲ඼લͱೲ඼ޙͷൺॏ
    ͜ͷลΓ͸ɺ࣮ࡍʹ׆༂ͯ͠
    ͍Δύʔτφʔ͞Μͷํ͕Կഒ΋ৄ͍͠
    ͷͰɺͥͻίϛϡχςΟʹࢀՃͯ͠஌ݟΛ
    ͨΊ͍ͯͩ͘͞ʂ
    

    View Slide

58. ࠓ͔ΒShopifyύʔτφʔΛ࢝ΊΔͨΊͷࢿྉ
    

    View Slide

59. 59
    Shopify ύʔτφʔίϛϡχςΟϋϒ
    શͯͷ৘ใ
    Shopify ύʔτφʔίϛϡχςΟ
    

    View Slide

60. 60
    Youtube ύʔτφʔ࠶ੜϦετ
    νϡʔτϦ
    Ξϧ
    shopify Youtube ೔ຊ
    

    View Slide

61. 61
    Shopify ΦϯϥΠϯίϛϡχςΟʢϑΥʔϥϜʣ
    ࣭໰
    Shopify ϑΥʔϥϜ
    

    View Slide

62. View Slide