PostCoffee（ポストコーヒー） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 出典: https://postcoffee.co/（2026-07-01 取得）

1. Visual Theme & Atmosphere

• デザイン方針: クリーンで明るい、ポップで親しみやすい D2C スペシャルティコーヒー EC。白基調に鮮やかなブランドカラーを差し色として効かせる
• 密度: 商品グリッド中心の EC 型。カード（商品）を等間隔に並べ、余白は詰めすぎず広すぎない実用的な密度
• キーワード: Clean White / Vivid Green Accent / Playful D2C / Product Grid / Diagnosis-driven
• 特徴: ページ背景は純白 #ffffff、セクションの区切りに極薄グレー #fafafa / #f5f5f7 を使う。ブランドの主役は鮮やかなグリーン #4cc764（「New」バッジ・診断導線）。レビュー星は温かみのあるイエロー #ffc93f、サブスク導線にはオレンジ #ffa500 を使い、ポップで元気な印象を作る。上部の告知バーは鮮やかなブルー #306fdc。CTA・バッジはすべて丸い（radius 16px の角丸 or pill）。フォントは欧文優先の Helvetica Neue + ヒラギノ角ゴのシステムフォントスタック（Webフォント非依存で高速）

2. Color Palette & Roles

Primary（ブランドカラー）

