01Overview
制作概要
架空の洋菓子店を想定したブランドサイトとShopify ECのデモです。ファーストビューはAIで生成した動画から48枚のフレームを抜き出し、Canvasでスクロールに連動させています。外部のアニメーションライブラリは使っていません。
- 制作区分
- 自主制作デモ（架空の店舗。実在しません）
- 業種
- 洋菓子店・オンライン販売
- サイト種別
- ブランドサイト ＋ Shopify EC
- 納期目安
- 実案件想定で 2〜3週間
02Problem
課題
写真だけでは決めきれない人に、味の違いを伝えて購入まで運ぶ
- 制作目的
- オンラインでのケーキ購入。ブランドサイトからShopifyのECへ送客する。
- 読み手
- 記念日に贈るケーキを探している層。写真だけでは味が分からず選びきれない人。
03Decision
設計判断
写真では伝わらない味を、甘さ・酸味・軽さの3軸で可視化する。EC・LINE連携まで一貫して提案できることを示すデモ。
リアルタイム3Dを試したうえで、動画スクラブに切り替えた
当初はBlenderで作ったケーキをThree.jsでリアルタイム描画する計画でした。しかし生クリームの透け感やいちごの照りが再現できず、粘土のように見えてしまったため撤去しています。最終的にAI生成動画から48枚のフレームを抜き出してCanvasで送る方式に変更し、外部ライブラリなしで質感を保ったまま実現しました
架空の店舗であることを隠していない
デモのため実在の店舗ではなく、注文も受け付けていないことをサイト上に明記しています。実在するように見せかけないことを、制作上の制約として最初に決めました
04Implementation
実装
写真で伝わらない味を、UIで可視化した
甘さ・酸味・軽さを5段階のメーターで示す独自のUIを作りました。CSSだけで動き、読み上げにも対応しています。「どれも同じに見える」という洋菓子ECの根本的な問題に、写真の追加ではなく情報設計で答えた部分です
05Result
成果
自主制作のため事業成果はありません。数値は、ファーストビューのフレーム連番スクラブを含む状態の表示性能です。
モバイル実測（Lighthouse・同一条件）
- Performance
- 100
- LCP
- 1.7秒
- CLS
- 0
06Screens
Desktop / Mobile
枠の中を縦にスクロールすると、ページ全体を確認できます
07Scope
担当範囲・使用技術
担当範囲
- 要件定義
- 競合デザインリサーチ
- 構成設計
- コピーライティング
- アートディレクション
- モーション設計
- AI画像・動画生成
- 実装
- Shopifyテーマ構築
- LINE連携
- デプロイ
使用技術
- Astro（静的）
- Canvas によるフレーム連番スクラブ（ライブラリ非依存）
- Shopify
- LINE公式アカウント連携
- Cloudflare Pages