制作例へ戻る架空ブランドの自主制作です。価格・香り・仕様は作品内の設定で、実際の販売・注文・決済は行いません。映像・3Dの制作例も同じプロジェクトの成果物です。
概要
ルームフレグランスを題材に、商品の印象から香り・形・セット内容の確認へつなぐLPを制作。ひとつの3Dモデルから映像と画像を作り、商品を回して見る操作、通常・ギフトの選択、購入内容を確認するデモまで実装しています。
- 担当範囲
- 商品設定、文章と情報設計、Webデザイン、Blenderでの商品造形・質感・照明・映像制作、3Dビューア、商品選択と確認画面の実装。
- 実装範囲
- 1ページ、商品選択・金額計算・確認画面。注文・決済は含みません。
- 映像
- PC約600KB/スマホ約412KB。各5秒・無音。
- 使用技術
- React / TypeScriptBlender / CyclesThree.jsFFmpeg
判断と工夫
01選んだ内容を、その場で確かめる。
通常仕様とギフト箱付きの選択に、商品画像・内容物・金額を連動。数量を変えたあとも、確認画面でパッケージ・単価・合計を照合できます。閉じて選び直すときは直前の選択を保持します。
02映像と、触れる3Dを使い分ける。
冒頭の質感はBlenderの映像で表現。商品を確かめる場面だけに3Dビューアを置き、画面へ近づいてから読み込みます。
03スマホにも、専用の構図を。
スマートフォンには別のカメラで撮った縦の素材を用意。商品と説明を分け、画像が文字へ重ならない順序にしています。