TOMORROWLAND（トゥモローランド） DESIGN.md

TOMORROWLAND 公式サイト（https://www.tomorrowland.co.jp/）のデザイン仕様書。 1978年創業のセレクトショップ / オリジナルブランド。GALERIE VIE、MACPHEE、DES PRES 等を擁するファッション企業。 "Tomorrow is Beautiful." をブランドメッセージに掲げ、上質なライフスタイルを提案する。 実サイトの computed style に基づいて記述。

1. Visual Theme & Atmosphere

• デザイン方針: エディトリアル・ファッション誌のような大胆な余白と軽やかなタイポグラフィ。Cormorant Garamond のエレガントなセリフを超大型（72px）で配置し、ブランドの「美しい明日」を視覚化する
• 密度: 情報密度は極めて低い。1スクリーン1メッセージの「マガジン型」レイアウト。ビジュアルとタイポグラフィの余白で世界観を語る
• キーワード: エレガント、ライトウェイト、エディトリアル、ナチュラルパレット、ファッション・モード
• 特徴: Cormorant Garamond（Google Fonts のハイコントラスト・セリフ）を display 書体として使用し、本文は Noto Sans JP のウェイト 300（Light）で統一。全体を通じて weight 300 が支配的という、ファッションブランド特有の繊細な軽さが最大の特徴。CTA はアウトライン・角丸 5px のミニマルなボタンで、塗りボタンは使わない。色はモノクロ（純黒 #000000 × 純白 #ffffff）を基調に、シーズナルなアクセントカラー（スカイブルー、テラコッタ、セージグリーン、ベージュ）を差し色として添える

2. Color Palette & Roles

Primary（ブランドカラー）

