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

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

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

Junichi Okamura

October 30, 2020
Tweet

More Decks by Junichi Okamura

Other Decks in Technology

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