サブスク型ネットショップのサンプルを制作｜「買う前に分かる」定期便のデザイン【制作実績】

こんにちは！Lumiukko designのゆきです。
今回は、化粧品の定期便を想定した、架空のネットショップ「mitsuki」のサンプルを制作しました。

定期便（サブスク）のお店で、お客様が申し込む前に安心できるよう、金額・お届け・解約方法をきちんと見せる設計を試したサンプルサイトです。

• 種類：サブスク型ネットショップのサンプル
• 想定した商品：化粧品の定期便（プランは2つ）
• 想定したお客様：30〜40代で、年齢に応じたお手入れをはじめたばかりの女性
• 画面数：13画面（トップ・プラン一覧・プラン詳細・確認・完了・定期便の管理・案内ページ）
• 写真：AI生成のイメージ画像

※このサイトは制作サンプルです。お店は架空で、実際の販売・決済は行っていません。

はじめに｜制作のポイント

定期便のネットショップで最も大切なのは、次の3つを、申し込む前にきちんと伝えることだと考えています。

今回のサンプルでは、この3つをシンプルに整理し、「安心して申し込めるお店」を目指しました。

申し込みの流れと、定期便の管理ページは、実際に操作できます。入力した内容は、どこにも送信されません。

定期便のためのサイト設計

① 申し込む前に「すべて」見せる

定期便で一番不安なのは、「結局いくらかかるの？」「いつ届くの？」「やめられるの？」ではないでしょうか。

そこでプラン詳細ページでは、周期を選ぶと、次の内容がその場で切り替わるようにしました。

• 1回のお支払い合計（商品代と送料の内訳つき）
• 1年続けた場合の金額の目安
• 初回・次回のお届け予定日
• 請求日と、変更・解約の締切

確認画面でも、「定期購入であること」「やめるまで続くこと」「解約方法」を、申し込みボタンの前にまとめて表示しています。

※表示している条件は、サンプル用の仮のものです。実際のお店では、最新の表示ルールを確認しながら決める必要があります。

② プランを2つに絞って、迷わせない

化粧水と乳液の「はじめの2点」と、化粧水・美容液・クリームの「ととのえる3点」。

選択肢を増やすほど、お客様は迷います。比べやすい2つに絞り、内容・金額・向いている人を同じ並びで見せました。

③ 解約方法を、隠さない

「いつでも解約できます」だけでは、実は不親切です。

いつまでに、どこから操作すれば止められるのか。締切を過ぎたらどうなるのか。ここまで書いて、はじめて安心につながります。

このサンプルでは、「次回お届け予定日の10日前の23:59までに、定期便の管理ページから」と具体的に書き、締切を過ぎた場合の扱いも案内しています。

④ 申し込んだ「あと」の画面まで作る

定期便は、申し込んでからが本番です。そのため、次の操作ができる「定期便の管理」ページまで作りました。

• プラン・周期の変更
• 次の1回をスキップ
• 一時停止と再開
• 解約

どの操作も、「何がいつから変わるのか」を説明し、確認してから実行。完了後は、画面の状態が切り替わります。押しても何も起きないボタンは作っていません。

デザインについて

化粧品は、写真の印象で選ばれるジャンルです。「上質で落ち着いた、清潔感のある」世界観を、写真を主役にしたデザインで表現しています。

• 全幅の写真に、コピーとボタンを重ねたファーストビュー
• ベージュ・ピンク・薄い黄色の、やわらかい配色
• 見出しは「大きな英字＋小さな日本語」にそろえ、どのページでも同じ雰囲気に
• スマホでは、プラン詳細を「写真 → プラン名 → 料金 → 選択」の順に並べ替え

---

このサンプルでできること・できないこと

正直にお伝えすると、このサンプルはデザインと操作の流れを確認するためのものです。

• できること：画面のデザイン／申し込みから管理までの操作の流れ／プランと周期による、金額と日付の切り替わり
• できないこと：実際の決済／注文の受け付け／メールの送信／会員情報の保存

実際にお店として運営する場合は、決済会社との契約や、注文・定期の請求を管理する仕組み（WordPress＋WooCommerceなど）が、別に必要になります。このサンプルは、そこへ進む前に「どんなお店にしたいか」を、見て触れる形にするためのものです。

まとめ

今回の制作で一貫して意識したのは、「買う前に、すべて分かるようにする」ことです。

定期便は、1回きりの買い物と違って、続くことが前提です。だからこそ、お客様が申し込む前に不安を残さないことが、お店の信頼につながります。

このサンプルでは、

この3つを軸に設計しました。

きれいなデザインは、こうした設計の上に乗って初めて機能します。見た目を整えることと、安心して申し込める構造を作ることは、別の仕事です。その両方を一緒に考えるのが、私の制作スタイルです。

ネットショップのデザイン・設計のご相談も、お気軽にどうぞ。「何を載せればいいかわからない」という段階からでも大丈夫です。