E-commerceOverseas / USPicked 2026.09.26

Vero

ECのWebデザイン参考 — ファインアート・ウェディングドレスの彫刻制作

出典: verostudio.com

Editor's note — 編集部の視点

白いドレスの彫刻が、ずっと画面の真ん中にいる。

ドレスを彫刻にするアートスタジオVeroのサイトは、白い彫刻を画面の中心に据え続け、ECでありながらギャラリーを歩くような鑑賞の時間をつくっている。

LeoMotion & Direction

制作プロセスの章、縦に3840pxもあるの！写真の帯が横に流れていくっぽくて、メイキング映像を観てる気分！最後に「from DRESS, to DATA, to SCULPTURE.」が来た瞬間、鳥肌！

1直立の大文字に「forever」などの語だけイタリックを混ぜる。1行の中で、声の抑揚まで組版で聞かせる
2白いドレス彫刻を中央に留め、見出しだけを流していく。売り場ではなく、展示室として作品を見せる
3地はクリームとチャコールの2色。オレンジは映像と写真の中に閉じ込め、作品の温度として効かせる

Color

Veroの配色

Typography

使用フォントと無料の代替

見出し（大文字＋イタリック）

Aa あア

使用: Louize Display
代替: Cormorant Garamond

本文・ボタン・ラベル

Aa あア

使用: Beausite Classic
代替: Instrument Sans

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型21px · 1 · 400
見出しKatapick 型30px · 1.06 · 500
本文The quick brown fox — 参考を型にする16px · 1.1 · 400
ボタンKatapick 型15px · 1 · 400
注釈The quick brown fox — 参考を型にする12px · 1 · 400

Structure

ページ構成（上から順）

01
ヒーロー
オレンジの背景でモデルとドレス彫刻を撮った映像を全面に敷き、中央に白いロゴ「VERO」と、イタリックと大文字を混ぜた1行のキャッチを置く。左上にMENU、右上に「Start your COMMISSION」の半透明ボタン。
02
ドレス彫刻のショーケース
クリーム地の中央に白いドレスの立体を固定し、スクロールで見出し「DESERVES TO LAST forever.」を重ねながら送る。
03
ブランド紹介
サンセリフの太字リードと、サイズ・素材を説明する短い本文、CTAを中央揃えで置く。
04
エッセンス
小さなラベルのあとに「where INNOVATION meets CRAFTSMANSHIP」を大きく2行で置き、下に小さな写真を1点。
05
制作プロセスのギャラリー
高さ3840pxの長いセクション。グレーの素材写真やオレンジのドレス写真が横帯状に並び、最後にグラデーションの上で「from DRESS, to DATA, to SCULPTURE.」の1行が流れる。
06
コンセプト
「so THAT YOU BECOME ART.」を大きく中央に置き、モノクロの彫刻写真・オレンジ背景の写真を非対称のグリッドで組む。右下にサンセリフのサブ見出しとセリフ体イタリックの本文。
07
後半セクション・フッター
フルページキャプチャが9000pxで切れているため、以降は抽出データの見出しのみ確認。「will forever be a masterpiece.」の見出しと、画像中心と思われる2つのセクション、フッターが続く。

Interaction

アニメーション・インタラクション

ヒーローのロゴは文字が帯状にずれて表示されており、マスクをかけて文字を分割表示するリビール演出と思われる（clip-path と GSAP で再現可能）
ドレス彫刻はスクロール中も中央に留まり見出しだけが流れる。position: sticky の上に見出しを重ねるか、抽出データにある WebGL で3Dモデルを回転させていると思われる
制作プロセスのセクションは縦に3840pxあり、写真の帯が横方向に移動する横スクロール演出と思われる（ScrollTrigger の pin ＋ x 方向の translate で再現できる）
ヘッダーのMENUとCTAは半透明の白い矩形で常時固定。映像上でもクリーム地上でも読める

スクロールのコマ撮り300–1400ms

検出された技術:Next.jsWebGL

Reproduce

再現するときのポイント

01見出しは細身のディスプレイ用セリフ体で、直立の大文字と小文字イタリックを1行に混ぜる
02背景は純白ではなくクリーム（#f3f0ed）にし、白い彫刻が背景から浮くようにする
03色の主張は映像と写真のオレンジに任せ、UIはチャコールとクリームの2色で組む
04商品は中央に1点だけ大きく置き、スクロールでテキストを入れ替えて語らせる

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全7セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

vero.katapick.md

1---
2title: "Vero 再現用デザイン仕様書"
3source: https://www.verostudio.com/
4katapick: https://katapick.com/sites/vero
5category: EC
6region: 海外 (US)
7tags: [セリフ体, 映像主体, 3D/WebGL, スクロール演出, 余白, ミニマル]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# Vero — 再現用デザイン仕様書
17 
18> 白いドレスの彫刻が、ずっと画面の真ん中にいる。ドレスを彫刻にするアートスタジオVeroのサイトは、白い彫刻を画面の中心に据え続け、ECでありながらギャラリーを歩くような鑑賞の時間をつくっている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22