SANU 2nd Home DESIGN.md

SANU 2nd Home（https://sa-nu.com/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 自然の中にセカンドホームを持つ共同オーナーシップサービス。「自然がもうひとつの家になる。」をタグラインに掲げ、アースカラーの温もりとラグジュアリーなタイポグラフィでブランドの世界観を構築する。純黒を一切使わず、テキスト色にも #322e21（ウォームダークブラウン）を採用する徹底した暖色トーン
• 密度: ゆったりとしたビジュアル主導のブランドサイト。キャビンの写真と自然の風景が主役で、テキストは最小限。ベージュ系の面の切り替えで空間を分ける
• キーワード: ネイチャーラグジュアリー、アースカラー、ウォームブラウン、オールピル、トリプルフォントシステム
• 特徴: 3種類のフォントを使い分けるトリプルフォントシステムが最大の特徴。日本語は DNP秀英ゴシック銀 Std（Adobe Fonts）、英語セクションラベルは Stahlkl（装飾的セリフ）、英語本文は Univers LT Pro（スイススタイルのサンセリフ）。すべてのボタンが radius 500px の pill 形状で統一され、font-feature-settings: "palt" がグローバルに適用される

2. Color Palette & Roles

Primary（ブランドカラー）

SANU のカラーはアースカラーで構成される。ウォームダークブラウン #322e21 がブランドを象徴する色で、テキストとダーク背景に使用。CTA には ビビッドオレンジレッド #ec572e を採用する。

