制作デモ
陶器・器のオンライン販売の場合
MiniLaunchで、陶器・器のオンライン販売に向けたホームページを作ってみました。今回は「余白のうつわ DEMO」。日々の食卓で使う器を画面だけで選ぶ人に向けて、商売のタイプから押さえておきたい情報と、このお店ならではの条件を、できたサイトで見ていきます。
このページは実在事業者の事例ではありません。架空の商品条件をもとに、サイトの構成と文章をMiniLaunchで生成したデモです。記載した寸法・価格はデモの設定値で、実在商品の販売情報ではありません。
できたサイト
食卓に置いた器と、釉薬の細かな表情を冒頭に。商品ごとの写真、寸法・容量と価格へつなげています。
今回の設定
オンラインで器を販売する事業を想定し、次の条件を設定しました。
- デモ名
- 余白のうつわ DEMO
- 商売のタイプ
- 店舗なし × 商品。陶器の器をオンラインで販売する想定
- 来てほしい人
- 日々の食卓で使う器を、画面だけで選びたい人
- 求める価値
- 食卓に置いた雰囲気と、自分の用途に合う大きさを把握できること
- 選ぶ条件
- 形・寸法・容量、質感と色の個体差、使用上の注意、価格、配送条件、連絡手段
- 商品設定
- 飯碗「白土」直径約12cm・高さ約6cm・税込3,300円／マグ「灰釉」容量約250mL・税込3,850円／小皿「砂色」直径約16cm・税込2,750円
- 販売・配送
- このデモから注文・決済・問い合わせは受け付けません。送料・発送日・在庫・返品条件は未設定です
商売のタイプと、今回の条件から
MiniLaunchのスターターでは、店舗の有無と、扱うものが商品・サービス・場所などのどれかを入力します。今回の設定は「店舗なし × 商品」。店舗へ行って手に取ることを前提にせず、商品の特徴や購入前に確認する情報を整理します。
このデモで想定したのは、日々の食卓で使う器を選ぶ人です。器そのものの美しさに加え、自分の料理や飲み物に合う大きさが判断材料になると考えました。そこで、写真の見せ方、寸法と価格、配色とスマホ表示という3つを優先しました。
サイトで見てほしい、3つのポイント
食卓での姿と、器そのものの形を見比べられるように
料理を盛ったらどんな雰囲気になるか。写真だけで選ぶ人には、器単体の写真に加え、使う場面を想像できる手がかりが必要だと考えました。
このデモでは、単体の形と釉薬を見せる写真と、食卓に置いた写真を組み合わせました。実販売では、釉薬や色の個体差についても商品ごとに確認し、写真がどの個体を示すかを説明します。
用途に合う大きさと、価格を一緒に判断できるように
いつものご飯や飲み物に使える大きさか。写真の印象だけでは、直径や容量、予算に合うかを判断しづらいと考えました。
商品名の近くに寸法・容量の目安と税込価格をまとめました。飯碗は直径と高さ、マグは容量など、使う場面に合った情報を選びます。食卓で使う写真に数値を添え、写真の印象だけで大きさを判断しなくてよい見せ方にしました。
器の写真になじむ配色で、スマホでも選びやすく
釉薬の色や質感を見てもらうには、周りの色が写真を邪魔しないことも大切です。小さな画面でも、器と説明を続けて見られるようにしたいと考えました。
生成りと土色を基調に調整し、食卓の写真と色をそろえました。公開サイトをPCとスマートフォンで確認し、器の写真、商品名、寸法と価格が自然な順序で読めるかを見ています。
公開したあとに、販売機能を整える
まず、商品を紹介するページを公開しました。このデモの「器と価格」は紹介用の表示です。購入できる商品一覧は、公開後にアカウントの「販売開始」からStripeの接続、本人確認・入金設定、販売者情報の確認を済ませてから作ります。その後、Salesパネルで商品・金額・配送方法を設定し、購入リンクを作成すると、購入ボタンからStripeの決済ページへつなげられます。このデモでは販売開始の設定は行っていません。動画の後半では、現行の販売画面を使ったローカル検証例で、商品登録後の2列一覧から、飯碗をタップして商品詳細と購入ボタンを見る流れを紹介しています。実際の決済は有効にしていません。
販売を始める前に
実際の販売に使う際は、商品と運営に関する情報を事業者自身で確認します。
- 写真・寸法・容量・価格は実際の商品と合っているか。色や釉薬の個体差を説明したか。
- 食品用の器としての取り扱い、電子レンジ・食洗機などの使用可否を確認したか。
- 在庫・送料・発送日・返品条件、販売方法と実際の連絡先は正しいか。