BrandJapanPicked 2026.09.26

俵屋旅館 | THE TAWARAYA

ブランドのWebデザイン参考 — 旅館・宿泊

出典: the-tawaraya.jp

Editor's note — 編集部の視点

黒い余白に庭の映像が1本だけ、説明はほぼなし。

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

LunaType & Whitespace

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

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

Color

俵屋旅館 | THE TAWARAYAの配色

Typography

使用フォントと無料の代替

和文見出し・縦書きナビ・本文

Aa あア

使用: FOT-筑紫Cオールド明朝 Pr6N R
代替: Shippori Mincho

英字ロゴ・英字ナビ

Aa あア

使用: Univers LT Pro 45 Light
代替: Work Sans

実測タイプスケール1440px幅 · 2026-09-26 計測

本文The quick brown fox — 参考を型にする16px · 1 · 400
ボタンKatapick 型16px · 1 · 400

Structure

ページ構成（上から順）

01
ヒーロー
黒地の中段に、石の水鉢と草花のある庭を映した横長の映像を帯状に配置。左に英字ナビ（ABOUT / NEWS / ACCESS）、右に縦書きの和文ナビ（俵屋について / お知らせ / アクセス）、右下に音声と全画面表示のアイコン。
02
写真セクション
字間を大きく開けた「THE TAWARAYA」のロゴの下に、すすきと灯りを写した横長の写真。画面の左端に縦の「RESERVATION」、右端に縦書きの「宿泊予約」を置く。
03
エッセイ「残映」
白地の中央に縦組みの見出し「残映」を置き、その下に明朝の本文を淡いグレーの3段組で流す。ルビも添えた読み物の組版。
04
間のセクション
黒に近いグレーの面に「THE TAWARAYA」のロゴだけを置いた、区切りのための静かな一画面。
05
フッター
印章風のロゴを置き、英文と和文の住所・電話番号を左右に並べて締める。

Interaction

アニメーション・インタラクション

FVは庭の映像を自動再生し、右下に音声のオン/オフと全画面表示のボタンを置く。video 要素に muted・playsinline と独自のコントロールを付けて再現可能
「RESERVATION」「宿泊予約」の縦書きリンクは、画面の左右端に position: fixed で常時表示されていると思われる
縦書きのナビと見出しは writing-mode: vertical-rl で組める
エッセイ本文の淡いグレーは、スクロールに合わせて濃くなるフェード演出と思われる。IntersectionObserver で opacity や color を切り替えて再現可能

スクロールのコマ撮り200–3500ms

俵屋旅館 | THE TAWARAYAをスクロールしたときのフレーム1 — 01

俵屋旅館 | THE TAWARAYAをスクロールしたときのフレーム2 — 02

俵屋旅館 | THE TAWARAYAをスクロールしたときのフレーム3 — 03

俵屋旅館 | THE TAWARAYAをスクロールしたときのフレーム4 — 04

俵屋旅館 | THE TAWARAYAをスクロールしたときのフレーム5 — 05

俵屋旅館 | THE TAWARAYAをスクロールしたときのフレーム6 — 06

検出された技術:Next.js

Reproduce

再現するときのポイント

01背景は純黒 #000000 にし、映像や写真は全画面にせず上下に黒を残して“額縁”にする
02和文は筑紫Cオールド明朝（代替は Shippori Mincho）で、縦書きと広めの字間を基本に組む
03英字のロゴとナビは細いサンセリフに大きな letter-spacing をかけ、和文と役割を分ける
041画面に置く要素を3〜4個に絞り、テキスト量より余白の比率を優先する

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全5セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

the-tawaraya.katapick.md

1---
2title: "俵屋旅館 | THE TAWARAYA 再現用デザイン仕様書"
3source: https://the-tawaraya.jp/
4katapick: https://katapick.com/sites/the-tawaraya
5category: ブランド
6region: 国内 (JP)
7tags: [ダーク, 余白, 縦書き, セリフ体, 映像主体, ミニマル]
8launched: 2026-02
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 14
13generator: Katapick
14---
15 
16# 俵屋旅館 | THE TAWARAYA — 再現用デザイン仕様書
17 
18> 黒い余白に庭の映像が1本だけ、説明はほぼなし。京都の老舗旅館・俵屋旅館の公式サイトは、黒地に帯状の庭の映像と縦書きのナビだけを置き、情報を削った“間”で宿の美意識を伝えている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22