Communitygithub.com

Nc898/ビジュアルラーニングデザイン

マイヤーのマルチメディア学習認知理論(首尾一貫性、シグナリング、冗長性、近接性、セグメント化、事前トレーニング、モダリティ、パーソナライゼーション、身体化、生成的活動)に基づいて教材の設計と監査を行います。学習用ウェブアプリ、インタラクティブな解説やシミュレーション、チュートリアルやオンボーディングのウォークスルー、デモ、スライドデッキや講義、解説動画やナレーション原稿、ショート動画(TikTok、Reels、Shorts)、教育ソーシャル投稿、カルーセルやスレッド、インフォグラフィック、コースモジュールなど、何かを教えたり説明したりするものを作成またはレビューする際に使用してください。「これをわかりやすくして」「Xを視覚的に説明して」「学生にこれを理解させたい」といったリクエストにも対応します。

ビジュアルラーニングデザイン とは?

このスキルは、リチャード・マイヤーのマルチメディア学習認知理論(CTML)に基づき、学習教材の設計と監査を体系的に行うためのものです。学習者の認知負荷を最適化し、**転移**(未見の問題に学んだ概念を応用する能力)を最大化することを目的としています。スキルは、学習者の前提知識やペーシング(システム主導/学習者主導)を考慮したワークフローを提供し、教材の目標設定、内容の整理、視覚表現の選択、そして15の原則に従った設計と監査を段階的に行います。特に、学習を妨げる「外的負荷」を削減し、教材の複雑さに起因する「必須負荷」を管理し、学習者の能動的な理解を促す「生成的負荷」を fostering することに焦点を当てます。スライド、動画、ウェブアプリ、ソーシャルメディア投稿など、多様なメディア形式に対応した具体的なプレイブックとチェックスクリプトが付属しており、Claude CodeやCursorなどのコード生成・編集エージェントで使用することを想定しています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Nc898/visual-learning-design/tree/HEAD/plugins/visual-learning-design/skills/visual-learning-design

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ビジュアルラーニングデザイン は何をしますか?

あなたは理解のためにデザインしています。学習者が、後で見たことのない問題を解決するためにアイデアを使えるかどうか(転移)が重要です。想起や見た目の良さは二の次です。ここにあるすべては、リチャード・マイヤーのマルチメディア学習認知理論(CTML)とその周辺の研究に基づいています。これらの原則は、既知の境界条件を持つ強力なデフォルトとして扱い、絶対的な法則としては扱わないでください。

あなたが設計する際のモデル

学習者の心に関する3つの仮定:

  • 二重チャネル. 人は聴覚/言語チャネルと視覚/画像チャネルを持っています。印刷された文字は目から入るため、画面上のテキストは視覚チャネルをグラフィックと競合します。話し言葉は競合しません。
  • 容量制限. 各チャネルは一度に保持できる情報量が限られています。
  • 能動的処理. 学習者は、関連する言葉と画像を選択し、それぞれを首尾一貫したモデルに組織化し、それらのモデルを互いに、そして既存知識と統合するときに学習が起こります。

学習時間は3種類の処理に依存します。この3つの言葉であらゆるデザイン上の決定を判断します:

負荷原因あなたの仕事
外的悪いデザイン:乱雑さ、注意の分割、同期の取れていないメディア削減する
必須教材がこの学習者にとってどれだけ複雑か管理する
生成的教材を理解しようとする学習者の努力促進する

オーバーロードは、外的処理と必須処理の合計が容量を超えたときに発生します。外的負荷を削減し、必須負荷を管理した後、残るリスクは、学習者が考えることはできても、そうする理由がないことです。生成的デザインがそれを修正します。

ワークフロー

1. 学習者と状況をプロファイリングする

それぞれについて1行書き留めてください:

  • 目標。学習者ができることとして記述します(「抵抗が2倍になったときの電流の変化を予測する」など)。「Xを理解する」ではありません。
  • 前提知識:このトピックに関する初心者、中級者、または専門家。これが最も強力な調整要因です。ほとんどの原則は初心者に対して最も効果的であり、一部は専門家に対して逆転します(専門家逆転効果)。
  • ペーシング:システム主導(動画、ライブトーク、自動進行アニメーション)または学習者主導(スクロール可能なページ、セルフペースのデッキ、シミュレーション)。ペーシングによって、冗長性、モダリティ、首尾一貫性の適用がどの程度厳密になるかが決まります。
  • メディア、長さ、言語(教材は学習者の第二言語ですか?)、およびアクセシビリティ要件。