• Black (#000000): テキスト・ボーダー・ロゴすべてに使う唯一の主要色。TOMORROWLAND は純黒をブランドカラーとして採用する珍しいアプローチ

Seasonal Accent（シーズナル・アクセント）

季節やコレクションに合わせて入れ替わる、ミュートされた自然色のパレット:

• Sky Blue (#a0c9e3): 柔らかなスカイブルー。最も出現頻度が高いアクセント色（4要素で使用）
• Terracotta (#e67f60): 温かみのあるテラコッタ。秋冬のコレクションを想起させる
• Sage Green (#a1b2a1): 落ち着いたセージグリーン。ナチュラルで上品な印象
• Warm Beige (#d9d4c3): 温かいベージュ / ストーン。素材感を伝えるニュートラルトーン

Note: これらのアクセント色はシーズンごとに変わる可能性がある。ブランドの恒常的なカラーは黒と白のみ。アクセント色はすべてミュート（彩度を抑えた）トーンで統一されており、原色は使わない。

Neutral（ニュートラル）

• Text Primary (#000000): 本文・見出しの基本色。純黒をそのまま使用
• Text Secondary: 明示的な secondary 色は設定されていない。テキストは基本的にすべて #000000
• Divider (#eaeaea): ニュースページの区切り線
• Muted (#cdcdcd): ニュースページの補助要素
• Background (#ffffff): ページ背景。純白
• Overlay (rgba(0, 0, 0, 0.5)): モーダル・オーバーレイのバックドロップ

特徴: TOMORROWLAND は 純黒 #000000 と純白 #ffffff の最大コントラストを使う。多くのラグジュアリーブランドがダークグレー（#333 等）を好む中、あえて真のモノクロで潔い印象を作っている。

3. Typography Rules

3.1 和文フォント

コーポレートサイト:

• Noto Serif JP（Google Fonts、明朝体）: Cormorant Garamond と組み合わせる display 用。font-family のフォールバックとして指定
• Noto Sans JP（Google Fonts、ゴシック体）: 本文・UI テキスト。ウェイト 300（Light）が標準

ニュース / EC ページ:

• ヒラギノ角ゴ Pro W3（macOS 内蔵）: ニュースページの本文
• Noto Sans JP: フォールバック

3.2 欧文フォント

• セリフ（display）: Cormorant Garamond（Google Fonts）。ハイコントラストのエレガントなセリフ。ヒーロータイトル・セクションラベルに使用
• サンセリフ（ニュース / EC）: Avenir, Lato, Arial。ニュースページの欧文見出し
• サンセリフ（本文）: Noto Sans JP 内の欧文グリフをそのまま使用

3.3 font-family 指定

css/* コーポレートサイト — display（ヒーロー・セクションタイトル） */
font-family: "Cormorant Garamond", "Noto Serif JP", serif;

/* コーポレートサイト — 本文・UI */
font-family: "Noto Sans JP", sans-serif;

/* ニュース / EC ページ — 本文 */
font-family: "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif;

/* ニュース / EC ページ — 欧文見出し */
font-family: Avenir, Lato, Arial, sans-serif;

フォールバックの考え方:

• コーポレートサイトは Google Fonts（Cormorant Garamond + Noto Sans JP / Noto Serif JP）に依存。システムフォントへのフォールバックは最小限
• ニュース / EC ページは macOS のヒラギノを優先し、Noto Sans JP でフォールバックする一般的な日本語ウェブ構成
• Cormorant Garamond はすべて ウェイト 300 で使用。太字バリエーションは使わない

3.4 文字サイズ・ウェイト階層

コーポレートサイト

ニュース / EC ページ

3.5 行間・字間

• 本文の行間 (line-height): normal（ブラウザデフォルト、約 1.15–1.2）。明示的な line-height 指定はしていない
• 見出しの行間: normal
• letter-spacing: normal（0）。明示的な字間指定なし
• font-feature-settings: 特に指定なし

特徴: TOMORROWLAND は line-height・letter-spacing ともにブラウザデフォルト（normal）のままで、明示的なチューニングを行わない。ウェイト 300 の細いストロークとデフォルトのメトリクスで、自然体の軽やかさを表現している。本文の可読性よりもビジュアルの空気感を優先する、ファッションブランドらしいアプローチ。

3.6 禁則処理・改行ルール

css/* 特別な指定は確認されていない。ブラウザデフォルトに依存 */

ヒーロータイトルやセクションラベルは大きな文字サイズ（46–72px）のため、改行が発生するケースは少ない。

3.7 OpenType 機能

cssfont-feature-settings: normal;

TOMORROWLAND は palt / kern を使わない。Cormorant Garamond のオリジナルのレターフォームと Noto Sans JP のデフォルトメトリクスをそのまま活かす。

3.8 縦書き

該当なし。

4. Component Stylings

Buttons — アウトラインのみ。塗り CTA は使わない

Outline CTA（角丸 5px）

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Border Radius: 5px
• Font: Noto Sans JP
• Font Weight: 300
• 例: 「TOMORROWLAND ONLINE STORE」

特徴: TOMORROWLAND の CTA は角丸 5px のわずかなラウンドを持つ outline ボタン。BALMUDA の pill（60–100px）とは対照的に、直線的で控えめ。ボタン自体を目立たせず、テキストリンクの延長として機能させる設計。

Text Link（デフォルト）

• Color: #000000
• Text Decoration: 下線なし（ホバーで下線が出る構成が多い）
• Font Weight: 300

Don't: TOMORROWLAND に塗りの CTA ボタン、カラーボタンは存在しない。アクセント色はビジュアルやバナーの背景に使われ、ボタン色には使わない。

Inputs

ニュース / EC ページでのフォーム:

• Background: #ffffff
• Border: 1px solid #cdcdcd
• Border Radius: 0px（角丸なし）
• Font Size: 14–16px

Cards

• Background: #ffffff
• Border: なし（区切り線 #eaeaea で分離する場合あり）
• Border Radius: 0px
• Shadow: なし
• コーポレートサイトではカードコンポーネント自体が少なく、フルブリードの写真レイアウトが主体

Navigation

• ヘッダーナビはテキストリンクベース
• ハンバーガーメニューまたはフルスクリーンメニュー（モバイル）
• ナビ文字: #000000、ウェイト 300

5. Layout Principles

Spacing Scale

実測ベースのスペーシング（推定）:

Container

• コーポレートサイトはフルブリードが基本（ビジュアルが viewport 全幅を使用）
• テキストコンテンツは中央寄せ（max-width: 約 1000–1200px）
• ニュースページは一般的なコンテナ幅（約 960–1100px）

Grid

• ヒーロー: 1 カラム（フルブリード・フルスクリーン写真）
• コレクション紹介: 1 カラムまたは 2 カラム
• ニュース一覧: リスト型（1 カラム、区切り線で区分）

6. Depth & Elevation

特徴: TOMORROWLAND はドロップシャドウ・ボックスシャドウを一切使わないフラットな設計。奥行きの表現は、純白の背景に対する黒テキストのコントラストと、アクセントカラーのバナーの面積差で行う。グレー階調による層の表現（BALMUDA 的な #fbfbfb / #f8f8f8）も使わず、白と黒の 2 値に近い潔さがある。

7. Do's and Don'ts

Do（推奨）

• フォントウェイトは 300（Light）を基本にする。太字が必要な場面でも 400 まで
• display 書体（Cormorant Garamond）は 46px 以上の大きなサイズでのみ使用する
• CTA は outline スタイル（border 1px solid #000、角丸 5px） のみ使用する
• 余白を大きく取り、1 セクション 1 メッセージの構成にする
• アクセント色はミュートされたトーン（彩度を抑えた自然色）から選ぶ
• モノクロ（#000000 × #ffffff）を基調とし、色数を最小限にする
• 写真・ビジュアルに語らせ、テキスト量を抑える

Don't（禁止）

• ウェイト 700（Bold）以上を使わない（ブランドの軽やかさが崩れる）
• 塗りのカラー CTA を作らない（アクセント色でボタンを塗らない）
• Cormorant Garamond を 20px 以下の小さなサイズで使わない（ハイコントラスト・セリフは小サイズで潰れる）
• letter-spacing / palt を追加しない（フォントの素のメトリクスで組む）
• ドロップシャドウ・グロウ・グラデーション等のエフェクトを使わない
• 原色・高彩度のアクセント色を使わない（すべてミュートトーンに抑える）
• Cormorant Garamond を本文に使わない（display 専用。本文は Noto Sans JP）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）
• outline ボタンは padding を含めてタップ領域を確保

フォントサイズの調整

• モバイルでは Hero Title 72px → 36–42px 程度に縮小
• Section Label 46px → 24–28px 程度に縮小
• 本文 16px は据え置き
• ウェイト 300 は維持（モバイルでもライトウェイトの印象を保つ）

9. Agent Prompt Guide

クイックリファレンス

Text Color:          #000000
Background:          #ffffff
Accent (Sky Blue):   #a0c9e3
Accent (Terracotta): #e67f60
Accent (Sage):       #a1b2a1
Accent (Beige):      #d9d4c3
Divider:             #eaeaea
Overlay:             rgba(0, 0, 0, 0.5)
Display Font:        "Cormorant Garamond", "Noto Serif JP", serif
Body Font:           "Noto Sans JP", sans-serif
Body Size:           16px
Font Weight:         300 (Light) — 全体を通じて
Line Height:         normal
Letter Spacing:      normal
CTA Style:           outline, border 1px solid #000, radius 5px

プロンプト例

TOMORROWLAND のデザインシステムに従って、
コレクション紹介ページのヒーローセクションを作成してください。

- 背景: 純白 #ffffff にフルブリードの写真
- ヒーロータイトル: "Cormorant Garamond", "Noto Serif JP", serif / 72px / weight 300 / color #000000
- セクションラベル: 同上のフォントスタック / 46px / weight 300
- 本文: "Noto Sans JP", sans-serif / 16px / weight 300 / color #000000
- CTA: outline ボタン（border 1px solid #000、border-radius 5px、背景 transparent）
- 余白: セクション間 80–120px、テキスト間 16–24px
- シーズナル・アクセント色を使う場合はミュートトーン（#a0c9e3, #e67f60, #a1b2a1, #d9d4c3）から選択
- 塗りボタン・太字・ドロップシャドウは使わない
- font-weight は 300 を厳守、最大でも 400 まで