WORK 01 WEB DESIGN / 3D / FRONT-END
D’un（ドゥアン）
3D表現を取り入れたブランドサイト制作
OVERVIEW
ベビーリングブランド「D’un（ドゥアン）」のWebサイトを制作。リアルタイム3Dによるメインビジュアルと、デザイン・素材・誕生石を切り替えられる3Dプレビューを実装しました。
- CLIENT / PROJECT
- D’un（ドゥアン）
- WHAT WE DID
- WEBSITE / APP
- D’unのサイトを見る ↗
OUR ROLE
リベランが担当したこと。
ブラウザ上で動く3Dリングと、商品を選ぶためのカスタマイズUIを実装しました。メインビジュアルの演出と、選択内容が反映される3Dプレビューを組み合わせています。
- リアルタイム3Dを使ったメインビジュアルの実装
- デザイン・素材・誕生石を切り替える3Dプレビューの実装
- ドラッグによる角度変更などのインタラクション
- スマートフォン向けのカスタマイズUI・レスポンシブ対応
リアルタイム3Dによるメインビジュアル
ファーストビューに、ブラウザ上で描画する3Dリングを配置しました。金属や宝石の光の反射、きらめき、リングの動きを組み合わせ、ブランドの世界観に合わせたリッチな商品表現を実装しています。ドラッグによる角度変更や、アニメーションの停止・再開にも対応しています。
選択内容が反映される3Dプレビュー
デザイン・素材・誕生石を選ぶと、組み合わせに応じてリングの3Dイメージが切り替わります。ドラッグで角度を変えながら形や色を確認できる、インタラクティブなプレビューを実装しました。実物の質感や細部とは異なるイメージであることも画面上に明示しています。
スマートフォン向けのカスタマイズUI
スマートフォンでは「かたち」「素材」「誕生石」「刻印」をタブで切り替える構成にしています。限られた画面でも3Dプレビューと選択項目を確認しながら、組み合わせを検討できる操作画面を実装しました。
制作した画面・デザイン。