• Warm Dark Brown (#322e21): ブランドの基調色。テキスト・ダーク背景・ナビゲーション（rgb 50, 46, 33 — 純黒ではなく、緑みを帯びたウォームブラウン）
• Vivid Orange-Red (#ec572e): CTA のメインカラー（rgb 236, 87, 46 — 自然の中の炎・夕陽を想起させるアクセント）

Semantic（意味的な色）

• Error (#fa4616): エラー・バリデーション表示
• Success (#6ea80b): 成功・完了

Neutral（ニュートラル）

• Text Primary (#322e21): メインテキスト（--color-black。純黒ではなくウォームブラウン）
• Text Secondary (#605d55): 補足テキスト・ラベル（rgb 96, 93, 85 — グレーブラウン）
• Text on Dark (#ffffff): ダーク背景上の白テキスト
• Border (#eaeaea): 区切り線・入力欄の枠（rgb 234, 234, 234）
• Secondary Button Border (#85827a): ダーク背景上のアウトラインボタン枠線

Surface

• Surface White (#ffffff): 標準ページ背景
• Surface Light Beige (#f2eee4): ライトベージュ背景面（--color-beige-lights）
• Surface Beige (#e9e3d1): ベージュ背景面（--color-beige）
• Surface Beige Deep (#d1c8a6): ディープベージュ（--color-beige-deep）
• Surface Beige Deep 2 (#d9c9a1): ディープベージュ2（--color-beige-deep2）
• Surface Light Grey (#f3f3f3): ライトグレー背景
• Surface Dark (#322e21): ダーク面（フッター・ヒーロー・ナビ）

3. Typography Rules

3.1 和文フォント

• DNP秀英ゴシック銀 Std（dnp-shuei-gothic-gin-std）: Adobe Fonts の Web フォント。サイト全体の和文メイン書体。秀英体の流れを汲む格調高いゴシック体で、「自然 + ラグジュアリー」の世界観を支える
• Adobe Fonts のドメインライセンスのため、preview.html では Zen Kaku Gothic New（Google Fonts）で代替する。同じく Morisawa 系で字形の印象が近い

3.2 欧文フォント

• Stahlkl（stahlkl）: セクションラベル専用の装飾的セリフ書体。「More Plans」「About」等の英語見出しに使用。クラシカルな印象を加える
• Univers LT Pro: スイススタイルのサンセリフ。3ウェイト展開:
  • Light（UniversLTPro-45Light）: 細い見出し・キャプション
  • Roman（UniversLTPro-55Roman）: 英語本文
  • Bold（UniversLTPro-65Bold）: 強調

3.3 font-family 指定

css/* 日本語（サイト全体のデフォルト） */
font-family: "dnp-shuei-gothic-gin-std", sans-serif;

/* 英語セクションラベル（"More Plans", "About" 等） */
font-family: "stahlkl", sans-serif;

/* 英語本文・UI — Light */
font-family: "UniversLTPro-45Light", sans-serif;

/* 英語本文・UI — Roman */
font-family: "UniversLTPro-55Roman", sans-serif;

/* 英語本文・UI — Bold */
font-family: "UniversLTPro-65Bold", sans-serif;

/* preview.html 用フォールバック（Google Fonts 代替） */
font-family: "Zen Kaku Gothic New", sans-serif;

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

• 和文は DNP秀英ゴシック銀 単独指定 + sans-serif フォールバック。Adobe Fonts 経由で配信するため、システムフォントへの細かいフォールバックチェーンは不要
• 欧文はウェイト別に font-family を切り替える設計。Univers LT Pro の Light / Roman / Bold を CSS 変数（--font-universlt / --font-universlt-m / --font-universlt-b）で管理
• セクションラベル用の Stahlkl は完全に独立。装飾的セリフのため他のフォントとは混ぜない

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

3.5 行間・字間

• 本文の行間: line-height: 1.5（27px / 18px）
• 見出しの行間: line-height: 1.4（47.6px / 34px）— 見出しは本文よりやや詰める
• 英語ラベルの行間: line-height: 1.0（Stahlkl は行間なし）
• 見出しの字間: letter-spacing: 0.01em（0.3px @ 30px）— ごくわずかに広げる
• 本文の字間: letter-spacing: normal（本文は字間指定なし）
• リスト項目の字間: letter-spacing: 0.03em（0.36px @ 12px）— 小さい文字は少し広げて可読性確保

ガイドライン:

• 見出しの letter-spacing は 0.01em とごく控えめ。DNP秀英ゴシック銀のメトリクスが優秀なため、大きく字間を開ける必要がない
• 本文は letter-spacing: normal で、フォント自体のデフォルトスペーシングを活かす
• palt がグローバルに適用されるため、実質的なプロポーショナル字詰めが全体にかかっている

3.6 OpenType 機能

css/* グローバル適用（body） */
font-feature-settings: "palt";  /* プロポーショナル字詰め */

• palt: 和文のプロポーショナル字詰め。body にグローバル適用され、サイト全体に効く
• DNP秀英ゴシック銀 は palt 対応フォントのため、見出し・本文ともに自然な字詰めが実現される

3.7 改行・禁則

• 特別な禁則設定なし（ブラウザデフォルト）

3.8 縦書き

• 該当なし

4. Component Stylings

Buttons

Primary CTA（"無料 Co-Ownersの資料を見る"）

SANU のボタンは**すべて pill 形状（radius 500px）**で統一。Primary CTA は鮮やかなオレンジレッドで目を引く。

• Background: #ec572e
• Text: #ffffff
• Border Radius: 500px（pill）
• Padding: 0 14px 0 63px（左に大きめの余白 — アイコンスペース）
• Font Size: 16px
• Font Weight: 700

Secondary CTA（"予約はこちら" "物件一覧を見る" "仕組みをもっと知る"）

• Background: transparent
• Text: #322e21
• Border: 1px solid #322e21
• Border Radius: 500px（pill outline）
• Font Size: 16px
• Font Weight: 600

Outline Button（"エリア一覧" "記事一覧"）

• Background: transparent
• Text: #322e21
• Border: 1px solid #322e21
• Border Radius: 500px
• Padding: 12px 28px 12px 33px

Dark Background Variant（"詳細を見る"）

• Background: transparent
• Text: #ffffff
• Border: 1px solid #85827a
• Border Radius: 500px

LINE Button（"LINEで最新情報を受け取る"）

• Background: #ffffff
• Text: #4cc764（LINE グリーン）
• Border Radius: 500px
• Padding: 12px 28px

ボタンの考え方:

• すべて pill 形状（radius 500px） で統一。角丸やシャープコーナーは存在しない
• Primary は #ec572e の塗りつぶし、それ以外はすべてアウトライン
• ダーク背景上では border を #85827a に変え、テキストを白に反転

Inputs

• キャビン予約ページに入力フォームあり
• Border: 1px solid（推定）
• Focus Ring: ブランド色系（詳細は抽出外）

Cards

• Background: #ffffff / #f2eee4（ベージュ背景面上）
• Border: なし
• Border Radius: 小さめの角丸（推定）
• Shadow: なし — ベージュの面の切り替えで空間を表現

5. Layout Principles

Spacing Scale（実測ベース）

Container

• フルスクリーンのヒーロービジュアルを基本とした構成
• コンテンツ領域はセクション単位で中央寄せ

Grid

• キャビン・物件カードはグリッドレイアウト
• 記事・ストーリーはカード型のグリッド配置

6. Depth & Elevation

SANU はシャドウを使わない。ベージュ系の面の切り替え（白 → ライトベージュ → ベージュ → ダークブラウン）で奥行きを表現する、自然素材的なアプローチ。

7. Do's and Don'ts

Do（推奨）

• テキスト色は #322e21（ウォームダークブラウン） を使う。純黒は絶対に使わない
• CTA は #ec572e（オレンジレッド）+ radius 500px（pill） にする
• font-feature-settings: "palt" をグローバルに適用する
• 日本語は DNP秀英ゴシック銀（または代替の Zen Kaku Gothic New）を使う
• 英語セクションラベルには Stahlkl セリフ体を使う
• 英語本文には Univers LT Pro のウェイト別ファミリーを使う
• 背景はベージュ系のグラデーション（#fff → #f2eee4 → #e9e3d1 → #322e21）で面を分ける
• 見出しの letter-spacing は 0.01em に留める
• ボタンはすべて pill 形状にする

Don't（禁止）

• 純黒 #000000 をテキストに使わない（#322e21 が標準）
• 純グレー #808080 等のクールグレーを使わない（グレーブラウン #605d55 が正しい）
• 角丸ボタン（radius 8px 等）やシャープコーナー（radius 0px）を使わない（すべて pill）
• 寒色系の背景（ブルーグレー、クールグレー）を使わない（ベージュ系のみ）
• シャドウ（box-shadow）を使わない
• 見出しに letter-spacing: 0.08em 以上の広い字間を入れない
• Stahlkl を日本語テキストに使わない（英語ラベル専用）
• DNP秀英ゴシック銀を英語本文に使わない（英語は Univers LT Pro）

8. Responsive Behavior

Breakpoints（想定）

モバイル時の調整

• Section Title（34px）→ 縮小
• Hero（30px）→ モバイルではさらに縮小
• pill ボタンの形状は維持（SANU のアイデンティティ）
• ベージュの面の切り替えは維持
• キャビンカードは 1 カラムに折り返し

タッチターゲット

• CTA は pill 形状のため十分な横幅を確保
• Outline Button は padding 12px で最小タップ領域を確保

9. Agent Prompt Guide

クイックリファレンス

Brand: SANU 2nd Home
Origin: 自然の中のセカンドホーム共同オーナーシップ
Tagline: 自然がもうひとつの家になる。

CTA Color: #ec572e (vivid orange-red)
Text Primary: #322e21 (warm dark brown)
Text Secondary: #605d55 (grey-brown)
Background White: #ffffff
Surface Light Beige: #f2eee4
Surface Beige: #e9e3d1
Surface Dark: #322e21

Japanese Font: "dnp-shuei-gothic-gin-std", sans-serif
English Label Font: "stahlkl", sans-serif
English Body Font (Light): "UniversLTPro-45Light", sans-serif
English Body Font (Roman): "UniversLTPro-55Roman", sans-serif
English Body Font (Bold): "UniversLTPro-65Bold", sans-serif
Preview Fallback: "Zen Kaku Gothic New", sans-serif

palt: グローバル適用（body）
Body: 18px / 400 / line-height 1.5 / letter-spacing normal
Heading: 34px / 600 / line-height 1.4 / letter-spacing 0.01em
CTA Style: filled (bg #ec572e, text #fff, radius 500px, font-weight 700)
Secondary: outline (bg transparent, border #322e21, radius 500px)
Shadow: 使用しない

プロンプト例

SANU 2nd Home のデザインに従って、キャビン一覧ページを作成してください。
- 日本語フォントは "dnp-shuei-gothic-gin-std", sans-serif（代替: "Zen Kaku Gothic New"）
- 英語セクションラベルは "stahlkl", sans-serif
- font-feature-settings: "palt" をグローバルに適用
- テキスト色は #322e21（ウォームダークブラウン）、純黒は使わない
- 本文は 18px / 400 / line-height 1.5
- セクション見出しは 34px / 600 / line-height 1.4 / letter-spacing 0.01em
- CTA は bg #ec572e, text #fff, radius 500px（pill）
- Secondary ボタンは bg transparent, border #322e21, radius 500px
- 背景は白 #ffffff とライトベージュ #f2eee4 を交互に使う
- シャドウは一切使わない。ベージュの面の切り替えで空間を表現する

デザインの重要ポイント

1. トリプルフォントシステム: 日本語（DNP秀英ゴシック銀）、英語ラベル（Stahlkl セリフ）、英語本文（Univers LT Pro サンセリフ）の3書体を使い分ける。それぞれの役割は厳密に分かれており、混用しない
2. ウォームダークブラウン #322e21: 純黒を一切使わず、テキストも背景も #322e21 を基調にする。自然素材（木、土、石）を想起させる色設計
3. ビビッドオレンジレッド #ec572e: 自然の中の「炎」「夕陽」を象徴する CTA カラー。アースカラーの中で唯一の鮮やかな色で、行動喚起に使う
4. オールピル（radius 500px）: ボタンはすべて pill 形状。角丸もシャープコーナーも存在しない。柔らかさと自然の曲線を表現する
5. ベージュのグラデーション: 白 → ライトベージュ #f2eee4 → ベージュ #e9e3d1 → ダークブラウン #322e21 の面の切り替えで空間を分ける。シャドウは使わない
6. palt グローバル適用: font-feature-settings: "palt" が body に適用され、サイト全体でプロポーショナル字詰めが効く
7. DNP秀英ゴシック銀の格調: Adobe Fonts の Web フォント。秀英体の伝統を受け継ぐ洗練されたゴシック体で、「自然の中の上質な暮らし」という SANU のブランド価値を書体で表現する

取得日: 2026-05-09 出典: https://sa-nu.com/ 抽出方法: Headless Chrome (Puppeteer) による computed style 実測 + CSS Custom Properties 抽出