ネットショップ（Shopify・焼き菓子）
UMA-UMA BAKE｜焼き菓子とクッキー缶のネットショップ
焦がしバターの焼き菓子とクッキー缶を売る、Shopify のネットショップです。標準のテーマを土台に、デザインからテーマのコードまで作りました。
サイトのパスワードumauma2026
概要
- サイト
- https://uma-uma-bake.myshopify.com/ パスワード umauma2026
- 業種
- 食品・ギフト（焼き菓子のネットショップ）
- 対象
- 手みやげや贈り物に、焼き菓子を探している人
- 種類
- Shopify のネットショップ（トップ・商品ページ・缶を選ぶ画面・カート）
- 仕組み
- Shopify（標準のテーマ Horizon を土台に、棚・画面をテーマのコードで追加）
- 担当範囲
- 企画・参考調査・構成・原稿・写真の指示・デザイン・テーマのコーディング・商品の登録・Figmaデータ
- 制作日数
- 2日
- 対応
- PC・スマートフォン
- Figmaデータ
- あり（トップページ・PC・スマートフォン）
意識したこと
01トップページ
標準のテーマの上に、
お店だけの棚を8つ
Shopify の標準のテーマ（Horizon）を土台に、最初の画面・人気ランキング・缶を選ぶ棚などをテーマのコードで新しく作りました。
ほとんどの棚で、お店の方が管理画面から言葉・写真・商品を差し替えられます。値段は登録した商品からそのまま出ます。
02好きに選べる缶
有料のアプリを使わずに、
12個を選んで缶につめる
4種類の焼き菓子から好きなものを12個選ぶと、缶の中の見本に1つずつ並び、12個ちょうどのときだけカートに入れられます。
選んだ中身はそのまま注文に付くので、お店の方は注文の画面を見て缶につめられます。
03カート
のし・カード・お届け日を、
日本の贈り物の形で
カートに、のし・メッセージカード・お届け日と時間帯・手さげ袋の欄を足しました。入れた内容は注文に付きます。
「あと◯円で送料無料」も出して、もう1つ買い足すきっかけを作っています。
スマートフォンで見たところ
Figmaデータ
コーダーの方がそのまま組めるよう、納品時と同じ形に整えています。
- PC（幅1440）とスマートフォン（幅375）のトップページのデザイン
- 色の変数・文字スタイル（サイトのCSSと同じ値）
- ヘッダー・ボタン・焼き菓子のカード・缶のカードの部品と、Shopify のセクションとテーマのファイルの対応表
- コーダー向けの説明のページ（見方・動き・書き出し）
