TENTIAL DESIGN.md

TENTIAL（https://tential.jp/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: ネイビーブルーを基調にした、信頼感と清潔感のあるウェルネス EC。リカバリーウェアや睡眠グッズを扱うブランドとして、落ち着きと上質さを両立するデザイン
• 密度: 本文の line-height は 1.8 と広め。商品カードや機能紹介はゆったりした余白で配置し、コンディショニングブランドとしての余裕を表現
• キーワード: ネイビーブルー、クリーン、ウェルネス、テクノロジー×睡眠、上質な信頼感
• 特徴:
  • 2フォントシステム: 見出し・UI に din-2014（幾何学的サンセリフ）、本文に Helvetica / neue-haas-grotesk-display（ネオグロテスク）。どちらも日本語フォールバックは Noto Sans JP
  • ブランドカラーは #284b7d（ネイビーブルー）。見出し、CTA、バッジ、リンクに一貫して使用。ページ上で最も頻出する背景色（56 回出現）
  • ブルーティンテッドな面システム: 背景は純粋なグレーではなく #eef2f7 / #d4dbe5 / #dde1f0 のようにブルー寄りにティントされている
  • ピル・角丸・直角の混在: CTA に radius: 1000px（ピル）、カート追加に 32px（角丸）、アウトラインボタンに 4px（直角寄り）と用途で使い分ける
  • 本文 weight 500: 通常の 400 より一段太い。ウェルネスブランドとしての堅実さ・信頼感を文字の太さで表現
  • font-feature-settings: normal: palt なし。欧文書体 din-2014 のメトリクスに任せる
  • Adobe Fonts（din-2014, neue-haas-grotesk-display）: ドメインライセンスのため、外部環境では表示されない
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• Brand Navy (#284b7d): メインのブランドカラー。見出し、主要 CTA "詳しくはこちら" / "カートに追加" の背景、ナビラベル、リンク、医療機器バッジの背景。ページ全体で最も頻出する有彩色背景（56 件）
• Accent Periwinkle (#8593bc): セカンダリブランドカラー。セクション背景やカテゴリエリアの面色（29 件出現）
• Accent Gold (#d1c67a): "限定" バッジの背景。期間限定・特別感の合図色
• Accent Brown (#b48857): ウォームアクセント。プロモバナーやキャンペーン帯に使用

CTA / Buttons

• Primary CTA (Pill): 背景 #284b7d / 文字 #ffffff / radius 1000px（ピル）/ font din-2014, weight 600
• Primary CTA (Rounded): 背景 #284b7d / 文字 #ffffff / radius 32px / "カートに追加" 等
• Secondary Outline: 背景 #ffffff / 文字 #284b7d / border 1px solid / radius 4px / "すべての商品をみる"
• Secondary Pill: 背景 #ffffff / 文字 #284b7d / radius 32px / "お近くの店舗を探す"
• Badge (Medical): 背景 #284b7d / 文字 #ffffff / radius small / 12px / weight 600 / "一般医療機器"
• Badge (Limited): 背景 #d1c67a / 文字 #ffffff / radius small / 12px / weight 600 / "限定"
• Badge (NEW): 背景 gray / 文字 #ffffff / radius small / 12px / weight 600

Neutral — Blue-Tinted Gray Scale

Semantic（実測未確認・推奨値）

実サイトのトップページにはエラー／成功色は表面化していない。EC として推奨する補完値:

• Danger: #dc2626 — エラー、在庫切れ
• Success: #16a34a — 購入完了、在庫あり
• Warning: #d97706 — 注意喚起

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP を最優先の和文フォント。din-2014 / Helvetica / neue-haas-grotesk-display の日本語グリフ補完として使用
• フォールバック: YuGothic → Yu Gothic（Windows）→ Hiragino Kaku Gothic ProN（macOS）→ sans-serif
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• 見出し・UI 用: din-2014（幾何学的サンセリフ、Adobe Fonts）。"TENTIAL" ワードマーク、セクション見出し "人気の商品"・"News"、ナビラベル、ボタンラベル、商品タイトル、フッター等に使用
• 本文用: Helvetica（システムフォント）/ neue-haas-grotesk-display（Adobe Fonts）。本文、商品説明、キャプション等に使用
• 等幅: 明示指定なし

3.3 font-family 指定

css/* 見出し・UI（h1〜h3, button, nav, product title, badge, footer） */
font-family: din-2014, "Noto Sans JP", YuGothic, "Yu Gothic",
  "Hiragino Kaku Gothic ProN", sans-serif;

/* 本文・説明文（p, body, product description, caption） */
font-family: Helvetica, neue-haas-grotesk-display, "Noto Sans JP",
  YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;

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

• 欧文フォント（din-2014 / Helvetica）を先に指定し、欧文の表示品質をブランド書体で確保
• 和文は Noto Sans JP を最優先フォールバック。weight 500 / 600 / 700 すべてをカバーするため
• YuGothic → Yu Gothic は Windows 環境向け。@font-face による Medium マッピングは不使用
• Hiragino Kaku Gothic ProN（N 付き）を指定
• Adobe Fonts（din-2014, neue-haas-grotesk-display）が未契約環境では Helvetica → Noto Sans JP にフォールバック

代替フォント注記: din-2014 は Adobe Fonts のドメインライセンスのため、preview.html や社外資料では表示されない。代替として Barlow（Google Fonts、幾何学的サンセリフ）が字面の幅・ウェイト感で近い印象が出る。neue-haas-grotesk-display は Inter または システム Helvetica で代替する。

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

実測値（トップページ、2026-05-09 取得）

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (16px): 1.8（28.8px / 16px）— 日本語 EC として広めの行間で可読性を確保
• 特徴テキスト (18px): 1.8（32.4px / 18px）
• H2 見出し (32px): 1.5（48px / 32px）
• H3 見出し (22px): 1.8（39.6px / 22px）
• 商品タイトル (13px): 1.54（20px / 13px）
• 商品説明 (13px): 1.5（19.5px / 13px）
• ナビ (14px): 1.0（14px / 14px）— 一行高さ
• フッター項目 (12px): 1.8（21.6px / 12px）

字間 (letter-spacing) — 実測:

• 全要素: normal（0）。TENTIAL は明示的な letter-spacing 調整を行わない
• 文字間の調整は din-2014 / Helvetica のメトリクスに任せる方針

ガイドライン:

• TENTIAL の基本リズムは line-height 1.8 + letter-spacing normal
• 見出しも本文も同じ 1.5〜1.8 の行間を維持し、急激なリズム変化を避ける
• letter-spacing は一切カスタマイズしない。フォントのデフォルトメトリクスを尊重する

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: break-word;

• 特別な禁則設定は確認されなかった
• 商品名やキャッチコピーの改行は HTML の <br> で手動指定

3.7 OpenType 機能

css/* 全要素共通 */
font-feature-settings: normal;

• palt は一切使用しない。実測で全要素 font-feature-settings: normal を確認
• din-2014 は欧文書体のため palt は不要。Noto Sans JP フォールバック時もデフォルトメトリクスに任せる

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA (Pill) — "詳しくはこちら"

• Background: #284b7d
• Text: #ffffff
• Padding: 適度な内部余白
• Border Radius: 1000px（完全ピル）
• Font: din-2014, weight 600
• Border: none

Primary CTA (Rounded) — "カートに追加"

• Background: #284b7d
• Text: #ffffff
• Padding: 適度な内部余白
• Border Radius: 32px（大きな角丸）
• Font: din-2014, weight 600
• Border: none

Secondary Outline — "すべての商品をみる"

• Background: #ffffff
• Text: #284b7d
• Border: 1px solid #284b7d
• Padding: 適度な内部余白
• Border Radius: 4px（直角寄り）
• Font: din-2014, weight 600

Secondary Pill — "お近くの店舗を探す"

• Background: #ffffff
• Text: #284b7d
• Border: 1px solid #284b7d
• Padding: 適度な内部余白
• Border Radius: 32px
• Font: din-2014, weight 600

Tertiary Outline — "もっと見る"

• Background: #ffffff
• Text: #284b7d
• Border: 1px solid #284b7d
• Padding: 適度な内部余白
• Border Radius: 4px
• Font: din-2014, weight 600

Registration — "新規会員登録"

• Background: #284b7d
• Text: #ffffff
• Border Radius: 4px
• Font: din-2014, weight 600

Badges

Medical Device Badge — "一般医療機器"

• Background: #284b7d
• Text: #ffffff
• Border Radius: small
• Font: din-2014, 12px, weight 600

Limited Badge — "限定"

• Background: #d1c67a
• Text: #ffffff
• Border Radius: small
• Font: din-2014, 12px, weight 600

NEW Badge

• Background: gray
• Text: #ffffff
• Border Radius: small
• Font: din-2014, 12px, weight 600

Inputs

• Background: #f6fafe（ブルーティントのニアホワイト）
• Border: 1px solid 薄いボーダー
• Border Radius: 4px
• Font: Helvetica + Noto Sans JP, 16px, weight 500

Cards（商品カード）

• Background: #ffffff
• Border: 薄いボーダーまたはなし
• Border Radius: 適度な角丸
• 商品画像 + タイトル（din-2014, 13px, 600）+ 説明（Helvetica, 13px, 500, #666666）の構成

Navigation

• Background: #ffffff
• ロゴ "TENTIAL": din-2014, 32px, weight 600, color #284b7d
• ナビラベル: din-2014, 14px, weight 600, color #284b7d, line-height 1.0

Footer

• カテゴリ見出し: din-2014, 13px, weight 600, color #567eb4
• ナビ項目: din-2014, 12px, weight 600, color #7e93b1, line-height 1.8

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Container

• Max Width: 1200px 程度
• Padding (horizontal): mobile 16px / desktop 24〜32px

Border Radius Scale

Grid

• 商品リストは 4 カラム（デスクトップ）
• Gutter: 16〜24px

6. Depth & Elevation

• TENTIAL の階層感は ブルーティンテッドなサーフェス色（#eef2f7 / #d4dbe5 / #dde1f0）で表現
• 影は控えめ。純白 #ffffff とブルーグレー面のコントラストで奥行きを作る
• カルーセルやヒーローエリアは画像の上にテキストを重ねて深度を表現

7. Do's and Don'ts

Do（推奨）

• 見出し・UI には din-2014 を使い、本文には Helvetica / neue-haas-grotesk-display を使う（2フォントシステムを維持する）
• ブランドカラー #284b7d を見出し・CTA・バッジ・リンクに一貫して使用する
• 本文は weight 500 を基本にする（TENTIAL は標準の 400 より一段太い）
• 本文の line-height は 1.8 を基本にする（日本語 EC として読みやすいリズム）
• 背景面にはブルーティンテッドなサーフェス色（#eef2f7 / #dde1f0）を使い、純粋なグレー（#f3f4f6 等）は避ける
• CTA の形状は用途で使い分ける: メイン訴求はピル 1000px、カート操作は角丸 32px、一覧表示はアウトライン 4px
• バッジは内容に応じて色を変える: 医療機器はネイビー #284b7d、限定はゴールド #d1c67a
• フッターのテキスト色はメイン UI より明るいブルー系（#567eb4 / #7e93b1）を使い、階層を作る
• font-feature-settings: normal を維持する（palt なし）

Don't（禁止）

• din-2014 と Helvetica を逆の用途で使わない（見出しに Helvetica、本文に din-2014 は NG）
• ブランドネイビー #284b7d 以外の色を主要 CTA の背景に使わない
• 本文に weight 400（regular）を使わない — TENTIAL の本文は 500（medium）が基本
• 背景に冷たいグレー（#f3f4f6、#e5e7eb）やウォームグレー（#f2f2f0）を使わない — TENTIAL のサーフェスはブルーティント
• letter-spacing をカスタマイズしない — 全要素 normal が基本
• palt を適用しない — 実サイトは font-feature-settings: normal
• すべての CTA をピルにしない — アウトラインボタンは 4px、カート追加は 32px と使い分ける
• ゴールド #d1c67a を常時表示の要素に使わない（"限定" の合図色）
• フッターテキストにメイン UI のネイビー #284b7d をそのまま使わない — フッターは #567eb4 / #7e93b1 で軽くする
• 純粋な #000000 をテキストに使わない — TENTIAL のテキスト色は #18181b（ほぼ黒だが純黒ではない）

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• H2 セクション見出し: 32px → 24px 程度に縮小
• 商品グリッド: 4 カラム → 2 カラム
• 本文サイズは 16px を維持（line-height も 1.8 維持）
• ナビはハンバーガーメニューに切り替え

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Brand Navy (CTA / Heading): #284b7d
Accent Periwinkle (Section BG): #8593bc
Accent Gold (Limited Badge): #d1c67a
Accent Brown (Promo): #b48857
Text Primary: #18181b
Text Secondary: #666666
Footer Heading: #567eb4
Footer Subtitle: #7e93b1
Surface Light: #eef2f7
Surface Mid: #dde1f0
Surface Ultra Light: #f7f8fa
Background: #ffffff

Heading / UI Font: din-2014, "Noto Sans JP", YuGothic, "Yu Gothic",
  "Hiragino Kaku Gothic ProN", sans-serif
Body Font: Helvetica, neue-haas-grotesk-display, "Noto Sans JP",
  YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif
（din-2014 不在時の代替提案: Barlow。neue-haas-grotesk-display 不在時: Inter）

Body Size: 16px / weight 500 / line-height 1.8 / letter-spacing normal
H2 Section: 32px / weight 600 / line-height 1.5 / color #284b7d
H3 Subsection: 22px / weight 600 / line-height 1.8 / color #284b7d
Product Title: 13px / weight 600 / din-2014
Product Desc: 13px / weight 500 / color #666666
Caption: 12px / weight 500 / line-height 1.8

Border Radius: 4px（アウトライン）／32px（カート）／1000px（CTA ピル）
Shadow: 基本 none。階層はブルーティンテッドサーフェスで表現
palt: なし（font-feature-settings: normal）

プロンプト例

TENTIAL のデザインに従って、リカバリーウェアの商品一覧ページを作成してください。
- 見出しフォント: din-2014, "Noto Sans JP", YuGothic, "Yu Gothic",
    "Hiragino Kaku Gothic ProN", sans-serif
- 本文フォント: Helvetica, neue-haas-grotesk-display, "Noto Sans JP",
    YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif
- セクション見出し: 32px / weight 600 / line-height 1.5 / color #284b7d / din-2014
- 本文: 16px / weight 500 / line-height 1.8 / letter-spacing normal / color #18181b
- 商品タイトル: 13px / weight 600 / din-2014 / color #18181b
- 商品説明: 13px / weight 500 / color #666666
- 主要 CTA: 背景 #284b7d / 白文字 / border-radius 1000px / din-2014 / weight 600
- カート追加: 背景 #284b7d / 白文字 / border-radius 32px
- セカンダリ: 背景 白 / 文字 #284b7d / border 1px solid / radius 4px
- バッジ（医療機器）: 背景 #284b7d / 白文字 / 12px / weight 600
- バッジ（限定）: 背景 #d1c67a / 白文字 / 12px / weight 600
- 商品リスト背景: #eef2f7（ブルーティンテッド、純粋なグレーは NG）
- 本文 weight は 500（400 ではない）
- letter-spacing は全要素 normal（カスタマイズしない）
- palt なし（font-feature-settings: normal）
- shadow は基本 none。面の色差で階層を表現

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