TAKEO（竹尾） DESIGN.md

竹尾 公式サイト（https://www.takeo.co.jp/）のデザイン仕様書。 1899年創業のファインペーパー専門商社。紙の可能性を追求するブランドとして、サイト自体が「紙的な静けさ」を体現している。 実サイトの computed style に基づいて記述。

1. Visual Theme & Atmosphere

• デザイン方針: 極細ウェイト（Light 300）と広い字間で「紙に印字されたような静寂」を演出。装飾を排した余白型レイアウト
• 密度: 情報密度は低い。大きなビジュアルとゆったりとした行間で、紙のテクスチャーを感じさせる構成
• キーワード: 静謐、余白、Light ウェイト、広い字間、モノトーン
• 特徴: 全体が font-weight: 300（Light）で統一される異例の構成。和文に AotoGothicStdN（アオトゴシック Std N / Morisawa）を使用し、欧文は Inter を先頭に配置。font-feature-settings: "palt" がグローバル適用で、プロポーショナル字詰めがサイト全体に効いている。CTAボタンはほぼ存在せず、テキストリンクのみで遷移させる「紙の目次」的ナビゲーション

2. Color Palette & Roles

Primary（ブランドカラー）

• なし: 竹尾はアクセントカラーを持たない。モノトーンのみで構成

Text

• Text Primary (#161f20): 本文・見出しの基本色。純黒ではなく、深いネイビーグレー
• Text Sub (#2f2f2f): サブナビゲーションのテキスト
• Text on Dark (#ffffff): ダークセクション（サステナビリティ等）上のテキスト
• Text Muted (#bebebe): 言語切替等の補助テキスト

Surface

• Background (#ffffff): ページ標準背景
• Surface Light (#f6f6f6): セクション背景の薄いグレー
• Surface Input (#fefefe): 検索フィールドの背景
• Surface Grey (#707070): ヒーロー画像の平均色（写真+オーバーレイ）
• Surface Dark Overlay (rgba(0, 0, 0, 0.7)): メインビジュアルの暗幕
• Surface Grey Mid (#949495): 言語切替アイコンの背景
• Border (#e3e3e3): 区切り線

CTA / Button

• Cookie CTA (#000000 bg / #ffffff text / radius 5px): サイト上唯一の塗りボタン（Cookie 同意）
• テキストリンク: 基本の遷移手段。下線やアローで示す

3. Typography Rules

3.1 和文フォント

• ゴシック体: AotoGothicStdN（アオトゴシック Std N / Morisawa Adobe Fonts）

注意: AotoGothicStdN はドメインライセンスのため preview.html では表示不可。Google Fonts の Zen Kaku Gothic New が字形・ウェイト展開が最も近い代替。

3.2 欧文フォント

• サンセリフ: Inter（Google Fonts、和文より先に指定して欧文グリフを担当）

3.3 font-family 指定

css/* サイト全体 */
font-family: Inter, AotoGothicStdN, sans-serif;

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

• Inter を先頭に置き、欧文・数字グリフは Inter が担当
• 和文は AotoGothicStdN が担当
• フォールバック少なめの潔い構成（環境にフォントがなければ sans-serif に直行）

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

3.5 行間・字間

• 本文の行間 (line-height): 2.19（35px / 16px）。非常に広い。紙面的な空気感を演出
• 見出しの行間: 1.85（48px / 26px）
• 本文の字間 (letter-spacing): 0.09–0.12em（1.44–1.92px）。通常の日本語サイトの2倍以上
• 見出しの字間: 0.08em（2.08px / 26px）
• 標準テキストの字間: 0.05em（0.8px / 16px）

ガイドライン:

• 竹尾の「紙的な静けさ」は広い字間と軽いウェイトで実現されている
• letter-spacing 0.09–0.12em はコピー文（ブランドメッセージ）のみ。通常UIテキストは0.05em
• font-weight: 300 がデフォルト。500 はナビのみ、400 はごく一部

3.6 禁則処理・改行ルール

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

3.7 OpenType 機能

css/* サイト全体に適用 */
font-feature-settings: "palt" 1;

• palt がグローバル適用: body レベルで "palt" が指定されている。見出し・本文・ナビすべてにプロポーショナル字詰めが効く
• 例外: button 要素には font-feature-settings: normal（palt 解除）

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary（Cookie同意のみ）

• Background: #000000
• Text: #ffffff
• Padding: 6px 0px
• Border Radius: 5px
• Font Size: 12px
• Font Weight: 400

テキストリンク（標準CTA）

• Background: transparent
• Text: #161f20
• Border: none
• Decoration: underline or arrow icon
• Font Size: 14px
• Font Weight: 300

Inputs

• Background: #fefefe
• Border: none
• Border Radius: 0px
• Padding: 0px 0px 0px 46px（左にアイコンスペース）
• Font Size: 14px
• Font Weight: 300

Cards

• Background: #ffffff
• Border: none
• Border Radius: 0px
• Shadow: none
• 竹尾のカードはボーダーやシャドウを使わず、余白のみで区切る

5. Layout Principles

Spacing Scale

Container

• Max Width: 1440px（推定）
• Padding (horizontal): 60px

Grid

• フリーレイアウト（厳密なグリッドではなく、余白ベースの配置）

6. Depth & Elevation

竹尾のサイトは elevation を一切使わないフラットデザイン。影、浮きの表現はゼロ。

7. Do's and Don'ts

Do（推奨）

• font-weight は 300 をデフォルトにする（ナビのみ 500）
• letter-spacing はコピー文で 0.09–0.12em、通常テキストで 0.05em
• palt をグローバルに適用する
• 余白で要素を区切る（ボーダー・シャドウは最小限）
• モノトーン（黒・白・グレー）のみで構成する

Don't（禁止）

• font-weight: 700 (Bold) を使わない — 竹尾のトーンが壊れる
• アクセントカラーを追加しない — モノトーンのみ
• box-shadow を使わない — フラットを維持
• 狭い letter-spacing（normal / 0）を使わない — 最低 0.05em
• 派手なCTAボタンを使わない — テキストリンクが基本

8. Responsive Behavior

Breakpoints

フォントサイズの調整

• モバイルでは見出し 26px → 20px 程度に縮小
• 本文の letter-spacing は維持（ブランド表現の核心）

9. Agent Prompt Guide

クイックリファレンス

Primary Color: なし（モノトーン）
Text Color: #161f20
Background: #ffffff
Surface: #f6f6f6
Font: Inter, AotoGothicStdN, sans-serif
Body Size: 16px
Body Weight: 300
Line Height: 2.19（コピー文） / 1.4（通常）
Letter Spacing: 0.09em（コピー文） / 0.05em（通常）
OpenType: palt グローバル適用

プロンプト例

竹尾のデザインシステムに従って、紙製品の一覧ページを作成してください。
- フォント: Inter, "Zen Kaku Gothic New", sans-serif（AotoGothicStdN の代替）
- ウェイト: 300（Light）をデフォルトに
- 色: テキスト #161f20、背景 #ffffff、面 #f6f6f6
- 字間: 本文 0.05em、コピー文 0.1em
- 行間: 本文 2.0 以上
- font-feature-settings: "palt" 1 を全体に
- ボタン: テキストリンクのみ。塗りボタンは使わない
- 影: 使わない。余白のみで区切る