すべての行が埋まったら完了です。不明な点がある場合は、初心者、音声がある場合はシステム主導と仮定し、出力でその仮定を述べてください。

2. 必須コンテンツを棚卸しする

主要な要素(名前付きの部品、用語、アクター)とそれらの間の関係(因果関係、プロセスステップ、比較、構造)をリストアップします。目標に必要な要素でも関係でもないコンテンツは、削除の候補です。要素リストは事前トレーニングの教材にもなります。

計画されたすべてのコンテンツに必須または削除のタグが付けられ、要素リストが存在したら完了です。

3. 表現方法を選択する

必須のアイデアごとに、その機能に基づいてグラフィックを選択します:

  • 描写的:それがどのように見えるか
  • 組織的:各部分が質的にどのように関連しているか(概念マップ、階層構造)
  • 関係的:量的な関係(グラフ)
  • 変換的:時間の経過に伴う変化またはプロセス
  • 解釈的:目に見えない、または抽象的なメカニズムを可視化したもの(因果関係、モデル)

装飾的は機能ではありません。ムードを追加するだけのビジュアルは外的負荷です。

アニメーションは、時間の経過に伴う変化が学習すべきことである場合(プロセス、動作、手続き的運動技能)にのみ使用し、コントロールを提供してください。それ以外の場合は、一連の静的なキーフレームを優先します。アニメーションは一時的であり、学習者が次のフレームと比較する前に各フレームが消えてしまいます。

言葉については、ペーシングで決定します。システム主導の作品では、話し言葉によるナレーションが説明を伝え、画面にはグラフィックと簡潔なラベルを表示します。学習者主導の作品では、印刷されたテキストでも問題ありませんが、それが説明するグラフィックの内部または隣になければなりません。

すべてのビジュアルに名前付きの機能があり、すべての言葉の流れにモダリティ(話し言葉または印刷)と位置がある場合に完了です。

4. 原則を適用する

下の表を負荷ごとに、順番に(外的、次に必須、次に生成的)見ていってください。境界条件が適用される可能性がある場合(専門家の学習者、学習者主導の教材、第二言語学習者、技術用語、長いレッスン)、またはユーザーにトレードオフを正当化する必要がある場合は、references/principles.mdを読んでください。これには、密接に関連する認知負荷効果(ワーキング例、専門家逆転効果、過渡情報、フィードバック付き練習)も含まれています。

5. メディアプレイブックを適用する

作成しているメディアのファイルを読んでください。作品が複数のメディアにまたがる場合(埋め込み動画のあるウェブアプリ、スライドを使った録画トーク)、該当する各ファイルを読んでください。

作成するもの…読むファイル
ウェブアプリ、インタラクティブ解説、シミュレーション、eラーニングモジュール、アプリ内チュートリアル、スクロールテリング、レッスンデータ可視化references/web-apps.md
スライドデッキ、ライブ講義、ナレーション付きまたはセルフペースのスライドショーreferences/slides.md
解説動画や講義動画、ナレーション付きアニメーション、スクリーンキャスト、マイクロラーニング、AI生成動画references/video.md
デモンストレーション(ライブまたは録画)、ソフトウェアウォークスルー、手順デモ、ワーキング例、製品ツアーreferences/demonstrations.md
短尺縦型動画(TikTok、Reels、Shorts)、ソーシャル投稿、カルーセル、スレッド、ストーリーズreferences/social-and-short-form.md
インフォグラフィック、教科書やドキュメントの図、配布資料、ゲーム、VR/AR、音声のみ、AIチューターとアバターreferences/other-formats.md

Markdown ドラフト形式。 成果物が Markdown スライドアウトライン、カルーセル、またはビデオスクリプトの場合、ドラフトチェッカーが読み取る形式で記述します:

  • スライドとカルーセル: 各スライドに ## Slide N: <作業タイトル> セクション。以下を含む:
    • **Headline:** 要点となる文
    • **On screen:** 続けて > 行で、表示されるそのままの画面上テキストを保持
    • **Visual:** グラフィックの説明
    • **Speaker notes:** プレゼンテーションデッキの場合、または **Alt text:** カルーセルの場合
  • ビデオとショートフォームスクリプト: 列 Time | Voiceover | Visual | On-screen text を持つ1つのMarkdownテーブル。ビートごとに1行。

