TENERITA（テネリータ） DESIGN.md

TENERITA 公式オンラインストア（https://www.tenerita.com/）のデザイン仕様書。 オーガニックコットン専門ブランド。国際認証GOTSを取得した最高品質のタオル・寝具・ウェアを展開。 "ゆたか" であること、"上質" であること — ブランドコンセプトがそのままサイトの空気感に。 実サイトの computed style に基づいて記述。

1. Visual Theme & Atmosphere

• デザイン方針: 明朝体の見出しとゴシック体の本文を組み合わせた「上質な和」のエディトリアル。オーガニックの温かみをオリーブ色とベージュで表現
• 密度: 情報密度は低め。大きなスライドショーと余白で、ホテルのロビーのような落ち着きを演出
• キーワード: 上質、オーガニック、明朝体、オリーブ、温かみ
• 特徴: 見出しに Noto Serif Japanese（明朝体）、本文に Noto Sans Japanese（ゴシック体） の二書体構成。見出しの letter-spacing 0.1em が品格を生む。ブランドカラーはオリーブ（#808000）で自然素材の落ち着きを表現。CTAはアウトラインのテキストボタンが基本

2. Color Palette & Roles

Primary（ブランドカラー）

• Olive (#808000): ブランドのアクセントカラー。カルーセル矢印、テキストリンク等に使用。オーガニックコットンの「自然」を象徴
• Gold Light (#f5db8b): カルーセルナビのテキスト色（Olive 背景上）

Accent

• Warm Beige (#e0d4c3): セクション背景に使用。コットンの生成り色を表現
• Cream (#fafaf5): 薄い暖白。商品セクションの背景

Text

• Text Primary (#1c1c1c): 本文の基本色。ほぼ黒だが完全な黒ではない
• Text Muted (rgba(28, 28, 28, 0.65)): セール価格等の補助テキスト
• Text on Dark (#ffffff): ダークセクション・スライドショー上のテキスト

Surface

• Background (#ffffff): ページ標準背景
• Surface Warm (#fafaf5): 商品セクションのわずかに暖色系の白
• Surface Beige (#e0d4c3): ブランドストーリーセクションの背景
• Surface Grey (#efefef): 汎用セクション背景
• Surface Dark (#1c1c1c): ニュースレターポップアップ・ダークセクション

CTA / Button

• CTA Outline (border #1c1c1c / text #1c1c1c): 標準のアウトラインボタン
• CTA Olive (text #808000): ブランドカラーのテキストリンクCTA
• Carousel Arrow (bg #808000 / text #f5db8b / radius 9999px): pill 型の丸ボタン

3. Typography Rules

3.1 和文フォント

• 明朝体（見出し）: Noto Serif Japanese（Google Fonts）
• ゴシック体（本文）: Noto Sans Japanese（Google Fonts）

3.2 欧文フォント

• Noto Sans / Noto Serif の欧文グリフがそのまま使用される（別途の欧文フォント指定なし）

3.3 font-family 指定

css/* 見出し */
font-family: "Noto Serif Japanese", serif;

/* 本文・UI */
font-family: "Noto Sans Japanese", sans-serif;

/* ボタン */
font-family: "Noto Sans Japanese", sans-serif;

CSS Custom Properties:

css--heading-font-family: "Noto Serif Japanese", serif;
--heading-font-weight: 600;
--heading-letter-spacing: 0.1em;
--text-font-family: "Noto Sans Japanese", sans-serif;
--text-font-weight: 400;
--text-letter-spacing: 0.05em;
--button-font: normal 400 0.8125rem / 1.65 "Noto Sans Japanese", sans-serif;
--button-letter-spacing: 0.18em;

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

3.5 行間・字間

• 本文の行間 (line-height): 1.65（23.1px / 14px）
• 見出しの行間: 1.3–1.5（明朝体のため欧文寄りの値）
• 本文の字間 (letter-spacing): 0.05em（0.7px / 14px）
• 見出しの字間: 0.1em（CSS変数 --heading-letter-spacing で統一）
• ボタンの字間: 0.18em（広いトラッキングで上品さを演出）

ガイドライン:

• 見出し（明朝体）は letter-spacing 0.1em で品格を出す
• 本文（ゴシック体）は 0.05em で読みやすさ重視
• ボタンは 0.18em と非常に広いトラッキングが特徴

3.6 禁則処理・改行ルール

cssword-break: break-all;
overflow-wrap: break-word;

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt 不使用。letter-spacing での字間調整のみ

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary（アウトライン）

• Background: transparent
• Text: #1c1c1c
• Border: 1px solid #1c1c1c
• Padding: 10.4px 28px
• Border Radius: 0px
• Font Size: 13px
• Font Weight: 400
• Letter Spacing: 0.18em

Olive Text CTA

• Background: transparent
• Text: #808000
• Border: 1px solid #808000
• Padding: 10.4px 28px
• Border Radius: 0px

Carousel Arrow (Pill)

• Background: #808000
• Text: #f5db8b
• Border Radius: 9999px
• Shape: circle

Inputs

• Background: transparent
• Border: 1px solid（推定）
• Border Radius: 0px
• Padding: 10.4px 12.8px（--input-padding-block: 0.65rem; --input-padding-inline: 0.8rem）
• Font Size: 14px
• Font Weight: 400
• Label: 12px, color rgba(255, 255, 255, 0.6)（ダーク背景時）

Cards

• Background: #ffffff
• Border: none
• Border Radius: 0px
• Shadow: none
• 製品カードは画像 + テキストのシンプルな構成

5. Layout Principles

Spacing Scale（CSS Custom Properties）

Container

• Max Width: 85rem / 1360px (--container-xl-max-width)
• Standard: 78.75rem / 1260px (--container-lg-max-width)
• Content: 71.875rem / 1150px (--container-md-max-width)
• Narrow: 61.25rem / 980px (--container-sm-max-width)
• Gutter: 3rem / 48px (--container-gutter)

Grid

• 商品一覧: 2–4カラム（レスポンシブ）
• セクション間: 3rem (48px)

6. Depth & Elevation

TENERITA のサイトはフラットデザイン。影を一切使わず、色面と余白で構成する。

7. Do's and Don'ts

Do（推奨）

• 見出しは明朝体（Noto Serif Japanese）weight 600 + letter-spacing 0.1em
• 本文はゴシック体（Noto Sans Japanese）weight 400 + letter-spacing 0.05em
• ブランドカラーのオリーブ #808000 をアクセントに使う
• ボタンの letter-spacing は 0.18em で品格を出す
• 背景にベージュ #e0d4c3 やクリーム #fafaf5 を使い温かみを出す

Don't（禁止）

• 見出しにゴシック体を使わない — 明朝体がブランドの品格
• テキストに純黒 #000000 を使わない — #1c1c1c を使う
• border-radius を CTA に使わない（カルーセル矢印の pill を除く）
• 強いドロップシャドウを使わない — フラット維持
• 彩度の高い色（赤・青等）をアクセントに使わない — オリーブとベージュの世界観

8. Responsive Behavior

Breakpoints（CSS Custom Properties から推定）

タッチターゲット

• 最小サイズ: 44px × 44px

フォントサイズの調整

• h1: clamp(1.375rem, ..., 2rem) — 22px → 32px
• h2: clamp(1.25rem, ..., 1.75rem) — 20px → 28px
• h3: clamp(1.125rem, ..., 1.375rem) — 18px → 22px

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #808000 (Olive)
Accent: #e0d4c3 (Warm Beige)
Text Color: #1c1c1c
Background: #ffffff
Surface Warm: #fafaf5
Font Heading: "Noto Serif Japanese", serif (weight 600, ls 0.1em)
Font Body: "Noto Sans Japanese", sans-serif (weight 400, ls 0.05em)
Body Size: 14px
Line Height: 1.65
Button Letter Spacing: 0.18em
CTA Style: outline, 0px radius

プロンプト例

TENERITA のデザインシステムに従って、タオル製品の一覧ページを作成してください。
- 見出しフォント: "Noto Serif Japanese", serif — weight 600, letter-spacing 0.1em
- 本文フォント: "Noto Sans Japanese", sans-serif — weight 400, letter-spacing 0.05em
- テキスト色: #1c1c1c
- アクセント色: #808000（オリーブ）
- 背景: #ffffff、セクション背景 #fafaf5 または #e0d4c3
- ボタン: アウトライン（border 1px solid #1c1c1c）、padding 10px 28px、letter-spacing 0.18em
- 行間: 1.65（本文）/ 1.3–1.5（見出し）
- 影: 使わない
- コンテナ幅: max 1260px、ガター 48px