TODAY'S SPECIAL（トゥデイズスペシャル） DESIGN.md

TODAY'S SPECIAL（https://www.todaysspecial.jp/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: GEORGE'S が運営するライフスタイルストア。「食と暮らしのDIY」をコンセプトに、自由が丘・渋谷などに実店舗を構え、オンラインストアも展開。ライフスタイルマガジンのようなエディトリアル感と、ミニマルなモノクロームの潔さが共存する。色を極限まで削ぎ落とし、文字と余白だけで空気を作るデザイン
• 密度: ゆったりとしたライフスタイルメディア型。大きな写真と英文セクション見出しでリズムを作り、日本語のサブタイトルが文脈を添える
• キーワード: エディトリアル、モノクローム、Lato + Noto Sans JP、矩形 CTA（radius 0）、palt グローバル適用、ライフスタイルマガジン、DIY
• 特徴: 英文見出しに Lato（セリフフォールバック）、和文に Noto Sans JP + 游ゴシック系のデュアルフォントシステム。CTA はすべて border-radius: 0 の完全矩形。font-feature-settings: "palt" を body にグローバル適用しており、プロポーショナル字詰めがサイト全体に効いている。配色は #222222 テキスト + #000000 CTA + #f7f7f7 セクション背景の純モノクローム。letter-spacing: 0.05em のグローバル字間が独特の間合いを生む

2. Color Palette & Roles

Brand（ブランドカラー）

TODAY'S SPECIAL の配色は純粋なモノクローム。ブランドカラーとして彩色を持たず、黒・白・灰のグラデーションだけで世界観を構築する。

