# 上間沖縄天ぷら店 営業資料デザイン仕様書

**バージョン:** v1.0
**作成日:** 2026年4月6日
**用途:** BtoB法人営業用プレゼンテーション資料（印刷前提）
**ベースファイル:** `パチンコ遊技場向け_提案資料.html`

---

## 1. 基本フォーマット

| 項目 | 仕様 |
|------|------|
| 形式 | HTMLインフォグラフィック（1ファイル完結） |
| 用紙サイズ | A4横（297mm × 210mm） |
| 印刷設定 | 横向き / 背景グラフィック: ON / 余白: なし |
| ページ区切り | `page-break-after: always`（最終スライドは `avoid`） |
| 設計思想 | **白ベース・印刷コスト重視**。塗りつぶしカラーを最小限にし、インク使用量を抑える |

---

## 2. カラーパレット

### ブランドカラー（上間）
| 名称 | HEXコード | 用途 |
|------|-----------|------|
| 上間レッド | `#D32F2F` | ヘッダー上部カラーバー |
| 上間イエロー | `#FFC107` | フッター下部カラーバー |

### UIカラー
| CSS変数 | HEXコード | 用途 |
|---------|-----------|------|
| `--navy` | `#1A2540` | スライドタイトル、見出し、強調テキスト |
| `--navy-light` | `#2C3E5A` | サブ見出し |
| `--gold` | `#B8912A` | アクセント、タイトル装飾（`.accent`） |
| `--gold-dark` | `#8A6B1E` | 強調テキスト（`.em-gold`） |
| `--gold-light` | `#D4A843` | — |
| `--gold-bg` | `#FBF7EE` | コールアウト背景、ゴールド系カード背景 |
| `--text` | `#1A1A2E` | 本文テキスト |
| `--text-sub` | `#5A6270` | 補足テキスト、フッター |
| `--border` | `#D8D8D8` | カード・テーブル罫線 |
| `--border-light` | `#E8E8E8` | テーブル行間罫線、フッター上部罫線 |
| `--bg` | `#FFFFFF` | スライド背景 |
| `--bg-light` | `#F7F7F9` | テーブルヘッダー背景、会社概要ラベル列背景 |
| `--red` | `#C62828` | アラート系タグ |
| `--red-bg` | `#FFF5F5` | アラート系タグ背景 |
| `--green` | `#2E7D32` | STEP1系カード枠、ポジティブ系タグ |
| `--green-bg` | `#F2F9F2` | ポジティブ系タグ背景 |
| `--blue` | `#1565C0` | STEP2系カード枠、情報系タグ |
| `--blue-bg` | `#F0F6FF` | 情報系タグ背景 |

---

## 3. ブランドカラーバー（全スライド共通）

```css
.slide {
  border-top: 10px solid #D32F2F;    /* 上間レッド */
  border-bottom: 10px solid #FFC107;  /* 上間イエロー */
}
```

- 全スライドの上辺に赤、下辺に黄色のカラーバーを配置
- 太さは **10px**（印刷時の余白カットを考慮し、4pxではなく10pxを採用）
- カラーバーはスライドの `border` として実装（疑似要素ではない）

---

## 4. フォント

| 用途 | フォント | ウェイト |
|------|----------|----------|
| 見出し・タイトル | Noto Serif JP | 700, 900 |
| 本文・UI | Noto Sans JP | 300, 400, 500, 700, 900 |

### Google Fonts 読み込み
```html
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=Noto+Serif+JP:wght@700;900&display=swap" rel="stylesheet">
```

---

## 5. フォントサイズ体系

| 要素 | CSSクラス/セレクタ | サイズ | 備考 |
|------|---------------------|--------|------|
| 表紙タイトル | `.cover-content h1` | 2.2em | Noto Serif JP, 900 |
| スライドタイトル | `.slide-title` | 1.9em | Noto Serif JP, 900 |
| サブタイトルバー | `.subtitle-bar` | 0.98em | 左ゴールドボーダー付き |
| カード見出し | `.card h3` | 1.06em | 通常カード。特定スライドで個別調整可 |
| カード本文 | `.card p, .card li` | 0.91em | |
| テーブル | `.tbl` | 0.94em | コンパクトが必要な場合は0.8〜0.82emに個別調整 |
| チェックリスト | `.check-list li` | 0.94em | |
| コールアウト | `.callout` | 0.91em | |
| インサイト | `.insight p` | 0.90em | |
| 補足テキスト | `.text-sm` | 0.91em | |
| 小テキスト | `.text-xs` | 0.81em | |
| タグ | `.tag` | 0.81em | |
| stat-value | `.stat-box .stat-value` | 1.6em | 数字の大きな表示 |
| stat-label | `.stat-box .stat-label` | 0.81em | |
| スライド番号 | `.slide-number` | 11px | |
| フッター | `.slide-footer` | 10px | |

