FABRIC TOKYO（ファブリックトーキョー） DESIGN.md

FABRIC TOKYO（https://fabric-tokyo.com/）のデザイン仕様書。 D2C カスタムオーダースーツブランド。オンライン採寸 + 店舗フィッティングで "スーツをもっと自由に" を掲げるメンズ／ウィメンズ向けオーダーウェア。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: モノクロームで抑制されたラグジュアリー。#333333 のダークグレーを主色に、白と淡いグレーの面で構成し、色を足さないことで素材と仕立ての品質を語る D2C ファッションブランドの美学
• 密度: 本文の line-height は 1.5、見出しのセクションタイトルは 1.2 と詰める。プロダクトカードは大きな角丸（24px）と淡いグレー面で余裕を持たせ、ファッション EC としての空気感を確保
• キーワード: モノクローム、Lato ファースト、ワイドトラッキング、ピル CTA、D2C テイラードの洗練
• 特徴:
  • 欧文書体 Lato を font-family の先頭に置く欧文優先の混植戦略。英語のセクション名（"PICKUP"、"NEWS"、"ABOUT US"）が Lato の幾何学的なプロポーションで映え、和文はヒラギノ角ゴシック Pro / メイリオにフォールバック
  • 全サイトにわたるワイドトラッキングが最大の特徴。本文でも letter-spacing: 0.05em、セクション見出しは 0.1em まで広げる。テイラードブランドとしての "余裕" を字間で表現
  • ブランドカラーは #333333（ダークグレー）。純黒 #000000 ではなくわずかに柔らかい灰を主色にすることで、スーツ生地のチャコールのような奥行きを出す
  • CTA はすべてピル型（radius 9999px）。#333333 背景の黒ピル、transparent 背景のアウトラインピル、フィルタータグの #333333 / #9ca3af ピルと統一
  • プロダクトカテゴリカードは radius 24px の大きな角丸 + #edf0f2 のクールグレー面。ファッション EC らしい柔らかさ
  • font-feature-settings: "palt" はヒーローオーバーレイテキストのみに限定適用。本文・見出しには使わず、letter-spacing で統一管理
  • フッターは #000000 純黒背景 + 白文字。サイト全体のモノクロームを締める
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand

