贈りものの焼き菓子を、安心して選べるネットショップのサンプルサイト

こんにちは！Lumiukko designのゆきです。
今回は、贈りものの焼き菓子を想定した、架空のネットショップ「小麦とあかり」のサンプルを制作しました。

お客様が買う前に確かめたいことにきちんと答え、さらにブランドの想いが伝わる形を試したサンプルサイトです。

• 種類：ネットショップのサンプル（購入の流れまで通る、動くサンプル）
• 想定した商品：贈りもの向けの焼き菓子（サブレ・フィナンシェ・詰め合わせの3品）
• 想定したお客様：大切な人への手土産やお礼に、日持ちして相手に気を遣わせない焼き菓子を探している人
• 画面：トップ／商品一覧／商品詳細／カート／お届け先・お支払い／最終確認／試作完了
• 写真：AI生成のイメージ画像

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

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

ネットショップは、きれいに作るだけでは売れません。お客様は買う前に確かめたいことがあり、それが分からないと、ページを閉じてしまいます。

そこで、デザインに入る前に、「この店のお客様は、何が分からなくて、まだ選べないのか」を整理しました。

今回のサンプルでは、この4つをもとに、「贈りものを安心して選べるお店」を目指しました。

買う流れは、実際に操作できます。入力した内容は、どこにも送信されません。

ネットショップとしての設計

① 買う前に「確かめたいこと」を見せる

贈りものの焼き菓子を選ぶとき、気になるのは「いつまで持つの？」「アレルギーは？」「送料を入れるといくら？」「いつ届くの？」ではないでしょうか。

そこで、商品一覧の時点で、次の内容が見えるようにしました。

• 賞味期限（常温で、製造日から○日）とアレルギー表示
• 送料込み・税込の総額（その下に「商品○円＋送料○円」の内訳）
• お届けの目安（今の日本時間から計算した日付）

お届けの目安は、固定の文字ではなく、締め時間・発送しない曜日・祝日・年末年始・地域による違い・前払いの場合を分けて計算しています。「あと○円で送料無料」も、カート・入力画面・最終確認のすべてに出しています。

※表示している条件は、サンプル用の仮のものです。

② 商品を並べるだけでなく、ブランドと想いが伝わる形に

ただ商品を並べるだけでなく、ブランディングや想いが伝わる形にしています。

• コンセプト：商品一覧の前に、「気を遣わせず、ちゃんと嬉しい。そんな手みやげを、焼いています。」という想いを、縦書きの大きな見出しで置きました。誰に、どんな場面で届けたいお店なのかが、最初に伝わります。
• ギャラリー：商品の写真だけでなく、手渡す場面、お茶の時間、断面のアップなどを、左右に流れ続ける形で見せました。使う場面や素材の質感が想像できます。
• 店主の紹介：名前を知られていない小さなお店では、誰が作っているかが、買う判断の材料になります。そのため、店主の写真と、焼き菓子への考え方を載せています。
• 店名とイラスト：店名を手書き風の縦書きにして、右下に線画のイラストを漂わせ、手作りの温かさを出しました。色は、小麦色の地に、ブランドの緑と、購入ボタンの赤茶に絞っています。

③ 「買う流れ」を、省略せずに作る

商品一覧から試作完了まで、実際に触れます。特に、お届け先の入力を丁寧に作りました。

• 全角数字やハイフン付きの郵便番号・電話番号も、表記をそろえて受け付ける
• エラーは、該当の欄のすぐ下に、直し方まで書く（入力した内容は消さない）
• 郵便番号から住所を自動入力。複数の候補があるときは選べる
• 最終確認から、商品・数量・住所・支払い方法をそれぞれ直せる
• カートでは、送料を注文全体で1回だけ計算する

住所の自動入力に使うデータは、サイトの中に同梱しています。入力した郵便番号や住所を、外部へ送ることはありません。

④ 個人情報を扱わない作り

サンプルなので、実際の決済も注文送信もしていません。「注文を確定する」を押すと、試作のため注文が確定されないことを表示して止まります。

入力した内容は、ページを開いている間の画面の中だけで扱い、保存も送信もせず、再読み込みで消えます。「サンプル情報で試す」ボタンで、架空の情報を入れて試せます。

デザインについて

焼き菓子は、写真の印象で選ばれるジャンルです。「やさしく、あたたかく、静かな」世界観を、写真を主役にしたデザインで表現しています。

• 角の丸い大きな写真に、手書き風の店名を重ねたファーストビュー
• スクロールすると、店名が小さくなってヘッダーに収まる
• 見出しは「大きな英字＋小さな日本語」にそろえて、どの場所でも同じ雰囲気に
• スマホでは、写真を縦長のカプセル形にして、画面の約8割を使って見せる

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

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

• できること：画面のデザイン／商品を選んで、お届け先を入力し、最終確認まで進む操作の流れ／数量・送料・お届け日の切り替わり
• できないこと：実際の決済／注文の受け付け／メールの送信／在庫や会員情報の保存

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

まとめ

今回の制作で一貫して意識したのは、「買う前に不安を残さず、お店の想いも伝える」ことです。

小さなお店ほど、名前を知られていません。だからこそ、商品の情報を分かりやすく見せることと、誰がどんな想いで作っているのかを伝えることの、両方が必要だと考えています。

このサンプルでは、

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

見た目を整えることと、安心して買える構造を作ることは、別の仕事です。その両方を一緒に考えるのが、私の制作スタイルです。

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