Komeda (コメダ珈琲店) DESIGN.md

コメダ珈琲店（https://www.komeda.co.jp/）のデザイン仕様書。 実サイトの computed style に基づく。システムフォントのみ使用。

1. Visual Theme & Atmosphere

• デザイン方針: 温かく親しみやすい、街の喫茶店を感じさせるデザイン。ブランドオレンジを効かせつつ、落ち着いた白ベースのレイアウトで情報を整理。サイドバーナビゲーションが特徴的
• 密度: 適度な余白。メニューや店舗情報を見やすく配置し、カフェらしいゆったり感を演出
• キーワード: 温かい、親しみやすい、くつろぎ、街の喫茶店、ホスピタリティ
• 特徴: 純粋な黒 (#000000) ではなく #333333 のソフトブラックを使用。letter-spacing: 0.8px をほぼ全要素にグローバル適用し、ゆったりとした文字間で読みやすさと温もりを演出

2. Color Palette & Roles

Primary（ブランドカラー）

• Brand Orange (#e95513): メインのブランドカラー。ロゴ、リンク、CTA テキスト、アクセントに使用

Accent（アクセント）

• Deep Red (#990d0d): ダークアクセント。フッターや特別セクションの背景に使用
• Warm Beige (#efe8e4): セクション背景。温もりのあるベージュ
• Light Blue (#e4edfc): セクション背景。清涼感のあるライトブルー
• Light Green (#d2eae1): セクション背景。フレッシュなライトグリーン

Neutral（ニュートラル）

• Text Primary (#333333): 本文テキスト（ソフトブラック）
• Text Secondary (#666666): ナビゲーションサブ項目、補足テキスト
• Text Muted (#999999): ラベル、ブランド補足テキスト
• Text Date (#aaaaaa): タイムスタンプ、日付表示
• Background (#fafafa): ページ背景（温かみのあるオフホワイト）
• Surface (#ffffff): カード、CTA ボタン背景
• Border (#e0e0e0): 区切り線

3. Typography Rules

3.1 和文フォント

ゴシック体（デフォルト）:

• ヒラギノ角ゴ ProN（macOS）
• メイリオ（Windows）

3.2 欧文フォント

• サンセリフ: Arial
• 等幅: 使用なし

3.3 font-family 指定

css/* 全体 */
font-family: Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

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

• 欧文フォント（Arial）を先に指定し、数字やアルファベットの表示品質を優先
• macOS の和文フォント（ヒラギノ角ゴ ProN）→ Windows の和文フォント（メイリオ）の順
• Web フォントは使用せず、システムフォントのみで構成。軽量で表示速度が速い
• フォントスタックが非常にシンプルで、環境差異が少ない

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

以下は computed style による実測値

3.5 行間・字間

行間 (line-height) — 実測値:

• body: 24px (16px × 1.5)
• h1: 48px (32px × 1.5)
• h2: 36px (24px × 1.5)
• メニューカテゴリ / input: 40px (16px × 2.5) — タッチターゲット確保
• キャプション: 32px (13px × 2.46) — ラベル用

字間 (letter-spacing) — 実測値:

• グローバル 0.8px: ほぼ全要素に letter-spacing: 0.8px が適用されている
• input のみ normal（ユーザー入力は字間を広げない）

ガイドライン:

• letter-spacing: 0.8px はグローバル適用。見出し・本文・ナビ・フッターすべてに統一
• note のように見出し専用ではなく、コメダはサイト全体で一貫した字間を使用
• この統一された字間が、ゆったりとした喫茶店の雰囲気を文字組みで表現している
• input 要素のみ letter-spacing: normal で、入力時の可読性を優先

3.6 禁則処理・改行ルール

cssword-wrap: break-word;
-webkit-font-smoothing: antialiased;

• word-wrap: break-word で長い URL や英単語の折り返しに対応

3.7 OpenType 機能

css/* 明示的な設定なし */
font-feature-settings: normal;

• palt は適用されていない。letter-spacing: 0.8px のグローバル適用で字間を確保しており、プロポーショナル字詰めは不要
• シンプルなシステムフォント構成のため、高度な OpenType 機能は使用していない

3.8 縦書き

• 該当なし。コメダ珈琲店のサイトは横書きのみ

4. Component Stylings

Buttons

CTA Primary（"一覧へ" 等）

• Background: #ffffff
• Text: #e95513（ブランドオレンジ）
• Padding: 8px 24px
• Border Radius: 24px（pill 形状）
• Font Size: 16px
• Font Weight: 700

CTA Secondary（"店舗を選んで調べる" 等）

• Background: #ffffff
• Text: #333333
• Padding: 8px 24px
• Border Radius: 30px（pill 形状）
• Font Size: 16px
• Font Weight: 700

CTA Ghost（"近くの店舗を表示" 等）

• Background: transparent
• Text: #e95513（ブランドオレンジ）
• Padding: 8px 24px
• Border Radius: 20px
• Font Size: 16px
• Font Weight: 700

Inputs

• Background: #ffffff
• Border: 1px solid #e0e0e0
• Border Radius: 0px
• Padding: 8px 12px
• Font Size: 16px
• Line Height: 40px

Cards

• Background: #ffffff
• Border: 1px solid #e0e0e0
• Border Radius: 8px
• Padding: 24px
• Shadow: 0 2px 4px rgba(0,0,0,0.08)

Navigation（サイドバー）

• Background: #ffffff
• Width: 280px（サイドバー固定幅）
• ロゴ色: #e95513（ブランドオレンジ）
• リンク色: #333333（通常）/ #e95513（ホバー・アクティブ）
• サブリンク色: #666666

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px
• Padding (horizontal): 32px

Grid

• サイドバーナビゲーション + メインコンテンツの2カラム構成
• サイドバー: 280px 固定
• メインコンテンツ: 残り幅

6. Depth & Elevation

• フラットデザイン寄り。影は控えめに使用
• カード要素は薄いボーダー + 軽い影で浮かせる
• 全体的に温かく柔らかい印象を維持するため、影は透明度を高めに設定

7. Do's and Don'ts

Do（推奨）

• テキスト色は #333333（ソフトブラック）を使い、純粋な #000000 を避ける（温かみのある読書体験）
• letter-spacing: 0.8px をグローバルに適用する（コメダの文字組みの特徴）
• ブランドオレンジ #e95513 はリンクや CTA テキストに使い、目を引くアクセントにする
• CTA ボタンは pill 形状（border-radius: 20px 以上）にする
• セクション背景にはベージュ #efe8e4、ライトブルー #e4edfc、ライトグリーン #d2eae1 を使い、温かみのあるバリエーションを出す
• ページ背景は #fafafa（オフホワイト）を使い、純白 #ffffff との差をつける
• システムフォントのみで構成する（Web フォント不要）
• サイドバーナビゲーションのパターンを維持する

Don't（禁止）

• 純粋な #000000 をテキストに使わない（コントラストが強すぎて喫茶店の雰囲気を壊す）
• ブランドオレンジ #e95513 を大面積の背景に使わない（小さなアクセントとして使う）
• letter-spacing を normal にリセットしない（input 要素を除く）
• palt を適用しない（コメダは letter-spacing: 0.8px のグローバル適用で統一）
• 角ばった CTA ボタン（border-radius: 0）を使わない（pill 形状が特徴）
• 冷たい色（濃いブルーやグレー）をメインに使わない（温かみを損なう）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px
• メニューカテゴリの line-height: 40px はタッチ操作を考慮

フォントサイズの調整

• モバイルでは h1 を 24px、h2 を 20px に縮小
• 本文 16px は変更なし

9. Agent Prompt Guide

クイックリファレンス

Brand Color: #e95513（ブランドオレンジ — リンク・CTA・ロゴ）
Deep Red: #990d0d（ダークアクセント）
Text Primary: #333333（ソフトブラック）
Text Secondary: #666666
Text Muted: #999999
Background: #fafafa（オフホワイト）
Surface: #ffffff
Warm Beige: #efe8e4（セクション背景）
Light Blue: #e4edfc（セクション背景）
Light Green: #d2eae1（セクション背景）

Font: Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
Body Size: 16px / line-height: 1.5 / letter-spacing: 0.8px
Heading: weight 700 / letter-spacing: 0.8px / palt: なし
CTA: pill 形状（border-radius: 20-30px）

プロンプト例

コメダ珈琲店のデザインに従って、メニュー一覧ページを作成してください。
- フォント: Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
- テキスト色: #333333（純粋な黒は使わない）
- リンク色: #e95513（ブランドオレンジ）
- 背景: #fafafa、セクション背景: #efe8e4
- 全要素に letter-spacing: 0.8px を適用
- CTA ボタン: 白背景にオレンジテキスト、pill 形状（radius 24px）
- カード: 白背景、8px 角丸、軽い影
- サイドバーナビゲーション + メインコンテンツの2カラム構成