• Brand Dark (#333333): メインのブランドカラー。主要テキスト、主要 CTA 背景、アクティブフィルタータグ背景。スーツのチャコールグレーを想起させる
• Brand Black (#000000): フッター背景。サイト内では面色としてのみ使用し、テキストには #333333 を充てる

CTA / Buttons

• Primary CTA: 背景 #333333 / 文字 #ffffff / radius 9999px（pill） — "同意してログイン"
• Outline CTA: 背景 transparent / 文字 #333333 / border 1px solid #333333 / radius 150px（pill） — "はじめてのお客さまへ"
• Filter Tag (Active): 背景 #333333 / 文字 #ffffff / radius 9999px
• Filter Tag (Inactive): 背景 #9ca3af / 文字 #ffffff / radius 9999px
• LINE Login: 背景 #00c300 / 文字 #ffffff / radius 9999px
• Facebook Login: 背景 #3e6eaf / 文字 #ffffff / radius 9999px
• Disabled/Reset: 背景 #eeeeee / 文字 #333333 / radius 9999px

Neutral — Cool Gray Scale

Overlay

• Hero Overlay: rgba(0, 0, 0, 0.5) — ヒーロー画像上のテキスト可読性を確保する半透明黒

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

実サイトにはエラー・成功の色がフォーム以外に表面化していない。D2C EC 向けに推奨する補完値:

• Danger: #dc2626 程度の赤
• Success: #16a34a 程度の緑
• Warning: #d97706 程度のオレンジ

Third Party

• LINE Green (#00c300): LINE ログインボタン
• Facebook Blue (#3e6eaf): Facebook ログインボタン

3. Typography Rules

3.1 和文フォント

• ゴシック体: ヒラギノ角ゴシック Pro（Hiragino Kaku Gothic Pro） を優先。Apple 環境で最も安定した和文ゴシック
• フォールバック: メイリオ（Meiryo、Windows）→ sans-serif
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• サンセリフ: Lato を最優先。幾何学的でクリーンなプロポーション。Google Fonts で配信
• セクション見出し用: Lato, sans-serif（"PICKUP"、"NEWS"、"ABOUT US" 等の英語見出し）
• 数字・ページネーション: din-2014, sans-serif（スワイパーページネーション等）

3.3 font-family 指定

css/* 本文・ナビ・大部分の要素（欧文優先の混植） */
font-family: Lato, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro",
  メイリオ, Meiryo, sans-serif;

/* 英語セクション見出し（"PICKUP" 等） */
font-family: Lato, sans-serif;

/* ページネーション・数字 */
font-family: din-2014, sans-serif;

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

• Lato を先頭に置く欧文優先戦略。ブランド名 "FABRIC TOKYO" や英語セクション名が多く、Lato の幾何学的なプロポーションでブランドの洗練を表現
• 和文は Lato に含まれないため、自動的にヒラギノ角ゴシック Pro → メイリオにフォールバック
• ヒラギノは Pro（ProN ではない）を指定。Apple JP の流れを汲む

代替フォント注記: din-2014 は Adobe Fonts のフォント。数字表示で代替が必要な場合は DIN Alternate（Apple 内蔵）か Oswald / Barlow Condensed（Google Fonts）で近い印象が出る。

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

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

3.5 行間・字間

行間 (line-height) -- 実測:

• 本文 (14px): 1.5（21px / 14px）-- 標準的な日本語本文の行間
• メインコピー (20px): 2.0（40px / 20px）-- ゆったりとしたリードテキスト
• セクション見出し (18.75px): 1.2（22.5px / 18.75px）-- タイト
• 商品名 (15px): 1.5（22.5px / 15px）

字間 (letter-spacing) -- 実測:

• 本文 (14px): 0.05em（0.7px / 14px）-- 一般的な日本語サイトより広い
• セクション見出し: 0.1em（1.875px / 18.75px）-- 非常に広い。ファッションブランドの余裕感
• ナビリンク: 0.1em（1.25px / 12.5px）-- Tailwind の tracking-widest 相当
• メインコピー: 0.075em（1.5px / 20px）-- 見出しとナビの中間
• 商品名・本文: 0.047em〜0.05em -- 広め基調を維持
• フッター (11px): 0.064em（0.7px / 11px）

ガイドライン:

• FABRIC TOKYO の最大の特徴は全要素にわたるワイドトラッキング。本文でも 0.05em、英語見出し・ナビでは 0.1em まで広げる
• テイラードブランドとして "余裕・品位・丁寧さ" を字間で体現。トラッキングを詰めるとブランドイメージが壊れる
• line-height は 1.5 が基本。リードコピーのみ 2.0 でゆったりと
• weight は 400（本文・商品名）と 700（セクション見出し）の2階層。500 はナビリンクのみ

3.6 禁則処理・改行ルール

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

• ヒーローのオーバーレイテキストは画像上に手動配置
• ナビリンク・フィルタータグは white-space: nowrap

3.7 OpenType 機能

css/* ヒーローオーバーレイテキストのみ */
font-feature-settings: "palt";

• palt（プロポーショナル字詰め）はヒーローセクションのオーバーレイテキストにのみ適用
• 本文・セクション見出し・ナビには palt を使わない。字間は letter-spacing で統一管理
• ヒーロー以外で palt を入れると、ワイドトラッキングとの干渉で意図しない字詰めが発生する

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（ダークグレーピル） -- "同意してログイン"

• Background: #333333
• Text: #ffffff
• Padding: 12px 24px
• Border Radius: 9999px（完全ピル）
• Font: Lato + HiraginoKakuGo, 14px, weight 400-700
• Border: none

Outline CTA（透明ピル） -- "はじめてのお客さまへ"

• Background: transparent
• Text: #333333
• Border: 1px solid #333333
• Padding: 12px 24px
• Border Radius: 150px（実質ピル）
• Font: Lato + HiraginoKakuGo, 14px, weight 400
• Letter Spacing: 0.05em

Filter Tag (Active) -- 選択中のフィルター

• Background: #333333
• Text: #ffffff
• Padding: 6px 16px
• Border Radius: 9999px
• Font: Lato + HiraginoKakuGo, 12-14px, weight 400

Filter Tag (Inactive) -- 未選択のフィルター

• Background: #9ca3af
• Text: #ffffff
• Padding: 6px 16px
• Border Radius: 9999px
• Font: Lato + HiraginoKakuGo, 12-14px, weight 400

LINE Login CTA

• Background: #00c300
• Text: #ffffff
• Border Radius: 9999px
• Font: Lato, 14px

Facebook Login CTA

• Background: #3e6eaf
• Text: #ffffff
• Border Radius: 9999px
• Font: Lato, 14px

Disabled / Password Reset CTA

• Background: #eeeeee
• Text: #333333
• Border Radius: 9999px

Inputs

• Background: #ffffff（通常）/ #eeeeee（disabled）
• Border: 1px solid #d1d5db
• Border (focus): 1px solid #333333（推奨）
• Border Radius: 8px
• Padding: 12px 16px
• Font: Lato + HiraginoKakuGo, 14px, weight 400
• Letter Spacing: 0.05em

Cards

Product Category Card -- "SUIT"、"SHIRT" 等

• Background: #edf0f2（クールグレー面）
• Border: none
• Border Radius: 24px（大きな角丸）
• Padding: 24px
• Shadow: none
• 内部にプロダクト画像 + テキスト

Info Panel -- お知らせ・案内

• Background: #eff6ff（淡いブルー面）
• Border: none
• Border Radius: 8px
• Padding: 16px 24px

Header / Navigation

• Background: #ffffff
• Position: sticky top: 0 / fixed
• Border Bottom: 1px solid #d1d5db（推奨）
• Nav Font: Lato, 12.5px, weight 500, letter-spacing 0.1em
• z-index: 50 程度

Footer

• Background: #000000（純黒）
• Text: #ffffff
• Font: Lato, sans-serif, 11px, weight 400
• Letter Spacing: 0.7px（0.064em）
• Padding: 48px 24px

Hero Section

• フルブリード画像 + 半透明オーバーレイ rgba(0, 0, 0, 0.5)
• テキストは白 #ffffff、オーバーレイ上に配置
• font-feature-settings: "palt" をここだけで使用
• CTA はオーバーレイ上のアウトラインピル

5. Layout Principles

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

Container

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

Border Radius Scale

Grid

• Flexbox / CSS Grid ベース
• プロダクトカード: 2-4 カラム（レスポンシブ）
• Gutter: 16-24px

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• 立体感は #edf0f2 のクールグレー面と #000000 フッター面 のコントラストで表現
• ヒーローの深度は 半透明オーバーレイ rgba(0, 0, 0, 0.5) で作る
• 影を使う場合も 彩度の低い黒（rgba(0, 0, 0, 0.06-0.10)）で控えめに
• フラットでストイックな印象がブランドの核心。影の多用は避ける

7. Do's and Don'ts

Do（推奨）

• font-family は Lato を先頭に置き、和文はヒラギノ角ゴシック Pro → メイリオにフォールバック
• 本文の letter-spacing は 0.05em、英語見出し・ナビは 0.1em のワイドトラッキングを維持する
• 主要 CTA は #333333 のダークグレーピル。アウトライン CTA は #333333 ボーダーの透明ピル
• プロダクトカテゴリカードは #edf0f2 面 + radius 24px の大きな角丸
• フィルタータグはアクティブ #333333、非アクティブ #9ca3af で状態を区別
• テキスト色は #333333 に統一（純黒 #000000 はフッター背景のみ）
• フッターは #000000 背景 + #ffffff テキスト でサイトを締める
• palt はヒーローオーバーレイのみ。他は letter-spacing で管理
• weight は 400（本文）/ 700（見出し）の2値を基本にする

Don't（禁止）

• letter-spacing を詰めない（0 や負値は厳禁）。ワイドトラッキングが FABRIC TOKYO の最大のアイデンティティ
• 彩度の高いカラーを CTA に使わない（ブルー、レッド等）。ブランドカラーはあくまで #333333 のモノクローム。色付き CTA は SNS ログイン（LINE / Facebook）等の外部サービスに限定
• テキスト色に 純黒 #000000 を使わない（面色としては可、テキストは #333333）
• フォントスタックの先頭を 和文フォントにしない。Lato が先頭であることがブランドの欧文表現を支えている
• 角張った直角ボタン（border-radius 0）や 小角丸（4-8px）の CTA を使わない。CTA は必ずピル型
• #edf0f2 のカード面にさらに ボーダーを加えない。面色だけで十分に区別されている
• 太いフォントウェイト（800, 900）を使わない。最大 700 まで。D2C ファッションの抑制を保つ
• ヒーロー以外で font-feature-settings: "palt" を使わない。letter-spacing との干渉で字間が崩れる
• ウォーム系グレー（#f2f2f0、#737368 等）を使わない。FABRIC TOKYO はクール寄りのニュートラル

8. Responsive Behavior

Breakpoints（推奨）

モバイル時の調整

• セクション見出し: 18.75px → 16px
• メインコピー: 20px → 16-18px
• 本文サイズは 14px を維持（line-height も 1.5 維持）
• letter-spacing は 0.05em を維持（モバイルでも詰めない）
• ナビはハンバーガー化、プロダクトカードは 1-2 カラム
• ヒーロー画像はフルブリード維持、オーバーレイテキストのサイズを縮小

タッチターゲット

• 主要 CTA: 高さ 44px 以上（padding 12px 24px + フォントで確保）
• フィルタータグ: 高さ 36px 程度
• ナビリンク: 44px のタッチ領域を確保

ダークモード

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

9. Agent Prompt Guide

クイックリファレンス

Brand Dark (CTA / Text): #333333
Surface (Card BG): #edf0f2
Secondary Gray (Inactive): #9ca3af
Border: #d1d5db
Info Surface: #eff6ff
Disabled: #eeeeee
Footer BG: #000000
White: #ffffff
Overlay: rgba(0, 0, 0, 0.5)
LINE Green: #00c300
Facebook Blue: #3e6eaf

Font (Body): Lato, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
Font (English Heading): Lato, sans-serif
Font (Numbers): din-2014, sans-serif

Body: 14px / weight 400 / line-height 1.5 / letter-spacing 0.05em / color #333333
Section Title: 18.75px / weight 700 / line-height 1.2 / letter-spacing 0.1em
Main Copy: 20px / weight 400 / line-height 2.0 / letter-spacing 0.075em
Product Name: 15px / weight 400 / line-height 1.5 / letter-spacing 0.047em
Nav Link: 12.5px / weight 500 / letter-spacing 0.1em
Footer: 11px / weight 400 / letter-spacing 0.064em / color #ffffff

Border Radius: 8px (input) / 24px (product card) / 9999px (CTA / tag)
Shadow: 基本 none。立体感は #edf0f2 面と #000000 フッター面で表現
palt: ヒーローオーバーレイのみ。他は letter-spacing で管理

プロンプト例

FABRIC TOKYO のデザインに従って、D2C カスタムオーダースーツの商品一覧ページを作成してください。
- フォント: Lato, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
- セクション見出し: 18.75px / weight 700 / letter-spacing 0.1em / color #333333（英語表記 "SUITS" 等）
- 商品名: 15px / weight 400 / line-height 1.5 / letter-spacing 0.047em / color #333333
- 本文: 14px / weight 400 / line-height 1.5 / letter-spacing 0.05em / color #333333
- 主要 CTA: 背景 #333333 / 白文字 / border-radius 9999px / padding 12px 24px
- アウトライン CTA: 背景 transparent / 文字 #333333 / border 1px solid #333333 / radius 9999px
- フィルタータグ（アクティブ）: 背景 #333333 / 白文字 / radius 9999px
- フィルタータグ（非アクティブ）: 背景 #9ca3af / 白文字 / radius 9999px
- プロダクトカード: 背景 #edf0f2 / radius 24px / shadow none
- ページ背景: 白 #ffffff
- フッター: 背景 #000000 / テキスト #ffffff / Lato 11px
- letter-spacing は全要素で正の値（0.05em-0.1em）。絶対に詰めない
- 彩度のある色は使わない（モノクローム基調）
- box-shadow は基本 none。フラットに
- palt はヒーローのオーバーレイテキストのみ