ウェブサービス ／ C2Cフリマ
フリマンボ
箱を測れば、
送料は先に決まる。
架空の運営会社を題材にした、個人どうしが売り買いするフリマサービスです。トップに置いた回せる段ボール箱で、梱包後の3辺と重さから全国一律7区分の送料をその場で決めます。出品、購入、取引の完了、運営の対応までを、この「測る」ところから一続きにしました。
作品を開く架空の運営会社を題材にした自主制作です。決済・配送・送金は模擬で、実際の売買は行いません。
売れてから、
送料に驚かない。
出品したあとで送料が思ったより高かった、という失敗をなくすところから考えました。送料は箱の大きさと重さで決まるので、出品者に値段より先に箱を測ってもらいます。
区分はネコポスから160サイズまでの7つです。送り状には、いまの区分と、次の区分に変わる境目までの残りが出るので、いまの区分のまま、あと何cm大きくできるかが入力のたびに分かります。
段ボールの地に、
巻尺の黄と細い黒の線。
地は段ボールの茶、枠は細い黒、操作と選択中の印は巻尺の黄にそろえました。見出しはゴシック、寸法と金額は等幅の数字で組み、伝票や寸法表のような読み心地にしています。
ヘッダーの下辺は、cmの目盛りを刻んだ巻尺です。スクロールに合わせて目盛りが流れ、いまの位置を「42cm」のように中央の札に出します。商品の詳細では、写真の横に価格と送り状を置き、梱包サイズを示す小さな箱の図を添えました。
箱を回して、
辺を引いて、区分に収める。
梱包シミュレーターは、three.jsを使わず、CSSの3D変形とポインターの操作だけで組みました。箱をドラッグして回し、辺のつまみを引くと、縦・横・高さの入力欄と箱の形が同時に動きます。区分の境目に来ると辺が枠へ吸い付き、「80cmまで。これより大きいと100サイズ」と送り状に出ます。
出品は「箱を測る」「写真」「価格と内容」の3段です。トップには、代金が購入から運営の預かり、発送、受け取りの評価を経て出品者へ届くまでの図解を置き、お金と箱が別々の線を通って進む様子を見せます。購入者・出品者・運営者を切り替えて、購入から受取確認、通報への対応まで試せます。決済・配送・送金は模擬で、荷物も金銭も動きません。
小さな画面でも、
箱はそのまま回せる。
スマートフォンでは、ロゴと出品ボタンの下に検索欄を移し、巻尺の下に見出しとボタン、続けて回せる箱を縦に並べます。箱は横になぞると回り、縦のなぞりはページの送りに使うので、スクロールの途中で箱に引っかかりません。
制作情報
- 種別
- 自主制作・架空サービス
- 制作範囲
- 企画・設計・デザイン・実装
- 使用技術
- TypeScript / React / Next.js
Node.js / SQLite - 対応画面
- PC・タブレット・スマートフォン
