食べチョク（Tabechoku） DESIGN.md

食べチョク（https://www.tabechoku.com/）のデザイン仕様書。 農家・漁師から直接買える産直通販マーケットプレイス。商品 42,363 点／生産者 11,896 軒が並ぶ。 ブランド色は「金茶」1 系統。--Color-Primary-Gold-70: #cab270（CSS 出現 154 回）と Gold-60: #9f8745（138 回）の 2 段で、面と文字を使い分ける。日本の EC で「金」を主色に据えるのは珍しく、水引・のし・熨斗紙の意匠と地続きになっている トーナルスケールを持つ。--Color-{Primary-Gold, Orange, Red, Blue, Green, Yellow, Gray}-{0,10,20,…,95,99,100} の 13 段 × 7 系統。Material 3 と同じ 「0 が黒・100 が白」 の並びで、数字が大きいほど明るい（Nachiguro 等の「500 が基準・900 が最暗」とは逆向き） 見出しに明朝が入る。金色のセクション見出しだけ font-family: "Noto Serif JP", serif ＋ color: #9f8745。他はすべて ヒラギノ角ゴ Pro（ProN ではない） letter-spacing を px で細かく刻む。.4px（152 回）.5px（111 回）.15px（109 回）.25px（87 回）.1px（66 回）——サイズごとに 5 段階を使い分ける 実サイトの computed style 実測（2026-08-28 取得。トップ ＋ 商品一覧 /products）＋ user-*.css（731KB）の直接 grep に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白地 ＋ 生成りの面 ＋ 金茶。贈答・産直という文脈に合わせて、彩度の高い EC 色（赤やオレンジのセール色）を主役にせず、金茶と生成りで「ちゃんとしたもの」の顔を作る。オレンジは告知にだけ差す
• 食べチョクについて: 生産者が直接出品・発送する産直通販。「生産者からチョクでお届け。」がタグライン。商品と同じ数だけ生産者の顔が並ぶため、カードには産地名（長野県 青森県）とレビュー語（嬉しい すごい）のチップが多く付く
• 密度: 高い。商品グリッド、絞り込みチップ、産地チップ、レビュー感情チップが同居する。本文 14px / 行間 1.5 で情報量を優先している
• キーワード: 金茶 #cab270、生成り #f5f1eb、明朝の見出し、radius 4px、px 指定の字間、影ほぼ無し
• 特徴:
  • 主色が 2 段の金。面には #cab270（Gold-70）、文字には #9f8745（Gold-60） と役割が分かれている。金の上には必ず白文字を置く
  • radius 4px が既定。CSS 出現 149 回で最多。次が 50%（105 回、アイコン円）、8px（38 回）、16px（38 回、チップ）。ボタンは 4px の浅い角丸で、ピルはチップ・バッジ専用
  • 影をほとんど使わない。box-shadow の宣言は全 CSS で 12 個しかなく、うち 3 個は Bulma 既定の 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1)。階層は面色（生成り #f5f1eb / 灰 #f2f2f2 / #e9e9e9）で作る
  • letter-spacing が px 指定。.4px .5px .15px .25px .1px の 5 段階を、フォントサイズごとに割り当てている。em ではないので、サイズを変えると字間比率が崩れる
  • font-feature-settings は normal。palt を使わない
  • CSS フレームワークは Bulma（rgba(10,10,10,.1) の影と #ffdd57 が痕跡）。ただし色・角丸はほぼ全部上書きされている
  • ブレイクポイントは 768/769px の 1 本。min-width: 769px が 421 回、max-width: 768px が 284 回。他は 960/961px が 10 回程度

2. Color Palette & Roles

地は #ffffff（pageBackground.resolved = rgb(255,255,255) / 根拠 html）。トップ・一覧ページとも同じ。

Brand（Primary Gold）

--Color-Primary-Gold-* の 13 段スケール。数字が大きいほど明るい（0 = 黒、100 = 白）。

#f5f3e9 も実測で 34 回現れる（「すべての商品を見る」「すべての生産者を見る」の面、SNS ブロックの 5px 罫）。Gold-95 とは別値の生成りで、トップページ専用の top.css 側で定義されている。

Accent（告知・注意）

Neutral（--Color-Gray-*）

実測では #e9e9e9（109 回）も多用され、サイズチップ（約1.8kg 約5kg）の面と罫に使われる。#403a39（濃い茶褐色）はヘッダーのアイコンバッジ。

面色のまとめ

白 #ffffff → 生成り #f5f1eb / #f5f3e9 → 灰 #f9f9f9 → #f2f2f2 → #e9e9e9 → #ededed の 6 段。生成りは「和・贈答」の面、灰は「機能」の面という使い分け。

3. Typography Rules

3.1 和文フォント

• ゴシック体: ヒラギノ角ゴ Pro（"Hiragino Kaku Gothic Pro" → "ヒラギノ角ゴ Pro W3"）→ メイリオ → Osaka → MS Pゴシック
  • ProN ではなく Pro。旧字体の字形（辻 葛 等）が JIS90 系になる。Apple 日本語サイトと同じ選択
