TOHA（トハ）｜URBAN RESEARCH

1. 01

   ヘッダー

   左に「TOHA / URBAN RESEARCH」のロゴ、中央に Top・Concept・Look・Feature・Shop、右に Online Store と Instagram。SPでは紺の四角いメニューボタンに集約する。

2. 02

   ヒーロー

   蓮の葉の水滴、水の入ったグラス、縁側に座るモデルなどの写真を全画面で見せる。右に縦組みの「アーバンリサーチが提案するリカバリーウェア」と Look ボタン、下端に「2026」「Aug.」「Debut」と斜体の「Wear Your Recovery / Made for Everyday Balance」を散らす。

3. 03

   Concept

   暗い室内で花瓶に生けた花の写真を中央に置き、左右に縦組みのコンセプト文を配置する。

4. 04

   Feature

   黒地の左に4つの線画アイコン、右に特殊繊維「CERAFLUX（セラフラックス）」の働きを説明する文章。

5. 05

   Look

   和家屋の縁側や庭でウェアを着たモデルの写真を、縦長のパネルで3列に並べる。

6. 06

   特集

   白地に「New」ラベル付きの記事カード（「常白（トハ）──余白を纏い、自分に還る。」）と View ボタン、その下に「More Contents Coming Soon」。

7. 07

   Shop

   暗いガラスの器の写真を背景に、北海道・東北・信越から九州・沖縄までの地域別アコーディオンで取扱店舗を案内する。

8. 08

   フッター

   左下にコピーライト、右下に URBAN RESEARCH と UR ONLINE STORE のロゴを置く。

• ヘッダーのナビは、表示中のセクション名に下線が移る。IntersectionObserver で現在地を判定してクラスを切り替えると再現可能
• FVは複数の写真が切り替わるスライドショーと思われる。GSAP で opacity と scale をゆっくり変えるクロスフェードで再現可能
• Shop の地域リストは「＋」付きのアコーディオン。details / summary 要素か、GSAP で高さを開閉して実装できる
• 縦組みのコピーは writing-mode: vertical-rl で組み、スクロールに合わせて1行ずつフェードインさせると同じ静けさが出る

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

検出された技術:GSAPAdobe Fonts

• 01写真は陰影の深いものだけを選び、背景は黒に寄せて明るい部分を写真の中の光だけにする
• 02和文コピーは縦組みにし、行数を少なく、行間を広く取る
• 03英字は細いサンセリフと斜体の2種類だけにし、日付や「Debut」を画面の四隅や端に散らす
• 04商品スペックは Feature の1セクションに閉じ込め、ほかのセクションは写真と短い言葉に任せる

1---
2title: "TOHA（トハ）｜URBAN RESEARCH 再現用デザイン仕様書"
3source: https://toha.urban-research.co.jp/
4katapick: https://katapick.com/sites/toha
5category: ブランド
6region: 国内 (JP)
7tags: [ダーク, 写真主体, 縦書き, 余白, ミニマル]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# TOHA（トハ）｜URBAN RESEARCH — 再現用デザイン仕様書
17 
18> 暗い和室の写真で、服より先に“休む時間”を見せる。アーバンリサーチの新ブランドTOHA（トハ）のサイトは、縦組みのコピーと陰影の深い写真、黒い余白で、リカバリーウェアを“常白”という過ごし方として手渡してくる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22