DDD HOTEL（ディーディーディー ホテル） DESIGN.md

DDD HOTEL（ディーディーディー ホテル / https://dddhotel.jp/）のデザイン仕様書。 東京・馬喰町に建つ、アート／ギャラリーを併設したミニマルなデザインホテル（旧 the b をリノベーション）。 最大の特徴は オフホワイト（#fafafa）× ニアブラック（#040404）のモノクローム に、 くすんだブロンズ（#856d47） をひと差しするアクセント、そして Cardo（Latin セリフ）× 明朝／ゴシック（和文） による 特大の editorial タイポグラフィと大きな余白。塗りボタンを持たず テキストリンク主体 のミニマル設計。 実サイトの computed style 実測（2026-06-28 取得）に基づく。 ※ 本文欧文の Benton Sans は Adobe Fonts（ドメインライセンス）のため preview.html では表示できない。代替は後述。

1. Visual Theme & Atmosphere

• デザイン方針: オフホワイト地（#fafafa）× ニアブラック（#040404） のモノクロームを基調にした、静謐で余白の大きい editorial なギャラリー型サイト。色をほぼ使わず、特大タイポグラフィ・写真・余白で語る。差し色は くすんだブロンズ #856d47 のみ
• DDD HOTEL について: 馬喰町のデザインホテル。客室・レストラン・アートギャラリーを擁し、滞在そのものを一つの作品として体験させる。建築・現代美術・食を横断する文化的なホスピタリティを掲げる
• 密度: 低密度。巨大な余白、大きく置かれた写真、抑制された文字量。見出しは画面を支配する特大サイズ（rooms ページの h1 は 256px、ナビ項目は 76px）で組まれ、本文は小さく generous な行間（line-height ≈1.9）で添える
• キーワード: オフホワイト #fafafa、ニアブラック #040404、ブロンズ #856d47、Cardo セリフ、明朝、特大タイポ、余白、テキストリンク主体、editorial、モノクローム
• 特徴:
  • 基調は オフホワイト #fafafa × ニアブラック #040404。純白・純黒は避け、わずかに濁したトーンで上品さを出す
  • 見出し・ナビ・ディスプレイは Cardo（Latin はエレガントなセリフ、和文フォールバックは ヒラギノ明朝）で組む。letter-spacing はわずかに負（≈ -0.01em）。サイズは特大（76px〜256px）で editorial に振る
  • 本文コピーは Benton Sans（Latin はグロテスク・サンセリフ、和文は ヒラギノ角ゴ）。本文は 11〜13.5px と小さめ、line-height ≈1.9、letter-spacing ≈0.08em とゆったり
  • 塗りボタンを持たない。"Reservation" 等の CTA も含めて テキストリンク主体（リンク色も #040404 基調）。装飾を排し、文字そのものをナビゲーションにする
  • 反転（ダーク）面は #040404 / #1b1b1b のニアブラックで、フッターやフルスクリーンのセクションに多用される。地が黒のときテキストは #fafafa
  • 差し色 #856d47（ブロンズ／カーキ・ゴールド） は面色やアクセントに最小限。鮮やかな色は持たない
  • 全体に 角丸はほぼ 0。直線的でシャープな面構成、影は使わずフラット

2. Color Palette & Roles

実サイトの computed style 実測値。基調はオフホワイト×ニアブラックのモノクローム＋ブロンズ。すべて hex 表記。

Brand / Core

