Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

benzookapi
October 30, 2020

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

benzookapi

October 30, 2020
Tweet

More Decks by benzookapi

Other Decks in Technology

Transcript

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


    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  8. ϝσΟΞใಓ

    View full-size slide

  9. Shopifyͷಛ௃

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. ग़యɿNewsPicks Brand Design

    View full-size slide

  13. ଟ௨՟ܾࡁ

    View full-size slide

  14. ଟݴޠରԠ

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

  17. ൚༻ੑ͕ߴࣗ͘༝౓ͷߴ͍ΧελϚΠζ͕Մೳ
    ෳ਺։ൃݴޠͰࣗ༝ͳΧελϚΠζΛՄೳͱ͢Δ๛෋ͳ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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide