シャトレーゼ（CHATERAISE） DESIGN.md

シャトレーゼ（https://www.chateraise.co.jp/）のデザイン仕様書。 山梨発、洋菓子・和菓子・アイスを「工場直売」で売る菓子ブランドの EC ＋ 店舗案内サイト。 font-feature-settings: "palt" がサイト全体に効いている。body から継承され、見出し・本文・ナビ・フッターまで全要素が詰め組み。本サイト集の中でも珍しい「本文まで palt」型 書体が ヒラギノ角ゴ Pro W6 先頭。ProN ではなく Pro、しかもウェイト付きのフォント名を先頭に置く。つまり font-weight: 400 の本文でも実際は W6（Semibold）相当で表示される 特集見出しだけ font-family: serif の 1 語。和文フォント名を書かず generic family に丸投げしており、macOS ではヒラギノ明朝、Windows では MS 明朝に化ける 色はワインレッドの 2 段構え。見出し #551937（深いプラム）とリンク・タグ #aa0046（クリムゾン）。CTA の面だけブラウン #5a2d14 実サイトの computed style 実測（2026-08-24 取得。トップ ＋ /ec/）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 生成りの地にワインレッドの線。面を強く塗らず、細い罫のピルと極小の角丸バッジを積み重ねる。写真（ケーキ）が主役なので、UI 側は彩度を抑えたベージュ〜クリームで支える
• シャトレーゼについて: 「工場直売」「Web 予約・店舗受取」「オンラインショップ」の 3 導線が並立する。通販と店舗のどちらの話をしているかをタグ（#通販 #店舗）で常時示すのが情報設計の核
• 密度: 高い。body が 14px、タグ・バッジが 10〜13px。1 画面に特集バナー・ホットキーワード・カード一覧が同居する
• キーワード: 全域 palt、ヒラギノ角ゴ Pro W6、ワインレッド #551937 / #aa0046、ブラウンのピル #5a2d14、クリーム #fffdf7、黄色いマーカー線
• 特徴:
  • palt が body から全継承されている。日本語サイトで本文にまで palt を当てる例は少数派。商品名・キャッチが詰まって見えるのはこのため
  • ヒラギノ角ゴ Pro W6 を font-family の先頭に置く。ウェイト指定ではなくフォント名で太さを決めている。font-weight: 400 と 700 の見た目の差が小さい
  • Pro（ProN ではない）。JIS90 字形。Mr. CHEESECAKE や note の ProN 系とは字形が違う
  • border-radius が 7 段階（0 / 2px / 4px / 9px / 10px / 30px / 100px）。タグは 2px の「ほぼ直角」、ボタンは 30px のピルとはっきり使い分ける
  • マーカー線がグラデーションで実装されている：linear-gradient(transparent 80%, #ffda6a 20%)。下 20% だけ黄色く塗る蛍光ペン
  • 特集見出しの font-family が serif の 1 語だけ。和文明朝の指定がなく OS 依存（後述の Don't 参照）
  • タグの色分けが情報の種類を表す：#通販 = 青 #83b7d8、#店舗 = ピンク #e397ac、#グループ = マゼンタ #b74674
  • 影が極端に薄い（rgba(0,0,0,0.03) 0 1px 3px / rgba(37,28,41,0.06) 0 4px 12px）。影の色に紫みのある rgb(37,28,41) を使う

2. Color Palette & Roles

地は #ffffff（pageBackground.resolved = rgb(255,255,255) / 根拠 html）。ただし主要セクションはクリーム #fffdf7 で塗られている。

Brand（ブランド）

• Plum (#551937, rgb 85,25,55): 主色。見出し（h2 / h3）、ナビの太字項目、メガメニューの小見出し。深いプラム
• Crimson (#aa0046, rgb 170,0,70): リンク・タグ・アウトライン CTA の文字色と罫。Plum より明るく彩度が高い
• Magenta Deep (#8d075c, rgb 141,7,92): 「Web予約する」「一覧を見る」ボタンの 1px 罫。Crimson の文字に対して罫だけ紫寄りにする
• Brown (#5a2d14, rgb 90,45,20): 「オンラインショップ」ピルの面（白文字）。唯一の塗り CTA

Accent（アクセント・タグ）

Neutral（ニュートラル）

Surface（面色）

3. Typography Rules

3.1 和文フォント

• ゴシック体: ヒラギノ角ゴ Pro W6 → Hiragino Kaku Gothic Pro → ヒラギノ角ゴ ProN → Hiragino Sans → メイリオ
• 明朝体: 指定なし（generic serif に丸投げ。特集見出しのみ）

3.2 欧文フォント

• サンセリフ: Helvetica Neue → Arial（和文のあとに置かれている）
• 等幅: 指定なし

3.3 font-family 指定

css/* 本文・見出し・ナビ・フッター（body から全継承） */
font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro",
             "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
             "Hiragino Sans", Meiryo, sans-serif;

/* 特集見出し（h2 / 一部 h3）— 実サイトはこの 1 語だけ */
font-family: serif;

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

• 先頭が ヒラギノ角ゴ Pro W6。ウェイトをフォント名で固定しているため、macOS では font-weight: 400 でも W6（Semibold）で描画される。Windows ではメイリオ Regular に落ちるので、太さの印象が大きく変わる
• Pro（JIS90）と ProN（JIS2004）を両方並べるという珍しい構成。Pro を先、ProN を後に置いている
• 欧文（Helvetica Neue / Arial）が和文より後ろ。数字・アルファベットもヒラギノの欧文グリフで出る
• serif 1 語の指定は環境依存（macOS = ヒラギノ明朝 ProN、Windows = MS 明朝、Android = Noto Serif）。再現時は明示的な和文明朝スタックに置き換える（下の Don't 参照）

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

3.5 行間・字間

• 本文の行間: 1.5（14px / 21px）。記事的な本文だけ 1.8（14px / 25.2px）
• 見出しの行間: 1.5 で統一（32px/48px、31px/46.5px、24px/36px、21px/31.5px）
• 例外的に広い行間: ブランド見出し（18px / 36px = 2.0）とメガメニュー見出し（14px / 28px = 2.0）
• 本文の字間: 0.4px（14px に対し ≒ 0.029em）。サイト全体の既定
• 見出しの字間: 0.4px 〜 2px（ヒーローの 31px 見出し ＝ 0.065em）
• メガメニューの字間: 1px（13px に対し 0.077em ＝ かなり開く）／一部 1.5px

ガイドライン:

• letter-spacing: 0.4px は px 指定。サイズを変えるときは em に換算（14px → 0.029em）
• palt が効いた上に letter-spacing を足している。詰めてから開き直す構成なので、片方だけ真似すると印象が変わる

3.6 禁則処理・改行ルール

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

• 商品名は「【通販限定】8月限定！夏休み福箱！」のように隅付き括弧と感嘆符が多い。palt と組み合わせると括弧が強く詰まるので、行頭・行末の禁則を必ず有効にする
• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

css/* body に指定し、全要素へ継承させる（シャトレーゼの実装） */
font-feature-settings: "palt";

• palt をサイト全体に適用している。body / h2 / h3 / h4 / p / a / span / li / nav / header / footer のすべてで "palt" を実測
• 例外は button と input だけ（normal）。フォーム要素には詰め組みを適用しない
• palt ＋ letter-spacing: 0.4px の併用が特徴。詰めたうえで一律に開き直すことで、括弧まわりだけが詰まり、かな・漢字の字間は保たれる

3.8 縦書き

該当なし。

4. Component Stylings

Buttons

Primary（ブラウンのピル — 唯一の塗り CTA）

• Background: #5a2d14
• Text: #ffffff
• Padding: 9px
• Border Radius: 100px
• Font Size: 12px / Weight 400
• 例: 「オンラインショップ」

Secondary（白のピル ＋ クリムゾンの罫）

• Background: #ffffff
• Text: #aa0046
• Border: 1px solid #aa0046
• Padding: 8px 10px
• Border Radius: 30px
• Font Size: 14px / Weight 400
• 例: 「新商品」「通販限定詰合せ」

Secondary Wide（白のピル ＋ マゼンタの罫）

• Background: #ffffff
• Text: #aa0046
• Border: 1px solid #8d075c（文字はクリムゾン、罫はマゼンタ）
• Padding: 16px 0 14px（左右は幅いっぱい・上下が非対称）
• Border Radius: 30px
• Font Size: 14px / Weight 400
• 例: 「Web予約する」「一覧を見る」

Nav Pill（白のピル・グローバルナビ）

• Background: #ffffff
• Text: #551937
• Border: 1px solid #ffffff
• Padding: 10px 24px
• Border Radius: 30px
• Font Size: 14px / Weight 700
• 例: 「商品・通販」「Web予約・店舗受取」

Keyword Chip（灰の面・ほぼ直角）

• Background: #f5f5f5
• Text: #aa0046
• Padding: 10px 20px
• Border Radius: 2px
• Font Size: 14px / Weight 700
• 例: #アイス #チョコバッキー

Category Tag（色付きの面・ほぼ直角）

• Background: #83b7d8（通販）／ #e397ac（店舗）／ #b74674（グループ）
• Text: #ffffff
• Padding: 4px 6px 2px（下だけ狭い非対称）
• Border Radius: 2px
• Font Size: 11px / Weight 700

Status Badge（白 ＋ 極淡の罫）

• Background: #ffffff
• Text: #aa0046
• Border: 1px solid #f0efec
• Padding: 4px 23px 4px 25px（左右が非対称）
• Border Radius: 10px
• Font Size: 10px / Weight 700
• 例: LIMITED TOPICS

Menu Category Bar（ベージュの帯）

• Background: #f0ebde
• Text: #551937
• Padding: 11px 0 10px
• Border Radius: 0px
• Font Size: 13px / Weight 700

Marker（強調の蛍光ペン線）

css.marker {
  background-image: linear-gradient(transparent 80%, #ffda6a 20%);
  color: #aa0046;
  font-size: 16px;
}

下 20% だけを黄色 #ffda6a で塗る。文字色はクリムゾン #aa0046。

Inputs

• Background: #ffffff
• Border: なし（0px none）
• Border Radius: 30px（ピル型の検索窓）
• Padding: 0 15px
• Font Size: 12px
• font-feature-settings は normal（palt を継承させない）

Cards

• Background: #ffffff
• Border: なし
• Border Radius: 9px（お知らせカード）／4px（メニュー項目）
• Padding: 11px
• Shadow: rgba(0,0,0,0.03) 0 1px 3px ／ rgba(37,28,41,0.06) 0 4px 12px

5. Layout Principles

Spacing Scale

Container

• Max Width: 1280px（1440px ビューポートで左右に 80px 前後の余白）
• Padding (horizontal): 20px

Grid

• 特集カード: 3 カラム
• 商品カード: 4 カラム
• ホットキーワード: 中央揃えのチップ列（折り返し）
• メガメニュー: カテゴリ帯 ＋ 多段リスト

6. Depth & Elevation

影は 2 段階だけ、かつ極端に薄い。階層は主に**面色（#ffffff → #fffdf7 → #f8f2eb → #f5f5f5 → #f0ebde）**で作る。

7. Do's and Don'ts

Do（推奨）

• body に font-feature-settings: "palt" を指定し、全要素に継承させる。ただし button / input だけは normal に戻す
• palt と letter-spacing: 0.4px（≒ 0.029em）を併用する。詰めてから一律に開き直すのがシャトレーゼの組み方
• 色は 2 段構えのワインレッドで組む：見出し #551937、リンク・タグ・罫 #aa0046。塗り CTA だけブラウン #5a2d14
• radius を役割で使い分ける：ボタン・入力 = 30px（ピル）／タグ・チップ = 2px（ほぼ直角）／カード = 9px／バッジ = 10px
• タグの色で情報の種類を示す：通販 = #83b7d8、店舗 = #e397ac、グループ = #b74674
• 強調は linear-gradient(transparent 80%, #ffda6a 20%) のマーカー線で入れる。太字や色替えより先にこれを使う
• 面はクリーム #fffdf7 を基調にする。純白の地に対してわずかに黄みを持たせる
• 影は 0 1px 3px rgba(0,0,0,0.03) / 0 4px 12px rgba(37,28,41,0.06) の 2 段階だけ

Don't（禁止）

• font-family: serif の 1 語で明朝を指定しない。実サイトはそうなっているが OS 依存で字形が大きく変わる。再現時は明示的に書く:

  cssfont-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
               "Noto Serif JP", serif;

• ヒラギノ角ゴ Pro W6 を先頭に置いたまま font-weight で太さを作ろうとしない。フォント名側で W6 が固定されるため、400 と 700 の差がほとんど出ない。Windows ではメイリオ Regular に落ちて印象が変わる点も併せて設計する
• button / input に palt を継承させない（実サイトも normal）。フォームの文字が詰まって読みにくくなる
• タグをピル（30px）にしない。タグ・チップは 2px の「ほぼ直角」が本サイトの型
• #551937 と #aa0046 を混同しない。前者は見出し・ナビの文字、後者はリンク・タグ・罫
• 濃い影を落とさない。最大でも rgba(37,28,41,0.06)
• 本文を 14px より小さくしない（既定が 14px と既に小さい）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小 44px × 44px。ナビピル（padding 10px 24px ＋ 14px）で確保
• カテゴリタグ（11px / padding 4px 6px 2px）はタップ対象にしない

フォントサイズの調整

• 特集見出し 32px → 20px
• セクション見出し 24px → 18px
• 本文 14px は据え置き（これ以上小さくしない）
• ナビの letter-spacing: 1px はモバイルでは 0.4px に揃える
• モバイルでは下部に「オンラインショップ」の追従ピルを置く

9. Agent Prompt Guide

クイックリファレンス

Heading Color: #551937   /* 深いプラム */
Link / Tag:    #aa0046   /* クリムゾン */
Button Border: #8d075c   /* マゼンタ（罫だけ） */
Fill CTA:      #5a2d14   /* ブラウン。唯一の塗り */
Text Color:    #121212
Background:    #ffffff（セクションは #fffdf7）
Surface:       #f5f5f5 / #f0ebde / #f8f2eb
Tags:          #83b7d8（通販）/ #e397ac（店舗）/ #b74674（グループ）
Marker:        linear-gradient(transparent 80%, #ffda6a 20%)
Font:          "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "Helvetica Neue",
               Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
Serif:         "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif  /* 特集見出し */
Body Size:     14px / 400 / line-height 1.5 / letter-spacing 0.029em
palt:          body に "palt"（button / input だけ normal）
Radius:        30px（ボタン・入力）/ 2px（タグ）/ 9px（カード）/ 10px（バッジ）
Shadow:        0 1px 3px rgba(0,0,0,.03) / 0 4px 12px rgba(37,28,41,.06)

プロンプト例

シャトレーゼのデザインシステムに従って、季節フェアの特集ページを作成してください。

- body に font-feature-settings: "palt" を指定し全体へ継承させる。
  ただし button と input だけ normal に戻す
- 本文フォントは
  "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "Helvetica Neue", Arial,
  "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
  本文は 14px / 400 / line-height 1.5 / letter-spacing 0.029em / #121212
- 特集見出しは明朝で 24px / 700 / line-height 1.5 / letter-spacing 0.04em / #551937
  明朝は "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif と明示する
- セクションの面はクリーム #fffdf7。カードは白 ＋ radius 9px ＋
  box-shadow: 0 4px 12px rgba(37,28,41,.06)
- 「オンラインショップ」CTA は #5a2d14 の塗り ＋ 白文字 12px ＋ radius 100px ＋ padding 9px
- 「一覧を見る」は 白地 ＋ 文字 #aa0046 ＋ border 1px solid #8d075c ＋ radius 30px ＋
  padding 16px 0 14px
- ホットキーワードのチップは #f5f5f5 の面 ＋ 文字 #aa0046 14px/700 ＋ radius 2px ＋ padding 10px 20px
- 商品カードには #通販（#83b7d8）/ #店舗（#e397ac）のタグを白文字 11px/700 ＋ radius 2px で付ける
- 強調は linear-gradient(transparent 80%, #ffda6a 20%) のマーカー線で入れる
- 影は最大でも rgba(37,28,41,.06)。濃い影は使わない