# DESIGN.md — AppTalentHub プレゼンテーション

> このファイルは AI エージェントが AppTalentHub ブランド準拠のスライド／資料を生成するためのデザイン仕様書です。
> セクションヘッダーは英語、値の説明は日本語で記述しています。
> 形式は [awesome-design-md-jp](https://github.com/kzhrknt/awesome-design-md-jp) の DESIGN.md に準拠。
>
> **対象媒体はスライド（投影・PDF配布）です。** Web UI ではないため、Inputs / Cards / Breakpoints
> など Web 固有のセクションは、スライド版の規定に読み替えています（該当箇所に明記）。
>
> - 実装リファレンス: [`ath-slide-template.html`](https://apptalenthub.co.jp/wp-content/uploads/brand/ath-slide-template.html)（1ファイル完結・オフライン動作）
> - 人間向けの解説: https://apptalenthub.co.jp/brand-guidelines/
> - 素材（ロゴ・キャラクター）: https://apptalenthub.co.jp/brand-assets/

---

## 1. Visual Theme & Atmosphere

- **デザイン方針**: 明快・信頼・非エンプラ。「難しいことを、やさしく見せる」
- **密度**: 低密度。投影されたスライドは「読む」ものではなく「見た瞬間に伝わる」ものとして扱う
- **キーワード**: クリア、フラット、青一色、余白が多い、言い切る
- **やっていること**: 色を2色に絞り、影を一切使わず、1枚あたりの文字量を上限で縛る。装飾ではなく制約でブランドを揃える

---

## 2. Color Palette & Roles

**使う色は2色だけです。** 図やグラフで色数が必要な場合も、この2色の濃淡・グラデーションで表現します。

### Primary（ブランドカラー）

- **Navy / メインブルー** (`#1f5b8c`): 見出し、本文の強調、ボタン、帯。ロゴと同じ色
- **Sky / アクセント** (`#38bdf8`): ラベル（eyebrow）、下線、数字、リンク的な強調
- **Gradient** (`linear-gradient(135deg, #1f5b8c 0%, #38bdf8 100%)`): 表紙、区切り、番号バッジ、`.bar`

### Semantic（意味的な色）

- **Danger / 警告** (`#e11d48`): **事故につながることだけ。** 単なる強調に赤を使わない
  - 警告面: 背景 `#fff5f7` / 文字 `#9f1239` / 左罫 `#e11d48`
- Warning / Success は**定義しない**。色数が増えるため、必要なら文言で表現する

### Neutral（ニュートラル）

- **Text Primary / Ink** (`#12324d`): 本文テキスト。純黒 `#000` は使わない
- **Text Secondary / Sub** (`#5b7a94`): リード文、補足、注釈
- **Border / Line** (`#d6e8f2`): 表の罫線、ページャーの非アクティブ
- **Background（淡）** (`#e8f4f8`): 面の塗り分け、タグ、ゴースト番号バッジ
- **Surface（白）** (`#ffffff`): 本文スライドの基本背景
- **Tint 面**: `linear-gradient(160deg, #f4fbfe 0%, #e8f4f8 100%)`

### 反転時（グラデーション面の上）

- 本文 `#fff` / リード `rgba(255,255,255,.85)` / ラベル `rgba(255,255,255,.75)` / タグ地 `rgba(255,255,255,.18)`

---

## 3. Typography Rules

### 3.1 和文フォント

- **ゴシック体**: ヒラギノ角ゴ ProN → Hiragino Sans → 游ゴシック → Meiryo → Noto Sans JP
- **明朝体**: 使用しない

### 3.2 欧文フォント

- **サンセリフ**: Space Grotesk（500 / 700）— ロゴと同じ書体。Google Fonts から読み込み
- **セリフ / 等幅**: 使用しない

### 3.3 font-family 指定

```css
--jp: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,"Noto Sans JP",sans-serif;
--en: "Space Grotesk";

body { font-family: var(--en), var(--jp); }
```

**フォールバックの考え方**:
- **本仕様では欧文を先に置きます。** awesome-design-md-jp の一般則（和文先行）とは逆で、これは意図的な逸脱です
- 理由: Space Grotesk はロゴの書体そのものであり、数字・英単語・番号バッジに必ず適用したいため
- Space Grotesk は和文グリフを持たないので、日本語は自動的に `--jp` の先頭から解決される（実害なし）
- オフライン会場では Space Grotesk が読み込めず和文フォントで代替されるが、**レイアウトは崩れない**（vw基準のため）

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

サイズは **`vw` 指定**です（投影スクリーンの解像度に依存せず比率を保つため）。px 併記は 1920px 幅換算。

| Role | Class | Size | px@1920 | Weight | Line Height | Letter Spacing |
|------|-------|------|---------|--------|-------------|----------------|
| Display | `h1` | 5.6vw | 107px | 700 | 1.18 | .01em |
| Heading 1 | `h2` | 4vw | 77px | 700 | 1.25 | .01em |
| Heading 2 | `.hero` | 3.6vw | 69px | 700 | 1.4 | .02em |
| List Item | `li` | 2.6vw | 50px | 700 | 1.35 | .02em |
| Body / Lead | `.lead` | 1.8vw | 35px | 500 | 1.7 | .02em |
| Callout | `.callout` | 1.7vw | 33px | 700 | — | .02em |
| Table | `table.tt td` | 1.65vw | 32px | 500 | — | .02em |
| Tag | `.tag` | 1.6vw | 31px | 700 | — | .02em |
| Caption | `.eyebrow` | 1.4vw | 27px | 700 | — | .12em（和文は .06em） |
| Small | `li small` | 1.4vw | 27px | 500 | — | .02em |

- ウェイトは **500 と 700 の2つだけ**。300 や 900 を足さない
- `.eyebrow`（英字ラベル）は `text-transform: uppercase`。`.eyebrow.jp`（和文ラベル）は uppercase を外し、字間を .06em に緩め、色を Navy にする

### 3.5 行間・字間

- **本文（リード）の行間**: `1.7`
- **見出しの行間**: `1.18〜1.4`（大きい文字ほど詰める）
- **箇条書きの行間**: `1.35`
- **字間**: 全体に `letter-spacing: .02em`
- **ラベルの字間**: 欧文 `.12em` ／ 和文 `.06em`

**ガイドライン**:
- スライドは投影距離があるため、Web 本文の推奨（1.7〜2.0）より**見出しは詰め、本文は 1.7 を維持**する
- 字間 .02em は `palt` で詰めたぶんを少し戻して可読性を確保するための値。単独で意味を持つ数字ではないので、`palt` を外すなら 0 に戻す

### 3.6 禁則処理・改行ルール

**スライドでは自動改行に頼りません。** `<br>` で人間が改行位置を決めます。

- `word-break` / `line-break` は**設定しない**（ブラウザ既定のまま）。1行に収まる文字数を前提に組むため、禁則が発火する状況をそもそも作らない
- 見出しは意味の切れ目で `<br>` を入れる（例: `ここに、<br>タイトル。`）
- 上記の理由により、行頭・行末禁止文字のリストは本仕様では規定しない

### 3.7 OpenType 機能

```css
body { font-feature-settings: "palt" 1; letter-spacing: .02em; }
```

- **palt**: 全面に適用。スライドは見出し主体で、かなと約物の空きが目立つため
- **kern**: 明示指定なし（ブラウザ既定に任せる）
- Web 本文と違い、スライドは長文を読ませないので `palt` の全面適用でよい

### 3.8 縦書き

該当なし。

---

## 4. Component Stylings

Web の Buttons / Inputs / Cards に代わり、**スライドの8つの型**が本仕様のコンポーネントです。
テンプレートには8種類が1枚ずつ入っており、必要な型だけ残して使います。

| 型 | 用途 | 指定 | 制約 |
|---|---|---|---|
| A 表紙 | デッキに1枚だけ | `slide grad` | 白ロゴを載せる |
| B メッセージ | いちばん伝えたいことを1文で | `slide tint` | `.hero`。補足は1〜2行まで |
| C 番号リスト | 手順・項目 | `slide` | **最大4項目**。1項目1行 |
| D 大見出し | 章の変わり目 | `slide tint` | **3〜10文字**で言い切る |
| E 注意・強調 | 覚えてほしい／やってはいけない | `slide` ＋ `.callout` | 赤は `.callout.warn` |
| F 休憩 | 区切り | `slide grad` | キャラクターを添える |
| G 表 | 時間割・比較・一覧 | `slide tint` ＋ `table.tt` | **最大6行** |
| H 締め | ねぎらい・次回予告 | `slide` | キャラクターを添える |

### Bar（見出し直下の帯）

- Size: `5vw × .45vw` / Radius: `99px` / Background: Gradient（グラデ面では `#fff`）
- Margin: `1.4vh 0 2.6vh`
- ラベル → バー → 見出し、の順で必ず置く

### Number Badge（`li .n`）

- Size: `3.4vw` 正円 / Background: Gradient / Text: `#fff` / Font: Space Grotesk 700, `1.7vw`
- `.n.ghost`: 背景 `#e8f4f8` ／ 文字 Navy。**「任意・できたら」の項目**に使う

### Callout

- Border-left: `.5vw solid #38bdf8` / Background: `#f4fbfe` / Radius: `0 1vw 1vw 0` / Padding: `2vh 2.4vw`
- `.warn`: Border-left `#e11d48` / Background `#fff5f7` / Text `#9f1239`

### Tag

- Background `#e8f4f8` / Text Navy / Weight 700 / Padding `.9vh 1.8vw` / Radius `99px`

### Table（`table.tt`）

- 縦罫なし。`border-bottom: 1px solid #d6e8f2` のみ。最終行は罫線なし
- 1列目は `white-space: nowrap` ／ Space Grotesk 700 ／ Sky 色（時刻・番号・キーの列）
- セル内の `<b>` は Navy 700

### Pager（`.dots`）

- 非アクティブ: `.8vw` 正円 `#d6e8f2` ／ アクティブ: 幅 `2.4vw` の角丸バー `#38bdf8`

### Logo

- 通常: 左上固定 `top:6vh; left:8vw; height:3.4vh`
- 表紙: `.logo.big` で本文フローに置く `height:5vh`
- グラデーション面では**白ロゴ**を使う

### Character（ラピットくん）

- 配置: `right:6vw; bottom:6vh; height:46vh`（`.chara.sm` は `34vh`）
- **にぎやかしで置かない。場面と意味が合うときだけ**使う
- 合う場面: 休憩あけ／着手をうながす／ハンズオンの導入／締めのねぎらい
- **1デッキに2〜3枚まで**
- **必ず透過PNGを選ぶ**（背景がベタ塗りの画像は色面スライドで四角く浮く）
- 資料で使うマスコットは**ラピットくんに一本化**。ミライちゃんは資料では使わない

---

## 5. Layout Principles

### Spacing

トークン化された Spacing Scale は持ちません。すべて**ビューポート相対**で、以下が実際に使われる値です。

| 用途 | 値 |
|---|---|
| スライド内側の余白 | `9vh 8vw` |
| リード文の上 | `2vh` |
| バーの上下 | `1.4vh` / `2.6vh` |
| 表・カラウトの上 | `2.6vh` / `3vh` |
| 箇条書きの上 | `3.4vh` |
| 箇条書きの項目間 | `2.2vh` |
| 番号バッジと文字の間 | `1.6vw` |

### Container

- 1スライド = `100vh × 100vw`。`position:absolute; inset:0`
- 縦は `justify-content: center`（内容が少なくても上下中央でバランスする）
- `body { overflow: hidden }` — スクロールしない

### Grid

グリッドなし。**1カラム固定**。2カラムに割りたくなったら、スライドを2枚に分ける。

---

## 6. Depth & Elevation

**影を一切使いません。完全にフラットです。**

| Level | Shadow | 用途 |
|-------|--------|------|
| 0 | `none` | すべての要素 |

面の区別は影ではなく**背景の塗り分け**（白 / tint / グラデーション）と**1px の罫線**で行います。
投影環境ではプロジェクタのコントラストで影がつぶれるため、影に情報を持たせない設計です。

---

## 7. Do's and Don'ts

### Do（推奨）

- **1スライド＝1メッセージ**。2つ言いたくなったら2枚に分ける
- **1枚100字が目安**。多くても150字まで
- **箇条書きは4項目まで**。5つ以上になったら分割する
- **表は6行まで**
- 詳しい手順は**配布資料に逃がす**。スライドは看板に徹する
- 見出しは意味の切れ目で `<br>` を入れて改行位置を決める
- キャラクターは透過PNGを選ぶ
- 社外利用では `© AppTalentHub Inc.` を表記する

### Don't（禁止）

- ロゴ・キャラクターの**改変**（色替え、パーツの追加・削除、比率の変更）
- ロゴを**コントラストの低い背景**に置く（白背景か、十分暗い背景で）
- 指定**2色以外の色**を足す
- 警告色（赤）を**強調目的で使う**。赤は事故につながることだけ
- 小さい文字を**詰め込む**。読めないスライドは無いのと同じ
- 影・ドロップシャドウを足す
- キャラクターを毎ページに出す（軽く見える）
- 純黒 `#000000` を文字色に使う

---

## 8. Projection & Print Behavior

Web の Responsive / Breakpoints に代わる、本媒体固有の規定です。

### スケーリング

- **ブレークポイントを持ちません。** すべての寸法が `vw` / `vh` 基準なので、画面サイズが変わっても比率が保たれます
- 想定は 16:9 横。縦長画面（スマホ）では文字が小さくなりますが、投影・PDF が前提なので許容します
- タッチターゲットの規定なし（操作はキーボードと全画面クリック）

### 操作

| 操作 | キー |
|---|---|
| 次へ / 前へ | `→` / `←`（クリックでも次へ） |
| 全画面 | `F` |
| PDFにする | `Ctrl` + `P` → 送信先を「PDFに保存」 |

### 印刷 / PDF

```css
@media print {
  .slide { display: flex !important; page-break-after: always; height: 100vh; }
  .nav   { display: none; }
}
```

全スライドを展開し、1枚1ページで改ページします。ナビゲーションは印刷されません。

### オフライン

ロゴ・キャラクター画像は **data URI で HTML に埋め込み済み**。1ファイルで完結し、
ネットのない会場でも表示が崩れません（Space Grotesk のみ読み込めず和文フォントで代替）。

---

## 9. Agent Prompt Guide

### クイックリファレンス

```
Primary Color:   #1f5b8c   (Navy)
Accent Color:    #38bdf8   (Sky)
Gradient:        linear-gradient(135deg, #1f5b8c 0%, #38bdf8 100%)
Text Color:      #12324d   (never #000000)
Text Secondary:  #5b7a94
Background:      #ffffff / #e8f4f8 (tint)
Border:          #d6e8f2
Danger:          #e11d48   (accidents only, never emphasis)
Font:            "Space Grotesk", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                 "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", sans-serif
Font Feature:    "palt" 1
Letter Spacing:  .02em
Body Size:       1.8vw (35px @1920)
Line Height:     1.7 (body) / 1.18-1.4 (headings)
Shadow:          none
Weights:         500, 700 only
Hard limits:     1 message per slide / 100-150 chars per slide
                 / 4 bullets max / 6 table rows max / 2-3 character images per deck
```

### プロンプト例

> AppTalentHub のプレゼン仕様（DESIGN.md）に従って、NoCodeBootCamp 初日のスライドを作ってください。
> 表紙（型A）、今日のゴール（型B）、進め方4項目（型C）、時間割の表（型G）、締め（型H）の5枚。
> 色は #1f5b8c と #38bdf8 の2色のみ、影なし、1枚100字以内。
> `ath-slide-template.html` の section をコピーして文言だけ差し替える形で出力してください。

### エージェントへの注意

- **新しい section を一から書かない。** `ath-slide-template.html` の該当する型を複製して文言を差し替える
- 型に無いレイアウトが必要になったら、それは**スライドを分けるべきサイン**として扱う
- 色・影・ウェイトを足したくなったら、この仕様のどこにも書かれていないので**足さない**

---

© AppTalentHub Inc.