URLをAIに渡すだけじゃ、
数字までは取れない。

1---
2title: "The Pop-Up Hotel デザイン分析書"
3source: https://thepopuphotel.com/
4katapick: https://katapick.com/sites/the-pop-up-hotel
5category: ブランド
6region: 海外 (GB)
7tags: [写真主体, 映像主体, セリフ体, 手書き文字, グリッド, くすみカラー]
8launched: 2026-07
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# The Pop-Up Hotel — デザイン分析書
16 
17> ホテルのサイトなのに、主役は部屋じゃなくてイベント。英国の移動式グランピングホテルThe Pop-Up Hotelの公式サイトは、イベントの熱気を映すFVにセリフ体のロゴを重ね、部屋より“その場にいる体験”を売っている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22 
23## 1. 見どころ
24- 中央にセリフ体のロゴ、左右にイタリックの2行。縦の細線で画面を割り、雑誌の見開きに仕立てる
25- MonzaもGlastonburyも、会場名は手書き文字で写真に重ねる。行き先が旅の書き込みに変わる
26- 新聞の推薦コメントは深緑の面にイタリックで大きく。口コミを、ブランドの声として静かに響かせる
27 
28## 2. カラー
29 
30| 変数 | HEX | 名前 | 役割 |
31| --- | --- | --- | --- |
32| `--bg` | `#f5f2ef` | Linen | 背景 |
33| `--surface` | `#ffffff` | White | FVのテキスト / カード |
34| `--bg-3` | `#282727` | Charcoal | テキスト / フッター背景 |
35| `--bg-4` | `#344541` | Forest Green | レビューセクション背景 / ボタン |
36| `--bg-5` | `#efe9d9` | Canvas Beige | サブ背景 |
37| `--accent` | `#10e98e` | Chat Green | WhatsAppボタン |
38 
39```css
40:root {
41  --bg: #f5f2ef; /* 背景 */
42  --surface: #ffffff; /* FVのテキスト / カード */
43  --bg-3: #282727; /* テキスト / フッター背景 */
44  --bg-4: #344541; /* レビューセクション背景 / ボタン */
45  --bg-5: #efe9d9; /* サブ背景 */
46  --accent: #10e98e; /* WhatsAppボタン */
47}
48```
49 
50### 実際の文字色 × 背景色のコントラスト（WCAG 2.2）
51 
52| 文字色 | 背景色 | 比 | 判定 |
53| --- | --- | --- | --- |
54| `#282727` | `#f5f2ef` | 13.36:1 | AAA |
55| `#ffffff` | `#282727` | 14.9:1 | AAA |
56| `#344541` | `#f5f2ef` | 9.08:1 | AAA |
57| `#ffffff` | `#344541` | 10.13:1 | AAA |
58| `#282727` | `#ffffff` | 14.9:1 | AAA |
59 
60> 主要な組み合わせはすべて本文サイズの基準（4.5:1）を満たしています。
61 
62## 3. タイポグラフィ
63 
64| 役割 | 使用フォント | 無料の代替 |
65| --- | --- | --- |
66| ロゴ・大見出し | Noe Display | Playfair Display |
67| イタリックのコピー・見出し | Noe Text | Newsreader |
68| 本文・ナビ・ボタン | Satoshi | Manrope |
69| 会場名の手書き文字 | Honeymoon Hand | Caveat |
70 
71```html
72<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;700&family=Newsreader:wght@400;500;700&family=Manrope:wght@400;500;700&family=Caveat:wght@400;500;700&display=swap">
73```
74 
75### 実測タイプスケール（1440px幅）
76 
77| 役割 | サイズ | 行間 | 字間 | 太さ | 書体 |
78| --- | --- | --- | --- | --- | --- |
79| 特大見出し | 14px | 1 | 0em | 700 | Henderson Sans（uppercase） |
80| 見出し | 14px | 1 | 0em | 700 | Henderson Sans（uppercase） |