BrandOverseas / GBPicked 2026.09.22

White Desert

ブランドのWebデザイン参考 — 南極ラグジュアリー旅行

サイトを見るwhite-desert.com

white-desert.com開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

「ANTARCTICA」の文字が、霧に溶けて消える。

南極旅行のWhite Desertのブランドサイトは、空撮映像の下端に全幅の「ANTARCTICA」を置き、豪華さより“遠さ”そのものを商品として見せている。

LunaType & Whitespace

右寄せのステートメント、最終行だけグレーに落としてる。最後だけ声をひそめて言い終える感じ。……ずるい。こういう小細工、嫌いじゃない。

1全幅の「ANTARCTICA」がスクロールでぼけ、霧に消える。見出しがそのまま、白い本文へのつなぎ目になる
2細い縦のグリッド線を全面に通す。余白の多い画面が、ただの空きではなく測られた空白に変わる
3旅程は1枚だけ開いたカードと細い短冊のアコーディオン。5つの旅を並べつつ、選ぶのは常に1つ

Color

White Desertの配色

Typography

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

見出し・引用（セリフ / イタリック）

Aa あア

使用: Cardinal Classic Long
代替: Cormorant Garamond

メインタイトル・ラベル

Aa あア

使用: Oswald
代替: Oswald

本文・ナビゲーション

Aa あア

使用: Inter Tight
代替: Inter Tight

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

特大見出しKatapick 型256px · 1 · 400
見出しKatapick 型90px · — · 500
小見出しKatapick 型42px · 1 · 400
本文The quick brown fox — 参考を型にする14px · 1.5 · 500
ボタンKatapick 型14px · 1.5 · 500

Structure

ページ構成（上から順）

01
ヘッダー
左に Experience / Operation / About、右に Rates / Enquire を半透明の四角いボタンで並べ、中央にロゴ。SPでは Menu・ロゴ・オレンジの Enquire ボタンの3点構成になる。
02
ヒーロー
南極の空撮映像を全面に敷き、左にイタリックのセリフ体コピー、右に「Watch Film」、下端に画面幅いっぱいの「ANTARCTICA」を配置。スクロールで文字がぼけ、雪霧に覆われて白地に切り替わる。
03
イントロ・シーズン
手書き風の曲線を添えた小ラベルの下に、大文字セリフ体のステートメントを右寄せで配置（最終行のみグレー）。左の細いカラムに「OUR SEASON」と催行期間の説明、下に岩峰の写真を全幅で置く。
04
創業者の言葉
イタリックのセリフ体で引用文を組み、署名画像と名前・肩書を添える。周囲は大きく余白をとる。
05
Our Trips
手書きの曲線と重ねた見出しの下に、5つの旅程を横並びのアコーディオンで表示。開いたカードには写真・旅程名・価格・シーズン・説明、ほかは細い縦長の短冊として並ぶ。
06
Our Camps
雪原の写真を全面に敷いて大きなセリフ体見出しを重ね、縦の短冊状に氷の写真へ切り替わる。続いて Whichaway / Echo / Explorer の各キャンプを、写真・説明・緯度経度のラベルを持つカードで紹介する。
07
フライト情報
「CPT – WFR」「To the End of the Earth」の見出しと、飛行時間・距離・気温の3つの数値で南極までの移動を示す（抽出データの見出しから確認。フルページキャプチャの範囲外）。
08
問い合わせ・How it works
「Start planning your adventure」の問い合わせ導線と、Consultation から Departure までの6ステップを並べた「How it works」で締める（抽出データの見出しから確認）。

Interaction

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

ヒーローの「ANTARCTICA」は、スクロール進捗に応じて filter: blur() と不透明度を上げ、手前に霧の画像レイヤーを重ねて消していく（GSAP ScrollTrigger の scrub で再現可能）
Our Trips は選択中のカードだけ flex-grow を大きくし、他を細い短冊にするアコーディオン。CSS の flex トランジションか GSAP Flip で実装できる
Our Camps の写真切り替えは、縦に分割した複数の要素を clip-path で時間差に開閉する短冊トランジションと思われる
画面右端に縦書きのオレンジタブ「How it works +」を固定表示（position: fixed + writing-mode: vertical-rl）。開くと手順パネルが出ると思われる
Lenis による慣性スクロールで、長い縦スクロールでも写真の切り替わりが滑らか

スクロールのコマ撮りLenis · 300–2000ms

検出された技術:LenisNext.js

Reproduce

再現するときのポイント

01見出しは細いセリフ体の大文字とイタリック、巨大タイトルとラベルだけ縦長のサンセリフ（Oswald）に分ける
02白地の上に細い縦グリッド線を常時重ね、要素をその線に揃えて配置する
03オレンジは Enquire と固定タブに限定し、写真と白・紺の静かなトーンを崩さない
04ヒーロー映像から白いページへの切り替えを霧・ぼかしでつなぎ、黒→白の急な切り替えを避ける

デザイン分析MDに含まれるもの

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

Katapick のデザイン分析MDは何がすごい？ →

white-desert.katapick.md

1---
2title: "White Desert デザイン分析書"
3source: https://white-desert.com/
4katapick: https://katapick.com/sites/white-desert
5category: ブランド
6region: 海外 (GB)
7tags: [写真主体, 映像主体, 大胆なタイポ, セリフ体, スクロール演出, ミニマル]
8launched: 2026-09
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# White Desert — デザイン分析書
16 
17> 「ANTARCTICA」の文字が、霧に溶けて消える。南極旅行のWhite Desertのブランドサイトは、空撮映像の下端に全幅の「ANTARCTICA」を置き、豪華さより“遠さ”そのものを商品として見せている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22