触れるデモ
カメラが撮らなかった 92 通りを描いてみせる商品ページ
オフィスチェアの商品ページ。フレーム三色 × 張地四種 × ベース二種 × ヘッドレスト × アームレストで九十六通り、そのうちカメラが押さえられたのは四通りだけです。選択を変えると絵がその場で変わり、発注に使える構成コードが一緒に出ます。
- 01
張地を変える。座面と背もたれの色が変わります — 切り替わるのではなく移行するので、同じ椅子として読めます。
- 02
フレームを変える。アームレスト、ガスシリンダー、背フレームが一緒に追従します。
- 03
ヘッドレストや 4D アームを足すと、絵の上に本当の部品が増えます。文字が一行増えるのではありません。
- 04
四枚の写真の外側へ構成を動かすと、ギャラリーがそう言います — この構成の写真はありません。
- 05
コードと価格は進めながら生成されます。問い合わせは両方を持って出ていきます。
問題
海外向けに OEM をしている椅子メーカーの話です。バイヤーの最初の質問はいつも同じ — 白フレームにサンドの張地だとどう見えるのか。工場の誰も答えられません。撮影で押さえられる組み合わせはわずかなので、サイトには標準仕様の写真が四枚あるだけ。残りの九十数通りはお客さんの想像の中にしかありません。だからバイヤーはサンプルを頼みます。届くまで一ヶ月、箱を開けると思っていたものと違い、また最初から。実際に止めていたのはごく小さなことです — 頭の中にある組み合わせが見られなかった、それだけ。
作ったもの
商品の絵をレイヤーで描くようにしました。フレーム、張地、ベース、ヘッドレスト、アームレストが別々の層なので、選択を変えると形と色がその場で変わります。**あえて 3D にしていません**。回せるモデルはライブラリだけで数百 KB かかり、しかもスマホでは小さすぎて読めません。ここで証明すべきなのは「3D ができる」ことではなく「九十六通り全部が見られる」ことです。構成が決まると同時にコードが出ます — NX1-WH-SD-AL-HR-4D。バイヤーはそれで発注し、工場はそれで生産を組むので、途中で誰かが解釈する余地がありません。問い合わせはそのコードとその絵を持って送信されます。
触ってみてください
- デモは自分で二つ変えます — サンドの張地と、白いフレーム。
- ベースを「ポリッシュドアルミ」にしてみてください。五本脚がマットブラックから金属になり、価格が $42 動きます。
- ヘッドレストを足してみてください。ぱっと現れるのではなく、滑り出てきます — 何もないところに部品が湧くと、ページの不具合に見えるからです。
- もう一つ何か変えて、ギャラリーの行がオレンジの「この構成の写真はありません」に変わるのを見てください。この一行こそ、これが存在する理由です。
どんな商売に向くか
選択肢が写真の増え方より速く増える商売すべてに当てはまります — 家具、窓とドア、照明、包装、印刷、特注金物。判定は簡単です。いちばん多い質問が「X と Y の組み合わせはどう見えるか」で、答えがサンプルの発送なら、その一ヶ月を取り戻す方法がこれです。
動いている基盤
- WordPress
- WooCommerce
カタログ、アカウント、カート、問い合わせ処理は標準の WordPress と WooCommerce で、あなた名義のホスティングの上で動きます。ゼロから書くのは、あなたの商売に固有の部分だけです。