金額はブラウザから受け取らない
決済のリクエストに載せるのは、商品ID、数量、受け取り方法、言語だけです。サーバーはIDを自分の商品データと照らし合わせ、存在しない商品や1〜99の整数でない数量を拒否し、小計と送料を自分の価格から計算します。リクエストを書き換えても、注文の中身は変えられても金額は変えられません。明細はStripeに固定の価格として登録せず、リクエストごとに豪セント単位で組み立てるので、価格を持っているのはサイトの商品データだけです。
06 — EC / オーストラリア向け日本酒 / 2026
AMACHIHOSHISORA
富士山麓で醸す純米大吟醸「天地星空」を、オーストラリアで販売するECサイト。価格は豪ドルで、注文ごとに国内への配送か、送料のかからない対面での受け取りかを選べます。
2026オーストラリア
- クライアント
- 株式会社近藤薬局
- 領域
- EC / オーストラリア向け日本酒
- 担当
- デザイン、開発、決済、多言語対応、SEO、運用
- 年
- 2026
01 / PROJECT
WHAT THE
PROJECT IS.
天地星空は、元禄年間（1688〜1704年）創業の富士錦酒造が、40%まで磨いた山田錦と、富士山で約70年かけてろ過された湧き水で仕込む純米大吟醸です。サイトでは720mlと500mlに、180mlの純米吟醸「富士の雫」を加えた3商品を販売し、あわせて水と米の紹介、創業から三百年あまりの蔵の年表、よくある質問を英語と日本語で掲載しています。
注文はカートからStripeの決済ページへ進みます。支払いの前に、配送か対面での受け取りかを選びます。配送ではオーストラリア国内の住所と電話番号を入力し、送料は一律A$50、A$600以上で無料です。対面での受け取りに追加の費用はかかりません。領収書はStripeからメールで届きます。サイトに入るときには年齢を確認し、英語のページではオーストラリアの法律に沿って18歳以上、日本語のページでは20歳以上であることを確かめます。プライバシーポリシー、利用規約、特定商取引法にもとづく表記も備えています。
サイトは2025年に公開し、2026年に夜の富士山のタイムラプスを軸にデザインを刷新しました。あわせて2つのお酒の紹介ページと蔵の歴史のページを加え、ページはサーバーで描画し、カート・年齢確認・演出のようにブラウザが必要な部分だけを小さく切り出す形に作り直しています。デザインと実装から、決済、日英のサイト構造、SEO、Vercelへのデプロイと運用まで一貫して担当しています。
02 / HOW IT WORKS
THE DECISIONS
UNDER IT.
実装から
配送と対面受け取りで決済の形を変える
配送を選ぶと、決済ページはオーストラリア国内に限った配送先住所と電話番号を求め、小計がA$600に届いていなければ送料A$50を別の明細として加えます。対面での受け取りではどちらも求めず、送料も加えません。選んだ方法は注文の種別として決済と請求書に記録されるので、Stripeのダッシュボードで支払いごとに、お酒をどう渡すのかが分かります。請求書の作成を有効にしているので、領収書はStripeから自動で届きます。
カートはStripeとの往復で消えない
Stripeへ移動して戻ってくるとページは読み込み直しになるので、カートをReactの状態に置くことはできません。localStorageと同期する小さなストアに置き、useSyncExternalStoreで読みます。サーバーは空のカートでHTMLを作り、ブラウザが表示後に中身を復元し、別のタブでの変更も反映されます。読み戻した中身は1件ずつ確かめ、形の崩れた項目はそれだけを捨て、カート全体は壊しません。決済完了ページではカートを空にし、支払いの内容はサーバーからStripeに問い合わせます。秘密鍵はserver-onlyを付けたモジュールの中だけにあります。Stripeからブラウザの「戻る」で帰ってきた場合はキャッシュから復元されたページになるため、決済ボタンを「処理中」のまま残さず元に戻します。
確認済みの人に年齢確認をちらつかせない
年齢確認を通過したかどうかはlocalStorageに持っていて、サーバーからは読めません。そのためサーバーのHTMLには、確認画面の代わりに暗い覆いを置いています。<head>の短いスクリプトが最初の描画より前に動き、通過済みの人にはページに印を付け、CSSがその覆いを外します。再訪した人に確認画面が一瞬映ることはなく、初めての人に確認より先にページが見えることもありません。ページ冒頭の演出は確認の通過を待ってから再生し、確認画面の裏で終わってしまうことはありません。localStorageが使えない環境では、そのタブを閉じるまで通過済みとして扱います。
動きはマークアップで指定する
ページはServer Componentで、何をどう動かすかはdata-motion属性で書くだけにしています（1文字ずつ出る見出し、幕が上がるように現れる写真、現像されるように色が戻る古写真、スクロールに合わせて伸びる年表の線、数え上がる数字など）。GSAPを付けるのは1つのクライアント側のフックです。ページを直接開いたときは、すでに画面に見えている要素をサーバーが描いたまま動かさないので、演出が最大の描画を遅らせることはありません。冒頭の演出で再生するのはトップのヒーローだけです。夜の富士山のタイムラプスは先読みせず、HTMLには最初の1コマだけを載せ、動きを減らす設定をしていない人にだけ動画を読み込みます。
03 / DELIVERED
WHAT WAS
BUILT.
- 01
3商品の商品ページ、2つのお酒の水と米の紹介、年表と明治の写真を載せた蔵の歴史、よくある質問、日本語・英語対応
- 02
カテゴリの絞り込みと並び替えのできる商品一覧と、Stripeとの往復・言語の切り替え・別のタブをまたいで残るカート
- 03
豪ドルでのStripe Checkoutと、注文ごとに選べるオーストラリア国内配送・対面受け取り
- 04
サーバー側での金額と送料の計算（A$50、A$600以上で無料、対面受け取りは無料）と、Stripeからの領収書送付
- 05
支払いの内容をサーバーからStripeに問い合わせて表示し、カートを空にする注文完了ページ
- 06
サイトに入るときの年齢確認（英語は18歳以上、日本語は20歳以上）と、プライバシーポリシー・利用規約・特定商取引法にもとづく表記
- 07
マークアップから指定するGSAPのスクロール演出と、動きを減らす設定では再生しない夜の富士山のタイムラプス
- 08
常にURLに含まれる言語、ページごとのcanonicalとhreflang、両言語のサイトマップ、決済結果ページのnoindex、旧FAQのURLからの恒久リダイレクト
04 / TECHNOLOGY
THE STACK
BEHIND IT.
- Next.js
- React
- TypeScript
- next-intl
- Stripe
- GSAP
- Tailwind CSS
- Radix UI
- Vercel