初回コミット: パーソナル図解ツールキット
Made-with: Cursor
This commit is contained in:
snc777
@@ -0,0 +1,195 @@
|
||||
---
|
||||
name: diagram-maji
|
||||
description: 技術ドキュメントを「技術に詳しくない一般の人」向けにわかりやすく図解するスキル。「わかりやすく図解して」「マジ図解して」「図解を作って」と依頼された際に使用します。マジくんとマスターの対話形式で、本気AIブランドに準拠したHTMLを生成し、surge.shにデプロイします。
|
||||
---
|
||||
|
||||
# Diagram Maji
|
||||
|
||||
技術ドキュメントを**技術に詳しくない一般の人**でも直感的に理解できるHTMLに変換する。
|
||||
|
||||
## 依存
|
||||
|
||||
- `docs/design/design-guideline.md` - ブランドカラー、トーン&マナー
|
||||
- `docs/design/charactor-images/square/512px/` - キャラクター画像
|
||||
- `contents/docs/方針・キャラ設定/キャラ設定.md` - キャラ設定
|
||||
|
||||
---
|
||||
|
||||
## ワークフロー
|
||||
|
||||
### Phase 0: リサーチ（サブエージェント）
|
||||
|
||||
**exploreサブエージェント**を起動して、対象技術を徹底調査する。
|
||||
|
||||
```
|
||||
Task({
|
||||
subagent_type: "explore",
|
||||
description: "技術ドキュメントの調査",
|
||||
prompt: `
|
||||
以下の技術について徹底的に調査してください：
|
||||
【対象】{URL or トピック名}
|
||||
|
||||
調査項目：
|
||||
1. この技術は何を解決するものか（Why）
|
||||
2. 主要な概念・用語の一覧
|
||||
3. 典型的なユースケース3つ以上
|
||||
4. 初心者がつまずきやすいポイント
|
||||
5. 関連する公式ドキュメントのURL
|
||||
|
||||
結果は箇条書きで整理して返してください。
|
||||
`
|
||||
})
|
||||
```
|
||||
|
||||
### Phase 1: ソース読み込み
|
||||
|
||||
1. URLなら `WebFetch` で取得
|
||||
2. ドキュメントなら内容を分析
|
||||
3. **情報の全体像を把握**（漏れなく）
|
||||
4. **Phase 0のリサーチ結果と照合**して抜け漏れを確認
|
||||
|
||||
### Phase 2: 用語翻訳表を作成
|
||||
|
||||
技術用語を洗い出し、やさしい言葉に変換する。
|
||||
|
||||
| 技術用語 | やさしい言葉 | たとえ |
|
||||
|---------|------------|--------|
|
||||
| コールバック関数 | チェック係 | 「何かあったら呼んでね」と登録しておく処理 |
|
||||
| フック | 割り込みポイント | 会社のセキュリティゲート |
|
||||
| API | 窓口 | 銀行の窓口のように、決まった手続きで依頼する場所 |
|
||||
|
||||
**詳細** → [references/term-dictionary.md](references/term-dictionary.md)
|
||||
|
||||
### Phase 3: たとえ話を3つ以上考える
|
||||
|
||||
| 種類 | 例 |
|
||||
|-----|-----|
|
||||
| 身近な例 | 会社のセキュリティゲート、郵便配達 |
|
||||
| デジタルな例 | スマホの権限ダイアログ |
|
||||
| 視覚的な例 | 信号機、地図、フローチャート |
|
||||
|
||||
### Phase 4: 情報を絞り込む
|
||||
|
||||
- 「まず覚える3つ」を決定
|
||||
- 全体の中の位置づけを示す
|
||||
- 優先度の低い情報は後半に配置
|
||||
|
||||
### Phase 5: キャラクター対話を設計
|
||||
|
||||
| キャラクター | 役割 | 表情の使い分け |
|
||||
|------------|------|--------------|
|
||||
| マジくん | 読者の疑問を代弁（マーケティング職） | 驚き、疑っている、調子に乗ってる |
|
||||
| マスター | 本質を説明する導き手 | 標準、諭す、思考・分析 |
|
||||
|
||||
**詳細** → [references/character-usage.md](references/character-usage.md)
|
||||
|
||||
### Phase 6: HTML生成
|
||||
|
||||
1. Tailwind CSS CDN使用
|
||||
2. **Lucide icon**を使用（絵文字禁止）
|
||||
3. 本気AIブランドカラー適用
|
||||
4. 用語解説ボックス配置
|
||||
5. コード例の前に日本語解説
|
||||
|
||||
**詳細** → [references/html-structure.md](references/html-structure.md)
|
||||
|
||||
### Phase 7: 批判的レビュー（サブエージェント）
|
||||
|
||||
**リテラシーが低いユーザー視点**で、忖度なくレビューする。
|
||||
|
||||
```
|
||||
Task({
|
||||
subagent_type: "generalPurpose",
|
||||
description: "図解の批判的レビュー",
|
||||
readonly: true,
|
||||
prompt: `
|
||||
あなたは「ITに詳しくない40代の事務職」です。
|
||||
プログラミング経験はゼロ、スマホは使えるがアプリの仕組みは知りません。
|
||||
|
||||
以下のHTML図解を読んで、**忖度なく**批判してください：
|
||||
|
||||
【HTMLファイルパス】{path}
|
||||
|
||||
## レビュー観点
|
||||
|
||||
1. **わからない言葉**: 説明されていても難しい言葉はどれか
|
||||
2. **たとえ話の違和感**: ピンとこない、逆に混乱するたとえはないか
|
||||
3. **情報過多**: 読むのが辛くなる部分、スキップしたくなる部分
|
||||
4. **キャラクターの不自然さ**: セリフが専門家っぽすぎないか
|
||||
5. **結局何がわかったか**: 読み終わって説明できる自信があるか
|
||||
|
||||
## 出力形式
|
||||
|
||||
### 致命的な問題（これがあると読めない）
|
||||
- ...
|
||||
|
||||
### 改善すべき点（直せばもっと良くなる）
|
||||
- ...
|
||||
|
||||
### 良かった点（このまま残すべき）
|
||||
- ...
|
||||
|
||||
### 総評
|
||||
5段階評価: ⭐⭐⭐☆☆（3/5）のように
|
||||
一言: 「○○だから△△な人には難しい」のように
|
||||
`
|
||||
})
|
||||
```
|
||||
|
||||
### Phase 8: ブラッシュアップ
|
||||
|
||||
Phase 7のレビュー結果を踏まえてHTMLを修正する。
|
||||
|
||||
**優先度**:
|
||||
1. 致命的な問題 → 必ず修正
|
||||
2. 改善すべき点 → 可能な限り対応
|
||||
3. 良かった点 → 維持
|
||||
|
||||
**よくある修正パターン**:
|
||||
- 用語解説ボックスの追加
|
||||
- たとえ話の差し替え・追加
|
||||
- 長いセクションの分割
|
||||
- キャラクターのセリフをより素朴に
|
||||
|
||||
### Phase 9: デプロイ
|
||||
|
||||
```bash
|
||||
# 1. 一時ディレクトリ作成
|
||||
DEPLOY_DIR=$(mktemp -d)
|
||||
|
||||
# 2. HTMLファイル作成
|
||||
# index.html を $DEPLOY_DIR に書き込む
|
||||
|
||||
# 3. キャラクター画像をコピー
|
||||
mkdir -p "$DEPLOY_DIR/images"
|
||||
cp docs/design/charactor-images/square/512px/マジくん-*.png "$DEPLOY_DIR/images/"
|
||||
cp docs/design/charactor-images/square/512px/マスター-*.png "$DEPLOY_DIR/images/"
|
||||
|
||||
# 4. surge.shにデプロイ
|
||||
cd "$DEPLOY_DIR" && surge . --domain {ドメイン名}.surge.sh
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 品質チェックリスト
|
||||
|
||||
### 必須
|
||||
|
||||
- [ ] 技術用語には必ず「用語解説ボックス」がある
|
||||
- [ ] たとえ話が3つ以上ある
|
||||
- [ ] キャラクター対話が導入・中間・まとめにある
|
||||
- [ ] 「まず覚える3つ」のような絞り込みがある
|
||||
- [ ] コード例の前に「このコードがやること」がある
|
||||
|
||||
### デザイン
|
||||
|
||||
- [ ] Lucide iconを使用（絵文字禁止）
|
||||
- [ ] 本気AIブランドカラーが適用されている
|
||||
- [ ] キャラクター画像が正しく配置されている
|
||||
- [ ] スマホでも読みやすいレスポンシブ対応
|
||||
|
||||
---
|
||||
|
||||
## 模範解答
|
||||
|
||||
具体的なHTML構造と成功パターン → [references/exemplar.md](references/exemplar.md)
|
||||
@@ -0,0 +1,166 @@
|
||||
# キャラクター利用ガイド
|
||||
|
||||
## キャラクターの役割
|
||||
|
||||
| キャラクター | 役割 | 職業 |
|
||||
|------------|------|------|
|
||||
| **マジくん** | 読者の代弁者。技術に詳しくない視点で疑問を投げかける | マーケティングアシスタント（非エンジニア） |
|
||||
| **マスター** | 導き手。本質を平易に説明する | 喫茶店マスター兼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/
|
||||
```
|
||||
@@ -0,0 +1,230 @@
|
||||
# 模範解答パターン
|
||||
|
||||
## 成功する図解の構造
|
||||
|
||||
```
|
||||
1. ヘッダー（グラデーション背景）
|
||||
└─ タイトル + サブタイトル
|
||||
|
||||
2. 導入（キャラクター対話）
|
||||
└─ マジくん: 「〇〇って何ですか？」
|
||||
└─ マスター: たとえ話で概要説明
|
||||
|
||||
3. 用語解説ボックス
|
||||
└─ 最初に出てくる技術用語を全て解説
|
||||
|
||||
4. まず覚える3つ
|
||||
└─ 絞り込んだ最重要ポイント
|
||||
└─ 重要度バッジ（必須/推奨/任意）
|
||||
|
||||
5. 各セクション詳細
|
||||
└─ セクションカード形式
|
||||
└─ Lucide iconでビジュアル化
|
||||
└─ たとえ話で補足
|
||||
└─ コード例の前に日本語解説
|
||||
|
||||
6. まとめ（キャラクター対話）
|
||||
└─ マスター: 要点を3つで整理
|
||||
└─ マジくん: 理解の確認
|
||||
|
||||
7. 目次（フローティング）
|
||||
└─ デスクトップのみ表示
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 「まず覚える3つ」の書き方
|
||||
|
||||
```html
|
||||
<div class="section-card">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-rose-500 to-pink-500 rounded-xl flex items-center justify-center">
|
||||
<i data-lucide="star" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-gray-800">まず覚える3つ</h2>
|
||||
<p class="text-gray-500">最初はこれだけでOK！</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4">
|
||||
<!-- 1つ目 -->
|
||||
<div class="flex items-start gap-4 p-4 bg-gradient-to-r from-red-50 to-red-100 rounded-xl border-l-4 border-red-500">
|
||||
<div class="w-10 h-10 bg-red-500 text-white rounded-full flex items-center justify-center font-bold text-lg flex-shrink-0">1</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-bold text-lg text-gray-800">PreToolUse</span>
|
||||
<span class="badge-essential">必須</span>
|
||||
</div>
|
||||
<p class="text-gray-600">ツールが実行される<strong>前</strong>にチェック。「本当にやっていい？」と確認する門番。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2つ目 -->
|
||||
<div class="flex items-start gap-4 p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl border-l-4 border-blue-500">
|
||||
<div class="w-10 h-10 bg-blue-500 text-white rounded-full flex items-center justify-center font-bold text-lg flex-shrink-0">2</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-bold text-lg text-gray-800">PostToolUse</span>
|
||||
<span class="badge-recommended">推奨</span>
|
||||
</div>
|
||||
<p class="text-gray-600">ツールが実行された<strong>後</strong>に確認。結果をログに残したり、通知を送ったり。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3つ目 -->
|
||||
<div class="flex items-start gap-4 p-4 bg-gradient-to-r from-green-50 to-green-100 rounded-xl border-l-4 border-green-500">
|
||||
<div class="w-10 h-10 bg-green-500 text-white rounded-full flex items-center justify-center font-bold text-lg flex-shrink-0">3</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-bold text-lg text-gray-800">Stop</span>
|
||||
<span class="badge-optional">任意</span>
|
||||
</div>
|
||||
<p class="text-gray-600">AIが作業を終えるとき。「お疲れ様、次はこれをやってね」とフォローアップを追加。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## たとえ話の展開パターン
|
||||
|
||||
### パターン1: 会社のセキュリティゲート
|
||||
|
||||
```html
|
||||
<div class="bg-gradient-to-r from-amber-50 to-orange-50 p-6 rounded-xl border border-amber-200 my-6">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<i data-lucide="building-2" class="w-6 h-6 text-amber-600"></i>
|
||||
<span class="font-bold text-amber-800">たとえ話：会社のセキュリティゲート</span>
|
||||
</div>
|
||||
<div class="space-y-3 text-gray-700">
|
||||
<p>あなたが会社に出勤するとき、入口にはセキュリティゲートがありますよね。</p>
|
||||
<ul class="list-disc list-inside space-y-1 ml-2">
|
||||
<li><strong>社員証をかざす</strong> → 本人確認（PreToolUse）</li>
|
||||
<li><strong>ゲートが開く</strong> → 許可された行動が実行される</li>
|
||||
<li><strong>入館記録が残る</strong> → ログ記録（PostToolUse）</li>
|
||||
</ul>
|
||||
<p>フックは、この<strong>セキュリティゲートのような役割</strong>をプログラムの中で果たします。</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### パターン2: スマホの権限ダイアログ
|
||||
|
||||
```html
|
||||
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-6 rounded-xl border border-blue-200 my-6">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<i data-lucide="smartphone" class="w-6 h-6 text-blue-600"></i>
|
||||
<span class="font-bold text-blue-800">たとえ話：スマホの権限ダイアログ</span>
|
||||
</div>
|
||||
<div class="space-y-3 text-gray-700">
|
||||
<p>スマホでアプリを使うとき、こんな画面を見たことありませんか？</p>
|
||||
<div class="bg-white p-4 rounded-lg border text-center my-3">
|
||||
「カメラへのアクセスを許可しますか？」<br>
|
||||
<span class="text-blue-600">[許可する]</span> / <span class="text-gray-500">[許可しない]</span>
|
||||
</div>
|
||||
<p>これがまさに<strong>PreToolUse</strong>の動き！</p>
|
||||
<ul class="list-disc list-inside space-y-1 ml-2">
|
||||
<li><strong>許可する</strong> → allow（実行OK）</li>
|
||||
<li><strong>許可しない</strong> → deny（実行NG）</li>
|
||||
<li><strong>毎回確認する</strong> → ask（ユーザーに聞く）</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 詳細セクションの書き方
|
||||
|
||||
```html
|
||||
<div class="section-card" id="pretooluse">
|
||||
<!-- セクションヘッダー -->
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||
<i data-lucide="shield-check" class="w-6 h-6 text-blue-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-gray-800">PreToolUse</h2>
|
||||
<p class="text-gray-500">ツール実行前のチェックポイント</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- キャラクター対話 -->
|
||||
<div class="flex items-start gap-4 mb-6">
|
||||
<img src="./images/マジくん-疑っている-512×512-透過.png"
|
||||
alt="マジくん" class="w-16 h-16 object-contain flex-shrink-0">
|
||||
<div class="char-bubble maji-bubble flex-1">
|
||||
<p>「Pre」って「前」という意味ですよね？つまり、ツールを使う前に何かするってことですか？</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4 mb-6">
|
||||
<img src="./images/マスター-諭す-512×512-透過.png"
|
||||
alt="マスター" class="w-16 h-16 object-contain flex-shrink-0">
|
||||
<div class="char-bubble master-bubble flex-1">
|
||||
<p>その通りです。AIが何かツールを使おうとしたとき、<strong>実行する前に「ちょっと待って」と割り込める</strong>ポイントです。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本文 -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-xl font-bold text-gray-700 flex items-center gap-2">
|
||||
<i data-lucide="target" class="w-5 h-5 text-blue-500"></i>
|
||||
何ができるの？
|
||||
</h3>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-start gap-2">
|
||||
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
||||
<span>特定のツールの使用を<strong>禁止</strong>できる</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
||||
<span>ツールに渡す<strong>入力内容を変更</strong>できる</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
|
||||
<span>ユーザーに<strong>確認を求める</strong>ことができる</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- コード例 -->
|
||||
<div class="mt-6">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i data-lucide="code" class="w-5 h-5 text-purple-500"></i>
|
||||
<span class="font-bold text-gray-700">このコードがやること</span>
|
||||
</div>
|
||||
<p class="text-gray-600 mb-3">
|
||||
「Writeツール（ファイルを書き込む道具）」が使われそうになったら、
|
||||
<span class="font-bold text-red-600">許可しない</span>というルールを設定しています。
|
||||
</p>
|
||||
<div class="code-block">
|
||||
<pre><code>hook.onPreToolUse((event) => {
|
||||
if (event.toolName === 'Write') {
|
||||
return { permissionDecision: 'deny' };
|
||||
}
|
||||
});</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 品質チェックリスト
|
||||
|
||||
作成後、以下を確認：
|
||||
|
||||
- [ ] 全ての技術用語に用語解説ボックスがある
|
||||
- [ ] たとえ話が3つ以上ある
|
||||
- [ ] 導入・中間・まとめにキャラクター対話がある
|
||||
- [ ] 「まず覚える3つ」がある
|
||||
- [ ] コード例の前に「このコードがやること」がある
|
||||
- [ ] Lucide iconのみ使用（絵文字なし）
|
||||
- [ ] 本気AIブランドカラーが適用されている
|
||||
- [ ] キャラクター画像のパスが正しい
|
||||
- [ ] スマホで読みやすい（レスポンシブ）
|
||||
- [ ] 目次がフローティング表示される（デスクトップ）
|
||||
@@ -0,0 +1,280 @@
|
||||
# HTML構造ガイド
|
||||
|
||||
## 基本テンプレート
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>【図解タイトル】- 本気AI</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* 本気AIブランドカラー */
|
||||
:root {
|
||||
--majiai-primary: hsl(343, 85%, 45%);
|
||||
--majiai-secondary: hsl(213, 63%, 38%);
|
||||
--majiai-gradient: linear-gradient(90deg, #24609E, #D60C52);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans JP', 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* ヘッダーグラデーション */
|
||||
.header-gradient {
|
||||
background: var(--majiai-gradient);
|
||||
}
|
||||
|
||||
/* セクションカード */
|
||||
.section-card {
|
||||
background: white;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* 用語解説ボックス */
|
||||
.term-explain {
|
||||
background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
|
||||
border-left: 4px solid #9333ea;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
/* キャラクター吹き出し */
|
||||
.char-bubble {
|
||||
position: relative;
|
||||
padding: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.char-bubble::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: 20px;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
}
|
||||
.maji-bubble {
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
border: 2px solid #f59e0b;
|
||||
}
|
||||
.maji-bubble::before {
|
||||
border-color: transparent #f59e0b transparent transparent;
|
||||
}
|
||||
.master-bubble {
|
||||
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
||||
border: 2px solid #3b82f6;
|
||||
}
|
||||
.master-bubble::before {
|
||||
border-color: transparent #3b82f6 transparent transparent;
|
||||
}
|
||||
|
||||
/* 重要度バッジ */
|
||||
.badge-essential {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.badge-recommended {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.badge-optional {
|
||||
background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* コードブロック */
|
||||
.code-block {
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
overflow-x: auto;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* 目次 */
|
||||
.toc {
|
||||
position: fixed;
|
||||
right: 2rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
z-index: 50;
|
||||
}
|
||||
@media (max-width: 1280px) {
|
||||
.toc { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- ヘッダー -->
|
||||
<header class="header-gradient text-white py-8">
|
||||
<div class="max-w-4xl mx-auto px-4">
|
||||
<h1 class="text-3xl md:text-4xl font-bold">【タイトル】</h1>
|
||||
<p class="mt-2 text-lg opacity-90">サブタイトル</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- メインコンテンツ -->
|
||||
<main class="max-w-4xl mx-auto px-4 py-8">
|
||||
<!-- セクション例 -->
|
||||
</main>
|
||||
|
||||
<!-- Lucide初期化 -->
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Lucide Icon の使い方
|
||||
|
||||
### 基本構文
|
||||
|
||||
```html
|
||||
<i data-lucide="icon-name" class="w-6 h-6"></i>
|
||||
```
|
||||
|
||||
### よく使うアイコン
|
||||
|
||||
| 用途 | アイコン名 | コード |
|
||||
|-----|----------|--------|
|
||||
| 重要 | `alert-circle` | `<i data-lucide="alert-circle" class="w-6 h-6 text-red-500"></i>` |
|
||||
| ヒント | `lightbulb` | `<i data-lucide="lightbulb" class="w-6 h-6 text-yellow-500"></i>` |
|
||||
| チェック | `check-circle` | `<i data-lucide="check-circle" class="w-6 h-6 text-green-500"></i>` |
|
||||
| 情報 | `info` | `<i data-lucide="info" class="w-6 h-6 text-blue-500"></i>` |
|
||||
| 警告 | `triangle-alert` | `<i data-lucide="triangle-alert" class="w-6 h-6 text-orange-500"></i>` |
|
||||
| 設定 | `settings` | `<i data-lucide="settings" class="w-6 h-6 text-gray-500"></i>` |
|
||||
| コード | `code` | `<i data-lucide="code" class="w-6 h-6 text-purple-500"></i>` |
|
||||
| ファイル | `file-text` | `<i data-lucide="file-text" class="w-6 h-6 text-blue-500"></i>` |
|
||||
| フォルダ | `folder` | `<i data-lucide="folder" class="w-6 h-6 text-yellow-600"></i>` |
|
||||
| 矢印 | `arrow-right` | `<i data-lucide="arrow-right" class="w-6 h-6"></i>` |
|
||||
| ユーザー | `user` | `<i data-lucide="user" class="w-6 h-6"></i>` |
|
||||
| ロック | `lock` | `<i data-lucide="lock" class="w-6 h-6 text-gray-600"></i>` |
|
||||
| 鍵 | `key` | `<i data-lucide="key" class="w-6 h-6 text-yellow-500"></i>` |
|
||||
| 許可 | `shield-check` | `<i data-lucide="shield-check" class="w-6 h-6 text-green-500"></i>` |
|
||||
| 禁止 | `shield-x` | `<i data-lucide="shield-x" class="w-6 h-6 text-red-500"></i>` |
|
||||
| 質問 | `help-circle` | `<i data-lucide="help-circle" class="w-6 h-6 text-blue-500"></i>` |
|
||||
| 本 | `book-open` | `<i data-lucide="book-open" class="w-6 h-6 text-indigo-500"></i>` |
|
||||
| 学習 | `graduation-cap` | `<i data-lucide="graduation-cap" class="w-6 h-6 text-purple-500"></i>` |
|
||||
| ツール | `wrench` | `<i data-lucide="wrench" class="w-6 h-6 text-gray-600"></i>` |
|
||||
| プレイ | `play` | `<i data-lucide="play" class="w-6 h-6 text-green-500"></i>` |
|
||||
| 停止 | `square` | `<i data-lucide="square" class="w-6 h-6 text-red-500"></i>` |
|
||||
|
||||
### セクションヘッダーでの使用例
|
||||
|
||||
```html
|
||||
<div class="section-card">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||
<i data-lucide="shield-check" class="w-6 h-6 text-blue-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-gray-800">セクションタイトル</h2>
|
||||
<p class="text-gray-500">サブタイトル</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- コンテンツ -->
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## コード例の前の日本語解説
|
||||
|
||||
コードを見せる前に、必ず「このコードが何をするのか」を日本語で説明する。
|
||||
|
||||
### ❌ 悪い例
|
||||
|
||||
```html
|
||||
<div class="code-block">
|
||||
<pre><code>
|
||||
hook.onPreToolUse((event) => {
|
||||
if (event.toolName === 'Write') {
|
||||
return { permissionDecision: 'deny' };
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
```
|
||||
|
||||
### ✅ 良い例
|
||||
|
||||
```html
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<i data-lucide="code" class="w-5 h-5 text-purple-500"></i>
|
||||
<span class="font-bold text-gray-700">このコードがやること</span>
|
||||
</div>
|
||||
<p class="text-gray-600 ml-7">
|
||||
「Writeツール（ファイルを書き込む道具）が使われそうになったら、
|
||||
<span class="font-bold text-red-600">許可しない</span>」というルールを設定しています。
|
||||
</p>
|
||||
</div>
|
||||
<div class="code-block">
|
||||
<pre><code>
|
||||
hook.onPreToolUse((event) => {
|
||||
if (event.toolName === 'Write') {
|
||||
return { permissionDecision: 'deny' };
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## フローチャートの表現
|
||||
|
||||
```html
|
||||
<div class="flex flex-col md:flex-row items-center justify-center gap-4 my-8">
|
||||
<div class="bg-blue-100 px-6 py-4 rounded-xl text-center">
|
||||
<i data-lucide="play" class="w-8 h-8 text-blue-600 mx-auto mb-2"></i>
|
||||
<div class="font-bold">開始</div>
|
||||
</div>
|
||||
<i data-lucide="arrow-right" class="w-8 h-8 text-gray-400 hidden md:block"></i>
|
||||
<i data-lucide="arrow-down" class="w-8 h-8 text-gray-400 md:hidden"></i>
|
||||
<div class="bg-yellow-100 px-6 py-4 rounded-xl text-center">
|
||||
<i data-lucide="shield-check" class="w-8 h-8 text-yellow-600 mx-auto mb-2"></i>
|
||||
<div class="font-bold">チェック</div>
|
||||
</div>
|
||||
<i data-lucide="arrow-right" class="w-8 h-8 text-gray-400 hidden md:block"></i>
|
||||
<i data-lucide="arrow-down" class="w-8 h-8 text-gray-400 md:hidden"></i>
|
||||
<div class="bg-green-100 px-6 py-4 rounded-xl text-center">
|
||||
<i data-lucide="check-circle" class="w-8 h-8 text-green-600 mx-auto mb-2"></i>
|
||||
<div class="font-bold">完了</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,100 @@
|
||||
# 技術用語→やさしい言葉 変換辞書
|
||||
|
||||
## 変換の原則
|
||||
|
||||
1. **機能で命名する**: 「何をするものか」で名前をつける
|
||||
2. **身近な比喩を添える**: 日常生活での類似物を示す
|
||||
3. **初出時に解説ボックス**: 最初に出てきたとき必ず説明
|
||||
|
||||
---
|
||||
|
||||
## よく使う変換表
|
||||
|
||||
### プログラミング基礎
|
||||
|
||||
| 技術用語 | やさしい言葉 | たとえ |
|
||||
|---------|------------|--------|
|
||||
| コールバック関数 | チェック係 | 「何かあったら呼んでね」と登録しておく処理。電話の折り返しと同じ |
|
||||
| API | 窓口 | 銀行の窓口。決まった書類を出すと、決まったサービスを受けられる |
|
||||
| インターフェース | 約束事 | 「この形式で頼めば対応します」というルール |
|
||||
| パラメータ | 指示内容 | 注文票に書く内容 |
|
||||
| 引数 | 渡す情報 | 窓口に提出する書類 |
|
||||
| 戻り値 | 受け取る結果 | 窓口から返ってくる書類 |
|
||||
| 変数 | 名前付きの箱 | ラベルを貼った引き出し |
|
||||
| 関数 | 処理の塊 | 自動販売機（入れると出てくる） |
|
||||
|
||||
### 非同期・イベント
|
||||
|
||||
| 技術用語 | やさしい言葉 | たとえ |
|
||||
|---------|------------|--------|
|
||||
| 非同期処理 | 待たずに進む処理 | レストランで注文後、席で待つ。厨房の前で立ち尽くさない |
|
||||
| イベント | きっかけ | ドアベルが鳴る、ボタンを押す |
|
||||
| リスナー | 見張り役 | インターホンの前で待機している人 |
|
||||
| トリガー | 発動条件 | 「このボタンを押したら」という条件 |
|
||||
| フック | 割り込みポイント | 会社のセキュリティゲート |
|
||||
| ハンドラ | 対応係 | イベントが起きたとき対応する担当者 |
|
||||
|
||||
### データ・構造
|
||||
|
||||
| 技術用語 | やさしい言葉 | たとえ |
|
||||
|---------|------------|--------|
|
||||
| JSON | データの書き方 | 住所録の書式 |
|
||||
| オブジェクト | 情報のまとまり | 名刺1枚（名前、電話番号、住所がセット） |
|
||||
| 配列 | 順番付きリスト | 番号札のついた待合室の椅子 |
|
||||
| スキーマ | 設計図 | 入力フォームの項目一覧 |
|
||||
| バリデーション | 入力チェック | 書類の不備確認 |
|
||||
|
||||
### セキュリティ・権限
|
||||
|
||||
| 技術用語 | やさしい言葉 | たとえ |
|
||||
|---------|------------|--------|
|
||||
| 認証 | 本人確認 | パスポートを見せる |
|
||||
| 認可 | 許可 | 「この部屋に入っていいですよ」というOK |
|
||||
| トークン | 入場券 | 映画のチケット |
|
||||
| セッション | 接続状態 | 電話がつながっている間 |
|
||||
| パーミッション | 権限 | 「閲覧OK、編集NG」のような許可レベル |
|
||||
|
||||
### AI・エージェント
|
||||
|
||||
| 技術用語 | やさしい言葉 | たとえ |
|
||||
|---------|------------|--------|
|
||||
| プロンプト | 指示文 | AIへの依頼書 |
|
||||
| ストリーミング | 逐次表示 | 手紙を1文字ずつ読み上げる |
|
||||
| コンテキスト | 文脈・前提情報 | 会話の流れ、今までの話 |
|
||||
| エージェント | 自動で動くAI | 自分で判断して動く秘書 |
|
||||
| ツール | AIが使える道具 | 秘書が使えるファイル、電話、パソコン |
|
||||
|
||||
---
|
||||
|
||||
## 用語解説ボックスの書き方
|
||||
|
||||
```html
|
||||
<div class="term-explain">
|
||||
<div class="flex items-start gap-4">
|
||||
<i data-lucide="lightbulb" class="w-8 h-8 text-purple-500"></i>
|
||||
<div>
|
||||
<div class="term-word text-xl font-bold">「コールバック関数」とは？</div>
|
||||
<div class="term-meaning text-lg mt-2">
|
||||
難しそうな名前ですが、要は<span class="font-bold text-purple-600">「呼び出されたときに実行される処理」</span>のこと。<br>
|
||||
電話の「コールバック（折り返し電話）」と同じで、「何かあったら呼んでね」と登録しておく処理です。<br>
|
||||
<span class="font-bold">この図解では「チェック係」と呼びます。</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### CSS
|
||||
|
||||
```css
|
||||
.term-explain {
|
||||
background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
|
||||
border-left: 4px solid #9333ea;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.term-word {
|
||||
color: #7c3aed;
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user