6. 実際のアーティファクトをチェックする

Markdownスライドアウトライン、カルーセル、スクリプトについては、まずドラフトチェッカーを実行します。これはこのスキルのベースディレクトリにある scripts/check_draft.py で、Python標準ライブラリのみが必要です:

python <skill-dir>/scripts/check_draft.py draft.md --seconds 45   # --seconds: ブリーフの目標時間

目標時間のあるビデオの場合は --seconds を渡します。これがない場合、チェッカーはタイトルから「~45 sec」のような長さを読み取ります。

カウント可能なものをカウントします:スライドあたりの画面上の単語数(ヘッドライン含む)、ヘッドラインの長さ、代替テキスト、スピーカーノート、ナレーションの実行時間、ナレーションを繰り返す画面上テキスト、フック、最後の視聴者へのプロンプト、ナレーションの下の音楽。すべてのFAILを修正してください。境界条件がそれを正当化しない限り、すべてのWARNも修正してください。あなた自身の単語数は変動するので、スクリプトを信頼してください。

次に、references/audit-checklist.mdを実際の出力(レンダリングされたページ、スライド、または2列のスクリプト。計画ではありません)に対して実行します。何かを引き渡す前に、失敗するすべての項目を修正してください。チェッカーにFAILがなく、チェックリストのすべての項目が合格または該当しない場合に完了です。このチェックはあなたのためのものです。チェックリスト、チェッカーの出力、およびそれらのマークは成果物に含めないでください。

原則一覧

数値は Mayer (2021) の中央値:Cohen's d、全テスト数に対する陽性テスト数。約0.4を超える効果は教育的に意味があります。この数値は主に初心者の大学生を対象とした短い実験室のレッスンから得られているため、優先順位を決めるために使用し、結果を約束するためには使用しないでください。

原則これを行うd (テスト数)効果が弱まる、または逆転する場合
マルチメディア言葉と関連するグラフィックを、言葉だけでなく使用する1.35 (13)グラフィックが装飾的である場合;学習者が専門家である場合
外的負荷を削減
首尾一貫性面白いが無関係な言葉、画像、音、音楽(誘惑的な詳細)を削除する0.86 (18/19)学習者主導;ワーキングメモリが高い;追加教材が誘惑的ではなく退屈である場合
シグナリング構造と要点を手がかりで示す:見出し、アウトライン、矢印、ハイライト、声の強調0.70 (26/28)専門家;単純な教材;過剰な手がかり(すべてがハイライトされている場合、何もハイライトされていない)
冗長性ナレーションの全文を、ナレーション付きグラフィックの隣の画面に表示しない0.10 (8/12)学習者主導;短いまたは言い換えられたテキスト;第二言語学習者;グラフィックなし。効果が小さいため、アクセスキャプションを削除する正当な理由にはならない
空間的近接性印刷された言葉を、それが説明するグラフィックの部分の隣に配置する0.82 (9/9)専門家;単純なレッスン
時間的近接性物事が表示されている間にナレーションを入れ、前後に入れない1.31 (8/8)短い、または学習者主導のレッスン
必須負荷を管理
セグメント化コンテンツを意味のあるチャンクに分割し、学習者が進める(「続ける」コントロール)0.67 (7/7)単純な、またはゆっくりとしたペースの教材
事前トレーニング主要な部品の名前と特性を、それらの仕組みの説明の前に教える0.78 (10/10)高い前提知識;単純または学習者主導の教材
モダリティグラフィックを印刷テキストではなく、話し言葉で説明する1.00 (18/19)技術用語、数式、コード;第二言語学習者;学習者主導;後で参照する必要がある教材
生成的負荷を促進
パーソナライゼーション会話調で書く:「あなた」、「あなたの肺」、「さあ」1.00 (13/15)専門家;長いレッスン;強制的な親しみやすさ
声魅力的な人間の声または高品質の現代TTS音声でナレーションを入れ、ロボット音声は絶対に使わない0.74 (6/7)他の場所での否定的な社会的合図(硬いアバター)
身体化画面上のインストラクターまたはエージェントが、説明しながらジェスチャーをしたり、指さしたり、コンテンツを見たり、描いたりする0.58 (16/17)機械音声と組み合わせた場合
イメージ画面上の静的な顔やアバターはほとんど追加効果がなく、気を散らす可能性がある。人が何かをする場合にのみ表示する0.19 (4/7)(「気にするな」の原則)
没入感VRや3Dがよくデザインされた2Dデスクトップバージョンに勝ると仮定しない信頼できる利得なしタスクが真に空間的または身体化されている場合
生成的活動学習中に、要約、マッピング、描画、自己説明、自己テスト、教える、または実演するように促す0.71 (37/44)活動に関するガイダンスやトレーニングがない;活動が初心者を過負荷にする

