架空のショッピングができるサイトを作った話

架空のショッピングができるサイトを作った話 | Tsukutta

Development Background

As shopping on e-commerce sites has become an established form of stress relief, an increasing number of people are finding themselves unconsciously falling into wasteful spending habits. "Add what you want to the cart, place an order, and wait for it to arrive"—the pleasure inherent in this sequence of experiences is genuine, but the price paid is a wallet that steadily takes damage.

In response to this dilemma, I thought: "What if we just remove the part where money gets spent?" A completely fictional e-commerce site where no payment or shipping actually occurs. That was the starting point for FantaCart's concept.

Development Process

The tech stack was solidified with Next.js (App Router) / Supabase / Vercel, configured to operate entirely within free tiers. The approach was to hand a PRD (product requirements document) to Claude Code and request implementation.

The product database contains approximately 3,000–5,000 fictional items from AI-generated fictional brands. No real brands are used; everything is curated to the quality of "seems real but doesn't actually exist." The recommendation engine was implemented in-house using rule-based logic, accumulating tag scores from browsing and purchase history to create a personalization mechanism.

The delivery tracking screen doesn't use a real map API; instead, it's presented through SVG animations. If you select "Express Delivery," you can experience the entire delivery completion in just a few minutes.

Notably, input fields for actual payment information like credit card numbers don't exist in the design. Payments are made only with the initially granted virtual balance (FantaPay), and both the footer and delivery completion screen clearly state that this is a simulation. Subsequently, features were implemented such as a daily slot machine that spins when you access the site and awards points.

My Impressions After Using It Myself

To be honest, it produced more of a "shopping experience" than I expected. The fun of stacking products in the cart, the excitement of watching the order status change after confirmation, the oddly realistic delivery animation—combined together, there's a genuine sense of satisfaction with zero damage to the wallet.

Rather than "I want to stop wasteful spending," I gained the insight that "the enjoyment of shopping can actually be recreated without spending money." For people who find themselves opening e-commerce sites for stress relief, I believe this could serve as one guilt-free outlet. That said, my hand still can't stop reaching for Amazon.

開発背景

ECサイトでの買い物が手軽なストレス解消として定着した結果、気づかないうちに浪費が習慣化してしまう人が増えている。「欲しいものをカートに入れて、注文して、届くのを待つ」—この一連の体験が持つ快感は本物だが、その代償として財布は着実に傷んでいく。

このジレンマに対して思ったのは、「お金を使う部分だけを取り除けばいいのでは」ということだ。支払いも配送も発生しない、完全なフィクションのECサイト。それが FantaCart のアイデアの出発点だった。

開発プロセス

技術スタックは Next.js（App Router）/ Supabase / Vercel で固め、すべて無料枠で運用できる構成にした。Claude Code に PRD（要件定義書）を渡して実装を依頼するスタイルで進めた。

商品データは AI が生成した架空ブランドの架空商品を約 3,000〜5,000 点収録。実在ブランドは一切使わず「実在しそうだが実在しない」クオリティで揃えた。レコメンドエンジンはルールベースで自前実装し、閲覧・購入履歴からタグスコアを加算してパーソナライズする仕組みにした。

配達追跡画面はリアル地図 API を使わず、SVG で描いたアニメーションで演出。「お急ぎ便」を選べば数分で配達完了まで体験できる。

なお、クレジットカード番号などの実決済情報の入力欄は設計上存在しない。支払いは初期付与の仮想残高（FantaPay）のみで、フッターと配達完了画面にはシミュレーションである旨を明記している。その後も、アクセスすると1日に1回スロットが回り、ポイントをもらえる機能等を実装した。

自分で使ってみた感想

正直、思っていた以上に「買い物した感」が出た。カートに商品を積んでいく楽しさ、注文確定後のステータスが変わっていくドキドキ感、配達アニメーションの妙なリアリティ—これらが合わさって、財布へのダメージゼロなのに確かな満足感がある。

「浪費をやめたい」というより、「お金を使わなくても買い物の楽しさって再現できるんだ」という気づきが得られた。ストレス発散のために EC サイトを開いてしまう人にとって、罪悪感のない出口の一つになれると思っている。ただ、それでもAmazonを開く手は止まらない。