WordPressとWooCommerce+Stripeで作る、グッズ・記事販売ができるECサイトの話 / jp-stripes-connect-2019-0321-abe

秋田県の村境や道端に祀られている、村を守る不思議な神様“人形道祖神”を追いかけているプロジェクト「ANP（秋田人形道祖神プロジェクト）」のECサイトをWordPressとWooCommerce+Stripeで制作しました。

人形道祖神をもとにイラストを作成し、そのイラストを使った書籍やグッズの販売、取材記事、イラスト制作過程の記事販売をStripeを使って実装。

リアルなグッズ商品の販売と、書籍を深掘りする記事であるデジタルコンテンツ販売が共存するECサイトを紹介します。

Transcript

1. Fumito Abe
   - 2019.03.21
   - at Osaka
   JP_Stripes Connect 19
   άοζ
   ɾهࣄൢച͕Ͱ͖Δ
   ECαΠτͷ࿩
   WordPressͱWooCommerce+StripeͰ࡞Δ
   inɹ
   Osaka
   

   View Slide

2. ˌJPSC2019
   Today’s
   Hashtag
   

   View Slide

3. 1.ࣗݾ঺հ
   About me
   About Company
   Dosojin EC site
   Total
   Contents ࠓ೔ͷ಺༰
   2. ձࣾ঺հʢͪΐͬͱ௕͍ʣ
   3. ळాਓܗಓ૆ਆECαΠτ
   3 - 1ಓ૆ਆͬͯԿ ͳΜͰಠࣗ&$ʁ
   3 - 2ECαΠτߏ੒
   3 - 3StripeͰ࡞Δهࣄൢച
   3-4 ·ͱΊ
   25min
   

   View Slide

4. ࣗݾ঺հ
   About me
   1
   

   View Slide

5. ΫϦΤΠςΟϒσΟϨΫλʔΤϯδχΞ
   Ѩ෦จਓ
   ळాݝळాࢢࡏॅ౦ژ౎ੜ·Ε
   2016೥10݄ʹגࣜձࣾneccoΛ૑ۀɻ
   3ظ໨ɺࣾһ5໊ɺೣ2ඖͱੜ׆ɻ
   ओʹϒϥϯυσβΠϯ੍࡞શମͷσΟϨΫγϣϯ͔Βઓུɺ
   69ɾ৘ใઃܭɺσβΠϯɺϑϩϯτΤϯυ࣮૷Λ୲౰ɻ
   גࣜձࣾnecco
   About me ࣗݾ঺հ
   !BCFGVNJUP
   ɾ8PSE$BNQͷొஃճ
   ɾ+"846(5PIPLVॴଐ
   ɾ+1@4USJQFT"LJUBӡӦ ճ໨ͦΖͦΖ
   
   ɾ"MFYB%BZσβΠϯ୲౰
   ୅දऔక໾
   

   View Slide

6. ԿΛͭ͘Γ·͔͢ʁ
   ͔Β
   ׬੒෺ͷ੍࡞
   ɾ
   ӡ༻վળ·Ͱ
   Կͦͷ৬छʁ
   

   View Slide

7. ձࣾ঺հ
   About Company
   2-1
   

   View Slide

8. View Slide

9. View Slide

10. About Company
    ձࣾ঺հ
    Brandingʢϒϥϯυͮ͘Γʣ
    ͷ͓ख఻͍Λى఺ʹ
    σβΠϯɹͱɹ΢ΣϒαΠτɹΛ
    ͍ͭͬͯ͘·͢
    

    View Slide

11. What is Branding
    ϒϥϯσΟϯάͬͯԿʁ
    ݟͤํΛ
    ίϯτϩʔϧ͢Δ͜ͱ
    

    View Slide

