ADS/personal-visual-explainers
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
52861862d6
personal-visual-explainers/sample/majiai-diagram/.claude/skills/diagram-maji/references/character-usage.md
snc777 4216635369 初回コミット: パーソナル図解ツールキット 
Made-with: Cursor
2026-03-20 15:51:26 +09:00

5.8 KiB
Raw Blame History

キャラクター利用ガイド

キャラクターの役割

キャラクター 役割 職業
マジくん 読者の代弁者。技術に詳しくない視点で疑問を投げかける マーケティングアシスタント（非エンジニア）
マスター 導き手。本質を平易に説明する 喫茶店マスター兼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. 導入パターン（疑問→答え）

<!-- マジくん: 疑問を投げかける -->
<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. 驚きパターン（発見の瞬間）

<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. まとめパターン（理解の確認）

<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内での参照パス:

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

デプロイ時にコピー元:

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