• Background (Off-White) (#fafafa): ページ背景・メインキャンバス（viewport サンプルの大半を占める）。わずかに濁したオフホワイト
• Ink (Near-Black) (#040404): 本文・見出しの基本テキスト色。純黒を避けたニアブラック。反転面・フッターの地色にも多用（uniqueBackgrounds で最頻 count 18〜23）
• Dark Surface (#1b1b1b): ダークセクションのもう一段のニアブラック。#040404 と併用して反転面に階層をつける
• Accent (Bronze) (#856d47): 差し色。くすんだブロンズ／カーキ・ゴールド。面色・アクセント・ホバー等に最小限に使う唯一のブランド色

Neutral / Grey

Accent

• Bronze (#856d47): ブランドアクセント。リンクホバー・小さな面・アクセントラインなどに点で使う。広い面積には使わず、モノクロームを引き締める役

3. Typography Rules

実サイトは見出しに Cardo（Google Fonts のセリフ、和文は明朝）、本文に Benton Sans（Adobe Fonts のグロテスク、和文はゴシック）を使う。 Benton Sans はドメインライセンスのため preview.html では表示できない。代替は後述。

3.1 和文フォント

• 明朝体（見出し・ナビ）: ヒラギノ明朝 ProN W3（"ヒラギノ明朝 ProN W3" / "Hiragino Mincho ProN"）。Cardo のフォールバックとして見出し・ナビの和文を担う
• ゴシック体（本文）: ヒラギノ角ゴ ProN（"Hiragino Kaku Gothic ProN" / "ヒラギノ角ゴ ProN"）。Benton Sans のフォールバックとして本文の和文を担う

3.2 欧文フォント

• セリフ（見出し・ナビ・ディスプレイ）: Cardo（Cardo）— エレガントなオールドスタイル・セリフ。特大表示で editorial な品格を出す
• サンセリフ（本文）: Benton Sans（benton-sans）— グロテスク・サンセリフ（Franklin Gothic 系）。本文・キャプションに使用

3.3 font-family 指定

css/* 見出し・ナビ・ディスプレイ（実測） */
font-family: Cardo, "Noto Sans JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;

/* 本文・キャプション（実測） */
font-family: benton-sans, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;

• フォールバックの考え方: いずれも 欧文優先型。見出しは Cardo（Latin セリフ）→ 和文明朝、本文は Benton Sans（Latin グロテスク）→ 和文ゴシック。Latin セリフ × 和文明朝、Latin サンセリフ × 和文ゴシックの上品な対比
• 見出しの実測チェーンには "Noto Sans JP" が混じる箇所もあるが、和文の意図は 明朝（ヒラギノ明朝）。preview.html では明朝代替（Noto Serif JP）を当てる

preview.html での代替フォント:

• Cardo（見出しセリフ）→ Cardo（Google Fonts にあり。実サイトと同一書体をそのまま使用）
• ヒラギノ明朝（見出し和文）→ Noto Serif JP（明朝の代替）
• Benton Sans（本文グロテスク）→ Libre Franklin（Benton Sans は Franklin Gothic 系。Libre Franklin が最も近い。次点で Inter）
• ヒラギノ角ゴ（本文和文）→ Noto Sans JP

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

• ウェイトは一貫して 400。太字で主張せず、サイズ（特大⇔極小）の落差と余白で階層を作るのがこのサイトの肝
• 見出しの letter-spacing はわずかに負（≈ -0.143808px ÷ サイズ ≈ -0.01em）。特大セリフを締めて見せる
• h4 の一部に letter-spacing: 1.64px（≈ +0.08em）の正方向バリエーションあり（小ラベル用）

3.5 行間・字間

• 本文の行間 (line-height): 約 1.9（13.35px → 25.37px）。日本語本文としてかなり generous
• 見出しの行間: 1.0〜1.3（特大表示は行が詰まり気味。256px や 76px はほぼ 1.0）
• 本文の字間 (letter-spacing): 約 0.08em（1.07px ÷ 13.35px）。ゆったり開けて静けさを出す
• 見出しの字間: わずかに負（≈ -0.01em）。特大セリフを引き締める

ガイドライン:

• 本文は line-height 1.9・letter-spacing 0.08em でゆったり組み、余白の多い静かな佇まいを保つ
• 見出しは特大サイズ＋わずかに詰めた字間で editorial な品格を出す。太字に頼らない

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;

• 行頭禁止: ）」』】、。・：；？！
• 行末禁止: （「『【

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* palt は未適用 */

• 実測では font-feature-settings: normal。palt は適用していない
• 和文の字間は letter-spacing（本文 0.08em）で手動調整している

3.8 縦書き

該当なし。横書きのみ。

4. Component Stylings

DDD HOTEL は 塗りボタンを持たない。CTA はテキストリンク主体。以下の塗りボタン仕様は、塗りが必要な場合の推奨補完（実サイトの色を流用）。

Buttons / Links

Primary（テキストリンク・基調）

• Background: transparent
• Text: #040404（ダーク地では #fafafa）
• Border: なし（または下線・極細の枠）
• Font: Cardo / 明朝、サイズは文脈に応じ大きく
• ホバー: 不透明度を下げる、またはブロンズ #856d47 に色変化
• "Reservation" 等もこの形。文字そのものを CTA にする

Solid（塗りが必要な場合の推奨補完）

• Background: #040404（ニアブラック）
• Text: #fafafa
• Border: none
• Padding: 14px 36px
• Border Radius: 0px
• Font: Benton Sans / 角ゴ、letter-spacing 0.08em

Accent（ブロンズ・最小限）

• Background: #856d47
• Text: #fafafa
• Border Radius: 0px
• 強調したい単一 CTA のみ。多用しない

Inputs

• Background: #fafafa / #ffffff
• Border: 1px solid #040404（細線。基調は下線のみでも可）
• Border Radius: 0px
• Padding: 10px 12px
• Font: Benton Sans / 角ゴ、letter-spacing 0.08em
• フォーカス: border #040404（または #856d47）

Cards

• Background: #fafafa / #fdfdfd
• Border: なし、または 1px solid #040404（極細）
• Border Radius: 0px
• 写真を大きく、テキスト（タイトル・キャプション）は小さく下に添える
• 余白を広く取り、影は使わない（フラット）

5. Layout Principles

Spacing Scale

余白の単位が大きいのが特徴。セクション間は 120〜200px 取り、特大見出しの周囲を広く空ける。

Container

• Max Width: 約 1440px（フルブリードの写真・特大タイポを活かすワイド設計）
• Padding (horizontal): 24〜64px

Grid

• Columns: 客室・コンテンツは 1〜2 カラム（大きく見せる）
• Gutter: 32〜64px
• 大きな余白で各要素を孤立させ、ギャラリーのように見せる

6. Depth & Elevation

DDD HOTEL はほぼフラット。影を使わず、オフホワイト面とニアブラック面（#fafafa / #040404 / #1b1b1b）の色差で階層を表現する。

• 立体は影でなく 反転（#040404 のダーク面） で表現するのが基本

7. Do's and Don'ts

Do（推奨）

• 背景はオフホワイト #fafafa、テキストはニアブラック #040404 を使い、純白・純黒は避ける
• 見出し・ナビは Cardo（Latin セリフ）× 明朝（和文）で特大に組み、editorial な品格を出す
• 本文は Benton Sans × 角ゴで小さめ・line-height 1.9・letter-spacing 0.08em とゆったり添える
• CTA はテキストリンク主体にする。塗りが必要なら #040404 地＋#fafafa 文字、角丸 0
• 差し色はブロンズ #856d47 を点で。反転面は #040404 / #1b1b1b で深さを出す
• 余白を大きく取り（セクション間 120〜200px）、写真と特大タイポを主役にする

Don't（禁止）

• 鮮やかなブランドカラーや装飾的グラデーションを足さない（モノクロームの静けさが崩れる）
• 見出しを太字（700/800）にしない（ウェイトは一貫して 400、サイズと余白で階層を作る）
• 見出しの和文にゴシックを当てない（見出しは明朝、本文はゴシックの対比を守る）
• 影を多用して立体的にしない（フラット＋反転面が基本）
• 情報を詰め込まない・余白を削らない（余白こそがデザイン）
• 派手な塗りボタンを乱発しない（テキストリンク主体が基調）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（テキストリンクでも十分なタップ領域を確保）

フォントサイズの調整

• 特大見出し（256px / 76px 等）は clamp() でモバイルまで段階的に縮小する
• 本文はモバイルでも 13〜14px・line-height 1.9 を基準に保つ

9. Agent Prompt Guide

クイックリファレンス

Background: #fafafa (Off-White)
Ink / Text: #040404 (Near-Black)
Dark Surface: #040404 / #1b1b1b (反転面)
Accent: #856d47 (Bronze — 差し色のみ)
Nav Muted: #292929
Heading Font: Cardo, "ヒラギノ明朝 ProN W3", serif   /* 代替: Cardo + Noto Serif JP */
Body Font: benton-sans, "Hiragino Kaku Gothic ProN", sans-serif  /* 代替: Libre Franklin + Noto Sans JP */
Body Size: 13.35px / Line Height: 1.9 / Letter Spacing: 0.08em
Heading: weight 400 / 特大（76–256px）/ ls -0.01em
Radius: 0px / palt: off / CTA: テキストリンク主体

プロンプト例

DDD HOTEL のデザインシステムに従って、客室紹介ページを作成してください。
- 背景: #fafafa（オフホワイト）、テキスト: #040404（ニアブラック）。純白・純黒は使わない
- 見出し・ナビ: Cardo + 明朝（代替 Cardo + Noto Serif JP）で特大（76–256px）、weight 400、ls -0.01em
- 本文: Benton Sans + ヒラギノ角ゴ（代替 Libre Franklin + Noto Sans JP）、13–14px、line-height 1.9、ls 0.08em
- CTA はテキストリンク主体。塗るなら #040404 地＋#fafafa 文字、角丸 0px
- 差し色はブロンズ #856d47 を点で。反転セクションは #040404 で深さを出す
- 余白を大きく取り（セクション間 120–200px）、写真と特大タイポを主役にする。影なしのフラット
- palt は使わず、letter-spacing で字間を調整する