• Ink Black (#000000): Primary CTA 背景・ボーダー。最も強いアクセント
• Charcoal (#222222): テキストの基本色。純黒を避けた柔らかい黒
• Dot Active (#707070): ドットナビゲーションのアクティブ状態・中間グレー
• Dot Inactive (#aaaaaa): ドットナビゲーションの非アクティブ状態・装飾ドット

Text & Neutral

• Text Primary (#222222): 本文テキスト・見出し
• Text Secondary (#707070): 補助テキスト・ラベル
• Text Thin (#222222 / weight 100): フッターの極細テキスト（Privacy policy 等）
• Border (#000000): CTA ボーダー・入力欄の枠

Surface

• Surface White (#ffffff): 標準背景・ヘッダー
• Surface Light (#f7f7f7): フッターセクション・交互背景
• Surface Black (#000000): Primary CTA の塗り

Functional

• 彩色のセマンティックカラー（Danger / Warning / Success）は実測で確認されていない。モノクロームに徹したブランドのため、必要な場合はコンテキストに応じて控えめなトーンで追加

3. Typography Rules

3.1 和文フォント

TODAY'S SPECIAL は Noto Sans JP を和文の基本に据え、游ゴシック系を OS フォールバックとする。

• Noto Sans JP: 本文・和文見出し・ラベルの基本
• 游ゴシック Medium / Yu Gothic Medium: Windows フォールバック（Medium 指定あり）
• 游ゴシック体 / YuGothic: macOS の游ゴシック体
• ヒラギノ角ゴ Pro W3 / Hiragino Kaku Gothic ProN: macOS フォールバック
• メイリオ / Meiryo: Windows 追加フォールバック

3.2 欧文フォント

• Lato: 英文セクション見出し（h2 "SEASONAL NEWS" 等）・CTA ボタンのラベル。Google Fonts で提供
• Helvetica Neue / Helvetica / Arial: フォールバックの欧文サンセリフ
• serif: Lato 指定時のフォールバック末尾に serif が入っている（Lato, serif）

3.3 font-family 指定

css/* 本文・和文見出し */
font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium",
             游ゴシック体, YuGothic,
             "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN",
             メイリオ, Meiryo, "ＭＳ Ｐゴシック",
             "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* 英文セクション見出し・CTA ラベル */
font-family: Lato, serif;

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

• 和文は Noto Sans JP を Web フォントで読み込み、未到達なら游ゴシック Medium → ヒラギノ → メイリオの順
• 欧文見出しは Lato 単独指定 + serif フォールバック。和文フォントとは別系統
• 游ゴシック Medium が明示指定されており、Windows での細すぎ問題に対応済み
• "ＭＳ Ｐゴシック" まで入ったフル指定は古い環境への配慮

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

3.5 行間・字間

• 本文の行間: line-height: 1.5（24px / 16px）— body デフォルト。シンプルで統一的
• コンテンツの行間: line-height: 1.57（22px / 14px）— 14px のコンテンツテキスト
• 小テキストの行間: line-height: 1.83（22px / 12px）— 12px の注記。小さい文字に広い行間
• 見出しの行間: 1.5 を一貫適用（32px〜16px のすべての見出しレベル）
• グローバル字間: letter-spacing: 0.8px（0.05em @ 16px）— body に直接指定。サイト全体が均一の間合い

ガイドライン:

• letter-spacing 0.05em はサイト全体に一貫適用。部分的な使い分けはない
• line-height は 1.5 を基本に、14px 本文のみ 1.57、12px 注記のみ 1.83 とわずかに広げる
• font-weight は body 400 が基本。フッターの極細リンクのみ 100

3.6 禁則処理・改行ルール

• 本文は word-break: normal の自然な折り返し
• 英文セクション見出し（"SEASONAL NEWS"）は大文字 1 行を前提
• 和文サブタイトルは改行を許容

3.7 OpenType 機能

css/* body にグローバル適用 */
font-feature-settings: "palt";

• palt がサイト全体に適用されている。TODAY'S SPECIAL の組版の最大の特徴
• body 要素に直接指定されており、見出し・本文・ラベル・ボタンすべてにプロポーショナル字詰めが効く
• letter-spacing 0.05em との併用で、字詰めしつつも間合いを確保する独特のバランス
• kern も暗黙的に有効（Noto Sans JP / Lato の OpenType kern テーブル）

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（Ink Black）（"検索" "Contact" 等）

• Background: #000000
• Text: #ffffff
• Border: 1px solid #000000
• Border Radius: 0px（完全矩形）
• Padding: —（コンテキストに応じて調整）
• Font Family: Lato stack（英文ラベル）/ Noto Sans JP stack（和文ラベル）
• Font Size: 14px
• Font Weight: 400
• Letter Spacing: 0.05em

Secondary CTA（"VIEW MORE"）

• Background: #ffffff
• Text: #222222
• Border: 1px solid #000000
• Border Radius: 0px
• Font Family: Lato stack
• Font Size: 14px
• Font Weight: 400

Dot Pagination

• Size: 16px
• Background (active): #707070
• Background (inactive): #ffffff
• Border: 1px solid #707070
• Border Radius: 50%（円形）

ボタンの考え方:

• メインは radius 0px の完全矩形。#000000 の塗り + #000000 ボーダーの二重強調
• font-weight は 400（OSAJI と違いボタンも軽い。エディトリアル的な抑制）
• Secondary は白背景 + 黒ボーダーの透明感あるアウトライン
• pill や角丸は一切使わない（ドットペジネーションの円形は例外的機能要素）

Inputs

• Font Family: Noto Sans JP stack
• Font Size: 14px
• Background: #ffffff
• Border: 1px solid #000000
• Border Radius: 0px（矩形）
• Checkbox: 14px, border 1px solid #000000, radius 0px
• Radio: 14px, border 1px solid #000000, radius 50%

Cards

• Background: #ffffff
• Border: なし（写真と余白で構造化）
• Border Radius: 0px
• Shadow: なし（フラット）
• 構成: 写真 + カテゴリラベル + タイトル + 価格

Section Backgrounds

• Hero / Main: #ffffff（純白）
• Alternate: #f7f7f7（フッター、交互セクション）
• CTA: #000000 + #ffffff テキスト

5. Layout Principles

Container

• ヘッダー・フッターは全幅
• メインコンテンツは max-width 中央寄せ（実測ベースで 1200px 想定）
• 商品グリッドは写真中心のゆったりレイアウト

Spacing Scale（実測ベース）

Grid

• 商品グリッドは 3〜4 カラム
• カルーセルによるスライド表示（SEASONAL NEWS 等）
• 写真が主役のレイアウト

6. Depth & Elevation

TODAY'S SPECIAL はシャドウを一切使わない。白と #f7f7f7 の面の切り替えと、#000000 ボーダーだけで空間を構成する。

7. Do's and Don'ts

Do（推奨）

• テキストに color: #222222 を使う（純黒は CTA とボーダーだけ）
• 英文セクション見出しは Lato / 32px / 400 / 1.5 で大きく置く
• 和文サブタイトルは Noto Sans JP / 14px / 400 で見出しの下に添える
• font-feature-settings: "palt" を body にグローバル適用する
• letter-spacing: 0.05em をサイト全体に一貫適用する
• CTA は border-radius: 0px の完全矩形
• Primary CTA は #000000 bg + #ffffff text + 1px solid #000000 border
• Secondary CTA は #ffffff bg + #222222 text + 1px solid #000000 border
• セクション背景の切り替えに #f7f7f7 を使う
• font-weight は 400 を基本。ボタンも 400 で抑制的に
• line-height は 1.5 を基本に統一

Don't（禁止）

• 彩色（赤・青・緑など）を使わない。モノクロームに徹する
• pill（border-radius 50%）を CTA に使わない（ドットペジネーションのみ）
• 角丸（4px〜）を CTA に使わない。0px の矩形が鉄則
• font-weight 700（太字）をボタンに使わない。TODAY'S SPECIAL のボタンは 400 で軽い
• palt を部分適用しない。body レベルのグローバル適用が正解
• letter-spacing を 0 にしない（0.05em がグローバル設定）
• テキストに #000000 を使わない（#222222 が正しいテキスト色。#000000 は CTA 専用）
• シャドウを使わない。面の切り替えとボーダーだけで奥行きを作る
• 明朝体を使わない。TODAY'S SPECIAL はゴシック + Lato の二刀流
• font-weight 100 を本文に使わない（フッターの一部リンクだけの特殊用途）

8. Responsive Behavior

Breakpoints（想定）

モバイル時の調整

• H2 セクション見出し 32px → 24px 程度に縮小
• 商品グリッドは 2 カラムに折り返す
• ヘッダーはハンバーガー化
• ドットペジネーションは引き続き表示

タッチターゲット

• CTA ボタンは十分な padding を確保（最小 44px × 44px 推奨）
• ドットペジネーションは 16px と小さいため、モバイルではタップ領域を拡張推奨

フォントサイズの調整

• モバイルでは本文 14px を維持、H2 は 24px 程度に縮小
• body のデフォルト 16px はそのまま

9. Agent Prompt Guide

クイックリファレンス

Brand: TODAY'S SPECIAL（トゥデイズスペシャル）
Concept: 食と暮らしのDIY
Text Color: #222222 (Charcoal)
CTA Color: #000000 (Ink Black)
Background: #ffffff / #f7f7f7
Border: #000000
Dot Active: #707070
Dot Inactive: #aaaaaa
Body Font: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif
Heading Font: Lato, serif
Body Size: 16px / 400 / line-height 1.5
Content Size: 14px / 400 / line-height 1.57
Section Heading: 32px / 400 / line-height 1.5 (Lato)
Letter Spacing: 0.05em (global)
palt: body にグローバル適用
CTA Border Radius: 0px
CTA Font Weight: 400

プロンプト例

TODAY'S SPECIAL（トゥデイズスペシャル）のデザインシステムに従って、季節のおすすめ商品ページを作成してください。
- 英文見出しフォント: Lato, serif — 32px / 400 / line-height 1.5
- 和文フォント: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", sans-serif
- body に font-feature-settings: "palt" をグローバル適用
- letter-spacing: 0.05em をサイト全体に適用
- テキスト色は #222222、CTA は #000000 bg + #ffffff text + border 1px solid #000000 + radius 0px
- セクション見出し "SEASONAL PICKS" は Lato 32px / 400 / #222222
- 和文サブタイトル "季節のおすすめ" は Noto Sans JP 14px / 400 / #222222
- CTA "VIEW MORE" は白背景 + #222222 text + border 1px solid #000000
- セクション背景は #ffffff と #f7f7f7 を交互に
- 商品カードは radius 0 + 写真 + タイトル 14px + 価格
- 全体としてモノクローム（黒・白・灰）で構成。彩色は使わない

字詰め・組版の重要ポイント

1. palt グローバル適用: font-feature-settings: "palt" が body に指定されており、サイト全体でプロポーショナル字詰めが効いている。TODAY'S SPECIAL の組版の最大の特徴
2. letter-spacing 0.05em の統一: 見出し・本文・ラベル・ボタンすべてに同じ 0.05em。部分的な使い分けはない
3. Lato + Noto Sans JP のデュアルフォント: 英文セクション見出しは Lato で大きく、和文サブタイトルは Noto Sans JP で添える。この二段構成がエディトリアル感を生む
4. font-weight 400 の徹底: ボタンも含めほぼ全てが 400。700 を使わないことで、ライフスタイルマガジンの軽やかさを保つ
5. CTA radius は 0px: pill や角丸を一切使わない完全矩形。ボーダーとの組み合わせでシャープな印象
6. モノクローム: #222222 / #000000 / #707070 / #aaaaaa / #f7f7f7 / #ffffff の6色で完結。彩色は存在しない

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