SELF-INITIATED DEMO / 自主制作
FORME — Shop & Inventory — オンラインショップと在庫管理
OVERVIEW
色とサイズで写真・価格・在庫が動く、数の決まった店。
Live Demoを操作する商品・価格・店舗はすべて架空です。注文は画面上で最後まで進みますが、実際の決済・配送は発生しません。住所や氏名は入力せず、配送地域だけで送料を計算します。
- AI
- 使っていません計算と決まった規則だけで動きます。
- 保存先
- このブラウザカート・注文・お気に入り・在庫の変更を、このブラウザにだけ保存します。
- 外部送信
- なし決済・配送は発生しません。氏名や住所は入力せず、配送地域だけで送料を計算します。
- SCOPE
- Design + Build + QA
- EST. DELIVERY / 納期目安
- 5〜10営業日
- PRICE GUIDE / 参考価格
- 内容により見積
WORKING VERSION / 操作できる版
画面を動かして試せます
この制作例には、実際に操作できる店舗サイトがあります。色やサイズを選ぶと写真・価格・在庫が連動し、カートから送料を含めた金額を確認して注文できます。運営画面では在庫を動かし、注文を進め、未払いのまま発送できないことも確かめられます。
架空の店舗です。実際の注文・予約・支払いは発生せず、入力した内容はお使いのブラウザの中だけに保存されます。
01THE PROBLEM
商品の佇まいを保ちながら、在庫と注文を正しく扱うこと。
- 想定したクライアント
- 生活雑貨を少量生産する、小さなブランド（架空）
- 想定依頼
- 新しいタンブラーの商品紹介から、色とサイズの選択、在庫と注文の管理まで制作してほしい。
- 起きていること
- 色とサイズの組み合わせごとに在庫が違い、表計算で数えた在庫とサイトの表示がずれる。
- 困りごと
- 売り切れを売ってしまう、支払い前に発送してしまう、といった事故が起きかねない。
- 制作コンセプト
- プロダクトの質感を主役にした、静物展示のような売り場。
想定のクライアントと依頼は、この自主制作のために設定した架空のものです。実在の企業・店舗からの受託ではありません。
02SIGNATURE JOURNEY
色とサイズを選ぶと、写真も在庫も、注文の先まで動く。
組み合わせごとに在庫を数え、注文で減り取消で戻る仕組みと、未払いのまま発送させない運営画面を実装しました。
商品を選ぶ
6品を絞り込み・並び替え・3点まで比較。気になったものはお気に入りに残せます。
色とサイズで在庫を確かめる
組み合わせを選ぶたびに、写真・価格・残りの数が切り替わります。
受け取り方法と送料
配送か店頭受け取りかを選び、配送は地域まで含めて送料を計算します。
運営画面で在庫が減る
注文すると在庫が減り、取り消すと戻ります。支払いが済むまで「発送した」は押せません。
画像は、公開しているデモを実際に操作して撮影した画面です。同じ手順を自分で試す
かたち、質感、使う場面。
商品の全体像と素材の寄りを分け、購入前に確かめたい情報を伝えます。
AI生成の商品コンセプト。実在商品の写真・性能を示すものではありません。
03KEY INTERACTIONS
触って確かめられる操作
見た目だけのボタンは置いていません。押すと状態が変わり、関連する画面にも反映されます。
組み合わせごとの在庫
SKU（色×サイズ）ごとに数を持ち、選んだ組み合わせの残りだけを表示します。
カートの見直し
在庫を超える数量、販売終了、選び残しのオプションを、注文前に知らせて止めます。
注文の取消と在庫の戻り
発送前なら取り消せ、取り消した数は在庫に戻ります。発送後は取り消せません。
取り扱いの停止
運営画面で商品を止めると、カートからも外れ、理由が表示されます。
04BEHIND THE SYSTEM
画面の裏で、何が決まっているか
データの持ち方、状態の進み方、事故を防ぐための決まりごと。本番化するときに引き継ぐ設計です。
データ
- 商品とSKU（色×サイズ）・価格・在庫数
- 注文（明細・受け取り方法・送料・支払いの状態）
- 在庫の増減の記録
状態の流れ
- 注文受付
- 支払い済み
- 準備中
- 発送済み／お渡し済み
安全のための決まりごと
- 確認画面のあとでカートが変わったら、注文をいったん止める
- 支払いが済んでいない注文は発送できない
- 取り消した数量は、同じSKUの在庫へ戻す
05RESPONSIVE & ACCESSIBILITY
ひとつの体験を、どの画面でも。
PCは情報の比較しやすさ、タブレットはカラム幅、モバイルは読む順番とタップ領域を調整。下の画像は、実際のデモを各画面幅で撮影したプレビューです。
- 360pxの画面幅から主要な操作ができること
- キーボードだけで操作でき、フォーカスが見えること
- 入力欄にラベルがあり、エラーの理由が文字で出ること
- 動きを減らす設定（prefers-reduced-motion）を尊重すること
06SCOPE & BOUNDARIES
できること・していないことを、先に書く
自主制作のデモと、実際の案件で納品するものの差を、項目ごとに分けています。
実装済み
このデモで実際に動くこと
- 一覧・絞り込み・並び替え・比較・お気に入り
- 色とサイズで連動する写真・価格・在庫
- 配送／店頭受け取りと地域別の送料
- 注文・支払い（模擬）・取消・運営画面での発送
デモ限定
見せ方のために簡略化していること
- 支払いは結果を選んで試す模擬
- 商品・価格・店舗は架空
- 在庫はこのブラウザの中だけで数える
未接続
公開版では接続していないもの
- 決済サービス
- 配送業者・倉庫
- 注文確認メール
本番化に必要なこと
実案件で追加で設計・実装するもの
- 共有データベースでの在庫の同時更新（別の端末・別のお客様）
- 決済・配送・税の設定
- 既存のECサービス（Shopifyなど）との連携の検討
07DELIVERY & QUOTE
納品物と、見積もりの目安
参考価格 内容により見積／納期目安 5〜10営業日。範囲と素材が決まってから、正式なお見積もりと納期をお出しします。
もっと詳しく見る？使用技術・実装した機能・納品物・確認項目
Next.js / React / TypeScript / CSS
設計・デザイン・実装・内部QA・ドキュメント整理
5〜10営業日
内容により見積
- 6品・絞り込み・並び替え・3点比較・お気に入り
- 色とサイズで連動する写真・価格・在庫
- 配送/店頭の選択と、地域まで含む送料計算
- 注文履歴・取消と、在庫が戻る運営画面
- ソースコード・設定ファイル
- 起動・更新手順のREADME
- 画面仕様・検証項目一覧
- PC / Tablet / Mobile表示
- キーボード操作・コントラスト
- リンク・入力・エラー状態
見積もりが変わるところ
- 商品数とバリエーションの種類
- 既存のECサービスを使うか、独自に作るか
- 決済・配送・在庫管理システムとの接続
- 商品写真や説明文の制作を含めるか
参考価格・期間です。ページ数、機能、デザイン、素材、API・外部サービス、修正範囲で変動します。仕様と素材の確定後に正式なお見積もり・納期を提示します。 納品物は契約範囲に合わせて確定します。QA内容は確認対象を示すもので、実運用環境の適合保証ではありません。
08CONTEXTUAL CONTACT
このデモのような制作を相談する
近いと感じた機能に印をつけてください。相談フォームに「FORMEを参考にした」ことと、選んだ機能が入った状態で開きます。送信前にすべて編集・削除できます。
つくりたいものを、
聞かせてください。
まだ要件が曖昧でも大丈夫。
いま困っていることから、一緒に整理します。
打ち合わせの前に、相談できます。
- 01相談を送信
- 02内容を確認
- 03メールで返信
- 04合意して制作開始
金額・納期・制作範囲は、内容を確認してご相談。
送信した時点で契約や発注にはなりません。
案件サイトからのご相談は、そのサービス内メッセージでも進められます。