食べログ DESIGN.md

食べログ（https://tabelog.com/）のデザイン仕様書。 実サイトの computed style に基づく。CSS Custom Properties は使用していない従来型のCSS設計。

1. Visual Theme & Atmosphere

• デザイン方針: 情報密度が高く、テキスト中心の実用的なグルメ・レビューポータル。スコア（評価点）が主要なナビゲーション要素
• 密度: 高密度。body 12px を基本とし、一覧ページに多くの店舗情報を詰め込む構成
• キーワード: 実用的、情報密度、スコア重視、オレンジ、レビュー文化
• 特徴: body 12px という小さめのベースサイズ。メイリオを日本語名で先頭指定。食べログオレンジ #f09000 がブランドカラー。CSS Custom Properties なし

2. Color Palette & Roles

Primary（ブランドカラー）

• 食べログオレンジ (#f09000): ブランドカラー。ロゴ、評価スコア、ハイライトに使用
• Primary Dark (#d07e00): ホバー・プレス時

Semantic（意味的な色）

• Danger (#cc3333): エラー、削除、低評価警告
• Warning (#f09000): 警告・注意（ブランドカラーと兼用）
• Success (#339933): 成功、完了、営業中

Score Colors（評価スコア専用）

• Score High (#f09000): 高評価（3.5以上）
• Score Mid (#996600): 中評価
• Score Low (#666666): 低評価・未評価

Neutral（ニュートラル）

• Text Primary (#595960): 本文テキスト
• Text Heading (#333333): 見出し・店名
• Text Secondary (#999999): 補足テキスト、メタ情報
• Text Disabled (#cccccc): 無効状態のテキスト
• Border (#dddddd): 区切り線、テーブルの枠
• Border Strong (#cccccc): 強調ボーダー
• Background (#ffffff): ページ背景
• Background Secondary (#f5f5f5): セクション背景、ストライプ行
• Surface (#ffffff): カード、モーダル等の面

3. Typography Rules

3.1 和文フォント

• ゴシック体: メイリオ, Meiryo, ヒラギノ角ゴシック, "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"

特徴: 日本語名を先に指定する旧来の慣習に従っている（「メイリオ」が先、「Meiryo」が後）

3.2 欧文フォント

• サンセリフ: sans-serif（generic family のみ、明示的な欧文フォント指定なし）

3.3 font-family 指定

css/* 本文（body） */
font-family: メイリオ, Meiryo, "Hiragino Sans", ヒラギノ角ゴシック, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;

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

• メイリオ（日本語名）を最優先 — Windows 環境での表示を重視
• Meiryo（英語名）がフォールバック
• macOS 向けに Hiragino Sans 系を配置
• 最後に generic sans-serif

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

3.5 行間・字間

• 本文の行間 (line-height): 1.4（16.8px / 12px）。日本語としてはやや狭め
• 見出しの行間: 1.0（見出しサイズと同値の line-height）
• 本文の字間 (letter-spacing): normal（明示指定なし）
• 見出しの字間: normal

ガイドライン:

• body 12px + line-height 1.4 は情報密度を優先した設計
• 日本語の可読性としてはやや狭いが、一覧ページの情報量を重視

3.6 禁則処理・改行ルール

css/* 食べログの実装 */
word-break: break-all;
overflow-wrap: break-word;

3.7 OpenType 機能

cssfont-feature-settings: normal;  /* palt 未使用 */

• palt は使用していない（本文 12px では効果が薄いため合理的）

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary（CTA）

• Background: #f09000
• Text: #ffffff
• Padding: 8px 16px
• Border Radius: 3px
• Font Size: 12px
• Font Weight: 700

Secondary

• Background: transparent
• Text: #f09000
• Border: 1px solid #f09000
• Padding: 8px 16px
• Border Radius: 3px

Rating Badge（評価バッジ）

• Background: #ffffff
• Text: #f09000（高評価時）
• Font Size: 16px
• Font Weight: 700
• 星マーク: #f09000（塗り）/ #dddddd（空）

Inputs

• Background: #ffffff
• Border: 1px solid #cccccc
• Border (focus): 1px solid #f09000
• Border Radius: 3px
• Padding: 6px 8px
• Font Size: 12px
• Height: 30px

Cards（店舗カード）

• Background: #ffffff
• Border: 1px solid #dddddd
• Border Radius: 0px
• Padding: 12px
• Shadow: none（フラットなデザイン）

5. Layout Principles

Spacing Scale

Container

• Max Width: 980px
• Padding (horizontal): 0px（コンテナ幅固定）

Grid

• Columns: 可変（一覧ページは1カラム〜2カラム）
• Gutter: 12px

6. Depth & Elevation

食べログは基本的にフラットデザインで、shadow の使用は控えめ。ボーダーで区切る設計。

7. Do's and Don'ts

Do（推奨）

• フォントは メイリオ → Meiryo → Hiragino の順でフォールバックを指定する
• 評価スコアには #f09000 を使用し、数値は太字で目立たせる
• 情報密度を維持しつつ、12px + line-height 1.4 で統一する
• ボーダー #dddddd で要素を区切るフラットなレイアウトを使う

Don't（禁止）

• body のフォントサイズを 12px から変更しない（情報密度が崩れる）
• 評価スコアに #f09000 以外の色を使わない
• CSS Custom Properties を追加しない（既存設計に合わない）
• 角丸を大きくしない（3px 以下を維持）
• 過度な shadow を使わない（フラットデザインを維持）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（モバイル時）

フォントサイズの調整

• モバイルでも body 12px を維持（情報密度優先の設計思想）

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #f09000
Text Color: #595960
Heading Color: #333333
Background: #ffffff
Font: メイリオ, Meiryo, "Hiragino Sans", ヒラギノ角ゴシック, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif
Body Size: 12px
Line Height: 1.4
Border: #dddddd
Score Color: #f09000

プロンプト例

食べログのデザインシステムに従って、レストラン一覧ページを作成してください。
- ブランドカラー: #f09000（食べログオレンジ）
- フォント: メイリオ, Meiryo, "Hiragino Sans", sans-serif
- 本文: 12px / line-height: 1.4 / color: #595960
- 見出し: 600-700 / color: #333333
- 評価スコア: 16px / 700 / color: #f09000
- ボーダー: #dddddd
- 角丸: 3px
- レイアウト: フラット、shadow なし、ボーダー区切り