• Brand Green (#4cc764): メインのブランドアクセント。「New」バッジ、コーヒー診断の訴求、アクティブ状態、成功表現に使用。出現頻度が最も高いブランド色
• Brand Green Dark (#3fae55): グリーンのホバー・プレス時（実測値からの派生。原色をやや暗く）

Accent（アクセントカラー）

• Rating Yellow (#ffc93f): レビュー評価の星（★4.5 等）、ハイライト。温かみのあるイエロー
• Subscribe Orange (#ffa500): サブスク導線 CTA（「今すぐ始める」）、HOW TO USE 系の強調。行動を促す暖色アクセント
• Announce Blue (#306fdc): ページ最上部の告知バー背景（「15:00までのご注文で当日発送！」等）
• Sale Red (#e10112): セール・在庫僅少などの強い注意喚起（minor accent）
• Pop Pink (#ff3399): 限定・キャンペーン用のポップな差し色（minor accent）

Semantic（意味的な色）

• Danger (#e10112): エラー、削除、在庫警告
• Warning (#ffa500): 警告、注意喚起（暖色）
• Success (#4cc764): 成功、完了、有効（ブランドグリーンと共用）

Neutral（ニュートラル）

• Text Primary (#000000): 本文・見出しテキスト（PostCoffee は本文に純黒 #000 を実際に使用している。EC のクリーンな印象を優先）
• Text Dark (#1d1d1f): 濃色バッジ・パネルの背景（「まもなく終売」バッジ等のダークチップ）
• Text Muted (#777777): 補足テキスト、ロースター名、価格の g 表記
• Text Disabled (#dfdfdf): 無効状態・レビュー無しラベル（NO REVIEWS）
• Border (#efefef): キーワードチップ・カードの枠線
• Divider (#e2e2e2): 区切り線
• Background (#ffffff): ページ背景（純白）
• Surface Alt (#fafafa): 商品カード・セクションの薄いグレー面（最も広く使われる面色）
• Surface Alt 2 (#f5f5f7): 特集セクションの背景（やや濃いグレー）
• Panel Dark (#1d1d1f): ダークパネル・ダークチップの背景

3. Typography Rules

3.1 和文フォント

• ゴシック体: "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo
• Web フォントは読み込まず、OS 標準の和文ゴシックにフォールバックする設計。macOS はヒラギノ、Windows はメイリオで表示される
• 明朝体は不使用

3.2 欧文フォント

• サンセリフ: "Helvetica Neue", Arial（和文より先に指定＝欧文優先スタック）
• 等幅: 明示指定なし（コード表示は想定されていない EC サイト）
• 一部の 404 系ボタンにのみ Roboto（Material UI 由来）が混在するが、主要導線には使われない

3.3 font-family 指定

css/* サイト全体（body から継承） */
font-family: "Helvetica Neue", Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Sans",
  "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;

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

• 欧文優先スタック: Helvetica Neue → Arial を先頭に置き、欧文グリフを Helvetica Neue で表示する
• 和文は「ヒラギノ角ゴ ProN W3」を先に指定し、macOS で W3（細め）ウェイトを優先。Windows では メイリオ
• generic family は sans-serif
• Webフォントに依存しないため表示が高速で、環境ごとにネイティブフォントで組まれる

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

3.5 行間・字間

• 本文の行間 (line-height): 1.5（body 既定 13px→19.5px）。説明文は 2.0（14px→28px）と広めに取る
• 見出しの行間: 1.5（40px→60px、58px→87px、26px→39px。すべて 1.5 で統一）
• 本文の字間 (letter-spacing): normal（本文は字間を詰めない）
• バッジ・CTA の字間: 0.145em 前後（11px に 1.6px）。小さい英字ラベルを広げて読みやすく
• チップ・告知の字間: 0.1em（14px に 1.4px、12px に 1.2px）

ガイドライン:

• 見出しはすべて weight 700（太字）で、はっきりとした EC らしいメリハリを出す
• 本文は weight 400、価格・商品名・チップは weight 700
• 小さい英字ラベル（バッジ・CTA）には letter-spacing 0.1〜0.15em を付けて視認性を上げる
• 説明文だけ line-height 2.0 と広く取り、それ以外は 1.5 に統一

3.6 禁則処理・改行ルール

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

禁則対象:

• 行頭禁止: ）」』】〕〉》」】、。，．・：；？！
• 行末禁止: （「『【〔〈《「【

3.7 OpenType 機能

cssfont-feature-settings: normal; /* palt・kern は使用しない */

• PostCoffee は palt（プロポーショナル字詰め）を使用していない（全要素で font-feature-settings: normal）
• システムフォント（ヒラギノ/メイリオ）のデフォルト字送りで組む

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（ダーク pill / 診断導線）

• Background: #000000
• Text: #ffffff
• Padding: 10px 16px 9px
• Border Radius: 16px
• Font Size: 11px
• Font Weight: 700
• Letter Spacing: 0.145em
• Shadow: 0 0 5px rgba(0,0,0,0.1)

Brand CTA（グリーン）

• Background: #4cc764
• Text: #ffffff
• Border Radius: 16px（角丸）〜 pill
• Font Weight: 700
• 用途: ブランドを前面に出す主要導線（診断開始・登録）

Subscribe CTA（オレンジ pill）

• Background: #ffa500
• Text: #ffffff
• Border Radius: 100px（pill）
• Font Weight: 700
• 用途: サブスク申込（「今すぐ始める」）

Round Outline（白 pill / ボーダー）

• Background: #ffffff（または #000000）
• Text: #000000（黒地なら #ffffff）
• Border: 1px solid #ffffff（反転時）
• Padding: 1px 20px 0
• Border Radius: 22px（pill）
• Font Size: 14px
• Font Weight: 600
• 用途: 「すべてのブランドを見る」等

Keyword Chip（検索キーワード）

• Background: #ffffff
• Text: #000000
• Border: 1px solid #efefef
• Padding: 3px 16px 2px
• Border Radius: 16px
• Font Size: 14px
• Font Weight: 700
• Letter Spacing: 0.1em
• 用途: 「フルーティー」「デカフェ」等のタグ

Inputs

• Background: #ffffff
• Border: 1px solid #efefef
• Border (focus): 1px solid #4cc764（ブランドグリーン）
• Border (error): 1px solid #e10112
• Border Radius: 8px
• Padding: 12px 16px
• Font Size: 14px

Cards

• Background: #fafafa（商品カードの薄グレー面。白背景から浮かせる）
• Border: なし（薄グレー面で区別）／必要時 1px solid #efefef
• Border Radius: 8px
• Padding: 16px
• Shadow: 0 0 5px rgba(0,0,0,0.1)（軽く浮かせる場合）

Badges

New Badge（ブランドグリーン）

• Background: #4cc764
• Text: #ffffff
• Border Radius: 4px（or pill）
• Font Size: 10–11px
• Font Weight: 700

Rating Badge（イエロー）

• Background: #ffc93f
• Text: #000000（or #ffffff）
• 用途: ★4.5 等の評価表示

Dark Chip（終売・限定）

• Background: #1d1d1f
• Text: #ffffff
• Border Radius: 4px
• Font Size: 10–11px
• Font Weight: 700
• 用途: 「まもなく終売」等

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px
• Padding (horizontal): 16px（モバイル）〜 24px（デスクトップ）

Grid

• 商品グリッド: 4カラム（デスクトップ）、2〜3カラム（タブレット）、2カラム（モバイル）
• Gutter: 16px

6. Depth & Elevation

• PostCoffee の影は控えめ。基本は 0 0 5px rgba(0,0,0,0.1)（ぼかし 5px の淡い全方向シャドウ）を CTA・矢印に使う

7. Do's and Don'ts

Do（推奨）

• ページ背景には純白 #ffffff を使い、セクション区切り・カード面に #fafafa / #f5f5f7 を使う
• ブランドアクセントは鮮やかなグリーン #4cc764 を主役にする（New バッジ・診断導線・成功表現）
• レビュー星はイエロー #ffc93f、サブスク導線はオレンジ #ffa500 の pill を使う
• CTA・バッジ・チップはすべて丸い形状にする（radius 16px の角丸、または 100px の pill）
• 見出しは weight 700 で太くはっきりと。商品名・価格・チップも 700
• 小さい英字ラベル（バッジ・CTA）には letter-spacing 0.1〜0.15em を付ける
• フォントは欧文優先の "Helvetica Neue", Arial, "ヒラギノ角ゴ ProN W3", ... スタックを使う（Webフォント非依存）

Don't（禁止）

• ブランドグリーンとオレンジ・イエローの役割を入れ替えない（緑＝ブランド/New、黄＝評価、橙＝サブスク）
• CTA を角ばった四角にしない（丸み radius 16px 以上 or pill が必須）
• 見出しに weight 400 を使わない（EC のメリハリが失われる）
• palt / kern を font-feature-settings に設定しない（システムフォントの既定字送りで組む）
• Webフォントを重く読み込まない（表示速度優先の設計思想を守る）
• 告知バーのブルー #306fdc を本文リンク色として乱用しない（最上部の帯専用）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）
• CTA ボタンは十分な padding（10px 16px 以上）を確保

フォントサイズの調整

• Hero Heading: デスクトップ 58px → モバイル 32px 程度に縮小
• Section Heading: デスクトップ 40px → モバイル 24px 程度に縮小
• 本文は 13〜14px を維持

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #4cc764  (Brand Green)
Rating Yellow: #ffc93f
Subscribe Orange: #ffa500
Announce Blue: #306fdc
Text Color: #000000
Text Muted: #777777
Background: #ffffff
Surface Alt: #fafafa
Border: #efefef
Font: "Helvetica Neue", Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Sans",
  "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif
Body Size: 13px
Line Height: 1.5 (説明文は 2.0)
Heading Weight: 700
CTA Shape: rounded 16px / pill 100px

プロンプト例

PostCoffee のデザインシステムに従って、コーヒー商品一覧ページを作成してください。
- 背景色: #ffffff（純白）、カード面は #fafafa
- ブランドアクセント: #4cc764（New バッジ・診断 CTA）
- 商品カード: radius 8px、New バッジは #4cc764 白文字、評価星は #ffc93f
- サブスク CTA: #ffa500 の pill（radius 100px）、白文字、weight 700
- 見出し: weight 700、line-height 1.5
- 本文: 13〜14px、weight 400、line-height 1.5
- キーワードチップ: 白地 + 1px solid #efefef、radius 16px、weight 700
- フォント: 上記 Helvetica Neue + ヒラギノ角ゴのシステムスタック