mcpField
E
explainer-visuals

explainer-visuals

github.com/petekpクリエイティブ・メディア10101 回インストール21 週間前に更新
リポジトリ

explainer-visuals について

explainer-visualsは、複雑な概念をアニメーションやインタラクティブなビジュアルに変えるためのスキルです。目的と対象読者を確認して形式を選び、アクセシビリティに配慮した単体HTMLとして仕上げます。

主な機能

  1. 01アニメーションビジュアルの作成
  2. 02短いヒアリングから開始
  3. 03概念に応じた形式の選択
  4. 04動きと配色の原則を適用
  5. 05アクセシブルな操作に対応
  6. 06単体HTMLファイルで納品

活用シーン

  1. 01記事で複雑な概念を説明
  2. 02プロセスや関係、変化を表示
  3. 03操作可能なデータビジュアルを作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/petekp/agent-skills --skill explainer-visuals

インストール後、Claude Code で/explainer-visualsを入力して読み込まれたか確認します。

同梱ファイルreferences/patterns.md

詳細

解説ビジュアル

複雑なアイデアを直感的に理解できる、アニメーション付きのインタラクティブなビジュアルを作成します。

基本理念

優れた解説ビジュアルは、単に説明するだけではなく、明らかにします。複雑さに隠れた構造や、静的な説明に暗示された動き、言葉では伝えにくい関係性を示します。

基本原則：

  • 積み重ねて生まれる複雑さ：シンプルに始め、インタラクションやアニメーションを通じて段階的に要素を加えます
  • 意味を持つ動き：動きには、注意を引くだけでなく意味を持たせます
  • 静止時にも読み取れること：静止状態でも、核となるアイデアが伝わるようにします
  • 段階的な情報開示：閲覧者が探索の深さを調整できるようにします

課題の把握

ビジュアルを作成する前に、AskUserQuestion を使って簡潔なヒアリングを行います。何をビジュアル化するかだけでなく、なぜそのアイデアにビジュアルが必要なのかを理解します。

ヒアリングの質問

次のカテゴリから、焦点を絞った質問を1～2個尋ねます。

アイデアを理解する：

  • 「閲覧者に持ち帰ってほしい、最も重要な気づきは何ですか？」
  • 「この概念が、言葉だけでは説明しにくいのはなぜですか？」
  • 「このビジュアルで正したい、よくある誤解はありますか？」

文脈を理解する：

  • 「エッセイのどこに表示しますか？（冒頭の導入、根拠の補足、クライマックスでの発見、まとめ）」
  • 「周囲のコンテンツはどのようなトーンですか？（学術的、会話的、挑発的、説明的）」

読者を理解する：

  • 「読者はこのトピックについて、すでに何を知っていますか？」
  • 「手短な気づきとして見せたいですか、それともじっくり探索できる内容にしたいですか？」

ユーザーが目標について十分に詳しい文脈をすでに提供している場合に限り、ヒアリングを省略します。

ビジュアル形式の選択

アイデアの性質に応じて形式を選びます。

概念の種類最適な形式理由
変化・変容変形アニメーション変化の過程を連続的に示し、前後の状態を表現します
階層・構造ズーム可能なツリーマップまたは入れ子状の図インタラクションを通じて階層を明らかにします
プロセス・フロースクラバー付きの段階的なアニメーション情報が明らかになるペースをユーザーが調整できます
比較同期アニメーション付きの並列表示並列した構造によって違いを際立たせます
蓄積・成長構築型アニメーション要素が一つずつ前の状態に加わります
関係性・ネットワーク力学的配置によるグラフ創発的な構造を明らかにします
分布・割合アニメーション付きのユニットチャートまたはワッフルチャート数量を実感しやすくします
循環・フィードバック開始点を選べるループアニメーションシステムが絶えず動き続ける様子を示します
タイムライン・順序注釈付きの横スクロール自然な読み進める方向に沿います
空間・地理ズーム機能付きの注釈入り地図抽象的な内容を現実の場所に結びつけます
メンタルモデルメタファーに基づく図抽象的な概念を身近なものに結びつけます
トレードオフ・緊張関係スライダーで調整するバランス表示相互依存性を示します

デザインシステム

タイポグラフィ
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

--text-hero: 2rem;      /* Single key number or word */
--text-title: 1.25rem;  /* Visual title */
--text-label: 0.875rem; /* Axis labels, annotations */
--text-micro: 0.75rem;  /* Secondary details */
カラーパレット

