SKILL.md
Tutorial Design スキル
概要
このスキルは、ユーザーが実践を通じて学べる効果的なチュートリアルの 設計・作成技術を提供します。段階的学習、成功体験の設計、 視覚補助の活用を通じて、ユーザーのスキル習得を支援します。
段階的学習パス設計
3 レベル学習パスモデル
Level 1: クイックスタート (5-10分)
├── 目的: 最初の成功体験を提供
├── 内容: 最小限の操作で達成可能なタスク
├── 成果: モチベーション構築
└── 例: 「5分で最初のワークフローを実行」
Level 2: 基本チュートリアル (20-30分)
├── 目的: 主要機能の体系的学習
├── 内容: コア機能の習得
├── 成果: 実用的なタスクの達成
└── 例: 「基本的なレポートを作成する」
Level 3: 応用チュートリアル (60分+)
├── 目的: 複雑なワークフローの習得
├── 内容: 高度な機能と組み合わせ
├── 成果: ベストプラクティスの理解
└── 例: 「カスタムダッシュボードを構築する」
レベル別設計原則
| レベル |
前提知識 |
詳細度 |
視覚補助 |
成功基準 |
| Level 1 |
なし |
最小限 |
必須 |
5 分以内で完了 |
| Level 2 |
Level 1 完了 |
中程度 |
推奨 |
主要タスク達成 |
| Level 3 |
Level 2 完了 |
詳細 |
任意 |
応用能力獲得 |
ステップバイステップ構造
ステップ設計原則
- 1 ステップ 1 アクション: 各ステップは単一の明確なアクションのみ
- 番号付き: すべてのステップに番号を付与
- 動詞で開始: 「クリックします」「入力します」「選択します」
- 視覚的確認: 各ステップの成功を確認できる方法を提示
ステップ構造テンプレート
### ステップ N: [アクションの目的]
[アクションの説明]
1. **[具体的なアクション]**
- 操作: [クリック/入力/選択]
- 場所: [UI 要素の特定]
- 値: [入力する値（該当する場合）]
2. **[次のアクション]**
...
💡 **ヒント**: [補足情報]
✅ **確認ポイント**: [成功時に表示される内容]
⚠️ **注意**: [よくある間違いや注意点]
補助要素の配置
| 要素 |
アイコン |
使用場面 |
| ヒント |
💡 |
追加の便利情報 |
| 確認ポイント |
✅ |
成功の確認方法 |
| 警告 |
⚠️ |
注意すべき点 |
| 重要 |
🔴 |
必須の注意事項 |
| 参照 |
📚 |
関連情報へのリンク |
前提条件セクション設計
必須要素
## はじめる前に
### 必要なもの
- [ ] [必要なアカウント/権限]
- [ ] [必要なソフトウェア/ツール]
- [ ] [必要なデータ/ファイル]
### 前提知識
- [理解しておくべき概念]
- [完了しておくべきチュートリアル]
### 所要時間
- 約 [X] 分
### 対象者
- [どのようなユーザー向けか]
視覚補助の活用
スクリーンショット設計
配置原則
- ステップ直後配置: アクション説明の直後に配置
- 最新状態維持: 現在の UI と一致
- 強調表示: 操作箇所を矢印やハイライトで強調
- キャプション付き: 何を示しているか説明
アノテーション規約
| 要素 |
色 |
用途 |
| 矢印 |
赤 |
クリック位置の指示 |
| 枠線 |
青 |
注目エリアの強調 |
| 番号 |
緑 |
手順の順序 |
| テキスト |
黒 |
補足説明 |
図解の種類と使い分け
| 種類 |
使用場面 |
作成ツール |
| フローチャート |
プロセスの全体像 |
Mermaid |
| 画面遷移図 |
UI 操作の流れ |
Figma/Draw.io |
| 概念図 |
関係性の説明 |
Mermaid |
| 比較表 |
選択肢の整理 |
Markdown 表 |
期待結果の記述
成功基準の明示
## 完了後の状態
このチュートリアルを完了すると:
✅ [達成されること 1]
✅ [達成されること 2]
✅ [達成されること 3]
### 確認方法
[成功を確認する具体的な手順]
### 次のステップ
- [次に学ぶべきチュートリアル]
- [関連する高度なトピック]
トラブルシューティングリンク
エラー誘導パターン
## うまくいかない場合
### よくある問題
<details>
<summary>❓ [問題の症状]</summary>
**原因**: [問題の原因]
**解決方法**:
1. [解決手順 1]
2. [解決手順 2]
</details>
### 詳細なトラブルシューティング
- [トラブルシューティングガイドへのリンク]
- [サポートへの問い合わせ方法]
チュートリアル完成度チェックリスト
構造チェック
内容チェック
ユーザビリティチェック
リソース参照
| リソース |
パス |
内容 |
| 完了時間見積もり |
.claude/skills/tutorial-design/scripts/estimate-completion-time.mjs |
ステップ数から所要時間を算出 |
| チュートリアルテンプレート |
.claude/skills/tutorial-design/templates/tutorial-template.md |
標準チュートリアル構造 |
| 学習パス設計ガイド |
.claude/skills/tutorial-design/resources/learning-path-design.md |
段階的学習の詳細設計 |
関連スキル
.claude/skills/user-centric-writing/SKILL.md: ユーザー中心ライティング.claude/skills/troubleshooting-guides/SKILL.md: トラブルシューティング設計.claude/skills/information-architecture/SKILL.md: ドキュメント構造設計
