本文へ移動
cccskills
無料GitHub で公開

user-journey

ユーザージャーニーマップを、6つの専門エージェントチームで作成するスキル。プロダクト情報とターゲットユーザーを入力し、認知→検討→初回利用→習慣化→推薦の 5フェーズで行動・思考・感情・接点・機能・課題・機会・Devアクションを構造化し、 Markdownドキュメントとして出力する。クロス分析と開発ロードマップも生成する。

ペルソナファイルがあれば自動読み込み、なければ手動入力でも動作する。Use when: ジャーニーマップを作りたい、ユーザー体験の流れを設計したい、 カスタマージャーニーを作成したい、UXフローを可視化したい。

Triggers: "ジャーニー", "journey", "ジャーニーマップ", "journey map", "ユーザー体験", "user journey", "UXフロー", "体験設計", "カスタマージャーニー", "customer journey"

インストール方法を見る

含まれるファイル(6)

  • SKILL.md11.8 KB
  • references/cross-analysis-template.md1.1 KB
  • references/dev-roadmap-template.md635 B
  • references/journey-template.md1.4 KB
  • references/pen-design-spec.md6.7 KB
  • scripts/init.sh781 B

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

User Journey Skill

6つの専門エージェントがチームで議論し、ユーザージャーニーマップを作成する。 ペルソナファイルがあれば自動連携するが、手動入力のみでも動作する独立スキル。

ワークフロー

  1. ユーザーからプロダクト情報とターゲットユーザーをヒアリング
  2. Agent Team を作成し、6エージェントを並列起動
  3. フレームワーク設計 → リサーチ → ジャーニー執筆 → クロス分析
  4. ジャーニーマップ + クロス分析 + 開発ロードマップを MD で出力
  5. Pencil (.pen) でジャーニーマップを可視化(テーブル + 感情折れ線グラフ)

出力ディレクトリ構成

.claude/user-journey/{YYYY-MM-DD}_{project}/
├── context.md              <- プロダクト情報・ユーザータイプ一覧
├── log.md                  <- 議事録
├── research-data.md        <- タッチポイント・行動パターン調査
├── journeys/
│   ├── journey-01.md       <- ユーザータイプ1のジャーニーマップ
│   ├── journey-02.md
│   └── ...
└── insights/
    ├── cross-analysis.md   <- 全ジャーニー横断分析
    └── dev-roadmap.md      <- 優先度付き開発ロードマップ

Step 1: ヒアリング

以下を確認する(不明ならユーザーに質問):

  • プロダクト概要: 何をするサービス/アプリか、コア機能
  • ターゲット市場: 国・地域、言語、年齢層
  • ターゲットユーザータイプ: 3〜5タイプを推奨。各タイプの特徴:
    • 名前(ラベル)
    • 年齢層
    • 職業
    • デジタルリテラシー(高/中/低)
    • 主な課題・目標
  • 重視するフェーズ: 全フェーズか、特定フェーズを深掘りするか
  • 既存のペルソナファイル: あれば自動読み込みする

ペルソナファイル自動検出(オプション)