ミニマル（デフォルト）：

--ink: #1a1a2e;        /* Primary elements */
--ink-light: #4a4a68;  /* Secondary elements */
--accent: #e94560;     /* Single highlight */
--ground: #fafafa;     /* Background */
--ground-alt: #f0f0f5; /* Alternate regions */

データが豊富な場合（カテゴリを示す場合）：

--cat-1: #4e79a7; --cat-2: #f28e2c; --cat-3: #e15759;
--cat-4: #76b7b2; --cat-5: #59a14f; --cat-6: #af7aa1;

エッセイの文脈に合わせる：

  • 技術的・分析的 → 寒色系のパレット、コントラストを強めます
  • 個人的・内省的 → 暖色系で、輪郭を柔らかくします
  • 挑発的・挑戦的 → アクセントカラーを大胆にし、彩度を高めます
動きの原則
const EASE = {
  standard: 'cubic-bezier(0.4, 0, 0.2, 1)',  // Smooth, natural
  enter: 'cubic-bezier(0, 0, 0.2, 1)',       // Start fast, settle
  exit: 'cubic-bezier(0.4, 0, 1, 1)',        // Start slow, accelerate
  bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)' // Slight overshoot
};

const DURATION = {
  micro: 100,    // Color, opacity
  fast: 200,     // Small movements
  medium: 350,   // Standard transitions
  slow: 500,     // Large movements
  dramatic: 800  // Major reveals
};

動きの意味：

  • フェード = 存在（出現・消失）
  • 拡大・縮小 = 重要性（強調・弱調）
  • 移動 = 関係性（グループ化・分離）
  • 変形 = 同一性（変化）
  • 回転 = 状態（切り替え・循環）

技術の選択

効果を実現できる、最もシンプルなツールを選びます。

複雑さツール使用する場面
シンプルPure CSS状態の遷移、ホバー、基本的な変形
標準Vanilla JS + CSS順次実行するアニメーション、スクロール時のトリガー、シンプルなインタラクション
複雑GSAPタイムラインシーケンス、物理演算、SVG の変形
データ駆動D3.js力学的レイアウト、地図、データに連動した遷移

ほとんどの解説ビジュアルでは、Vanilla JS + CSS で十分です。

コード構成

すべてのビジュアルは、自己完結型の HTML ファイルです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Visual: [Concept Name]</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root { /* Design tokens */ }
    /* Component styles */
  </style>
</head>
<body>
  <figure class="explainer-visual" role="img" aria-label="[Description]">
    
    <figcaption class="visually-hidden">[Accessible description]</figcaption>
  </figure>
  <script>
    // Animation and interaction logic
  </script>
</body>
</html>
アクセシビリティ要件
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

すべてのビジュアルには、以下を含める必要があります。

  1. コンテナに role="img" aria-label="..." を設定する
  2. .visually-hidden キャプションに完全なテキストによる代替説明を記載する
  3. prefers-reduced-motion に対応する
  4. キーボードで操作できるようにする
  5. フォーカス状態を視認できるようにする

パターンリファレンス

実装パターンについては、references/patterns.md を参照してください。

  • 形状の変形を伴うトランジション
  • スクロールに連動するストーリーテリング
  • インタラクティブなスライダー図
  • 注釈付きのステップ形式アニメーション
  • 力指向の関係グラフ
  • ユニットチャート／ワッフルチャートのアニメーション

提出物

以下の条件を満たす、単一の HTML ファイルとして出力してください。

  1. 完全に自己完結している（CSS／JS をすべてインライン化する）
  2. ブラウザーで直接開いて動作する
  3. iframe に埋め込める
  4. 重要な判断を説明するコメントを含む

ライブラリに依存するビジュアル（D3、GSAP）では、整合性ハッシュ付きの CDN リンクを含めてください。

品質チェックリスト

提出前に確認してください。

  • 静止状態で中心的な考えが伝わる
  • アニメーションが装飾だけでなく、洞察を引き出す
  • インタラクションを見つけやすい（カーソルのヒント、ホバー状態）
  • モバイルで動作する（タッチ操作に適し、レスポンシブである）
  • 動きを抑えた代替表示がある
  • アクセシブルな説明が完全である
  • 後から変更できるようにコードにコメントがある
  • ファイルサイズが適切である（シンプルな場合は 100KB 未満、複雑な場合は 500KB 未満）

コメント

Markdown 対応