Skip to content

microCMSテンプレート: シンプルなECサイトテンプレート

microCMSとStripeを利用した、シンプルなECサイトのテンプレートです。 microCMSで商品情報を管理し、決済時や商品情報の更新時にデータをStripeに同期することでオンライン決済に対応しました。 カスタマイズを前提に、Taildwind CSSとDaisyUIを利用したシンプルなデザインで実装しています。 ECサイトをmicroCMSで構築する際のベーステンプレートとしてお使いください。Demo: https://microcms-template-stripe-simple-commerce.pages.dev/

applications
microCMSテンプレート: シンプルなECサイトテンプレート

背景

microCMSのテンプレートを作ってみたいという意図で着手したプロジェクトです。Next.js App RouterやCloudflare Pagesなどにも挑戦する目的もありました。

Stripeがノーコード・ローコードで決済フォームを提供する仕組み・APIを用意していますが、結局のところECサイトやサービスサイトなどのフロントエンドは必要です。このあたりの連携をどのように設計するのがよいかを試行錯誤する意味も込めてテンプレート化しました。

アーキテクチャ

テンプレートですので、Next.js / Tailwind CSSを使っていることと、microCMS / StripeのAPIを利用することが前提になっていること以外に特別な要件などはありません。

ただ、デモサイトをデプロイするにあたって、すこしCloudflare Pagesで動作させるための調整を入れたバージョンを用意しています。

サイト・リポジトリを見る
Hidetaka Okamoto profile photo

Hidetaka Okamoto

Developer Experience Engineer

Developer Experience Engineer。AWSやCloudflare上へのサーバーレスなアプリ開発を得意とする開発者。元Stripe Developer Advocate / AWS Samurai 2017など、サービスの使い方や活用Tipsを紹介するコンテンツ作成や登壇などを得意とする。