Gallery / TSUGAI
BRAND SITE — 2026
TSUGAI
架空の機構メーカーのブランドサイト。ページ全体が、主軸の1回転になる。
- Category
- Web design
- Status
- 架空ブランドのコンセプトサイト(動くデモあり)
- Year
- 2026
- Type
- Parfum自身の探索(実績ではありません)

Overview
TSUGAIは実在しない架空の機構メーカーです。ページ全体が主軸の1回転(0〜360°)になり、板が積み重なった姿から、分かれ、一枚の壁になり、ブラインドのように開く、と姿を変えていきます。
Problem
- 売るのは板の回転そのものではなく、回転で生まれる空間の変化。それを説明文ではなく、体験で伝えたい
- 凝った動きでも、読めない・酔う・重いサイトにはしたくない
Approach
- 独自のスクロールは使わず、通常のスクロール量を角度に変え、見た目の角度だけを滑らかに追従させる
- 節ごとに機構の状態を変える(ORIGIN/SYSTEM/LIGHT/MATERIAL/APPLICATION/RETURN)
- 部品を選ぶとその部品だけが残り、仕上げを選ぶと実際の材質が変わる
- スマホは縦の構成に作り直し、動きを減らす設定では各節の静止姿勢へ。WebGLがなくても全文が読める
- ※ スマホ実機での確認は、これからです
Technology
- Three.js(WebGL)
- 金属の質感を手続きで生成(法線・粗さ・刻印)
- 描画解像度の自動調整(最大1.5倍)
- prefers-reduced-motion への対応
- 背景の場面の画像・映像は生成AIで制作(架空・実在の場所ではありません)
Demo
動くデモを、このサイトの中で開けます。デモのページは架空のブランドとして、検索に出さない設定にしています。
内容は、検討の進み具合に応じて更新します。
本文へ移動


