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

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

Transcript

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

2. • Junichi Okamura, Sr. Technical Partner Manager at Shopify • @benzookapi • API Lover/Midnight Developer/MANGA Creator/Beer Lover/App Hacker Who am I?
3. ͍͖ͳΓαϯϓϧʂ 01 ຊ೔ͷ͓୊ ʢલ൒ʣ 02 Shopifyͱ͸ʁ 03 ShopifyύʔτφʔϓϩάϥϜͷ֓ཁ 04 ShopifyΞϓϦͱςʔϚͷ֓ཁ 05 WordPressͱShopifyͰECΛߏங͢Δํ๏
4. ShopifyͱଞͷECϓϥάΠϯͷҧ͍ 06 07 ShopifyΛ࢖͏ϝϦοτɺσϝϦοτ 08 WordPressͱShopifyͷྨࣅ఺ͱ૬ҧ఺ 09 αΠτ੍࡞ͱEC੍࡞ͷྨࣅ఺ͱ૬ҧ఺ 10 ࠓ͔ΒShopifyύʔτφʔΛ࢝ΊΔͨΊͷࢿྉ ຊ೔ͷ͓୊ ʢޙ൒ʣ
5. ShopifyʢγϣοϐϑΝΠʣʹ͍ͭͯ
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೔࣌఺)
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)
8. ϝσΟΞใಓ
11. Shopifyͷಛ௃
12. ϚϧννϟωϧίϚʔεϓϥοτϑΥʔϜ
13. Shopify͸ൢചʹඞཁͳશͯΛαϙʔτ σβΠϯ ϗετ ܾࡁ SEO ෼ੳ σʔλ ϓϥΠόγʔ ड஫ υϝΠϯ ετΞ࡞੒ όοΫΤϯυ ϚʔέςΟϯά ҆શੑ ϒϩά
19. ग़యɿNewsPicks Brand Design
20. ଟ௨՟ܾࡁ
21. ଟݴޠରԠ
22. νΣοΫΞ΢τΛεϐʔυΞοϓ ΫϨδοτΧʔυΛ࢖༻͢Δ͜ͱͳ͘ಠཱͨ͠ετΞͰ҆શ ʹങ͍෺Λ͠·͠ΐ͏ɻ • ϑΥʔϜ΁ͷهೖ͸ෆཁ
 Shop PayʹΑͬͯνΣοΫΞ΢τ͕ॲཧ͞ΕΔͷͰɺ ࢧ෷͍Ͱ͸ͳ͘ങ͍෺ʹ࣌ؒΛ͔͚Δ͜ͱ͕Ͱ͖·͢ɻ • ύεϫʔυͷهԱ͸ෆཁ
 Shop PayͰ͸ɺ࠷΋҆શͰศརͳೝূํ๏͕ৗʹબ୒ ͞Ε·͢ɻ
23. Server uptime 99.98% Bandwidth and transactions Unlimited PCI DSS compliance Level 1 ߴ͍৴པੑ
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
25. 4,600 ΞϓϦʹΑΔػೳ֦ு աڈ1೥ؒͷΞΫςΟϒύʔτφʔ਺ 30,300 Apps Agencies & Web Designers ೔ʑ੒௕͢ΔShopifyύʔτφʔΤίγεςϜ
26. 26 ೔ຊͰ΋ΞϓϦΤίγεςϜ͸ٸ֦େ ֦େ͢Δ Τίγε ςϜ ϨϕχϡʔγΣΞ ΞϓϦ՝ۚɿ 20% Shopify 80% ύʔτφʔ ετΞֹ݄අ༻ɿ 20% ύʔτφʔ 80% Shopify
27. 27 νΣοΫΞ΢τ ετΞϑϩϯτ ૔ݿ ΫʔϦΤ ϚʔέςΟϯά
 ΞφϦςΟΫε CMS ഑ૹͱ ϩδεςΟΫε ΦϯϥΠϯετΞ ϞόΠϧΞϓϦ PWA ϙοϓΞοϓͳͲͷ׆ಈ ϘΠεγϣοϐϯά όοΫΤϯυͷ֦ுੑ ސ٬ͱͷλονϙΠϯτ ϔουϨείϚʔε
