うなぎの寝床（UNAGINO NEDOKO） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

実測日: 2026-08-03 / 対象: https://unagino-nedoko.net/, /about, /archives/62590/

1. Visual Theme & Atmosphere

福岡県八女市の「地域文化商社」。九州の職人・産地と生活者をつなぐ実店舗とECを運営し、 久留米絣の「MONPE」で知られる。サイトは白地・左固定サイドバー・ ほぼ全文が明朝（DNP 秀英アンチック） という構成で、商品カタログというより 産地の読み物として組まれている。

• デザイン方針: 白地に明朝1本。有彩色は小さなバッジにだけ許す
• 密度: 高い。左に常時サイドバー、本文は870px幅に写真とテキストを詰める
• キーワード: 明朝、左固定サイドバー、和欧二段ナビ、palt全面適用、藍と赤茶のバッジ

このサイトの特徴的な癖（他サイトと違う点）

1. 本文フォントが明朝（dnp-shuei-anti-std = DNP 秀英アンチック）。 body の既定は游ゴシックだが、実際に文字が乗る要素はほぼすべて明朝に上書きされる。 ゴシックが残るのはロゴまわりと一部の見出しだけ
2. font-feature-settings: "palt" がサイト全体に効く。body から継承しており、 例外は下層ページの h1 だけ（そこは "palt" 0 で明示的にオフ）
3. line-height の既定が 1.0（font-size と同値）。行送りは「読ませる要素」に 個別指定する設計。ナビ・見出し・価格は全部 1.0
4. グローバルナビが和文＋欧文の二段。「うなぎの寝床 / About us」のように 1つの <li> に和文と欧文が縦に積まれる
5. letter-spacing が font-size の 0.1 倍で揃う（14px→1.4px、15px→1.5px、 16px→1.6px、22px→2.2px）。つまり実質 0.1em 固定
6. バッジ4色が商品状態を表す（新商品＝深紅 / オリジナル＝濃紺 / 在庫限り＝茶 / 再入荷＝サーモン）。この4色以外の有彩色を UI に使わない
7. スライドインするサイドドロワーだけが濃紺 #1a1a41 のベタ塗り

2. Color Palette & Roles

Base（基調）