---

## 6. レイアウト構造

### スライド構造
```
┌─ border-top: 10px solid #D32F2F ──────────────────────┐
│                                                         │
│  .slide-header（タイトル + スライド番号）    [ロゴ透かし]  │
│  padding: 18px 36px 0                        右上固定     │
│                                                         │
│  .slide-body（コンテンツ領域）                            │
│  padding: 12px 36px 8px                                  │
│                                                         │
│  .slide-footer（フッター）                                │
│  padding: 10px 36px 16px  ← 印刷見切れ防止で下に余裕     │
│                                                         │
└─ border-bottom: 10px solid #FFC107 ──────────────────┘
```

### フッターの印刷対策
```css
.slide-footer {
  padding: 10px 36px 16px;  /* 下paddingを16pxに設定（印刷余白で見切れ防止） */
}
```

### ロゴ透かし（全スライド共通）
```css
.slide-logo {
  position: absolute;
  top: 16px;
  right: 24px;
  height: 40px;
  opacity: 0.15;
  z-index: 10;
  pointer-events: none;
}
```
- 各スライドのHTMLに `<img class="slide-logo" src="...logo_cropped.png" alt="">` を配置
- 表紙は大きなロゴがあるため透かしは不要

---

## 7. コンポーネント仕様

### 7.1 カード (`.card`)
```css
.card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  background: var(--bg);
}
```
- アクセントカラーの左ボーダーは**使用しない**（`card-accent`クラスは無効化済み）
- ゴールドボーダーカード: `border: 2px solid var(--gold); background: var(--gold-bg);`

### 7.2 テーブル (`.tbl`)
```css
.tbl th {
  background: var(--bg-light);   /* #F7F7F9 */
  color: var(--navy);
  padding: 7px 10px;
  font-weight: 700;
  border-bottom: 2px solid var(--border);
}
.tbl td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-light);
}
```
- 合計行: `.total-row td` — `border-top: 2px solid var(--gold)`, `background: var(--gold-bg)`
- 右寄せ数値: `.num` — `text-align: right; font-variant-numeric: tabular-nums`

### 7.3 タグ (`.tag`)
```css
.tag {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.81em;
  font-weight: 700;
  white-space: nowrap;  /* 改行防止 */
}
```
| バリエーション | 背景 | 文字色 | 枠線 |
|---------------|------|--------|------|
| `.tag-gold` | `--gold-bg` | `--gold-dark` | `#E8D5A0` |
| `.tag-red` | `--red-bg` | `--red` | `#F0C0C0` |
| `.tag-green` | `--green-bg` | `--green` | `#B8D8B8` |
| `.tag-blue` | `--blue-bg` | `--blue` | `#B0C8E8` |

### 7.4 stat-box
```css
.stat-box {
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 8px;
}
```
- `.stat-value`: 大きな数値表示（1.6em, 900ウェイト, `--navy`色）
- `.stat-label`: 補足ラベル（0.81em, `--text-sub`色）

### 7.5 コールアウト (`.callout`)
```css
.callout {
  border: 1px solid #E8D5A0;
  background: var(--gold-bg);   /* #FBF7EE */
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.91em;
}
```

### 7.6 インサイト (`.insight`)
```css
.insight {
  border-left: 3px solid var(--gold);
  background: var(--gold-bg);
  padding: 8px 12px;
  border-radius: 0 4px 4px 0;
}
```

### 7.7 チェックリスト (`.check-list`)
```css
.check-list li::before {
  content: '▶';
  color: var(--gold);
  font-size: 0.81em;
}
```

### 7.8 フローステップ (`.flow`)
```css
.flow-step {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 10px;
  text-align: center;
}
.flow-step .step-num {
  width: 32px; height: 32px;
  background: var(--navy);
  color: #FFF;
  border-radius: 50%;
}
.flow-arrow {
  color: var(--gold);
  font-size: 1.1em;
}
```

