このツールについて

学習者データ可視化ツール Version 1.1.0 | 2026年7月8日更新（2026年7月3日公開）

設計思想

外国語教師は、研究だけでなく日常の教育実践においても、テストスコアや自己評価データなど、学習者の能力を数量化したデータを頻繁に扱います。しかしそうしたデータを「見る」ための手段は、Excelによる基本的な集計か、統計ソフトの複雑な操作に限られることが多く、データの可視化が実践に活かされにくい状況があります。

本ツールは、外国語教師のためのワークショップ用教材として開発しました。専門的な統計知識やソフトウェアのインストールを必要とせず、ブラウザ上で即座にデータを可視化・比較できることを主眼としています。設計上の主な原則は以下のとおりです。

ゼロインストール：ブラウザさえあれば動作します。外部サービスへのデータ送信は一切行いません。
リアルなサンプルデータ：架空の氏名とスコアを持つ75名分のデータをあらかじめ組み込み、実際の授業データを想定した文脈でグラフを体験できます。
インタラクティブな探索：チェックボックス操作だけで群や時点の組み合わせを切り替え、グラフの変化をリアルタイムで確認できます。
個人の追跡：散布図や蜂群図でドットにカーソルを乗せると個人の氏名とスコアが表示され、「誰が下がったのか」を即座に把握できます。
1ファイル完結：HTML + CSS + JavaScript を1ファイルにまとめており、サーバーへの設置が容易です。

基本機能と使い方

データの入力

データは3つの方法で入力できます。

Excelから一括貼り付け：Excelで対象範囲を選択してコピーし、貼り付けエリアにペーストして「読み込む」を押します。1時点の場合は Group, Score の2列、2時点の場合は Group, Pre, Score の3列形式に対応しています（ヘッダー行は自動検出）。
群別エリアへの直接入力：「群別エリアを表示」を開き、各テキストエリアに数値を1行1件で入力します。スペース・タブ・コンマ区切りにも対応しています。
データ表でのセル編集：「データ表」を開くと氏名付きの一覧が表示され、スコアを直接クリックして編集できます。編集後は「グラフに反映」ボタンで更新します。CSVダウンロードも可能です。

データ構造の選択

「データ構造」セレクタで 1時点（横断） または 2時点（Pre/Post） を選択します。2時点を選ぶと、時点（Pre/Post）のチェックボックスとプレポスト専用のグラフタブが表示されます。

表示グループと時点の切り替え

上部のチェックボックスでグループ（A/B/C）と時点（Pre/Post）を個別にON/OFFできます。データはすべて保持されたまま、表示のみが切り替わります。「全選択」「Preのみ」「Post のみ」などのクイックボタンも利用できます。

グラフの種類

グラフ	用途
ヒストグラム	スコアの度数分布。ビン幅を5/10/15/20点で調整可能。
密度曲線	分布の形を滑らかに推定（カーネル密度推定、帯域幅8）。±1SD範囲を濃い色で強調表示。
蜂群図	個々のデータ点を重ならないよう横方向にずらして表示。全データ点が見える。ドットにカーソルで氏名を表示。
箱ひげ図	中央値・四分位範囲・ひげ（IQR×1.5以内）・外れ値を表示。
ヴァイオリン図	密度曲線を縦にして左右対称にしたもの。箱ひげ図と重ねて表示。
折れ線（interaction）	群ごとのPre/Post平均値を結んだInteraction plot。±1SDのヒゲ付き。y軸はデータ範囲に自動調整（0起点なし、broken axis表示）。
対応散布図	横軸Pre・縦軸Postで1人1点。対角線より上が得点上昇、下が下降。ドットにカーソルで氏名・スコア・変化量を表示。

裏で動いている統計処理

記述統計

各群・各時点について以下の指標を計算して表示します。

平均値（算術平均）
中央値（データを昇順に並べたとき中央に来る値）
最頻値（最も多く出現する値。複数ある場合はすべて表示）
標準偏差 SD（母標準偏差、n で割る）
分散（SDの二乗）
四分位範囲 IQR（第3四分位数 − 第1四分位数）
範囲（最大値 − 最小値）

SD = √[ Σ(xᵢ − x̄)² / n ]

