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

by benzookapi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ShopifyʢγϣοϐϑΝΠʣʹ͍ͭͯ

Slide 6

Slide 6 text

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೔࣌఺)

Slide 7

Slide 7 text

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)

Slide 8

Slide 8 text

ϝσΟΞใಓ

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Shopifyͷಛ௃

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

ग़యɿNewsPicks Brand Design

Slide 20

Slide 20 text

ଟ௨՟ܾࡁ

Slide 21

Slide 21 text

ଟݴޠରԠ

Slide 22

Slide 22 text

νΣοΫΞ΢τΛεϐʔυΞοϓ ΫϨδοτΧʔυΛ࢖༻͢Δ͜ͱͳ͘ಠཱͨ͠ετΞͰ҆શ ʹങ͍෺Λ͠·͠ΐ͏ɻ • ϑΥʔϜ΁ͷهೖ͸ෆཁ  Shop PayʹΑͬͯνΣοΫΞ΢τ͕ॲཧ͞ΕΔͷͰɺ ࢧ෷͍Ͱ͸ͳ͘ങ͍෺ʹ࣌ؒΛ͔͚Δ͜ͱ͕Ͱ͖·͢ɻ • ύεϫʔυͷهԱ͸ෆཁ  Shop PayͰ͸ɺ࠷΋҆શͰศརͳೝূํ๏͕ৗʹબ୒ ͞Ε·͢ɻ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

29 ͍͖ͳΓαϯϓϧʂ

Slide 30

Slide 30 text

ShopifyύʔτφʔϓϩάϥϜʹ͍ͭͯ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

ShopifyΞϓϦͱςʔϚͷ֓ཁ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

43 Shopify Buy Button Channel ΞϓϦ Shopify Buy Button

Slide 44

Slide 44 text

44 Shopify BuyButton.js JS Shopify Buy Button JS

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

WordPressͱShopifyͷྨࣅ఺ͱ૬ҧ఺

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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