ECサイト構築
決済連携ECサイト制作
商品管理・カート・Stripe決済を含む本格ECサイト。 管理画面の実装と運用導線の整備まで一貫対応。
プロジェクト概要
アパレルブランド（※サンプル）を想定したECサイトの設計・実装を担当しました。 既存の静的サイトからフルリニューアルし、商品一覧・詳細ページ・カート・注文フロー・ マイページ・管理画面を一から構築しています。
決済にはStripe Checkout / Payment Intentsを採用し、クレジットカード決済に加えて コンビニ払い・銀行振込にも対応。Webhookで注文ステータスを自動同期する仕組みを実装しました。
担当した主な機能
- 商品管理・カテゴリ管理・在庫管理（管理画面）
- カート・注文フロー（ゲスト購入 / 会員購入）
- Stripe決済連携（クレジット・コンビニ払い・銀行振込）
- Webhook による注文ステータス自動更新
- 注文確認メール・発送通知メールの自動送信
- マイページ（注文履歴・住所管理・パスワード変更）
- 管理画面（商品・注文・顧客管理、CSV出力）
- SEO対応・Core Web Vitals 最適化
使用技術・ツール
フロントエンドはNext.js（App Router）+ TypeScriptで構築。UIはTailwind CSSを採用し、 コンポーネント設計を行いました。バックエンドはNode.js + Express、 データベースにはPrisma + PostgreSQLを使用しています。
ホスティングはVercel（フロントエンド）+ Railway（バックエンド）で構成し、 GitHub Actionsによる自動デプロイを導入。本番環境への反映はプルリクエストマージで自動化しています。
工夫した点
注文フローは離脱率を最小化するため、最小ステップ数でチェックアウトが完了するよう設計しました。 ゲスト購入も会員購入も同一フローで完結できる仕組みを採用し、 特に購入完了後に会員登録を促すUXを実装しています。
管理画面はCSV一括インポート・エクスポートに対応しており、大量商品の追加・更新作業を 効率化しています。発注書PDFの自動生成機能も実装しました。
実績一覧に戻る