28. େاۀ LARGER BRANDS தখاۀ SMB’S ݸਓϏδωε ENTREPRENEURS 29 υϧ ֹ݄ 79 2,000 ϕʔγοΫ ελϯμʔυ ϓϨϛΞϜ SHOPIFY PLUS υϧ ֹ݄ υϧ ֹ݄ υϧ ֹ݄ 299 ੒௕Λαϙʔτ͢Δϓϥϯମܥ Ϗδωε͕੒௕ͯ͠΋ϓϥοτϑΥʔϜͷ৐Γ׵͑͸ෆཁɾ঎඼ొ࿥਺ແ੍ݶ
29. 29 ͍͖ͳΓαϯϓϧʂ
30. ShopifyύʔτφʔϓϩάϥϜʹ͍ͭͯ
31. 31 ύʔτφʔొ࿥ ֦େ͢Δ Τίγε ςϜ Shopify ύʔτφʔ
32. 32 ։ൃετΞͷ࡞੒ ֦େ͢Δ Τίγε ςϜ
33. 33 ΞϓϦͷ࡞੒ ֦େ͢Δ Τίγε ςϜ
34. 34 ऩӹͷ֬ೝ ֦େ͢Δ Τίγε ςϜ
35. ShopifyΞϓϦͱςʔϚͷ֓ཁ
36. 36 ShopifyΞϓϦ ֦େ͢Δ Τίγε ςϜ
37. 37 ShopifyΞϓϦͷΞʔΩςΫνϟ ΞϓϦͷ ߏ੒
38. 38 ஌ࣝ • ΞϓϦͷछྨʢPublic: ެ։༻ Custom/Private: Ҋ݅༻ʣ • ϓϩάϥϛϯάʢݴޠ͸໰Θͳ͍͕Node.js/Reactਪ঑ʣ • GraphQLʢREST API΋࢖͑Δ͕ͪ͜Β͕ਪ঑ʣ ShopifyΞϓϦΛ࡞Δͷʹඞཁͳ஌ࣝ
39. 39 ShopifyςʔϚ ֦େ͢Δ Τίγε ςϜ
40. 40 ShopifyςʔϚͷΞʔΩςΫνϟ ΞϓϦͷ ߏ੒
41. 41 ஌ࣝ • ςʔϚͷߏ੒ɺ࢓༷ͷཧղʢ։ൃυΩϡϝϯτʣ • HTML/CSS(Sass)/JavaScript • Liquidʢආ͚ͯ௨Εͳ͍͕ɺࠩผԽཁҼʣ ShopifyςʔϚͷσβΠϯʹඞཁͳ஌ࣝ
42. WordPressͱShopifyͰECΛߏங͢Δํ๏
43. 43 Shopify Buy Button Channel ΞϓϦ Shopify Buy Button
44. 44 Shopify BuyButton.js JS Shopify Buy Button JS
45. 45 ShopifyͱWordPressͷؔ܎ ఆٛ Backend Frontend • ঎඼؅ཧ • ஫จ؅ཧ • ഑ૹ؅ཧ • ܾࡁ • ސ٬؅ཧ …etc • ঎඼లࣔ • ϒϩά • SEO • ϞόΠϧରԠ • σβΠϯ …etc APIɾSDK
46. 46 ެࣜϖʔδ΍ϔϧϓ΋͋Γ·͢ ͦͷଞ Shopify WordPress ࿈ܞ
47. ShopifyΛ࢖͏ϝϦοτɺσϝϦοτ
48. 48 ϝϦοτ • Shopifyͷߴ౓ͳίϚʔεػೳΛͦͷ··ར༻Ͱ͖Δ • ShopifyͷηΩϡϦςΟ΍৴པੑΛڗडͰ͖Δ • ࢖͍׳ΕͨWordPress templateʢCMSʣΛͦͷ··࢖͑Δ • طଘࢿ࢈ʢSEO ɺϒϩάͳͲʣΛͦͷ··࢖͑Δ ShopifyΛ࢖ͬͯಘΒΕΔ΋ͷ
49. 49 σϝϦοτ • ϑϧΧελϚΠζͱશͯͷίʔυͷ೺Ѳ • WordPressͷΈͰͷҰݩ؅ཧ • ೔ຊޠͷΈͰͷ৘ใऩू ShopifyΛ࢖ࣦͬͯ͏΋ͷ
50. ShopifyͱଞͷECϓϥάΠϯͷҧ͍
51. 51 ओͳҧ͍ Shopify͸Ϋϥ΢υϓϥοτϑΥʔϜ Shopify WordPressϓϥάΠϯ WordPress؅ཧը໘ ΁ͷ౷߹ ෆՄ Մೳ Ξοϓσʔτ΍ηΩϡϦ ςΟʔύον ෆཁ ඞཁ ίʔυվม ෆՄ Մೳ ར༻අ༻ ֹ݄ ങ͍੾Γ ֎෦ػೳͱͷ֦ுੑ ߴ͍ ௿͍
52. WordPressͱShopifyͷྨࣅ఺ͱ૬ҧ఺
53. 53 ྨࣅ఺ • ίΞͱ֦ுػೳͰ༷ʑͳχʔζʹԠ͑ͳ͕Β੒௕ • Ϣʔβʔ΍ػೳΛ։ൃ͢ΔਓͷίϛϡχςΟΛ௨ͯ͡੒௕ • ଟछଟ༷ͷ༷ʑͳن໛ͷϢʔβʔ͕ࠞࡏ • ςϯϓϨʔτͱςʔϚɺϓϥάΠϯͱΞϓϦͷಉ༷ͷ࢓૊Έ ͕ଘࡏ ֦ுੑͱίϛϡχςΟͰ੒௕
54. 54 ૬ҧ఺ • Shopify͸Ϋϥ΢υSaasͰ͋ΓɺWordPress͸ʢجຊ͸ʣ ΦϯϓϨϛεͷOSS • Shopifyͷίετ͸Shopify͕ఆΊͨڞ௨ྉۚɺWordPress ͸ߏஙऀ΍Ϣʔβʔ͕ܾΊΔ • ςϯϓϨʔτ΍ςʔϚɺϓϥάΠϯ΍ΞϓϦͷଘࡏํ๏͕ҟ ͳΔ OSS͔Ϋϥ΢υ͔ʁ WordPressͷϢʔβʔ͞Μɺ ύʔτφʔ͞Μ͔Βݟͨ͝ҙݟΛฉ ͍ͯΈ͍ͨͰ͢ʂ
55. αΠτ੍࡞ͱEC੍࡞ͷྨࣅ఺ͱ૬ҧ఺
56. 56 ྨࣅ఺ • ͓٬༷ͷ࣮ݱ͍ͨ͜͠ͱΛώΞϦϯάͯͦ͠ΕΛπʔϧʹམ ͱ͠ࠐΈɺ΢Σϒ্ͷ੒Ռ෺ͱͯ͠ೲ඼ • ཁ݅ఆٛྗɺσβΠϯྗɺ։ൃྗͳͲ͕໰ΘΕΔ • ΢Σϒͷ஌ࣝͱٕज़͕ඞཁ ཁ݅ఆٛ > ੍࡞ > ೲ඼
57. 57 ૬ҧ఺ • αΠτ੍࡞͸ೲ඼લʹॏ͖͕ஔ͔Ε͕ͪʢσβΠϯͷಠࣗ ੑɺཁ๬ͷΧόʔ཰ͳͲʣɻEC੍࡞͸ೲ඼ޙʹॏ͖͕ஔ͔ Ε͕ͪʢചΓ্͛ߩݙɺมԽʹԠͨ͡ࢪࡦͳͲʣɻ • αΠτ੍࡞͸੍࡞෺ͦͷ΋ͷ΁ͷظ଴஋ίϯτϩʔϧ͕ॏ ཁɺEC੍࡞͸੍࡞෺ͷޮՌ΁ͷظ଴஋ίϯτϩʔϧ͕ඞ ཁɻ ೲ඼લͱೲ඼ޙͷൺॏ ͜ͷลΓ͸ɺ࣮ࡍʹ׆༂ͯ͠ ͍Δύʔτφʔ͞Μͷํ͕Կഒ΋ৄ͍͠ ͷͰɺͥͻίϛϡχςΟʹࢀՃͯ͠஌ݟΛ ͨΊ͍ͯͩ͘͞ʂ
58. ࠓ͔ΒShopifyύʔτφʔΛ࢝ΊΔͨΊͷࢿྉ
59. 59 Shopify ύʔτφʔίϛϡχςΟϋϒ શͯͷ৘ใ Shopify ύʔτφʔίϛϡχςΟ
60. 60 Youtube ύʔτφʔ࠶ੜϦετ νϡʔτϦ Ξϧ shopify Youtube ೔ຊ
61. 61 Shopify ΦϯϥΠϯίϛϡχςΟʢϑΥʔϥϜʣ ࣭໰ Shopify ϑΥʔϥϜ