たねや (Taneya) DESIGN.md

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

対象サイト: https://taneya.jp/ たねやは近江八幡の和菓子屋。「ラ コリーナ近江八幡」（藤森照信 設計）で知られ、 洋菓子ブランド CLUB HARIE も展開する。実測はコーポレート／EC トップおよび下層ページに基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 余白と大判写真を主役にした静かなエディトリアル。UI は極限まで引き算し、和菓子・田園・建築の写真そのものを見せる
• 密度: 低密度。ファーストビューはフルブリードの風景写真＋筆文字ロゴと細いナビのみ
• キーワード: 静謐 / 端正 / 余白 / 自然 / エディトリアル
• 形状言語: 角丸はごくわずか（border-radius: 2px）。ボタンは塗りではなく細い罫線のアウトライン。直線基調で構成する
• 書体の性格: 和文角ゴシック（DNP 秀英角ゴシック銀）を全面に使い、本文・見出し・ナビすべてに palt（プロポーショナル字詰め）を効かせて字面を締める。筆文字ロゴだけが手仕事の温度を担う

2. Color Palette & Roles

Base（下地）

• Background (#ffffff): ページ全体の下地。純白
• Surface (#f2f2f2): ナビ・切替領域・パネルの面色。下地よりわずかに沈んだライトグレー（rgb(242,242,242)）
• Overlay (rgba(0,0,0,0.8)): メニュー展開時などのオーバーレイ

Text（文字色）

• Text Primary (#000000): 見出し・本文・ナビ。純黒（rgb(0,0,0)）を使う潔い設計
• Text on Image (#ffffff): 写真上に重ねるロゴ・ラベル

Accent（アクセント）

• Notice Red (#bf0000): 「NEW」バッジ・重要なお知らせラベル等、ごく限定的に使う差し色（rgb(191,0,0)）。彩度の高い色はこの一点のみ

Line（罫）

• Border (#000000 / #e5e5e5): ボタンの罫は黒 1px。区切り線には淡いグレーを使う

色に関する設計思想

• 色数を極端に絞り、写真の色を邪魔しない。UI 上に現れる色はほぼ「黒文字」「白背景」「グレー面」の 3 つだけ
• ブランドカラーとしての彩度色は持たず、赤（#bf0000）を注意喚起にだけ使う
• 塗り面は最小限。色は「文字色」と「罫線色」として現れる

3. Typography Rules

3.1 和文フォント

• ゴシック体: DNP 秀英角ゴシック銀（dnp-shuei-gothic-gin-std, Adobe Fonts）。ふところが締まり、和菓子の端正さに合う上品な角ゴシック
• 明朝体: 使用しない（ロゴは筆文字の画像）

3.2 欧文フォント

• サンセリフ: 秀英角ゴシック銀内蔵の欧文グリフをそのまま使う（独立した欧文フォント指定はなく、フォールバックは sans-serif）
• セリフ / 等幅: 使用しない

代替フォントの注記: 秀英角ゴシック銀は Adobe Fonts のためローカル環境・preview.html では表示できない。

• 秀英角ゴシック銀 → Zen Kaku Gothic New（字面・ふところが近い角ゴシック）または Noto Sans JP で代替

3.3 font-family 指定

css/* 本文・見出し・ナビすべて共通 */
font-family: dnp-shuei-gothic-gin-std, sans-serif;

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

• 和文フォント（秀英角ゴシック銀）を先頭に置き、欧文グリフもこの書体で拾う
• 最後に generic family（sans-serif）を指定
• サイト全体を単一の書体で統一し、ウェイト（400 / 600 / 700）だけで階層を作る

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

3.5 行間・字間

• 本文の行間 (line-height): 1.7（14px 本文で 23.8px）。字間を開いた段落は 1.86（26px）
• 見出しの行間: 1.7（本文と揃える）
• 本文の字間 (letter-spacing): 基本 normal〜0.1em。小さいラベル・リンクほど広く取り（0.17〜0.18em）、密度を下げて静けさを演出する
• 見出しの字間: 大見出し 0.1em、小見出し 0.05em

ガイドライン:

• 全体に palt が効いているため、字間指定と併せて字面が詰まりすぎないよう注意する
• 小サイズのリンク・ラベルは字間を広く取るのがこのサイトの流儀

3.6 禁則処理・改行ルール

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

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

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

• palt をサイト全体（本文含む）に適用しているのが特徴。角ゴシックの字面を締め、上品な印象を作る
• 一部のナビ span・button では normal（palt 無効）の箇所もあるが、基本方針は palt on

3.8 縦書き

該当なし（横書きのみ）。

4. Component Stylings

Buttons

塗りボタンは使わず、白背景＋黒 1px 罫線のアウトラインを基本にする。

Primary（アウトライン）

• Background: #ffffff
• Text: #000000
• Border: 1px solid #000000
• Padding: 13px 18px
• Border Radius: 2px
• Font: 11.2px / weight 400 / letter-spacing: 0.1em / font-feature-settings: "palt"
• 例: 「一覧をみる」「ラ コリーナ近江八幡 ウェブサイトへ」

Inputs

• Background: #ffffff
• Border: 1px solid #e5e5e5（下線 1 本のスタイルも可）
• Border (focus): 1px solid #000000
• Border Radius: 2px
• Padding: 12px 14px
• Font Size: 14px

Cards

• Background: #ffffff または #f2f2f2
• Border: なし（余白と写真で区切る）
• Border Radius: 2px
• Shadow: なし（フラット）
• 商品・記事カードは大判写真＋短いキャプションの最小構成

5. Layout Principles

Spacing Philosophy

余白そのものを主要素として扱う。要素間は詰めず大きく空け、フルブリード写真で場面を切り替える。

Spacing Scale（推定）

Container

• Max Width: 1280px（フルブリード写真はビューポート幅）
• Padding (horizontal): 24–40px

Grid

• Columns: 12（商品一覧は 2〜3 カラム）
• Gutter: 24–40px
• 写真はフルブリードで見せ、テキストブロックは幅を絞って配置する

6. Depth & Elevation

• 影は極力使わない。奥行きは「余白」と「写真」で表現する

7. Do's and Don'ts

Do（推奨）

• 下地は純白 #ffffff、文字は純黒 #000000 を使い、色数を絞る
• サイト全体に font-feature-settings: "palt" を効かせる
• ボタンは白背景＋黒 1px 罫線のアウトライン（border-radius: 2px）を基本にする
• 小サイズのリンク・ラベルは字間を広く（0.15em 以上）取る
• 大判写真をフルブリードで見せ、余白を大きく取る
• 和文は秀英角ゴシック銀（代替: Zen Kaku Gothic New）で組む

Don't（禁止）

• 彩度の高い色を多用しない（赤 #bf0000 は注意喚起のみ）
• 塗りボタン・強い影で装飾しない
• 行間を詰めない（本文 line-height は 1.7 を保つ）
• 和文フォント1つだけを指定しない（必ずフォールバックチェーンを書く）
• 写真の上に色面を重ねて色調を濁さない

8. Responsive Behavior

Breakpoints（推定）

タッチターゲット

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

フォントサイズの調整

• モバイルでは大見出し（27px）を 20–22px 程度に、本文は 14px を維持
• 字間・余白の"静けさ"はモバイルでも保つ

9. Agent Prompt Guide

クイックリファレンス

Background:   #ffffff
Text Primary: #000000
Surface:      #f2f2f2
Notice (red): #bf0000
Font:         dnp-shuei-gothic-gin-std, sans-serif
Body Size:    14px
Line Height:  1.7
palt:         on（全体）
Button:       #fff bg / 1px solid #000 / radius 2px / letter-spacing 0.1em

プロンプト例

たねやのデザインシステムに従って、和菓子の商品紹介セクションを作成してください。
- 下地: #ffffff、文字: #000000、面色: #f2f2f2
- フォント: dnp-shuei-gothic-gin-std, sans-serif（代替: Zen Kaku Gothic New）
- サイト全体に font-feature-settings: "palt" を効かせる
- ボタンは白背景＋黒 1px 罫線、border-radius: 2px、letter-spacing: 0.1em
- 本文 line-height: 1.7、余白は大きく取り、大判写真をフルブリードで配置
- 彩度色は使わず、赤 #bf0000 は「NEW」ラベルなど注意喚起のみ

Adobe Fonts が使えない環境での代替指針

• 和文 秀英角ゴシック銀 → Zen Kaku Gothic New ／ Noto Sans JP
• 代替でも「palt on・純黒白・広めの字間・大きな余白・フルブリード写真」を守れば世界観は再現できる