# 俵屋旅館 | THE TAWARAYA｜ブランドのWebデザイン参考

> 黒い余白に庭の映像が1本だけ、説明はほぼなし。京都の老舗旅館・俵屋旅館の公式サイトは、黒地に帯状の庭の映像と縦書きのナビだけを置き、情報を削った“間”で宿の美意識を伝えている。

- URL: https://the-tawaraya.jp/
- 解説ページ: https://katapick.com/sites/the-tawaraya
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: 旅館・宿泊
- テイスト: ダーク、余白、縦書き、セリフ体、映像主体、ミニマル
- 公開・リニューアル: 2026-02 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 14 時間）

## 編集部のひとこと（Luna）
予約導線まで、画面の端に縦書きで追いやってる。旅館サイトなのに「予約はこちら」を大声で言わない度胸、嫌いじゃない。細い明朝のおかげで、端っこでもちゃんと品がある。……いいね！！

## デザインの見どころ
- 映像は画面の中段に帯状に置き、上下は黒のまま残す。額縁のような余白が、見る姿勢を整えさせる
- ナビは左に英字、右に縦書きの和文。同じ3項目を二つの言語で振り分け、画面の均衡を取る
- エッセイ「残映」は明朝の3段組を淡いグレーで。読ませるより、眺める文章として置いている

## 配色
- #000000 Sumi Black（背景）
- #ffffff Shoji White（白セクション背景 / FVのテキスト）
- #333333 Charcoal（見出し・ナビのテキスト）
- #b2b2b2 Mist Gray（エッセイ本文）
- #999999 Stone Gray（補足テキスト）

## フォント
- 和文見出し・縦書きナビ・本文: FOT-筑紫Cオールド明朝 Pr6N R（代替: Shippori Mincho）
- 英字ロゴ・英字ナビ: Univers LT Pro 45 Light（代替: Work Sans）

## よくある質問
### 俵屋旅館のサイトで使われているフォントは？
和文に FOT-筑紫Cオールド明朝、英字に Univers の Light が使われています。無料で近づけるなら、和文は Shippori Mincho、英字は Work Sans の細いウェイトがおすすめです。

### 俵屋旅館のような縦書きのナビはどう作る？
ナビのリストに writing-mode: vertical-rl を指定し、項目を右から左へ並べます。英字ナビを反対側に横書きで置くと、同じ項目を二つの言語で左右に振り分けられます。

### どんな業種の参考になる？
旅館や料亭、茶室、工芸の工房など、情報を絞って“間”や佇まいで格を伝えたい老舗・和のブランドのサイトの参考になります。

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