167 lines
5.8 KiB
Markdown
167 lines
5.8 KiB
Markdown
# キャラクター利用ガイド
|
||
|
||
## キャラクターの役割
|
||
|
||
| キャラクター | 役割 | 職業 |
|
||
|------------|------|------|
|
||
| **マジくん** | 読者の代弁者。技術に詳しくない視点で疑問を投げかける | マーケティングアシスタント（非エンジニア） |
|
||
| **マスター** | 導き手。本質を平易に説明する | 喫茶店マスター兼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/
|
||
```
|