TRUNK(HOTEL) CAT STREET WEDDING

1. 01

   ヒーロー

   黒地の中央に縦線状のTRUNKロゴとセリフ体2行の「TRUNK(HOTEL) CAT STREET」、その下に小さな縦長ビジュアルと英文のコンセプト文。左下に About〜Contact の5列ナビ、右に白いピル型の「Bridal Fair」ボタンとハンバーガー。

2. 02

   フルスクリーンビジュアル

   ヒーローの直後に画面幅いっぱいの暗いトーンの写真が続く。FVの小さなビジュアルが拡大していく演出と思われる。

3. 03

   (01) Ceremony

   白地に切り替わり、左に「( 01 )」と大きなセリフ体の「Ceremony」、右に大判のチャペル写真。下に和文の説明と下線付き「View More」、写真を大小ずらして重ねるコラージュ配置。

4. 04

   (02) Banquet

   再び黒地。左に中央揃えの見出しと説明、右半分に4つのバンケットの写真を縦に積み、スクロールで次々に切り替わる構成。

5. 05

   (03) Styling〜(07) Gift

   白地で、左に写真・中央に番号付き見出し・右に説明と View More を置いた横長の行を細い罫線で区切って並べる。フルページキャプチャは9000pxで切れており、Food 以降は抽出データの見出しのみ確認。

6. 06

   Beyond The Wedding / Workshop

   抽出データでは「Beyond The Wedding」と「Workshop」の見出しを持つセクション（キャプチャ範囲外のため詳細は未確認）。

7. 07

   Plan / Bridal Fair

   プランとブライダルフェアの見出しが続く（キャプチャ範囲外）。

8. 08

   Contact・フッター

   「Contact」見出しを持つフッターで締める（キャプチャ範囲外）。

• 抽出データの見出しが「C e r e m o n y」のように1文字ずつ分かれており、文字単位の span に分割して順番にフェードインさせていると思われる（GSAP SplitText や CSS の transition-delay で再現可能）
• FVでは下部にあったナビが、スクロール後は中央ロゴ・左ナビ・右「Bridal Fair」の固定ヘッダーに切り替わる。スクロール量でクラスを付け替える実装で再現できる
• 右端の01〜09の目次は現在のセクションに矢印が付き、文字色が変わる。IntersectionObserver で表示中のセクションを判定する
• Banquet は左の文字ブロックを position: sticky で留め、右の写真を流す構成と思われる。慣性スクロールは抽出データにある Lenis

スクロールのコマ撮りLenis · 400–450ms

検出された技術:LenisAstroGoogle FontsAdobe Fonts

• 01色は #121212 と白の2色だけにし、セクションごとに背景を反転させてリズムをつくる
• 02英字見出しは大きなセリフ体に「( 01 )」の小さな番号ラベルを添える共通パーツにする
• 03写真は裁ち落としと余白付きを混ぜ、大小をずらして重ねることで雑誌的なレイアウトにする
• 04ナビとリンクは小さなサンセリフに抑え、見出しと写真の存在感を優先する

1---
2title: "TRUNK(HOTEL) CAT STREET WEDDING 再現用デザイン仕様書"
3source: https://wedding.trunk-hotel.com/catstreet
4katapick: https://katapick.com/sites/wedding-catstreet
5category: LP
6region: 国内 (JP)
7tags: [ダーク, セリフ体, 写真主体, 固定ナビ, ロングページ]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# TRUNK(HOTEL) CAT STREET WEDDING — 再現用デザイン仕様書
17 
18> ウェディングなのに、FVが真っ黒。渋谷のホテルによるウェディングサイト「TRUNK(HOTEL) CAT STREET WEDDING」は、純白の定石を外した黒いFVで幕を開け、雑誌をめくる章立てで式場を読ませる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22