• 明朝体: "Noto Serif JP", serif。金色のセクション見出し専用（color: #9f8745 ＋ text-align: center とセットで宣言）

3.2 欧文フォント

• サンセリフ: arial → helvetica → Lucida Grande（和文の後ろ）
• 一部のバッジ・アイコンに Arial, sans-serif 単独指定（22 回）

3.3 font-family 指定

css/* 本文・見出し（サイト全体） */
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
             Meiryo, メイリオ, Osaka, "MS PGothic",
             arial, helvetica, "Lucida Grande", sans-serif;

/* 金色のセクション見出しだけ明朝 */
font-family: "Noto Serif JP", serif;
color: #9f8745;
text-align: center;

/* 一部の小バッジ・数字 */
font-family: Arial, sans-serif;

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

• 和文優先。ヒラギノを先頭に置き、欧文もヒラギノの欧文グリフで組む
• Windows 向けにメイリオ → MS Pゴシックまで下げているレガシー寄りのスタック。ただし先頭がヒラギノなので Mac/iOS では正しく組まれる（メイリオ先頭のスタックとは別物）
• 明朝は Web フォントではなく OS の Noto Serif JP に任せる。未搭載環境では serif（游明朝／ヒラギノ明朝）に落ちる

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

3.5 行間・字間

• 本文の行間: 1.5（14px → 21px）。商品説明は 1.6（14px → 22.4px）

• 見出しの行間: 1.4〜1.5

• 字間: px 指定で 5 段階。CSS 中の出現順に .4px（152 回）／.5px（111 回）／.15px（109 回）／.25px（87 回）／.1px（66 回）／0（47 回）

  px 値	主な適用サイズ	em 換算
  .5px	10〜16px の本文・ラベル	0.031〜0.05em
  .4px	12px のチップ	0.033em
  .25px	14px の商品説明	0.018em
  .15px	16px の見出し	0.009em
  .1px	14px の太字・明朝見出し	0.007em

  小さい文字ほど em 換算で字間が広がる設計（10px で 0.05em、16px で 0.009em）。px のまま移植すると比率が壊れるので、em に換算してから使うこと

3.6 禁則処理・改行ルール

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

• 商品名・生産者名はユーザー入力。カード内は 2 行で省略する前提で組む
• 産地表記（愛知県 名古屋市）は全角スペースではなく半角スペース ＋ 改行で 2 行にする

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* palt を使わない */

• palt を適用しない。代わりに letter-spacing を px で細かく調整している

3.8 縦書き

該当なし。

4. Component Stylings

Buttons

Primary（ログイン / すべての定期便を見る）

• Background: #cab270（Gold-70）
• Text: #ffffff
• Padding: 12px 10px（ヘッダー） ／ 16px（本文中の大ボタン）
• Border Radius: 4px
• Font Size: 14px（小） / 16px（大） ／ Weight: 700 ／ Letter Spacing: .5px
• Shadow: なし

Secondary（新規会員登録 / すべての投稿を見る / カテゴリー一覧を見る）

• Background: #ededed（Gray-90）
• Text: #212121
• 他は Primary と同一（padding / radius / サイズ / ウェイト）
• 形を変えず、面を金 → 灰に落として優先度を下げる

Outline（食べチョクとは？ / 食べチョク基準 / 品質保証について）

• Background: #ffffff ／ Text: #000000
• Border: 1px solid #dddddd ／ Border Radius: 8px
• Padding: 0 20px ／ 16px / 700 / .5px

Text CTA（すべての商品を見る / すべての生産者を見る）

• Background: #f5f3e9（生成り） ／ Text: #000000 ／ Border Radius: 0px
• Padding: 13px 16px ／ 14px / 700 / .5px

Ribbon（初めての方へ）

• Background: #9f8745（Gold-60。文字色として使う金を、ここだけ面に使う）
• Text: #212121 ／ Border Radius: 9px 0 0（左上だけ丸める帯）
• Padding: 8px 8px 8px 12px ／ 14px / 400

Chips / Badges

SNS Buttons

• Background: #ffffff ／ Text: #222222 ／ Border Radius: 30px
• Padding: 6px 6px 6px 18px ／ 13px / 700
• 枠線だけ各 SNS のブランド色：X #000000 ／ Instagram #d92938 ／ Facebook #1877f2 ／ LINE #06c755

Filter Controls（一覧ページ）

• 変更 / 決定: #cab270 塗り・白文字・radius 24px・1px 6px・12px / 600
• リセット: #ffffff 地・#cab270 文字・1px solid #cab270・radius 24px
• 並び替えセレクト: #ffffff ＋ 1px solid #e9e9e9・radius 4px・padding 10px
• 見出し（表示条件 / カテゴリー）: #f5f1eb の面・#212121・radius 0・padding 12px・14px / 600

Tabs（商品 / 生産者）

• 選択: #cab270 塗り・白文字・8px 8px 0 0（上だけ丸める）・padding 12px 52px 10px
• 非選択: #ffffff 地・#9f8745 文字・同じ radius

Pagination