### 7.9 ランキングバッジ (`.rank-badge`)
| クラス | 背景色 | 用途 |
|--------|--------|------|
| `.rank-1` | `#FFD700`（金） | 1位 |
| `.rank-2` | `#C0C0C0`（銀） | 2位 |
| `.rank-3` | `#CD7F32`（銅） | 3位 |

---

## 8. 表紙レイアウト

```css
.cover-slide {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.cover-content .logo { height: 200px; }
.cover-content h1 { font-size: 2.2em; font-weight: 900; color: var(--navy); }
.cover-content .cover-sub { font-size: 0.95em; color: var(--text-sub); }
.gold-line { width: 60px; height: 2px; background: var(--gold); margin: 14px auto; }
```

- ロゴは **200px** で大きく表示
- タイトル下にゴールドの区切り線
- サブタイトル → 部署名・日付

---

## 9. 会社概要スライド

- 左カラム: ロゴ（**180px**）＋ 会社情報テーブル
- 右カラム: 製造・供給体制 ＋ お問い合わせカード
- 会社情報テーブルのラベル列: `background: var(--bg-light)`, `font-weight: 700`
- お問い合わせカード: `border: 2px solid var(--navy)`, `border-radius: 8px`

---

## 10. グリッドレイアウト

| クラス | 列数 | 用途 |
|--------|------|------|
| `.two-col` | 2列均等 | メインのコンテンツ分割 |
| `.card-grid-2` | 2列均等 | カード2枚並び |
| `.card-grid-3` | 3列均等 | STEPカード等 |
| gap | 12〜16px | `.two-col`: 16px, `.card-grid`: 12px |

---

## 11. 印刷設定

```css
@media print {
  @page { size: A4 landscape; margin: 0; }
  body { background: white; }
  .slide { margin: 0; box-shadow: none; width: 100%; height: 100vh; }
  .slide:last-child { page-break-after: avoid; }
}
```

### 印刷時の注意事項
- ブラウザの印刷設定で **「背景グラフィック」をON** にすること（カラーバー・タグ背景の印刷に必要）
- 用紙: **A4 / 横向き**
- 余白: **なし**（最小）
- `-webkit-print-color-adjust: exact; print-color-adjust: exact;` で背景色の印刷を強制

### 印刷見切れ対策
| 箇所 | 対策 |
|------|------|
| 上部カラーバー | 10px太で余白カットに耐える |
| 下部カラーバー | 10px太で余白カットに耐える |
| フッターテキスト | `padding-bottom: 16px` で下に余裕を確保 |

---

## 12. ロゴファイル

| 用途 | ファイル | パス |
|------|----------|------|
| 表紙・会社概要（カラー） | `logo_cropped.png` | `上間_経営計画発表会/05_ビジュアル素材/` |
| ダーク背景用（白） | `logo_white.png` | 同上（本仕様では未使用） |

---

## 13. テンプレート構成（推奨スライド順序）

| # | スライド | 目的 |
|---|---------|------|
| 1 | 表紙 | タイトル・ロゴ・日付 |
| 2 | 業界背景・課題提起（データ） | 定量データで課題を可視化 |
| 3 | 現場調査レポート（任意） | 訪問調査の結果。先方への「見てきました」感 |
| 4 | 課題の整理（カード型） | 2〜4つの課題をカードで提示 |
| 5 | 提案内容 | ソリューション＋期待効果 |
| 6 | 導入実績 | 匿名事例＋実データ（伝票ベース） |
| 7 | 導入プラン＋ステップ | STEP1→2→3の段階的導入案 |
| 8 | 料金・納品の流れ | フロー図＋商品一覧＋取引条件 |
| 9 | 会社概要・お問い合わせ | 信頼性＋CTA |

---

## 14. 汎用化ルール

- 特定の取引先名は**匿名**（A様・B様）で表記。営業が口頭で補足
- 特定店舗名・ブランド名は使わず「御社」「遊技場」等の汎用表現を使う
- 現場調査スライドは訪問先に応じて差し替え可能な構造にする
- 取引条件（買取形式・手数料等）の詳細は資料に**記載しない**。商談時に口頭で説明
- ロゴ透かし（右上）は全スライド共通で配置

---

## 15. ファイル命名規則

```
{対象業界}_提案資料.html
```

例:
- `パチンコ遊技場向け_提案資料.html`
- `ホテル向け_提案資料.html`
- `福祉施設向け_提案資料.html`