12. About Company
    ձࣾ঺հ
    ϒϥϯσΟϯά
    σβΠϯ
    !
    ύοέʔδ
    "
    web
    Πϥετ
    ΞϓϦ
    ൢଅ෺
    ϩΰ
    ΤσΟτϦΞϧ
    # $
    %
    &
    '
    (
    

    View Slide

13. neccoͷσβΠϯ
    About Company
    2-2
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. ϥϯνΛࣗ෼ͨͪͰ
    ౰൪੍Ͱ࡞ͬͯ·͢!
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. ࡳຈͷϤΨͷઌੜ͔Β
    ΦϯϥΠϯϤΨΛडߨ
    

    View Slide

35. View Slide

36. View Slide

37. necco͸ม
    ૉఢͳձࣾ
    ʂ
    

    View Slide

38. ˌJPSC2019
    Today’s
    Hashtag
    

    View Slide

39. ຊ୊
    

    View Slide

40. 1.ࣗݾ঺հ
    About me
    About Company
    Dosojin EC site
    Total
    Contents ࠓ೔ͷ಺༰
    2. ձࣾ঺հʢͪΐͬͱ௕͍ʣ
    3.ळాਓܗಓ૆ਆ&$αΠτ
    3 - 1ಓ૆ਆͬͯԿ
    3 - 2&$αΠτߏ੒
    3 - 3StripeͰ࡞Δهࣄൢച
    3-4 ·ͱΊ
    25min
    

    View Slide

41. ਓܗಓ૆ਆͬͯͳʹʁ
    Dosojin
    3-1
    

    View Slide

42. ʹΜ͗ΐ͏ Ͳ͏ͦ͡Μ
    ਓܗಓ૆ਆ
    

    View Slide

43. ਓܗಓ૆ਆΛ
    ஌ͬͯΔਓ"
    

    View Slide

44. ਓܗಓ૆ਆͬͯԿʁ
    

    View Slide

45. ӸපͳͲͷࡂ͍͕ೖͬͯ͜ͳ͍Α͏ʹ
    ଜڥ΍ಓ୺ʹ᛾ΒΕ͍ͯΔ
    ଜΛकΔෆࢥٞͳਆ༷
    ͦΕ͕ਓܗಓ૆ਆͰ͢ɻ
    

    View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. ೋਓͷऔࡐମݧͱ
    ࢙࣮ΛจষԽ
    

    View Slide

53. View Slide

54. ମݧͱਓܗಓ૆ਆΛ
    ΠϥετԽ
    

    View Slide

55. View Slide

56. ςʔϚ͕ͼͬ͘Γ͢Δ͘Β͍χον
    ೋਓͱ࿩ͯ͠ײͨ͜͡ͱ
    ೋਓͷ೤ྔ͕ߴ͍
    ಠࣗऔࡐͰ̍࣍৘ใΛूΊͯମݧͯ͠Δ
    ࢙࣮ͱͯ͠Ձ஋͕͋Δ
    ಓ૆ਆͱΧϥϑϧͳΠϥετͷ૊Έ߹Θͤ
    1
    2
    3
    4
    5
    

    View Slide

57. ຊग़͠·͢
    ΠϥετϨʔλʔ͞Μ
    

    View Slide

58. ൃചલʹπΠʔτ
    ͍͖ͯ͠·͠ΐ͏ɻ
    Θͨ͠
    

    View Slide

59. SNS΍Γͨ͘ͳ͍#
    ΠϥετϨʔλʔ͞Μ
    

    View Slide

60. Πϥετ΋ྑ͍ɺ
    χον͗ͯ͢୭͔ʹ
    ਂ͘͞͞Δͱࢥ͏
    Θͨ͠
    

    View Slide

61. ൃചલʹπΠʔτ
    ͍͖ͯ͠·͠ΐ͏ɻ
    Θͨ͠
    

    View Slide

62. ΞυόΠεʹରͯ͠
    ૉ௚ʹཌ೔࣮ߦ
    ΠϥετϨʔλʔ͞Μ
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. όζͬͨ
    

    View Slide

67. ॻ੶Խ
    

    View Slide

68. View Slide

69. ਓܗಓ૆ਆ
    ͍͚Δ
    

    View Slide

70. View Slide

71. άοζԽ
    

    View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. 5γϟπ΍ॻ੶ͷΠϝʔδࣸਅΛࡱӨ
    ݟͤํΛίϯτϩʔϧ
    5γϟπͷσβΠϯ੍࡞
    ൃ৴ͷࡍͷΞυόΠε
    τʔΫγϣʔͰͷΞυόΠε
    ଞσβΠϯɺϚʔέςΟϯάͳͲΞυόΠε
    1
    2
    3
    4
    5
    

    View Slide

77. ϏδϡΞϧ
    จষԽ
    ঎඼ औࡐྗ
    

    View Slide

78. શ͕ͯ
    ଗ͖ͬͯͨ
    

    View Slide

79. τʔΫγϣʔͰ΋൓Ԡ͕͍͍
    ͜Ε͸ECͰ΋͍͚Δʁ
    ਓܗಓ૆ਆ͸ߴྸͷํ΋ڵຯ͋Γ
    Πϥετ͸ए͍ํ͔Βߴྸͷํʹ΋ڹ͍ͯΔ
    ୅׭ࢁͷ௱԰ॻళʹ΋ฏஔ͖ʹ
    3೥͔͔ΔͱࢥΘΕͨ1000෦͕൒೥Ͱ׬ചঢ়ଶ
    1
    2
    3
    4
    5
    

    View Slide

80. ECαΠτ
    ͭ͘Γ·͠ΐ͏ɻ
    

    View Slide

81. ಠࣗੑ͕ߴ͍ɻ͜͜Ͱ͔͠ങ͑ͳ͍͕Ͱ͖Δ
    ͳͥಠࣗEC
    औࡐɾݱ஍Ͱͷମݧ͸ೋਓ͚͔ͩ͠ॻ͚ͳ͍
    ΠϥετΛ෢ثʹSNSͰൃ৴
    ຊɺάοζɺऔࡐهࣄ΋ൢചͰ͖Δ
    ଞECαʔϏεΑΓ͸αΠτʹ֦ு͕ඞཁͦ͏
    1
    2
    3
    4
    5
    

    View Slide

82. ECαΠ
    τߏ੒
    EC System
    3-2
    

    View Slide

83. άοζൢച
    WordPress
    WooCommerce
    Stripe
    
    

    View Slide

84. هࣄൢച
    Stripe Checkout
    
    

    View Slide

85. ɾهࣄ؅ཧ
    ɾ౤ߘϢʔβ؅ཧ
    ɾ঎඼ొ࿥
    ɾडൃ஫؅ཧ
    ɾܾࡁ؅ཧ
    ɾΫοζܾࡁ
    ɾهࣄܾࡁ
    Checkout
    EC Plugin
    CMS
    άοζൢച
    هࣄൢച
    Stripe Checkout
    StripeʢWPϓϥάΠϯʣ
    γεςϜߏ੒
    

    View Slide

86. View Slide

87. StripeͰͭ͘Δهࣄൢച
    Sell the Article
    3-3
    

    View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. View Slide

94. ಡΈ͍ͨهࣄʹϢʔβ͕๚໰͠ଓ͖Λߪೖ
    هࣄൢചͷͳ͕Ε
    ձһొ࿥ɾϩάΠϯ͸WooCommerceͰ؅ཧ
    ະొ࿥ձһ΋͘͠͸هࣄͷߪೖཤྺΛ൑ఆ
    هࣄʹ࠶๚͠Stripe CheckoutͰܾࡁ
    ߪೖཤྺ͕WooCommerceͷडൃ஫؅ཧ΁
    1
    2
    3
    4
    5
    

    View Slide

95. View Slide

96. هࣄ΋ചΕΔʁԠԉ͍ͨ͠ʁ
    Media΋
    ECͷ
    ECsite
    ˡ
    Media + EC
    

    View Slide

97. Stripe͕͋Δͱ
    ͳΜͰ΋ചΕΔ
    ·ͱΊ
    ΄΅
    

    View Slide

98. Stripe
    ࢖ͬͯΈ·͠ΐ͏ʂ
    ·ͱΊ
    

    View Slide

99. w͓٬͞·ͷຖ݄ͷαʔόอकඅΛBillingͰ
    ࣗಈͰຖ݄ఆֹܾࡁʢαϒεΫϦϓγϣϯʣ
    We use Stripe
    ଞʹStripeͰ΍ͬͯΔ͜ͱ
    wࣗࣾاըΠϕϯτͷνέοτΛ
    Doorkeeper+StripeʢJCB΋ʣ
    Ͱൢച
    

    View Slide

100. 4্݄०
     ެ։༧ఆʂ
     ʢECαΠτେมʣ
     ޤ͏
     ͝ظ଴ʂ
     

     View Slide

101. Thank you!
     ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
     ࠙਌ձͰ΋͓ؾܰʹ࿩͔͚͍ͯͩ͘͠͞ʂ࣭͝໰ͳͲ΋ͥͻʂ
     ͜ͷޙͷηογϣϯ΋ָ͠ΜͰ͍ͩ͘͞ɻ
     

     View Slide