Setsuna Films
YouTuberウェブサイト
日本旅行をテーマにしたYouTubeチャンネル「Setsuna Films」のウェブサイト兼グッズショップです。ファンは英語・日本語で、円またはドルで限定キーホルダーを購入できます。
YouTubeだけで活動するチャンネルには、グッズを販売する自分たちの場所がありません。さまざまな国のファンを迎える場所もありませんでした。
主な特長
チャンネルのグッズショップ
ファンはチャンネル公式サイトから直接、限定キーホルダーを購入できます。決済は安全に処理され、間にマーケットプレイスを挟みません。
国内外のファンのために
商品情報から配送・返品まで、すべてを英語と日本語で用意しています。価格は円またはドルで表示され、常に正しい通貨で請求されます。
ひとりでショップ全体を運営
専用の管理画面から、商品の追加、商品写真の見せ方の調整、注文対応、訪問者の国別の確認ができます。専門的な知識は必要ありません。
チャンネルにとって変わること
チャンネル自身の拠点
視聴者はプラットフォームではなく、Setsuna Films自身の場所でチャンネルを知り、商品を購入できます。
お客様に常に状況をお知らせ
注文確認・発送（追跡番号付き）・キャンセルの際に、自動でメールが届きます。
世界中のファンに
国内外のファンが自分の言語と通貨で買い物できるので、誰も取り残されません。
プロジェクト概要
- クライアント
- 日本旅行をテーマにしたYouTubeチャンネル、Setsuna Films。
- 担当
- ウェブサイト、グッズショップ、管理画面のデザインと開発を担当しました。
- 納品したもの
- 英語・日本語のウェブサイト
- 円・ドルに対応したStripe決済のグッズショップ
- 注文確認・発送（追跡番号付き）・キャンセルの自動メール
- 商品・写真の見せ方・注文を管理する管理画面
- 国別の訪問者データ
チャンネルやブランドの拠点となる、ショップつきのサイトをお考えですか？フリーランスのウェブデザイナー兼開発者（英語のページ）として、このようなプロジェクトをお受けしています。
開発者向けの技術情報
使用技術・アーキテクチャ・作り方について。
スタック
アーキテクチャ
Stripe × PostgreSQL注文フロー
お客様はStripe Checkout Sessionにリダイレクトされ、送料設定済みで会計が完了します。支払い確認後、StripeのWebhookが発火して注文・明細・配送先住所・決済インテントをSupabaseのPostgreSQLに直接書き込みます。すべての取引でデータベースは自動的に同期されます。
ZeptoMailによるライフサイクルメール
3種類の自動メールで注文の全ライフサイクルをカバー：決済後の確認メール・追跡番号付きの発送通知・キャンセル通知。すべてZeptoMailのREST APIでSPF/DKIM認証済みドメインから即時送信されます。
AWS S3画像管理とフレーミング機能
商品画像は管理ダッシュボードからAWS S3に直接アップロード。各画像にズーム倍率とXY位置を設定し、元画像を切り抜かずにカードビューでの表示範囲を指定できます。フレーミング値はPostgreSQLに保存され、表示時にクライアントサイドで適用されます。
国別トラッキング付きアクセス解析
ボット以外のGETリクエストはすべてバックグラウンドスレッドで非同期ログ。訪問者のIPはip-api.comで国に変換され、ページ表示を妨げません。ボットはユーザーエージェントでフィルタリングし、同一セッション・同日の重複訪問は除外。管理ダッシュボードでリアルタイムに訪問数・国別内訳・日次推移が確認できます。
技術的なポイント
Stripeチェックアウト
円・ドルの送料を設定済みのStripe Checkout Sessionで決済処理。Webhookでサーバー側の支払い確認後にのみ注文をDBに書き込みます。
Supabase上のPostgreSQL
商品・画像・注文・アクセスログをすべてSupabase上のPostgreSQLで管理。起動時にIPv4解決を処理し、どのサーバー環境でも安定した接続を確保しています。
このようなプロジェクトをお考えですか？
クリエイターや小さなブランドのために、ショップつきのウェブサイトを制作しています。ファンはあなたから直接購入できます。