• Background (#ffffff): ページ地色（body に明示指定）
• Ink (#121212): 見出し・ナビ・価格。純黒ではなく 18,18,18
• Ink Black (#000000): 記事タイトル・記事内リンク
• Text Muted (#555555): アウトラインボタンの文字、カテゴリラベル
• Text Caption (#787878): 商品カードの補足見出し
• Text Sub (#676767): 補助テキスト

Indigo（藍 — このサイトの基調色）

• Navy (#1a1a41): サイドドロワーの地色、「オリジナル」バッジ
• Indigo (#4d4d77): 塗りCTA「写真一覧から探す」の面色
• Indigo Border (#6c6c84): 写真上に置く枠線ボタンの罫
• Indigo Text (#717188): 「一覧へ」等の小リンク文字
• Navy Deep (#0f0d3f) / Violet Navy (#4b4a86): 差し色（ごく少量）

Badge（商品状態 — 4色で固定）

Neutral（罫・面）

• Border (#d8d8d8): ピル型ボタンの罫
• Border Wide (#d9d9d9): 全幅ボタンの罫
• Border Gray (#b4b4b5): 小さな枠線ボタンの罫
• Overlay (rgba(0, 0, 0, 0.05)): サイズ表のセル背景
• Divider Gray (#979797)

注意: 商品写真は色数が多いが、UI の有彩色はバッジ4色と藍系だけ。 「安い」「セール」的な赤や黄を足さない。

3. Typography Rules

3.1 和文フォント

明朝が主役、ゴシックは脇役という配分。

• 明朝体（本文・見出し・ナビ・ボタン — ほぼ全部）: dnp-shuei-anti-std（DNP 秀英アンチック / Adobe Fonts）
• ゴシック体（body の既定値・ロゴまわり）: "游ゴシック Medium", "Yu Gothic Medium" 系のプラットフォームフォント

dnp-shuei-anti-std はかながアンチック体（丸みのある太めの仮名）、漢字が明朝という 組み合わせの書体。一般的な明朝より仮名が骨太で、産地・手仕事の文脈に合う声になる。

3.2 欧文フォント

• サンセリフ: Helvetica, Arial, sans-serif — 英語ページ（Shopping Guide）専用

和文チェーンの中には欧文フォントを混ぜていない。欧文は明朝チェーンの serif フォールバックで拾わせるか、英語ページで Helvetica に切り替える。

3.3 font-family 指定

css/* 本文・見出し・ナビ・ボタン（明朝） */
font-family: dnp-shuei-anti-std, 游明朝体, 游明朝, YuMincho,
             "ヒラギノ明朝 ProN", "Hiragino Mincho ProN",
             "ＭＳ Ｐ明朝", "MS PMincho", serif;

/* body の既定値・ロゴまわり（ゴシック） */
font-family: "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic,
             "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
             メイリオ, Meiryo, sans-serif;

/* 英語ページ */
font-family: Helvetica, Arial, sans-serif;

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

• 和文優先チェーン。先頭に Adobe Fonts の和文を置き、Win（游明朝）→ Mac（ヒラギノ明朝 ProN）→ 旧Win（ＭＳ Ｐ明朝）の順で落とす
• ゴシックは 游ゴシック Medium が先頭。Windows の游ゴシック細すぎ問題を Medium 指定で回避している（@font-face での再マッピングは使っていない）
• 欧文専用フォントをチェーンに混ぜない。和文書体の欧文グリフをそのまま使う

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

ウェイトは 400 と 700 の2値だけ（欧文見出しの 300 が唯一の例外）。 700 を使うのは価格とバッジのみ。見出しを太らせない。

3.5 行間・字間

• 既定の line-height は 1.0。font-size と同値。見出し・ナビ・価格・バッジは全部これ
• 読ませる要素だけ 1.6〜1.8 に開く。記事タイトル 1.7、カード見出し 1.6、 キャプション 1.8、リード 1.7
• letter-spacing は実質 0.1em 固定。14px→1.4px、15px→1.5px、16px→1.6px、 22px→2.2px と、どのサイズでも font-size の 0.1 倍で出る
• 例外は下層ページの h1（0.15em）と、小さめの補足（0.04〜0.08em）
• ナビ・ロゴ・base は letter-spacing: normal

css/* 記事タイトル — 読ませる要素 */
.article-title {
  font-family: dnp-shuei-anti-std, 游明朝体, serif;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
}

/* 見出し・ナビ — 行送りを詰める */
.section-title {
  font-size: 22px;
  line-height: 1.0;          /* font-size と同値 */
  letter-spacing: 0.1em;
}

/* 下層ページの h1 だけ palt を切る */
.page-title {
  font-size: 26px;
  line-height: 1.0;
  letter-spacing: 0.15em;
  font-feature-settings: "palt" 0;   /* 明示的にオフ */
}

3.6 禁則処理・改行ルール

• 「うなぎの寝床」「UNA PRODUCTS」「MONPE」は途中で折らない
• グローバルナビは和文と欧文を <br> 相当で必ず2行に分ける （「店舗のこと / About Store」）。1行に混ぜない
• 商品名に含まれる 「」 は palt で詰まる前提で行頭に置かない

3.7 OpenType 機能

cssfont-feature-settings: "palt";

• body から継承してサイト全体に効く。実測で body 自身が "palt" を持つ
• 唯一の例外が下層ページの h1。ここだけ "palt" 0 で無効化されている。 26px / letter-spacing: 0.15em と大きく開くため、詰め組と喧嘩させない判断
• 明朝の仮名が詰まることで、和文の見出しが版面として締まって見える

3.8 縦書き

該当なし。全ページ横組み。

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

4. Component Stylings

Buttons

Filled（塗りCTA — 藍）

• Background: #4d4d77 / Text: #ffffff
• Border Radius: 4px
• Padding: 20px 0 18px 2px — 上下だけ厚く、左右はほぼゼロ（全幅ブロック前提）
• Font: 14px / weight 400 / letter-spacing: normal

css.btn-filled {
  display: block;
  background: #4d4d77;
  color: #fff;
  border-radius: 4px;
  padding: 20px 0 18px 2px;
  font-size: 14px;
  text-align: center;
}

用例: 「写真一覧から探す」

Outline Pill（一覧へ導く小ボタン）

• Background: transparent / Text: #555555
• Border: 1px solid #d8d8d8
• Border Radius: 20px
• Padding: 8px 14px 8px 16px — 左右が非対称（右に矢印が入る想定）
• Font: 12px / weight 400 / letter-spacing: 0.12em (1.44px)

用例: 「おしらせ一覧」「企画展一覧」「全カテゴリから探す」

Outline Tiny（インデックスリンク）

• Border: 1px solid #b4b4b5 / Text: #717188
• Border Radius: 2px / Padding: 4px 4px 4px 8px
• Font: 10px / letter-spacing: 0.15em (1.5px)

用例: 「一覧へ」

Wide Outline（全幅の角ゼロボタン）

• Border: 1px solid #d9d9d9 / Text: #000000
• Border Radius: 0px / Padding: 20px
• Font: 18px / letter-spacing: 0.15em (2.7px)

用例: 「企画展・店休日カレンダー」

Outline on Photo（写真の上）

• Border: 1px solid #6c6c84 / Text: #ffffff
• Border Radius: 3px / Padding: 5px 7px 5px 8px
• Font: 12px / letter-spacing: 0.15em (1.8px)

Badges（商品状態 — 4色）

• Border Radius: 2px
• Padding: 3px 4px 4px — 下だけ1px厚い
• Font: 10px / weight 700 / letter-spacing: 0.04em
• Text: #ffffff

css.badge      { border-radius: 2px; padding: 3px 4px 4px;
              font-size: 10px; font-weight: 700;
              letter-spacing: .04em; color: #fff; }
.badge-new  { background: #8b1b18; }  /* 新商品 */
.badge-orig { background: #1a1a41; }  /* オリジナル */
.badge-last { background: #8d654a; }  /* 在庫限り */
.badge-back { background: #e4ab9c; }  /* 再入荷 */

Cards（商品カード・記事カード）

• Background: transparent（白地にそのまま置く）
• Border / Shadow: なし
• 構成: 写真 → バッジ（左上）→ 商品名（明朝 11px / 1.7）→ 価格（明朝 12px / 700）

Navigation

グローバルナビ（和欧二段）

html<li><a href="/about">うなぎの寝床<span>About us</span></a></li>

• 和文: 明朝 14px / line-height: 1.0 / letter-spacing: normal / #121212
• 欧文: 同チェーンの小さめ。和文の直下に置く
• 必ず2行。1行にまとめない

左固定サイドバー

• 白地。カテゴリ見出し（16.38px 明朝）＋ 和文＋欧文の2段リンク（「衣 / Clothing」）
• 幅は約230px。本文カラムは 870px

サイドドロワー（スライドイン）

• 地色 #1a1a41（濃紺のベタ）/ 幅 340px / 文字は白
• サイト内で唯一の暗い面

Tables（サイズ表・在庫表）

• セル背景: rgba(0, 0, 0, 0.05)
• 文字: 明朝 13〜14px / line-height: 1.0
• 価格セルのみ weight 700

5. Layout Principles

Container

Layout Structure

• 左固定サイドバー ＋ 右本文 の2カラム。サイドバーはスクロール追従
• ヘッダーは上部にお知らせ帯 → ロゴ ＋ 和欧二段ナビ → ユーティリティ（会社概要・採用情報・ カート・お問い合わせ）の3層

Grid

• 特集カード: 3〜4カラム
• 商品一覧: 4カラム
• 記事一覧: 2カラム（写真＋タイトル）

Spacing Scale

6. Depth & Elevation

影はほぼ使わない。カードはすべて影ゼロで白地に置く。 奥行きは影ではなく罫線（#d8d8d8 / #d9d9d9）と余白でつくる。

7. Do's and Don'ts

Do（推奨）

• 本文・見出し・ナビ・ボタンをすべて明朝で組む（dnp-shuei-anti-std 系）
• font-feature-settings: "palt" をサイト全体に効かせる
• letter-spacing は font-size の 0.1 倍で統一する
• 既定の line-height は 1.0。読ませる要素だけ 1.6〜1.8 に開く
• グローバルナビ・サイドバーは和文＋欧文の2段にする
• 商品状態のバッジは4色（#8b1b18 / #1a1a41 / #8d654a / #e4ab9c）に限定する
• ボタンは用途ごとに角丸を変える（塗り 4px / ピル 20px / 小 2px / 全幅 0px）
• 太字（700）は価格とバッジだけに使う

Don't（禁止）

• 見出しをゴシックにしない（ゴシックは body の既定とロゴまわりだけ）
• 見出しを太字にしない（すべて weight 400）
• バッジ4色と藍系以外の有彩色を UI に足さない
• カードに影を付けない（罫線と余白で分ける）
• 本文の line-height を 1.0 のまま読ませない（読ませる要素は必ず 1.6 以上）
• 下層ページの h1 に palt を効かせない（そこだけ "palt" 0）
• ナビの和文と欧文を1行に混ぜない

8. Responsive Behavior

Breakpoints

**固定サイドバーを畳むための「絞り込みラダー」**を持つ。

max-width: 1300px 〜 1455px に8段のブレークポイントが刻まれている。 2カラムを崩さずに幅だけ削るための設計で、1440px を境に一気に組み替えるのではなく なだらかに縮める。

モバイルでの変化

• 左サイドバー → #1a1a41 のスライドインドロワー（幅340px）
• 和欧二段ナビは2段のまま維持する（欧文行を消さない）
• 本文 870px → 画面幅 - 左右パディング
• 商品グリッド 4カラム → 2カラム

タッチターゲット

• 最小 44px × 44px。ピル型ボタンは上下 8px パディング ＋ 12px 文字で約 30px なので、 モバイルでは上下パディングを 14px に増やして確保する

9. Agent Prompt Guide

クイックリファレンス

Background:      #ffffff
Ink:             #121212 / #000000（記事）
Text Muted:      #555555 / #787878 / #676767
Navy:            #1a1a41（ドロワー地色・オリジナルバッジ）
Indigo:          #4d4d77（塗りCTA）
Indigo Border:   #6c6c84 / Indigo Text: #717188
Badge:           #8b1b18（新商品）/ #1a1a41（オリジナル）/
                 #8d654a（在庫限り）/ #e4ab9c（再入荷）
Border:          #d8d8d8 / #d9d9d9 / #b4b4b5
Overlay:         rgba(0, 0, 0, 0.05)
Main Font:       dnp-shuei-anti-std, 游明朝体, 游明朝, YuMincho,
                 "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif
Sub Font:        "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体,
                 YuGothic, "Hiragino Sans", メイリオ, Meiryo, sans-serif
Base Size:       14px
Line Height:     1.0（既定）/ 1.6〜1.8（読ませる要素）
Letter Spacing:  0.1em（font-size × 0.1 で統一）/ 0.15em（下層 h1）
Font Weight:     400（既定）/ 700（価格・バッジのみ）
Border Radius:   4px（塗り）/ 20px（ピル）/ 2px（小・バッジ）/ 0px（全幅）
Shadow:          none（既定）
palt:            on（body から全体に継承。下層 h1 のみ "palt" 0）
Container:       870px（本文）/ 1440px（フル）

プロンプト例

うなぎの寝床（UNAGINO NEDOKO）のデザインシステムに従って、商品一覧ページを作成してください。
- ページ背景は #ffffff、文字は #121212
- 本文・見出し・ナビ・ボタンはすべて明朝で組む
  font-family: dnp-shuei-anti-std, 游明朝体, 游明朝, YuMincho,
               "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif
  （preview 用の代替は "Shippori Mincho", serif）
- font-feature-settings: "palt" をページ全体に効かせる
- letter-spacing は font-size の 0.1 倍で統一（14px→1.4px、22px→2.2px）
- line-height の既定は 1.0。記事タイトル・キャプションだけ 1.6〜1.8 に開く
- font-weight は 400。太字 700 は価格とバッジだけ
- レイアウトは「左固定サイドバー（幅230px・カテゴリナビ）＋ 本文 870px」の2カラム
- グローバルナビとサイドバーのリンクは和文＋欧文の2段
  （例: 「衣」の下に「Clothing」）
- 商品カードは影なし・枠なし。写真の左上に状態バッジを置く
  バッジ: border-radius 2px / padding 3px 4px 4px / 10px / weight 700
  新商品 #8b1b18、オリジナル #1a1a41、在庫限り #8d654a、再入荷 #e4ab9c
- 一覧へのリンクはピル型（transparent / 1px solid #d8d8d8 / radius 20px /
  padding 8px 14px 8px 16px / 12px / letter-spacing 0.12em / color #555555）
- 主要CTAは塗り（#4d4d77 / #fff / radius 4px / padding 20px 0 18px 2px）
- 影は使わない。区切りは #d8d8d8 の1px罫線
- バッジ4色と藍系（#1a1a41 / #4d4d77）以外の有彩色を足さない