# The Pop-Up Hotel｜ブランドのWebデザイン参考

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

- URL: https://thepopuphotel.com/
- 解説ページ: https://katapick.com/sites/the-pop-up-hotel
- カテゴリ: ブランド / 地域: 海外（GB）/ 業種: グランピング・移動式ホテル
- テイスト: 写真主体、映像主体、セリフ体、手書き文字、グリッド、くすみカラー
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

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

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

## 配色
- #f5f2ef Linen（背景）
- #ffffff White（FVのテキスト / カード）
- #282727 Charcoal（テキスト / フッター背景）
- #344541 Forest Green（レビューセクション背景 / ボタン）
- #efe9d9 Canvas Beige（サブ背景）
- #10e98e Chat Green（WhatsAppボタン）

## フォント
- ロゴ・大見出し: Noe Display（代替: Playfair Display）
- イタリックのコピー・見出し: Noe Text（代替: Newsreader）
- 本文・ナビ・ボタン: Satoshi（代替: Manrope）
- 会場名の手書き文字: Honeymoon Hand（代替: Caveat）

## よくある質問
### The Pop-Up Hotelのサイトで使われているフォントは？
ロゴと見出しに Noe Display、イタリックのコピーに Noe Text、本文に Satoshi、会場名の手書き文字に Honeymoon Hand が使われています。無料で近づけるなら Playfair Display、Newsreader、Manrope、Caveat の組み合わせがおすすめです。

### The Pop-Up Hotelのような写真に手書き文字を重ねる表現はどう作る？
写真タイルの上にテキストを absolute で重ね、手書き系の Web フォントを大きめのサイズで置きます。写真に薄い暗色のオーバーレイをかけると、白い手書き文字が読みやすくなります。

### どんな業種の参考になる？
グランピングやホテル、イベント連動の宿泊サービス、ホスピタリティ系のブランドなど、部屋のスペックより体験の空気を伝えたいサイトの参考になります。

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