visual-storytelling-design について
ストーリー構成、注釈、フレーミング、スクロールテリングを用いてデータストーリーを設計するスキルです。表現方法の選択と、視覚的な説明の明確さや誠実さの確認を支援します。
主な機能
- 01ストーリーの流れと導入方法
- 02注意を導く注釈
- 03基準値や比較による文脈づけ
- 04段階的に示すスクロールテリング
- 05明確さと誠実さの確認リスト
活用シーン
- 01データビジュアライゼーションの物語を設計する
- 02チャートに注釈を加えて洞察を明確にする
- 03ウェブストーリーの段階的な情報提示を設計する
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/visual-storytelling-designを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
resources/narrative-techniques.mdstorytelling-patterns.mdresources/evaluators/rubric_visual_storytelling.json詳細
ビジュアルストーリーテリングデザイン
目次
基本原則： データをナラティブ（文脈 → 問題 → 根拠 → 洞察）として構成すると、理解と記憶の定着に役立ちます。注釈は注意を導き、段階的な開示は複雑さを少しずつ明らかにし、フレーミングは正確な解釈のための文脈を提供します。
関連スキル： 認知原則には cognitive-design、D3.js の実装には d3-visualization、体系的な評価には design-evaluation-audit、公正性の確認には cognitive-fallacies-guard を使用します。
ストーリーデザインのワークフロー
所要時間： 1～2 時間
このチェックリストをコピーして、進捗を記録してください：
Story Design Progress:
- [ ] Step 1: Define Narrative
- [ ] Step 2: Choose Structure
- [ ] Step 3: Apply Cognitive Techniques
- [ ] Step 4: Review for Clarity & Integrity
ステップ 1：ナラティブを定義する
ストーリーの展開を決めます。文脈は何でしょうか？ 問い／問題は何でしょうか？ どのデータが答えを示すでしょうか？ 洞察は何でしょうか？ 人への影響、意外な発見、またはビジュアルから始めるなど、導入の方針を選びます。
リソース： ナラティブの手法 —「ナラティブ構造」セクション
ステップ 2：構成を選ぶ
ストーリーの種類、対象読者、媒体に合ったテンプレートとパターンを選びます。選択肢には、ステップ形式の記事、雑誌風、注釈付きチャート、インタラクティブな探索、プレゼンテーション用スライドなどがあります。
リソース： ストーリーテリングのパターン —「テンプレート」と「選択マトリックス」
ステップ 3：認知テクニックを適用する
注釈（吹き出し、矢印、網掛け領域、直接ラベル）を追加します。基準線、比較、分母の明確化によってフレーミングを適用します。ウェブベースの場合は、段階的な開示にスクロールテリングを使用します。ビジュアルメタファーも検討します。
リソース： ナラティブの手法 —「注釈」「スクロールテリング」「フレーミング」の各セクション
ステップ 4：明瞭さと公正性を確認する
ストーリーが誠実であること（都合のよいデータだけを選ばず、バランスの取れたフレーミングになっている）、明瞭であること（洞察が 5 秒でわかる）、完全であること（出典を明記し、制限事項を記載している）を確認します。体系的な評価には design-evaluation-audit を、公正性の検証には cognitive-fallacies-guard を使用します。
パス選択メニュー
パス 1：ナラティブ構造を構築する
次の場合に選択： データストーリーを始めるにあたり、ストーリーの展開と導入の方針を決める必要がある場合。
→ ナラティブの手法へ — セクション 1～2
パス 2：注釈を使いこなす
次の場合に選択： 既存のチャートやビジュアライゼーションの解釈を導くために、注釈を追加する場合。
→ ナラティブの手法へ — セクション 3
パス 3：スクロールテリングをデザインする
次の場合に選択： ウェブベースで段階的に情報を開示する体験を構築する場合。
→ ナラティブの手法へ — セクション 4
パス 4：フレーミングとメタファーを適用する
次の場合に選択： 文脈、基準線、比較、ビジュアルメタファーを提供する場合。
→ ナラティブの手法へ — セクション 5～6
クイックリファレンス
ストーリーテリングの 5 原則
- トピックではなく洞察から始める — タイトルは「リモートワーカーの満足度は 23％高い」とし、「リモートワーク調査の結果」とはしません
- 洞察に注釈を付ける — 読者に発見させるのではなく、吹き出しで示します
- 文脈を提供する — すべての割合に基準線、過去との比較、分母を示します
- 一度に変更するのは 1 つだけ — スクロールテリングでは、ハイライトか注釈のどちらか一方にし、同時には使いません
- 誠実である — データ全体を示し、制限事項を認め、都合のよいデータだけを選ぶことを避けます
ガードレール
対象範囲： このスキルでは、データストーリーテリングのためのナラティブ構成、注釈の手法、スクロリーテリングのパターン、フレーミングのガイダンス、ストーリーテンプレート、品質チェックリストを提供します。コードの実装、一般的なユーザビリティの評価、認知理論の解説、誤解を招くパターンの確認は行いません。