競合の解決

原則は互いに、また他の目標と競合します。一般的な競合は次のように解決します:

  • アクセシビリティ vs. 冗長性。 キャプション、トランスクリプト、代替テキスト、音声ガイドはアクセス要件(WCAG 1.2.x, 1.1.1)であり、冗長性効果は小さいです。キャプションはクローズドで、学習者が切り替え可能なトラックとして提供します。焼き付けられた全文の画面上テキストこそが、冗長性の問題です。聴覚障害や難聴の学習者が、テキストとビジュアルを通じてすべての必須アイデアを追跡できるようにしてください。
  • エンゲージメント vs. 首尾一貫性。 関連性(学習者が気にかける実際の問題)、社会的合図(会話調の声、説明しながら描く人間)、および生成的活動から興味を構築します。装飾、ストックフォト、音楽、または面白トリビアのサイドバーからではありません。短いレッスンは、誘惑的な詳細に対して最も高い代償を払います。
  • プラットフォームの慣習 vs. 原則(ソーシャルフィード)。音声なしでも機能するように投稿を作成し、画面上テキストが骨格を伝え、ナレーションが説明を伝えるようにします。焼き付けキャプションは、説明されているビジュアルから離れた場所に短いフレーズのチャンクとして配置される場合に許容されます。フックはギミックではなく、学習の質問そのものにします。流行のオーディオはナレーションから遠ざけてください。
  • ブランド vs. 首尾一貫性。 ブランディングはタイトルまたはエンドカードと、落ち着いたパレットに抑えます。すべてのフレームにあるロゴ、マスコット、スローガンは外的負荷です。
  • 単一のオーディエンスにおける初心者 vs. 専門家。 初心者向けのメインパスをデザインし、専門家は折りたたみ可能な事前トレーニング、オプションのワーキングステップ、「練習にジャンプ」リンクなど、サポートをスキップできるようにします。固定された足場は専門家を遅くします(専門家逆転効果)。
  • 簡潔さ vs. 完全性。 教材が長い場合は、必須の関係を削除するのではなく、セグメント化します。ステップ2で非必須とタグ付けされたものだけを削除します。
  • トーキングヘッド vs. イメージの原則。 開始時に短い顔を表示すると、社会的存在感が構築されます。その後はコンテンツを表示し、その人の手、視線、または描画が情報を伝える場合にのみ、その人を戻します。

出力

構築時: アーティファクトを納品し、その後に3〜8個の箇条書きからなる短いデザイン根拠を添えてください。各箇条書きは、決定、その背後にある原則、およびそれが対象とする負荷を示します。ステップ1からのすべての仮定をリストしてください。監査テーブルやチェックリストの結果は含めないでください。あなたの立場からチェックできなかったもの(まだレンダリングされていないアートのコントラストや可読性)がある場合は、根拠の後に1行で述べてください。

既存の教材の監査時: 期待される学習インパクト(効果量と学習者プロファイルを使用)でランク付けされた調査結果を報告してください。各調査結果は、場所(スライド4、01:32、#chart セクション)、問題、原則と負荷、および具体的な修正を示します。調査結果を負荷ごとにグループ化してください。最後に、最も効果の高い2つまたは3つの変更点を述べてください。

選択を説明するときは、ユーザーが語彙を学べるように、原則を名前で引用してください。効果量については正直に、「強力な実験的証拠」や「小さな効果」と述べ、パーセンテージの改善を約束しないでください。

関連スキル