• 現在ページ: #cab270 塗り・白文字・1px solid #cab270・radius 4px・12px / 700
• 他ページ: 透明・#9f8745 文字・1px solid #cab270・radius 4px・12px / 400

Inputs

• Background: #f2f2f2（Gray-95） ／ Text: #000000
• Border Radius: 4px ／ Font Size: 14px ／ line-height: normal
• Placeholder: #b8b8b8（Gray-70）

Cards

• Background: #ffffff ／ Border Radius: 4px または 8px
• Border: 1px solid #e9e9e9
• Shadow: 原則なし。強調したいときのみ 2px 2px 6px rgba(0,0,0,.15)

5. Layout Principles

Radius Scale

Container

• Max Width: 1240px（5 回）／ 1200px（2 回）／ 1000px（1 回）
• 記事系の狭いブロック: 700px / 600px / 500px / 400px

Breakpoints（CSS の実出現）

768/769px の 1 本が実質の分岐点。

6. Depth & Elevation

影の宣言は全 CSS で 12 個しかない。 階層は面色と 1px の罫で作る。

カードに影を付けない。 代わりに 1px solid #e9e9e9 の罫か、生成り #f5f1eb の面で区切る。

7. Do's and Don'ts

Do（推奨）

• 面には #cab270（Gold-70）、文字には #9f8745（Gold-60） を使い分ける。金の面には必ず白文字
• radius は 4px。チップ・バッジだけ 16〜28px のピルにする
• 主 CTA #cab270 / 副 CTA #ededed と、形を変えずに面色だけで優先度を落とす
• 金色のセクション見出しには "Noto Serif JP", serif を当てる（食べチョクらしさの核）
• 面は 白 → 生成り #f5f1eb → 灰 #f2f2f2 / #e9e9e9 の順に重ねる
• letter-spacing はサイズごとに 5 段階（.1px / .15px / .25px / .4px / .5px）。移植するときは em に換算する
• 影を使わず、1px solid #e9e9e9 の罫で区切る
• オレンジ #f45800 は告知（お知らせ）にだけ使う

Don't（禁止）

• 金を面と文字で取り違えない。#9f8745 を大きな面に塗ると重く、#cab270 を白地の文字にするとコントラストが足りない（例外は「初めての方へ」の帯のみ）
• トーナルスケールの向きを間違えない。Gold-70 は Gold-60 より明るい（0 が黒、100 が白）。他システムの「数字が大きいほど濃い」と逆
• ピルをボタンに使わない（ボタンは 4px、ピルはチップ専用）
• カードに影を付けない
• palt を有効にしない（font-feature-settings: normal）
• ヒラギノ角ゴ ProN を指定しない（このサイトは Pro）
• オレンジや赤をセール色として広く使わない（贈答の顔が崩れる）
• 日本語本文に line-height: 1.2 以下を使わない（本文は 1.5、商品説明は 1.6）

8. Responsive Behavior

Breakpoints

タッチターゲット

• ヘッダーの主ボタンは padding: 12px 10px ＋ 14px 行高 ＝ 約 38px。モバイルでは padding: 16px の大ボタン（約 48px）を使う

フォントサイズの調整

• 本文 14px は据え置き（もともと小さめ）。見出し 24px は 18〜20px 相当へ縮める

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #cab270  （面 / Gold-70）
Primary Text:  #9f8745  （文字 / Gold-60）
Accent:        #f45800  （お知らせのみ / Orange-50）
Text Color:    #212121  （補助は #858585）
Background:    #ffffff  （面 #f5f1eb 生成り / #f2f2f2 灰 / 罫 #e9e9e9）
Font:          "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
               Meiryo, メイリオ, Osaka, "MS PGothic",
               arial, helvetica, "Lucida Grande", sans-serif
Serif:         "Noto Serif JP", serif  （金色の見出しのみ）
Body Size:     14px / line-height 1.5 / letter-spacing .5px (0.036em)
Radius:        ボタン 4px / チップ 16〜28px / アウトライン 8px
Shadow:        なし（罫 1px solid #e9e9e9 で代替）
palt:          off

プロンプト例

食べチョクのデザインシステムに従って、産直商品のカードグリッドを作成してください。
- 主 CTA「カートに入れる」は面 #cab270・白文字・radius 4px・16px/700・letter-spacing .5px
- 副ボタン「あとで見る」は同じ形のまま面を #ededed・文字 #212121 に落とす
- セクション見出しは "Noto Serif JP", serif ／ color: #9f8745 ／ 中央揃え
- 商品名は 16px/700/line-height 1.5/letter-spacing .15px、
  生産者名は 14px/400/line-height 1.5/letter-spacing .5px、色は #212121
- 産地チップは #f9f9f9 の地に 1px solid #e9e9e9・radius 28px・14px/700
- レビューの感情チップ（嬉しい・すごい）は #f5f1eb の地に文字 #9f8745・radius 14px・12px/600
- カードに影は付けず、1px solid #e9e9e9 の罫で区切る
- 本文フォントは "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, … （ProN ではない）
- font-feature-settings は normal（palt を使わない）