# 模範解答パターン ## 成功する図解の構造 ``` 1. ヘッダー（グラデーション背景） └─ タイトル + サブタイトル 2. 導入（キャラクター対話） └─ マジくん: 「〇〇って何ですか？」 └─ マスター: たとえ話で概要説明 3. 用語解説ボックス └─ 最初に出てくる技術用語を全て解説 4. まず覚える3つ └─ 絞り込んだ最重要ポイント └─ 重要度バッジ（必須/推奨/任意） 5. 各セクション詳細 └─ セクションカード形式 └─ Lucide iconでビジュアル化 └─ たとえ話で補足 └─ コード例の前に日本語解説 6. まとめ（キャラクター対話） └─ マスター: 要点を3つで整理 └─ マジくん: 理解の確認 7. 目次（フローティング） └─ デスクトップのみ表示 ``` --- ## 「まず覚える3つ」の書き方 ```html

まず覚える3つ

最初はこれだけでOK！

PreToolUse 必須

ツールが実行される前にチェック。「本当にやっていい？」と確認する門番。

PostToolUse 推奨

ツールが実行された後に確認。結果をログに残したり、通知を送ったり。

Stop 任意

AIが作業を終えるとき。「お疲れ様、次はこれをやってね」とフォローアップを追加。

``` --- ## たとえ話の展開パターン ### パターン1: 会社のセキュリティゲート ```html

たとえ話：会社のセキュリティゲート

あなたが会社に出勤するとき、入口にはセキュリティゲートがありますよね。

社員証をかざす → 本人確認（PreToolUse）
ゲートが開く → 許可された行動が実行される
入館記録が残る → ログ記録（PostToolUse）

フックは、このセキュリティゲートのような役割をプログラムの中で果たします。

``` ### パターン2: スマホの権限ダイアログ ```html

たとえ話：スマホの権限ダイアログ

スマホでアプリを使うとき、こんな画面を見たことありませんか？

「カメラへのアクセスを許可しますか？」
[許可する] / [許可しない]

これがまさにPreToolUseの動き！

許可する → allow（実行OK）
許可しない → deny（実行NG）
毎回確認する → ask（ユーザーに聞く）

``` --- ## 詳細セクションの書き方 ```html

PreToolUse

ツール実行前のチェックポイント

「Pre」って「前」という意味ですよね？つまり、ツールを使う前に何かするってことですか？

その通りです。AIが何かツールを使おうとしたとき、実行する前に「ちょっと待って」と割り込めるポイントです。

何ができるの？

特定のツールの使用を禁止できる
ツールに渡す入力内容を変更できる
ユーザーに確認を求めることができる

このコードがやること

「Writeツール（ファイルを書き込む道具）」が使われそうになったら、許可しないというルールを設定しています。

hook.onPreToolUse((event) => {
  if (event.toolName === 'Write') {
    return { permissionDecision: 'deny' };
  }
});

``` --- ## 品質チェックリスト作成後、以下を確認： - [ ] 全ての技術用語に用語解説ボックスがある - [ ] たとえ話が3つ以上ある - [ ] 導入・中間・まとめにキャラクター対話がある - [ ] 「まず覚える3つ」がある - [ ] コード例の前に「このコードがやること」がある - [ ] Lucide iconのみ使用（絵文字なし） - [ ] 本気AIブランドカラーが適用されている - [ ] キャラクター画像のパスが正しい - [ ] スマホで読みやすい（レスポンシブ） - [ ] 目次がフローティング表示される（デスクトップ）