猿田彦珈琲（Sarutahiko Coffee） DESIGN.md

猿田彦珈琲（https://sarutahiko.co/）のデザイン仕様書。 恵比寿発のスペシャルティコーヒー専門店。EC は Shopify ベース。 コーヒーブラウンとソフトブルーのアクセントで、温かみのあるクラフト感を表現。 実サイトの computed style 実測（2026-05-22 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 温かみのあるクラフト志向。コーヒーブラウンとソフトブルーの組み合わせで、専門店の落ち着きとカジュアルな親しみやすさを両立
• 密度: EC サイトとしては標準的なグリッド密度。商品カード間は 8px（デスクトップ）/ 4px（モバイル）とタイトだが、セクション間には十分な余白
• キーワード: クラフト、コーヒーブラウン、ソフトブルー、Shopify EC、Zen Kaku Gothic New、温かみ
• 特徴:
  • 和文フォントに Zen Kaku Gothic New（Google Fonts 相当の ZenKakuGothicNew-Regular）を使用。角の丸い柔らかなゴシック体で、手仕事のぬくもりを感じさせる
  • 欧文ディスプレイに brothers（Adobe Fonts）を使用。ナビゲーションカテゴリラベルや言語切替に限定的に使用
  • ブランドアクセントは #c8dce6（ソフトブルー）。Shopify テーマの --color-base-accent-1 に設定。フッター背景、ナビゲーションカテゴリの active 背景、検索ボタンに使用
  • バッジ・ラベルは #9d826e（コーヒーブラウン）。「NEW」「送料無料」等のタグに使用。ブランドの世界観を象徴する色
  • 価格は #663300（ダークブラウン） で表示。コーヒーの焙煎色を連想させる
  • ボタンは border-radius: 0（直角、Shopify テーマ設定 --buttons-radius: 0px）。バッジは pill 型（--badge-corner-radius: 4.0rem）
  • 人気ランキングバッジに 金・銀・銅（#ffc107 / #9e9e9e / #b87333）を使用
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand / Accent

