ファクトリエ（Factelier） DESIGN.md

ファクトリエ（https://factelier.com/）のデザイン仕様書。 「世界に誇る、ファクトリーブランド」を掲げる日本製アパレルの D2C。工場と直接つながる販売モデルを取る。 Avenir が和文より先頭。Avenir, 游ゴシック体, YuGothic, … で、欧文グリフを Avenir に取らせてから和文に渡す body の font-size が 12px。本文は 14px、見出しは 18px。全体に小さく、詰まった業務的な密度を持つ 角丸を用途で 4 段に割る。ボタン 0px / スライダー 2px / 予約系 16px / カテゴリチップ 900px（pill） ランキングがコーナーリボン。linear-gradient(135deg, 色 50%, transparent 0) の三角形で、金・銀・銅・灰を順位に割り当てる 実サイトの computed style 実測（2026-08-23 取得。トップ ＋ 商品一覧）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白地に黒の線と文字。装飾色を持たず、#222222 の 1 色で罫線・文字・ボタンを賄う。写真（着用カット・工場カット）が面積の主役
• ファクトリエについて: 工場と直接組む日本製アパレル。「MEN / WOMEN / BABY」の切り替えが最上位の導線で、性別カテゴリを色（青灰・藤）で区別する
• 密度: 高。EC としての情報量が多く、body 12px / カード内 11〜14px と文字が小さい。ランキング・バッジ・チップが同時に並ぶ
• キーワード: Avenir 先頭、#222222 単色、コーナーリボン、border-radius 4 段、ls: 0.02em 一律、明朝の MORE
• 特徴:
  • Avenir が和文チェーンの先頭。Avenir, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif。欧文は Avenir、和文は游ゴシックという明確な分担
  • letter-spacing: 0.24px が全要素に一律で当たる。body の 12px に対して 0.02em。サイズが変わっても px 値が 0.24px のままなので、大きい文字ほど相対的に字間が詰まる
  • border-radius を用途で割っている。ボタン 0px / スライダードット 2px / 来店予約 16px / カテゴリチップ 900px。**「pill を作りたいときは 900px と書く」**のがこのサイトの流儀
  • ランキングがコーナーリボン。linear-gradient(135deg, #dfd260 50%, transparent 0) で左上に三角を作り、その上に順位数字を白で置く。1 位 #dfd260（金）/ 2 位 #c0c0c0（銀）/ 3 位 #ba9585（銅）/ 4–5 位 #999999（灰）
  • 性別バッジに専用色。MEN = #b9c9cb（青灰）/ WOMEN = #bdbcc7（藤）。くすませた低彩度で、ロゴの赤とぶつからない
  • MORE ボタンだけ明朝。"Noto Serif JP", 游明朝, YuMincho, "ヒラギノ明朝 ProN" で、透明背景 + 1px solid #000000。ヒーロー上の惹句ボタン専用
  • 面色を background-image で塗る箇所がある。ランキングリボンは background-color が透明のまま linear-gradient で塗られている。background-color だけを見ると色が取れない
  • box-shadow を「浮かせる」ためだけに使う。来店予約ボタン（0 1px 4px rgba(0,0,0,.2)）とスライダー矢印（2 段重ね）のみ

2. Color Palette & Roles

地は #ffffff（pageBackground.resolved = rgb(255,255,255) / 根拠 body）。

Neutral（ニュートラル＝ UI の基幹）

• #222222 が文字色とプライマリの面色を兼ねる。別に「ブランドカラー」を持たない
• #ebecee が唯一のセクション面色。青みを含んだライトグレー

Gender（性別カテゴリ）

• どちらも彩度を落とした中間色。青／ピンクのステレオタイプな彩度を使わない

Ranking（順位リボン）

• 金・銀・銅をそのままの彩度で使わない。#dfd260 はくすんだ黄、#ba9585 は赤みを抑えたテラコッタ

Accent（限定的な差し色）

• #4fc3c6（rgb 79,195,198）: ターコイズ。特集バナー等の局所
• #c48865（rgb 196,136,101）: テラコッタ。同上
• ロゴの赤い丸（日の丸のモチーフ、ALL MADE IN JAPAN と対）は SVG / 画像として実装され、CSS 変数を持たない

3. Typography Rules

3.1 和文フォント

• ゴシック体: 游ゴシック体 → YuGothic → 游ゴシック Medium → Yu Gothic Medium → ヒラギノ角ゴ Pro W3 → Hiragino Kaku Gothic Pro → sans-serif

• 明朝体: Noto Serif JP → 游明朝 → YuMincho → ヒラギノ明朝 ProN（MORE ボタン等の惹句専用）

• 商品一覧ページの見出しのみ "Hiragino Kaku Gothic ProN" 単独指定（32px w700）

• 游ゴシックは Medium 表記を含める（Windows で細くなるのを防ぐ）

• ヒラギノは角ゴが Pro W3、明朝が ProN と混在する。それぞれの指定をそのまま守る

3.2 欧文フォント

• サンセリフ: Avenir（和文チェーンの先頭）
• セリフ: Noto Serif JP のフォールバックとしての明朝群

3.3 font-family 指定

css/* 本文・既定（欧文優先） */
font-family: Avenir, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
             "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;

/* 惹句・MORE ボタン（明朝） */
font-family: "Noto Serif JP", 游明朝, YuMincho, "ヒラギノ明朝 ProN", serif;

/* 商品一覧の見出し */
font-family: "Hiragino Kaku Gothic ProN";

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

• 欧文優先。Avenir を先頭に置き、欧文グリフを Avenir に取らせてから和文を游ゴシックに渡す
• Avenir は macOS / iOS 同梱のシステムフォント。Windows / Android では 2 番目の游ゴシックに落ちるため、欧文の見え方が OS で変わることを前提にする
• 商品一覧の "Hiragino Kaku Gothic ProN" 単独指定はフォールバックが無く、環境依存になっている。新規実装では避け、必ずチェーンを書く

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

• body が 12px なのがこのサイトの起点。本文として読ませるのは 14px / 行間 1.8
• letter-spacing は 0.24px の固定 px。em ではないので、12px では 0.02em、18px では 0.013em と実効値が変わる
• 例外的に字間を開くのは 2 箇所だけ: トグルボタン（0.1em）と性別バッジ（0.12em）

3.5 行間・字間

• 本文の行間: 1.8（14px → 25.2px）
• 見出し・ラベルの行間: normal（ブラウザ既定 ≒ 1.2）
• ナビの行間: 1.0（14px → 14px）
• 本文の字間: 0.24px 固定（12px で 0.02em、14px で 0.017em）
• 強調ラベルの字間: 1.6px（0.1em）/ 1.3824px（0.12em）

ガイドライン:

• 本文 14px / 行間 1.8 を守る。body の 12px はキャプション用であって本文ではない
• letter-spacing は px で一律に指定する（このサイトの流儀）。em に置き換えると大きい文字で字間が開きすぎる
• 短い英字ラベルだけ 0.1〜0.12em に開く

3.6 禁則処理・改行ルール

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

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！

• 行末禁止: （「『【〔〈《

• 商品名に「HITOYOSHI オーダーシャツ」のようなローマ字 + 和文が混ざるため word-break: break-all は使わない

3.7 OpenType 機能

• font-feature-settings は全要素で normal。palt を使っていない
• 字詰めは letter-spacing: 0.24px の一律指定で行う

3.8 縦書き

該当なし。

4. Component Stylings

Buttons

Primary（黒ベタ・選択中） — MEN / WOMEN トグルの選択中

• Background: #222222
• Text: #ffffff
• Border: 1px solid #222222
• Padding: 8px 16px
• Border Radius: 0px
• Font Size: 16px / Weight: 400 / ls 1.6px（0.1em）

Toggle（非選択）

• Background: #ffffff
• Text: #444444
• Border: 1px solid #444444
• Padding: 8px 16px
• Border Radius: 0px

Secondary（浮かせる pill） — アクセス・営業時間 / 来店予約

• Background: #ffffff
• Text: #222222
• Border: 1px solid #222222
• Padding: 0 5%
• Border Radius: 16px
• Shadow: 0 1px 4px rgba(0, 0, 0, 0.2)
• Font Size: 14px

Chip（カテゴリ pill） — Tシャツ・カットソー / ジーンズ

• Background: #ffffff
• Text: #222222
• Border: 1px solid #c9c9c9
• Padding: 11.52px 31.68px
• Border Radius: 900px ← このサイトの pill の書き方
• Font Size: 14.4px

MORE（明朝・惹句）

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Padding: 7.2px 21.6px
• Border Radius: 0px
• Font: "Noto Serif JP", 游明朝, YuMincho, "ヒラギノ明朝 ProN" 14.4px

Gender Badge

• Background: #b9c9cb（MEN）/ #bdbcc7（WOMEN）
• Text: #ffffff
• Border Radius: 0px
• Padding: 2.88px 7.2px
• Font Size: 11.52px / Weight: 700 / ls 1.3824px（0.12em）

Ranking Ribbon（コーナーリボン）

css.status-ranking {
  background-image: linear-gradient(135deg, #dfd260 50%, rgba(0,0,0,0) 0);  /* 1位 */
  color: #ffffff;
  padding: 3.6px 5.76px;
  border-radius: 0;
  font-size: 14.4px;
  font-weight: 700;
  letter-spacing: 0.24px;
}

• background-color は透明のまま、background-image で三角を作る
• 2 位 #c0c0c0 / 3 位 #ba9585 / 4–5 位 #999999 に差し替える

Slider

ドット（ページネーション）

• Background: #333333（現在地）/ #cccccc（非現在地）
• Border Radius: 2px（丸ではなく角丸の短い棒）

矢印

• Background: #ffffff
• Border Radius: 50%
• Shadow: 0 1px 4px rgb(144,144,144), 0 2px 4px rgba(0,0,0,0.3)（2 段重ね）

Cards

• Background: #ffffff
• Border: なし
• Border Radius: 0px
• Shadow: なし
• Max Width: 記事幅 690px

Language Bar（多言語切替）

• Background: #394045（バー）/ #212729（選択中）
• Text: #ffffff
• Padding: 8px 24px 8px 32px
• Font Size: 12px / Weight: 500

注: これは WOVN の翻訳ウィジェット由来で、フォントも -apple-system, "system-ui", "Segoe UI", Roboto… と別系統。ブランドの設計として扱わない。

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px（サイト全体の基準）
• Max Width（ワイド）: 1090px / 記事幅: 690px
• カード幅: 300–350px

Grid

• 商品グリッド: 4 カラム（デスクトップ）/ gap: 36px 2%
• Gutter: 2%（px ではなく %）

6. Depth & Elevation

• 影は「押せることを示す」ためだけに使う。カードやセクションには使わない
• 面の区別は #ebecee の面色と #cccccc / #d2d3d5 の罫線で行う

7. Do's and Don'ts

⚠ 面色を background-color だけで判定しない

ランキングリボンは background-color: rgba(0,0,0,0) のまま background-image: linear-gradient(...) で塗られている。

• background-color だけを見ると金・銀・銅の 4 色が全部取れない
• 実装時も同じ手法（linear-gradient(135deg, 色 50%, transparent 0)）を使う。三角形は border トリックではなくグラデーションで作るのがこのサイトの流儀

⚠ Avenir は macOS / iOS 限定

• Avenir は Apple プラットフォーム同梱で、Windows / Android には無い
• そのため欧文の見え方が OS で変わる。Windows では 2 番目の 游ゴシック体 が欧文も描く
• Web フォントとして読み込んでいないため、この差は仕様として受け入れられている。再現時は Avenir の代替に Nunito Sans や Montserrat を当てる（幾何学サンセリフ寄り）

Do（推奨）

• Avenir を和文チェーンの先頭に置く（欧文優先の指定順）
• letter-spacing は 0.24px の固定 px で全体に当てる
• 本文は 14px / 行間 1.8。body の 12px はキャプション用
• pill を作るときは border-radius: 900px と書く（このサイトの流儀）
• border-radius を用途で割る: ボタン 0 / ドット 2px / 浮かせる pill 16px / チップ 900px
• プライマリの面色は #222222。純黒 #000000 は明朝の MORE ボタンの枠にだけ使う
• 性別バッジは低彩度（#b9c9cb / #bdbcc7）にする
• 影は押せる要素にだけ当てる
• 惹句ボタンには明朝チェーンを当てる

Don't（禁止）

• letter-spacing を em に置き換えない。px 固定が設計意図（大きい文字ほど詰まる）
• palt を使わない。字詰めは letter-spacing で明示する
• ランキングリボンを background-color で塗らない（background-image のグラデーション）
• "Hiragino Kaku Gothic ProN" を単独指定しない（商品一覧に実在するが環境依存。必ずフォールバックを書く）
• 金・銀・銅を高彩度で使わない（#dfd260 / #c0c0c0 / #ba9585 のくすんだトーン）
• 性別カテゴリに高彩度の青／ピンクを使わない
• カードやセクションに影を付けない
• wovn- プレフィックスの要素をブランドの設計として扱わない（翻訳ウィジェット由来。フォントも別系統）

8. Responsive Behavior

Breakpoints

media query に実在する値（主要なもの）:

• 1200px がコンテナ幅と一致する主要ブレークポイント
• ルート font-size は 16px 固定、body は 12px 固定（375px〜1920px で変化なし）

タッチターゲット

• 最小 44px × 44px
• チップの padding: 11.52px 31.68px は高さ約 40px で基準をわずかに下回る。新規実装では縦 padding を 14px 前後に上げる

フォントサイズの調整

• 本文サイズはブレークポイントを跨いでも固定
• 縮めるのはグリッドのカラム数（4 → 2 → 1）とガター（2% 維持）

9. Agent Prompt Guide

クイックリファレンス

Primary Fill:   #222222
Text Color:     #222222 / #333333（ナビ）
Background:     #ffffff
Surface:        #ebecee
Surface Dark:   #394045
Border:         #c9c9c9 / #cccccc
Gender Badge:   #b9c9cb (MEN) / #bdbcc7 (WOMEN)
Ranking:        #dfd260 / #c0c0c0 / #ba9585 / #999999
Font:           Avenir, 游ゴシック体, YuGothic, "游ゴシック Medium",
                "Yu Gothic Medium", "ヒラギノ角ゴ Pro W3",
                "Hiragino Kaku Gothic Pro", sans-serif
Font (明朝):    "Noto Serif JP", 游明朝, YuMincho, "ヒラギノ明朝 ProN"
Base Size:      12px（body）/ 本文 14px
Line Height:    1.8（本文）
Letter Spacing: 0.24px（固定 px・全体）
Border Radius:  0px / 2px / 16px / 900px（用途で使い分け）
font-feature-settings: normal（palt を使わない）
Container:      1200px

プロンプト例

ファクトリエのデザインシステムに従って、商品一覧のグリッドを作成してください。
- フォント: Avenir を先頭に置いた和文チェーン
  （Avenir, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif）
- letter-spacing: 0.24px を全体に一律で当てる（em にしない）
- 本文 14px / line-height: 1.8、キャプションは 12px
- 文字色は #222222、背景は #ffffff、セクション面は #ebecee
- 性別バッジ: MEN=#b9c9cb / WOMEN=#bdbcc7、白文字、
  border-radius: 0、font-weight: 700、letter-spacing: 1.3824px
- ランキングは左上のコーナーリボン。background-image で
  linear-gradient(135deg, #dfd260 50%, transparent 0) と書く（1位）
  2位 #c0c0c0 / 3位 #ba9585 / 4-5位 #999999
- カテゴリチップは border-radius: 900px、白地に 1px solid #c9c9c9
- カードに box-shadow は付けない。影は押せる要素だけ
- font-feature-settings は normal（palt を使わない）
- コンテナ幅 1200px、グリッドは gap: 36px 2%