# TRUNK(HOTEL) CAT STREET WEDDING｜LPのWebデザイン参考

> ウェディングなのに、FVが真っ黒。渋谷のホテルによるウェディングサイト「TRUNK(HOTEL) CAT STREET WEDDING」は、純白の定石を外した黒いFVで幕を開け、雑誌をめくる章立てで式場を読ませる。

- URL: https://wedding.trunk-hotel.com/catstreet
- 解説ページ: https://katapick.com/sites/wedding-catstreet
- カテゴリ: LP / 地域: 国内（JP）/ 業種: ホテルウェディング
- テイスト: ダーク、セリフ体、写真主体、固定ナビ、ロングページ
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 28 時間）

## 編集部のひとこと（Iris）
ブランドの差し色を持たずに、黒と白とグレーだけ。だから写真に写る植栽の緑が、いちばんみずみずしく見える。白いシャツに一輪挿しの花を添えたみたいな感じがすき。

## デザインの見どころ
- FVは黒地にセリフ体の施設名と小さな写真1枚。華やかさを抑えるほど、言葉の品が立ってくる
- 「(01) Ceremony」と番号で章を切り、右端に同じ番号の目次を固定。長いページが一冊の本になる
- Ceremonyは白地、Banquetは黒地。写真の明るさに合わせて面を反転させ、章ごとに空気を入れ替える

## 配色
- #121212 Near Black（背景 / テキスト）
- #ffffff White（背景 / テキスト / Bridal Fair ボタン）
- #989994 Stone Gray（区切り線（スクショから採色））
- #363634 Charcoal（Cookie バー背景（スクショから採色））
- #284620 Forest Green（写真の植栽のトーン（スクショから採色））

## フォント
- 英字見出し・施設名・ボタン: Adobe Text Pro（代替: Crimson Pro）
- 和文本文・ナビ: Zen Kaku Gothic New（代替: Zen Kaku Gothic New）
- 英文コピー・番号ラベル: Inter（代替: Inter）
- 一部の和文テキスト: Shippori Mincho（代替: Shippori Mincho）

## よくある質問
### TRUNK(HOTEL) CAT STREET WEDDINGのサイトで使われているフォントは？
英字見出しに Adobe Fonts の Adobe Text Pro、和文本文に Zen Kaku Gothic New、英文コピーに Inter、一部に Shippori Mincho が使われています。無料で近づけるなら見出しを Crimson Pro に置き換え、残りは Google Fonts でそのまま使えます。

### 番号付きのセクション見出しと右側の目次はどう作る？
各セクションに id を振り、見出しと同じ番号の目次を position: fixed で右端に置きます。IntersectionObserver で表示中のセクションを判定し、該当項目に矢印や色の変化を付けます。

### このサイトのデザインはどんな業種の参考になる？
ホテル・式場・レストランなど、空間写真が主役の施設サイトや、落ち着いた高級感を出したいブランドサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/wedding-catstreet からダウンロードできます。
出典: Katapick（https://katapick.com）