制作例へ戻る

SEREIN

架空ブランドの自主制作です。価格・香り・仕様は作品内の設定で、実際の販売・注文・決済は行いません。映像・3Dの制作例も同じプロジェクトの成果物です。

実際に動くSEREINの商品LP。左に商品説明、右にガラスボトルの映像を配置したPC画面

概要

ルームフレグランスを題材に、商品の印象から香り・形・セット内容の確認へつなぐLPを制作。ひとつの3Dモデルから映像と画像を作り、商品を回して見る操作、通常・ギフトの選択、購入内容を確認するデモまで実装しています。

担当範囲
商品設定、文章と情報設計、Webデザイン、Blenderでの商品造形・質感・照明・映像制作、3Dビューア、商品選択と確認画面の実装。
実装範囲
1ページ、商品選択・金額計算・確認画面。注文・決済は含みません。
映像
PC約600KB/スマホ約412KB。各5秒・無音。
使用技術
React / TypeScriptBlender / CyclesThree.jsFFmpeg

判断と工夫

選んだ内容を、その場で確かめる。

通常仕様とギフト箱付きの選択に、商品画像・内容物・金額を連動。数量を変えたあとも、確認画面でパッケージ・単価・合計を照合できます。閉じて選び直すときは直前の選択を保持します。

スマートフォンの購入内容確認デモ。ギフト箱付き3点、商品代金合計28,050円と選び直すボタン

映像と、触れる3Dを使い分ける。

冒頭の質感はBlenderの映像で表現。商品を確かめる場面だけに3Dビューアを置き、画面へ近づいてから読み込みます。

実際のLPで、正面・側面・上部のボタンと3Dボトルを表示した画面

スマホにも、専用の構図を。

スマートフォンには別のカメラで撮った縦の素材を用意。商品と説明を分け、画像が文字へ重ならない順序にしています。

PC実際のPC画面。商品と文章を左右へ分けた構図
スマートフォン実際のスマートフォン幅の画面。商品を上、説明を下へ置いた構図