# キャラクター利用ガイド

## キャラクターの役割

| キャラクター | 役割 | 職業 |
|------------|------|------|
| **マジくん** | 読者の代弁者。技術に詳しくない視点で疑問を投げかける | マーケティングアシスタント（非エンジニア） |
| **マスター** | 導き手。本質を平易に説明する | 喫茶店マスター兼AI活用のプロ |

---

## 表情の使い分け

### マジくん（10種類）

| 表情 | ファイル名 | 使用シーン |
|-----|----------|----------|
| 標準 | `マジくん-標準-512×512-透過.png` | 通常の発言 |
| 驚き | `マジくん-驚き-512×512-透過.png` | 新しい発見、「マジ？」 |
| マジ？ | `マジくん-マジ？-512×512-透過.png` | 心底驚いたとき |
| 調子に乗ってる | `マジくん-調子に乗ってる-512×512-透過.png` | 理解した気になっている |
| 疑っている | `マジくん-疑っている-512×512-透過.png` | 半信半疑、ケチをつける |
| 強く反発する | `マジくん-強く反発する-512×512-透過.png` | 納得いかない |
| 焦り | `マジくん-焦り-512×512-透過.png` | 困っている |
| ひどく慌てている | `マジくん-ひどく慌てている-512×512-透過.png` | パニック |
| 涙ぐむ | `マジくん-涙ぐむ-512×512-透過.png` | 落ち込み、感動 |
| 自信がない、落ち込んでいる | `マジくん-自信がない、落ち込んでいる-512×512-透過.png` | 失敗、挫折 |

### マスター（4種類）

| 表情 | ファイル名 | 使用シーン |
|-----|----------|----------|
| 標準 | `マスター-標準-512×512-透過.png` | 通常の説明 |
| 諭す | `マスター-諭す-512×512-透過.png` | 重要なポイント、本質を伝える |
| 思考、分析 | `マスター-思考、分析-512×512-透過.png` | 考え中、深い話 |
| 真顔 | `マスター-真顔-512×512-透過.png` | 厳しい指摘 |

---

## 対話パターン

### 1. 導入パターン（疑問→答え）

```html
<!-- マジくん: 疑問を投げかける -->
<div class="flex items-start gap-4 mb-6">
  <img src="./images/マジくん-疑っている-512×512-透過.png" 
       alt="マジくん" class="w-20 h-20 object-contain flex-shrink-0">
  <div class="char-bubble maji-bubble flex-1">
    <p class="text-lg">
      <span class="font-bold text-amber-700">マジくん:</span><br>
      「フック」って何ですか？プログラムに釣り針でも刺すんですか？
    </p>
  </div>
</div>

<!-- マスター: 本質を説明 -->
<div class="flex items-start gap-4 mb-6">
  <img src="./images/マスター-諭す-512×512-透過.png" 
       alt="マスター" class="w-20 h-20 object-contain flex-shrink-0">
  <div class="char-bubble master-bubble flex-1">
    <p class="text-lg">
      <span class="font-bold text-blue-700">マスター:</span><br>
      良い質問ですね。フックとは「割り込みポイント」のこと。
      会社のセキュリティゲートを想像してください。
    </p>
  </div>
</div>
```

### 2. 驚きパターン（発見の瞬間）

```html
<div class="flex items-start gap-4 mb-6">
  <img src="./images/マジくん-驚き-512×512-透過.png" 
       alt="マジくん" class="w-20 h-20 object-contain flex-shrink-0">
  <div class="char-bubble maji-bubble flex-1">
    <p class="text-lg">
      <span class="font-bold text-amber-700">マジくん:</span><br>
      マジ？<br>
      つまり、AIが何かする前に「ちょっと待って！」って止められるんですね！
    </p>
  </div>
</div>
```

### 3. まとめパターン（理解の確認）

```html
<div class="flex items-start gap-4 mb-6">
  <img src="./images/マスター-標準-512×512-透過.png" 
       alt="マスター" class="w-20 h-20 object-contain flex-shrink-0">
  <div class="char-bubble master-bubble flex-1">
    <p class="text-lg">
      <span class="font-bold text-blue-700">マスター:</span><br>
      その通りです。整理すると、フックには3つの役割があります。
    </p>
  </div>
</div>

<div class="flex items-start gap-4 mb-6">
  <img src="./images/マジくん-調子に乗ってる-512×512-透過.png" 
       alt="マジくん" class="w-20 h-20 object-contain flex-shrink-0">
  <div class="char-bubble maji-bubble flex-1">
    <p class="text-lg">
      <span class="font-bold text-amber-700">マジくん:</span><br>
      これでボクも次期OpenAIのCEO候補ですね！
    </p>
  </div>
</div>
```

---

## セリフの書き方

### マジくんの特徴

- **一人称**: 「ボク」
- **基本**: 丁寧語（「〜です」「〜ます」）
- **反発時**: やや格式高い表現
- **驚き**: 「マジ？」（心底驚いた時のみ単独で使用）
- **大袈裟な比喩**: 感情的になると誇張表現

```
❌ 悪い例: 「すごいね！」「わかった！」
✅ 良い例: 「これは人類の転換点かもしれません！」「ボクのキャリアに光が差しました！」
```

### マスターの特徴

- **一人称**: 「私」
- **口調**: 常に丁寧語、タメ口は使わない
- **説明**: たとえ話を必ず使う
- **名前呼び**: 「マジさん」

```
❌ 悪い例: 「それは違う」「こうだ」
✅ 良い例: 「その発言は、マジさんがまだ本質を理解できていない証拠ですね」
```

---

## 配置ルール

1. **対話シーンでは左右固定しない**: 上から順に配置
2. **画像サイズ**: `w-20 h-20`（80px）が基本
3. **吹き出しの向き**: 画像側に尖端
4. **余白**: `gap-4`、`mb-6` で統一

---

## 画像パス

HTML内での参照パス:

```html
./images/マジくん-{表情}-512×512-透過.png
./images/マスター-{表情}-512×512-透過.png
```

デプロイ時にコピー元:

```
docs/design/charactor-images/square/512px/
```