Katapick

BrandOverseas / GB

White Desert

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

出典: white-desert.com
White DesertのPC版ファーストビュー

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

Structure

ページ構成（上から順）

  1. 01

    ヘッダー

    左に Experience / Operation / About、右に Rates / Enquire を半透明の四角いボタンで並べ、中央にロゴ。SPでは Menu・ロゴ・オレンジの Enquire ボタンの3点構成になる。

  2. 02

    ヒーロー

    南極の空撮映像を全面に敷き、左にイタリックのセリフ体コピー、右に「Watch Film」、下端に画面幅いっぱいの「ANTARCTICA」を配置。スクロールで文字がぼけ、雪霧に覆われて白地に切り替わる。

  3. 03

    イントロ・シーズン

    手書き風の曲線を添えた小ラベルの下に、大文字セリフ体のステートメントを右寄せで配置（最終行のみグレー）。左の細いカラムに「OUR SEASON」と催行期間の説明、下に岩峰の写真を全幅で置く。

  4. 04

    創業者の言葉

    イタリックのセリフ体で引用文を組み、署名画像と名前・肩書を添える。周囲は大きく余白をとる。

  5. 05

    Our Trips

    手書きの曲線と重ねた見出しの下に、5つの旅程を横並びのアコーディオンで表示。開いたカードには写真・旅程名・価格・シーズン・説明、ほかは細い縦長の短冊として並ぶ。

  6. 06

    Our Camps

    雪原の写真を全面に敷いて大きなセリフ体見出しを重ね、縦の短冊状に氷の写真へ切り替わる。続いて Whichaway / Echo / Explorer の各キャンプを、写真・説明・緯度経度のラベルを持つカードで紹介する。

  7. 07

    フライト情報

    「CPT – WFR」「To the End of the Earth」の見出しと、飛行時間・距離・気温の3つの数値で南極までの移動を示す（抽出データの見出しから確認。フルページキャプチャの範囲外）。

  8. 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 による慣性スクロールで、長い縦スクロールでも写真の切り替わりが滑らか

検出された技術:LenisNext.js

Reproduce

再現するときのポイント

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

再現MDに含まれるもの

CSS変数化したカラートークン / Google Fonts 読み込みタグ / 全8セクションの仕様 / つまずきポイント / Claude Code・Cursor・v0 用の実装プロンプト / 仕上げチェックリスト

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-09-26
10difficulty: 4/5
11estimated_hours: 32
12generator: Katapick
13---
14 
15# White Desert — 再現用デザイン仕様書
16 
17> 「ANTARCTICA」の文字が、霧に溶けて消える。南極旅行のWhite Desertのブランドサイトは、空撮映像の下端に全幅の「ANTARCTICA」を置き、豪華さより“遠さ”そのものを商品として見せている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せる構成になっています（→「7. AI実装プロンプト」）。
21 
22## 1. 見どころ

White Desertについてよくある質問

White Desertのサイトで使われているフォントは？

見出しと引用に Cardinal Classic Long、巨大タイトルとラベルに Oswald、本文とナビに Inter Tight が使われています。Cardinal Classic Long の代わりには Google Fonts の Cormorant Garamond が近い雰囲気です。

White Desertのように文字が霧に溶けるヒーローはどう作る？

全面映像の上に大きな見出しを置き、GSAP ScrollTrigger の scrub で blur と opacity をスクロール量に連動させます。霧は透過PNGや映像のレイヤーを手前に重ねて下から持ち上げると再現しやすいです。

White Desertのデザインはどんな業種の参考になる？

高価格帯の旅行・ホテル・リゾート、アウトドアブランドなど、写真と余白で体験の特別さを伝えたいサイトの参考になります。

White Desertに似た参考サイト

出典: Katapick編集部（2026年9月26日 確認）。掲載サイトのデザイン・文章・画像の権利は各権利者に帰属します。 AI・LLM 向けの要約は Markdown 版 を参照してください。