※ 本ツールでは推測統計・母集団の推計を目的としないため、不偏標準偏差（n−1除算）ではなく母標準偏差（n除算）を採用しています。ExcelのSTDEV関数やRのsd()はn−1除算のため、サンプルサイズが小さい場合に数値がわずかに異なります。

カーネル密度推定（密度曲線）

ガウシアンカーネルを用いた密度推定を行っています。帯域幅（bandwidth）は固定値 8 を使用しています。密度曲線は連続的な分布の形を視覚的に把握するためのものであり、厳密な統計的検定への利用は意図していません。

f̂(x) = (1/nh) Σ K( (x − xᵢ) / h ) K(u) = (1/√2π) exp(−u²/2)

密度曲線では、平均値±1SDの範囲を濃い色で塗り重ねて表示します。正規分布であれば全データの約68%がこの範囲に収まります。

箱ひげ図の外れ値判定

Tukey の方式に従い、第1四分位数（Q1）から IQR×1.5 を引いた値より小さい点、および第3四分位数（Q3）に IQR×1.5 を加えた値より大きい点を外れ値として表示します。

外れ値の基準: x < Q1 − 1.5×IQR または x > Q3 + 1.5×IQR

効果量（d値）

表示中の系列がちょうど2つのとき（2つの群を比較しているとき、または1つの群のPre/Postを比較しているとき）、記述統計の下に効果量 d を自動表示します。分母には2系列を併合した標準偏差（pooled SD）を用います。標準偏差はすべてn除算（母標準偏差）で、pooled SDも各系列の分散をnで重み付けして計算します。

d = (M₂ − M₁) / SD_pooled SD_pooled = √[ (n₁SD₁² + n₂SD₂²) / (n₁ + n₂) ]

同一群のPre/Postを比較している場合は、Pre の標準偏差を分母とした Δ（Glass' Δ）も併せて表示します。表示中の系列が3つ以上のときは効果量は表示されません。正の値は2つ目の系列（Group B、またはPost）が1つ目の系列（Group A、またはPre）より高いことを示します。

※ d値はあくまでも記述的な指標です。統計的有意性の検定（t検定・ANOVAなど）は本ツールの対象外です。

Interaction plot（折れ線グラフ）のヒゲ

折れ線（interaction）タブでは、各時点の平均値を結んだ折れ線にヒゲ（誤差棒）を付けます。ヒゲは ±1 SD（標準偏差）を表しています。y軸は表示中のデータ範囲（SDを含む）に余白を加えて自動設定されます（0起点なし）。

※ ヒゲを標準誤差（SE）や95%信頼区間（CI）とすることも統計的には一般的ですが、本ツールはデータのばらつき自体を可視化することを優先し、SDを採用しています。

バージョン履歴

バージョン	公開日	主な変更点
1.1.0	2026年7月8日	効果量表示機能を追加。2つの系列（2群、または1群のPre/Post）を選択したとき、記述統計の下に効果量 d（pooled SD・n除算）を自動表示。同一群のPre/Post比較ではΔ（Pre SD基準）も併記。従来の密度曲線タブ限定のd値表示（Group A のSDを基準としたGlass' Δ）は廃止。
1.00	2026年7月3日	初回公開。3群・2時点対応、7種類のグラフ（ヒストグラム・密度曲線・蜂群図・箱ひげ図・ヴァイオリン図・Interaction plot・対応散布図）、チェックボックスによるグループ・時点の動的切り替え、氏名付きサンプルデータ（75名）、ドットへのカーソルオーバーによる氏名表示、CSVダウンロード、密度曲線での±1SD強調表示とd値表示。

技術情報

動作環境：モダンブラウザ（Chrome / Firefox / Safari / Edge）。Internet Explorerは非対応。
外部ライブラリ：Chart.js 4.4.1（MIT License）をCDNから読み込みます。インターネット接続が必要です。
データの取り扱い：入力されたデータはすべてブラウザ内のメモリに保持されます。サーバーへの送信・外部ストレージへの保存は一切行いません。
ファイル構成：index.php（本体）、about.php（本ページ）の2ファイルで完結します。
サンプルデータの氏名：すべて架空です。

著者・連絡先

浦野研（Ken Urano）

北海学園大学経営学部

www.urano-ken.com
urano@hgu.jp

本ツールはLET（外国語教育メディア学会）ワークショップ「学習者データを『見る』」の教材として開発しました。教育・研究目的での利用・改変は自由です。

← ツールに戻る