$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

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

Fumito Abe / necco

March 21, 2019
Tweet

More Decks by Fumito Abe / necco

Other Decks in Design

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