BrandOverseas / GBPicked 2026.09.26

The Pop-Up Hotel

ブランドのWebデザイン参考 — グランピング・移動式ホテル

出典: thepopuphotel.com

Editor's note — 編集部の視点

ホテルのサイトなのに、主役は部屋じゃなくてイベント。

英国の移動式グランピングホテルThe Pop-Up Hotelの公式サイトは、イベントの熱気を映すFVにセリフ体のロゴを重ね、部屋より“その場にいる体験”を売っている。

IrisColor & Brand

ベースがリネンみたいな生成りと深緑で、アウトドアのキャンバス生地に触れてるような手ざわりがすき。そこにWhatsAppの蛍光グリーンがぽつんと浮くのは、ちょっとだけ元気すぎるかも。

1中央にセリフ体のロゴ、左右にイタリックの2行。縦の細線で画面を割り、雑誌の見開きに仕立てる
2MonzaもGlastonburyも、会場名は手書き文字で写真に重ねる。行き先が旅の書き込みに変わる
3新聞の推薦コメントは深緑の面にイタリックで大きく。口コミを、ブランドの声として静かに響かせる

Color

The Pop-Up Hotelの配色

Typography

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

ロゴ・大見出し

Aa あア

使用: Noe Display
代替: Playfair Display

イタリックのコピー・見出し

Aa あア

使用: Noe Text
代替: Newsreader

本文・ナビ・ボタン

Aa あア

使用: Satoshi
代替: Manrope

会場名の手書き文字

Aa あア

使用: Honeymoon Hand
代替: Caveat

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

特大見出しKatapick 型14px · 1 · 700
見出しKatapick 型14px · 1 · 700
小見出しKatapick 型22px · 1 · 600
本文The quick brown fox — 参考を型にする12px · 1.3 · 400
ボタンKatapick 型12px · 1.25 · 700

Structure

ページ構成（上から順）

01
ヘッダー
左にメニューとBOOK NOW、中央に「STAY AT THE WORLD'S GREATEST EVENTS」、右にお気に入り・検索・アカウント・カートのアイコン。細い罫線で区切る。
02
ヒーロー
イベント会場の場面を映すフルスクリーンのビジュアルに、中央の「THE POP-UP HOTEL」ロゴと、左右下の「Where Unforgettable Moments」「Meet Unparalleled Comfort」のイタリック。画面中央に縦の細線。
03
イベント一覧
Monza Grand Prix を全幅で、Monaco Grand Prix・British Grand Prix・The Ryder Cup, Adare・During Glastonbury を2列の写真タイルで並べ、会場名を手書き文字で重ねる。
04
Collaborators & Clients
罫線に挟まれた小さな見出しと、協業ブランドのロゴを横一列に並べる。
05
Truly Unforgettable
大小2枚の写真をずらして重ね、右に「Event Experiences Unlike Any Other」の見出しと紹介文、LEARN MOREボタン。
06
レビュー
深緑の背景に新聞のロゴと推薦コメントのイタリック、右に写真のスライダーと「01 / 06」のカウンター、矢印ボタン。
07
News & Insights
左にサムネイル付きの記事リスト、右に注目記事のカード、最下部にALL INSIGHTSボタン。
08
フッター
チャット相談の導線、ホテル・部屋・コンタクトのリンク、ニュースレター登録、画面幅いっぱいの「THE POP-UP HOTEL」ロゴで締める。

Interaction

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

Lenis による慣性スクロールで、写真の多いロングページを滑らかに見せる
FVはキャプチャごとに場面が異なるため、映像の自動再生またはスライドショーと思われる。video 要素の autoplay・muted・loop で再現可能
レビューは矢印と「01 / 06」のカウンターで切り替えるスライダー
右下のWhatsAppボタンは固定表示で、赤い通知ドットを付けて問い合わせを促す

スクロールのコマ撮りLenis · 100–96000ms

検出された技術:LenisWordPress

Reproduce

再現するときのポイント

01ロゴと大見出しは高コントラストのセリフ体（代替は Playfair Display）、コピーはテキスト用セリフのイタリック（代替は Newsreader）で雑誌の表紙のように組む
02背景は #f5f2ef のリネン色、締めの面は #344541 の深緑にして、写真の鮮やかさを受け止める土台にする
03会場名などの固有名詞だけを手書き書体（代替は Caveat）にし、写真に書き込むように重ねる
04ヘッダーとFVは細い罫線で区切り、エディトリアルなグリッドを見せる

再現MDに含まれるもの

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

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

the-pop-up-hotel.katapick.md

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-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# The Pop-Up Hotel — 再現用デザイン仕様書
17 
18> ホテルのサイトなのに、主役は部屋じゃなくてイベント。英国の移動式グランピングホテルThe Pop-Up Hotelの公式サイトは、イベントの熱気を映すFVにセリフ体のロゴを重ね、部屋より“その場にいる体験”を売っている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22

Pro の追加ファイル

動くHTMLひな形トークンと構成を反映済みPRO tokens.jsonFigma / Tokens StudioPRO Tailwind @themev4 にそのまま貼れるPRO

The Pop-Up Hotelについてよくある質問

The Pop-Up Hotelのサイトで使われているフォントは？

ロゴと見出しに Noe Display、イタリックのコピーに Noe Text、本文に Satoshi、会場名の手書き文字に Honeymoon Hand が使われています。無料で近づけるなら Playfair Display、Newsreader、Manrope、Caveat の組み合わせがおすすめです。