• Soft Blue (#c8dce6): メインのアクセントカラー。Shopify テーマ変数 --color-base-accent-1 / --color-base-background-2。フッター背景、カテゴリナビの active 背景、検索ボタン、トグルボタンに使用
• Coffee Brown (#9d826e): バッジ・ラベル色。「NEW」「送料無料」等の商品タグ背景。ブランドの核となるブラウン
• Price Brown (#663300): 価格表示専用のダークブラウン。コーヒーの深煎りを連想
• Tag Light Blue (#e9f1f5): キーワードタグの背景色。「父の日」「飲み比べ」等のフィルタータグに使用

CTA / Buttons

• Primary CTA: 背景 #121212 / 文字 #ffffff / radius 0 / padding 調整 / font-size 15px / weight 500 / letter-spacing 1px
• Outline CTA: 背景 transparent / ボーダー 1px solid #000000 / shadow 0 2px 2px rgba(0,0,0,0.25) / radius 0
• Megamenu Item: ボーダー 1px solid #dfdfdf / padding 10px 20px
• Wishlist: #ff4500（オレンジレッド）— ウィッシュリストのハートアイコン

Neutral

Semantic / Ranking

• Gold (#ffc107): 人気ランキング No.1 バッジ
• Silver (#9e9e9e): 人気ランキング No.2 バッジ
• Bronze (#b87333): 人気ランキング No.3 バッジ

3. Typography Rules

3.1 和文フォント

• ゴシック体: ZenKakuGothicNew-Regular（Zen Kaku Gothic New）を最優先。角の丸いソフトなゴシック体で、クラフト感と親しみやすさを演出
• フォールバック: YuGothic → "Hiragino Kaku Gothic Pro" → "Meiryo UI" → Meiryo → sans-serif
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• ディスプレイ: brothers（Adobe Fonts）— ナビゲーションカテゴリラベル、言語切替（JP/EN）に限定使用
• 本文: Zen Kaku Gothic New の欧文グリフがそのまま使われる

3.3 font-family 指定

css/* 本文・見出し */
font-family: ZenKakuGothicNew-Regular, YuGothic, "Hiragino Kaku Gothic Pro", "Meiryo UI", Meiryo, sans-serif;

/* ナビゲーション・ディスプレイ */
font-family: brothers, sans-serif;

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

• 和文は ZenKakuGothicNew-Regular を先頭に、YuGothic → ヒラギノ角ゴ → メイリオの順でフォールバック
• brothers は Adobe Fonts 限定。ライセンス外では sans-serif にフォールバック

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

3.5 行間・字間

• 本文の行間 (line-height): 1.5
• 見出しの行間: 明示的な指定なし（inherit）
• 本文の字間 (letter-spacing): 0.043em（0.6px / 14px）— 和文としてはやや広め
• 見出しの字間: 0.05em（0.65px / 13px）
• ナビゲーションの字間: 0.06em（0.9px / 15px）— かなり広め、ゆったりとした印象

ガイドライン:

• 全体的に letter-spacing が広めに設定されており、開放的でクラフト的な印象を生んでいる
• 本文の line-height: 1.5 は日本語としては標準的。EC サイトの商品説明文に適切な値
• weight 500 が本文のベース。700 は見出し・ナビ・価格のみ

3.6 禁則処理・改行ルール

css/* Shopify テーマのデフォルト設定 */
word-break: break-all;
overflow-wrap: break-word;

3.7 OpenType 機能

• palt: 明示的な指定なし。Zen Kaku Gothic New はプロポーショナルメトリクスを内蔵しており、デフォルトで文字幅が調整される
• kern: 明示的な指定なし

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary（Solid）

• Background: #121212
• Text: #ffffff
• Padding: 調整値
• Border Radius: 0px（--buttons-radius: 0px）
• Font Size: 15px
• Font Weight: 500
• Letter Spacing: 1px

Secondary（Outline）

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Box Shadow: 0 2px 2px rgba(0,0,0,0.25)
• Border Radius: 0px

Variant Pill（バリアント選択）

• Border Radius: 40px（--variant-pills-radius: 40px）
• Pill 型の丸みのある選択ボタン

Badges

Product Badge（NEW / 送料無料）

• Background: #9d826e
• Text: #ffffff
• Border Radius: 4.0rem（--badge-corner-radius）— pill 型

Ranking Badge

• Gold (No.1): #ffc107
• Silver (No.2): #9e9e9e
• Bronze (No.3): #b87333

Keyword Tag

• Background: #e9f1f5
• Text: #000000
• Font Size: 10–12px

Inputs

• Background: #ffffff
• Border: 1px solid #dfdfdf
• Border Radius: 5px（--inputs-radius は 0px だが実測は 5px）
• Font Size: 14px

Cards（Product）

• Background: #ffffff
• Border: なし（画像 + テキスト構成）
• Image Placeholder: #e0e0e0
• Grid Gap: 8px（デスクトップ）/ 4px（モバイル）

5. Layout Principles

Spacing Scale

Container

• Max Width: Shopify テーマ依存（標準的な 1200px 前後）

Grid

• 商品一覧: 4カラム（デスクトップ）/ 2カラム（モバイル）
• Grid Gap: 8px（デスクトップ）/ 4px（モバイル）

6. Depth & Elevation

特徴:

• 全体的にフラットなデザイン。商品カードに shadow はなく、ボーダーも最小限
• メガメニューアイテムは 1px solid #dfdfdf のボーダーで区切る
• ボタンの shadow（0 2px 2px rgba(0,0,0,0.25)）が唯一の明示的なエレベーション

7. Do's and Don'ts

Do（推奨）

• #c8dce6（ソフトブルー）をアクセントとして広い面に使う（フッター、カテゴリナビ）
• #9d826e（コーヒーブラウン）はバッジ・ラベルの小面積に限定する
• 価格は必ず #663300 で表示する
• ボタンは直角（radius: 0）、バッジは pill 型（radius: 4rem）と使い分ける
• Zen Kaku Gothic New の柔らかさを活かし、letter-spacing を 0.04em 以上に設定する
• 商品画像は余白少なめのタイトグリッドで配置する

Don't（禁止）

• ブランドのブルー #c8dce6 を CTA ボタンの背景に使わない（CTA は #121212 の黒系）
• #9d826e を本文テキスト色に使わない（バッジ専用）
• ボタンに border-radius を付けない（テーマ設定で 0px）
• 価格を #000000 で表示しない（必ず #663300 のブラウン）
• brothers フォントを本文に使わない（ナビゲーション・ディスプレイ専用）
• line-height を 1.5 未満にしない

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG 基準）

フォントサイズの調整

• モバイルでも本文 14px を維持（EC サイトのため情報密度を保つ）
• 商品グリッドは 2 カラムに縮小、ギャップは 4px に狭める

グリッドの変化

• デスクトップ: 4 カラム / gap 8px
• モバイル: 2 カラム / gap 4px

9. Agent Prompt Guide

クイックリファレンス

Brand Accent: #c8dce6 (Soft Blue)
Badge Color: #9d826e (Coffee Brown)
Price Color: #663300 (Dark Brown)
CTA Background: #121212
Text Color: #000000
Background: #ffffff
Footer BG: #c8dce6
Font Body: ZenKakuGothicNew-Regular, YuGothic, "Hiragino Kaku Gothic Pro", "Meiryo UI", Meiryo, sans-serif
Font Display: brothers, sans-serif
Body Size: 14px / Weight 500
Line Height: 1.5
Letter Spacing: 0.043em
Button Radius: 0px
Badge Radius: 4.0rem

プロンプト例

猿田彦珈琲のデザインシステムに従って、商品一覧ページを作成してください。
- 商品カードは 4 カラムグリッド（gap: 8px）
- フォント: ZenKakuGothicNew-Regular, YuGothic, "Hiragino Kaku Gothic Pro", "Meiryo UI", Meiryo, sans-serif
- 本文: 14px / weight 500 / line-height 1.5 / letter-spacing 0.043em
- 価格: 16px / weight 700 / color #663300
- 「NEW」バッジ: bg #9d826e / color white / border-radius 4rem
- CTA ボタン: bg #121212 / color white / radius 0 / font-size 15px
- カテゴリナビ: bg #c8dce6 / font brothers (sans-serif)

Adobe Fonts 代替