ペルソナファイルがある場合:

  1. Glob で ~/.claude/persona-creation/*/personas/persona-*.md を検索
  2. 最新セッション(日付プレフィックス順)を選択
  3. 各ペルソナファイルからユーザータイプ情報を抽出
  4. ユーザーに確認: 「これらのペルソナをベースにジャーニーを作成しますか?」

Step 2: チーム作成とエージェント起動

TeamCreate で user-journey チームを作成。以下6エージェントを 1つのメッセージで並列に Task ツールで起動する。

name役割主な手段
context-managerコンテキストファイル・議事録の管理Write/Edit
journey-architectフレームワーク設計・品質管理分析
ux-researcherタッチポイント・行動パターン調査WebSearch, Write
journey-writerジャーニーマップ執筆Write/Edit
insight-analystクロス分析・開発ロードマップWrite/Edit
journey-visualizerPencil (.pen) ビジュアライゼーションPencil MCP

各エージェントは agents/ ディレクトリにサブエージェントとして定義済み。

タスク作成

TaskCreate で7つのタスクを作成:

  1. context-manager: コンテキストファイルの初期作成
  2. journey-architect: フレームワーク設計(addBlockedBy: ["1"])
  3. ux-researcher: タッチポイント・行動パターン調査(addBlockedBy: ["1"])
  4. journey-writer: ジャーニーマップ執筆(addBlockedBy: ["2"])- フレームワーク確定後すぐに開始。リサーチデータは届き次第取り込む
  5. insight-analyst: クロス分析・開発ロードマップ(addBlockedBy: ["4"])- 全ジャーニー完成後に開始
  6. journey-visualizer: Pencil ビジュアライゼーション(addBlockedBy: ["4"])- 全ジャーニー完成後に開始。テーブル + 感情折れ線グラフを .pen で構築
  7. 統合レポート + 最終確定(addBlockedBy: ["1","2","3","4","5","6"])

起動設定

subagent_type: "context-manager"  # agents/ で定義済み
team_name: "user-journey"
mode: "bypassPermissions"
run_in_background: true

プロンプトに含める情報(全エージェント共通):

  • プロダクト概要、ターゲット市場、ユーザータイプ情報
  • ベースディレクトリの絶対パス(⚠️必須): init.sh が出力する絶対パスをそのまま使う
    • 例: /Users/babashunsuke/Desktop/miravy/.claude/user-journey/2026-02-21_miravy/
    • ⚠️ Write ツールは絶対パスのみ受け付ける。.claude/... のような相対パスは動作しない
  • ファイル書き込み注意: 「init.sh はディレクトリのみ作成し、テンプレートファイルは作成しない。全てのファイルはあなたが Write ツールで新規作成する必要がある」と明記する
  • ジャーニーファイル命名規則: journey-writer のプロンプトにファイル名を明示する(journey-01.md, journey-02.md, ... のゼロ埋め2桁。journey-1.md 形式は禁止)

Step 3: エージェント間フィードバックループ

フィードバックプロトコル(全エージェント共通ルール)

  1. 自分の作業が完了したら即座に関連エージェントへ共有
  2. 実質的な内容のある返信のみ送る - ACKメッセージは不要
  3. フィードバックを受けたら修正し、変更内容を共有する
  4. 待ちすぎない: 2人以上から反応があれば次のフェーズに進んでよい
  5. 全成果物は必ずファイルに書き出す - Write → Read → SendMessage の順序厳守

Round 1: フレームワーク設計 + リサーチ(並列進行)

[journey-architect]
  -> 全員に: 5フェーズ×8行のマッピングルール
  -> journey-writer: 「このフレームワークに従って執筆してください」
  -> ux-researcher: 「各ユーザータイプのタッチポイントを調査してください」

[ux-researcher]
  -> journey-writer に: リサーチデータ(ファイル + 要約メッセージ)
  -> journey-architect に: タッチポイント調査結果

[context-manager]
  -> 全員に: context.md, log.md 作成完了通知

Round 2: ジャーニー執筆(並列レビュー)

[journey-writer]
  -> 1体完成ごとに全員に共有
  -> journey-architect: フレームワーク準拠チェック依頼
  -> ux-researcher: リサーチデータ整合性チェック依頼

[journey-architect]
  -> 1体完成ごとにレビュー → journey-writer にフィードバック

[ux-researcher]
  -> タッチポイント整合性を確認 → journey-writer にフィードバック

Round 3: クロス分析 + 開発ロードマップ

[insight-analyst]
  -> 全ジャーニー読み込み → クロス分析 → 開発ロードマップ
  -> チームリーダーに完了報告

[context-manager]
  -> log.md を最終更新

Step 3.5: ファイル書き込み検証(チームリーダー必須)

全エージェントのタスクが completed になった後、最終レポート作成の前にファイル存在を検証する。

user-journey/{date}_{project}/
├── context.md              <- context-manager
├── log.md                  <- context-manager
├── research-data.md        <- ux-researcher
├── journeys/
│   ├── journey-01.md       <- journey-writer(内容があること)
│   ├── journey-02.md
│   └── ...
└── insights/
    ├── cross-analysis.md   <- insight-analyst
    └── dev-roadmap.md      <- insight-analyst

検証手順:

  1. Glob で journeys/*.md のファイル数を確認(ユーザータイプ数と一致するか)
  2. 各ファイルを Read して、空でないことを確認
  3. 不足・空のファイルがあった場合: 該当エージェントに SendMessage で催促、応答なければフォールバック書き込み

Step 4: 最終レポート出力

全ファイルが揃ったら JOURNEY_REPORT.md をプロジェクトルートに出力する。

レポートに含める:

  • 作成したジャーニーマップの一覧と概要
  • 各ジャーニーの要約(テーブル形式)
  • クロス分析のハイライト
  • 開発ロードマップの優先度 P0 施策
  • 各ファイルへのパスリンク

Step 4.5: Pencil ビジュアライゼーション(journey-visualizer が担当)

Journey Map の Markdown データを Pencil (.pen) ファイルで可視化する。 journey-visualizer エージェントが全ジャーニー完成後に自動で .pen ファイルを構築する。

構成要素

  1. テーブルレイアウト: ラベル列(160px)+ フェーズ5列(各288px)
  2. 感情折れ線グラフ: 各ユーザータイプの感情スコア(-2〜+3)を折れ線でつなぎ、データポイントと感情ラベルを表示
  3. セクション間スペーシング: ユーザータイプ間に 24px のスペーサーフレームを挿入して視認性を確保

デザイン仕様

詳細は references/pen-design-spec.md に記載:

  • フレーム構成・サイズ計算式
  • フォントサイズガイドライン(セル内本文は fontSize 10 が標準)
  • テキスト切れ防止ルール(264px 利用可能幅 → 日本語最大22文字)
  • カラーパレット(フェーズ色、感情スコア色、行タイプ色)
  • 感情折れ線グラフ座標計算
  • セクション間スペーシング仕様

テキスト切れ防止ルール(必須・全エージェント共通)

Pencil でテーブルを作成する際:

  • セル内本文 fontSize は 10 を標準(12 ではテキスト切れが頻発)
  • テキスト利用可能幅 = 288 - (12 × 2) = 264px → 日本語最大約22文字
  • 超える場合: fontSize 9 に下げるか、テキストを短縮

Pencil 品質チェック(必須)

1. snapshot_layout(problemsOnly: true, maxDepth: 10)
2. "No layout problems." → 合格 → get_screenshot で目視確認
3. 問題あり → 修正ループ:
   - テキストノード → fontSize を 1pt 下げる(最小 9pt)
   - フレームノード → 親フレームの width を拡大
   - 再度 snapshot_layout → 問題なくなるまでループ

Step 5: クリーンアップ

  1. 全エージェントに shutdown_request を送信
  2. 全員シャットダウン後に TeamDelete でチーム削除

Shell Scripts リファレンス

init.sh - プロジェクト初期化

bash scripts/init.sh <project-name>

# 例
bash scripts/init.sh miravy
# -> .claude/user-journey/2026-02-21_miravy/ を作成(カレントディレクトリ直下)

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

This skill should be used when the user asks to "create a team", "spawn agents", "parallel execution", "delegate tasks to agents", "use a swarm", "team workflow", "split work across agents", "run tasks in parallel", or mentions wanting multiple agents to collaborate on a complex task.

日本語の概要は準備中です。原文の説明を表示しています。

sean-sunagaku/claude-code-plugin382026年7月30日 更新

agent-team-guide

無料日本語概要

Agent Teams スキルを設計・構築するためのベストプラクティスガイド。 サブエージェント定義、SendMessage 通信プロトコル、タスク依存管理、 PostToolUse Hook によるログ、MCP ツール統合、コンテキストファイル設計を網羅。 7つの実績あるチームスキル(app-naming, ui-review, logo-design, persona-creation, skill-creator-team, ui-variations, aso-optimize)から抽出したパターン集。 Use when: Agent Teams を使ったスキルを新規作成したい、 既存のチームスキルの品質を改善したい、エージェント間通信のデバッグ、 チームスキルの設計パターンを知りたい。 Triggers: "agent team", "チームスキル", "エージェントチーム", "サブエージェント定義", "SendMessage パターン", "チーム設計", "エージェント間通信", "team skill", "swarm pattern"

sean-sunagaku/claude-code-plugin382026年7月30日 更新

app-naming

無料日本語概要

アプリ名・サービス名の命名を、5つの専門エージェントチームで多角的に評価・決定するスキル。 ブランディング、商標/法的リスク、デジタルプレゼンス(SEO/ASO/SNS)、国際展開(多言語/発音)の 4観点から候補を提案・調査・議論し、コンテキストファイルと議事録で次回セッションへ引き継ぐ。 Use when: アプリ名を決めたい、サービス名を変更したい、プロダクト名を検討したい、 ネーミングブレスト、名前の商標チェック、アプリ名のリネーム。 Triggers: "アプリ名", "サービス名", "プロダクト名", "ネーミング", "名前を決め", "リネーム", "rename", "app name", "naming", "ブランド名", "商標チェック"

sean-sunagaku/claude-code-plugin382026年7月30日 更新

app-store-preview-movie

無料日本語概要

App Store プレビュー動画を Remotion (React) で生成する Agent Team スキル。 video-director が構成を設計し、script-writer がナレーション台本を作成し、 motion-designer が Remotion コードを実装し、preview-reviewer がコードレビューし、 frame-inspector がレンダリング結果を目視検証する。 Use when: App Store プレビュー動画を作りたい、アプリのプロモーション動画を作りたい、 Remotion で動画を生成したい。 Triggers: "プレビュー動画", "App Store 動画", "アプリ動画", "preview movie", "Remotion", "動画作成", "app preview"

sean-sunagaku/claude-code-plugin382026年7月30日 更新

app-tone-manner

無料日本語概要

アプリのトーン&マナー(トンマナ)を8名のエージェントチームで設計するスキル。 ブランドアーキタイプ・パーソナリティ定義から、カラー・タイポグラフィ・ビジュアルスタイル・ トーン・オブ・ボイスまでを一貫設計し、Pencil (.pen) + Markdown で成果物を出力する。 「デザインテンション」(矛盾ペア)を核に、AIっぽくない独自のブランドアイデンティティを生成する。

sean-sunagaku/claude-code-plugin382026年7月30日 更新

arch-design

無料日本語概要

仕様書・要件定義からソフトウェアアーキテクチャを設計するスキル。 5人の専門エージェント(Architecture Lead・Module Designer・Dependency Analyst・ Platform Expert・Devil's Advocate)が協議しながら、 モジュール分割・依存関係・データフロー・インターフェース設計を行う。 成果物は構造化されたアーキテクチャ設計書(Markdown)。 Use when: 仕様書からどう設計するか迷っている時、モジュール分割の方針を決めたい時、 技術スタックに合ったアーキテクチャパターンを選びたい時、 設計書を作成したい時。 Triggers: "アーキテクチャ設計", "arch design", "仕様書から設計", "モジュール分割", "設計書を作りたい", "アーキテクチャを考えて", "コンポーネント設計", "依存関係を設計", "どう設計する", "design the architecture", "design from spec"

sean-sunagaku/claude-code-plugin382026年7月30日 更新

sean-sunagaku のスキルをすべて見る

このスキルの問題を報告する