このツールについて

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

設計思想

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

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

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

ページ構成

本ツールは3つのページで構成されています。ヘッダーのボタンで相互に移動できます。

ページ	できること
グラフを描く index.php	実際のデータを読み込み、7種類のグラフと記述統計で分布を確認します。
正規分布と効果量 distribution.php	平均値とSDを指定して理論上の正規分布を描き、2つの分布の重なりと効果量の関係を確かめます。
散布図と相関 correlation.php	相関係数を指定して散布図を生成する、または自分のデータで2変数の関係と個人の位置を確認します。

「グラフを描く」が実データを見るためのページ、残り2ページは指標の意味そのものを体験するためのページ、という役割分担です。

基本機能と使い方

データの入力

データは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できます。初期状態では「正規分布と効果量」ページと揃えて A群・B群が選択されています（C群のデータも読み込まれており、チェックを入れればすぐ表示されます）。データはすべて保持されたまま、表示のみが切り替わります。「全選択」「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つの分布」モードでは標準偏差の意味を、「2つの分布」モードでは平均値の差とばらつきの関係を確認できます。

±1SD・±2SD の帯

正規分布では、平均値 ±1SD の範囲に全体の約68.3%（片側それぞれ34.1%）、±2SD の範囲に約95.4%が含まれます。図中の帯とパーセンテージはこの性質を示しています。

効果量 d と Glass' Δ

「グラフを描く」ページと同じ定義を用いています。分母は2系列を併合した標準偏差（pooled SD）で、標準偏差はすべて n 除算（母標準偏差）です。

d = (M₂ − M₁) / SD_pooled SD_pooled = √[ (n₁SD₁² + n₂SD₂²) / (n₁ + n₂) ]
Δ = (M₂ − M₁) / SD₁ （Group A の SD を基準）

分布の重なり（OVL）

2つの密度曲線が重なる部分の面積です。台形則による数値積分（区間を4000分割）で計算しているため、2群の標準偏差が異なる場合も正しく求められます。標準偏差が等しい場合は 2Φ(−|d|/2) と一致します。重なりが小さいほど2群の違いが大きいことを意味します。

OVL = ∫ min[ f₁(x), f₂(x) ] dx

優越率（CLES）と Cohen's U3

効果量を「割合」として言い換えた指標です。優越率（common language effect size）は、両群から1人ずつ無作為に選んだときに Group B の方が高い得点になる確率、U3 は Group B の平均値を下回る Group A の割合を表します。

CLES = Φ[ (M₂ − M₁) / √(SD₁² + SD₂²) ] U3 = Φ[ (M₂ − M₁) / SD₁ ]

効果量の目安

図の下に Cohen (1988) の一般的な基準（.20 / .50 / .80）と、第二言語研究のメタ分析にもとづく Plonsky & Oswald (2014) の群間比較の基準（.40 / .70 / 1.00）を並べて表示しています。効果量の解釈は研究文脈に依存するため、いずれもあくまで目安です。

「散布図と相関」ページ

2つの変数（2回のテスト、2種類の技能など）の関係を散布図で表示します。相関係数を指定してデータを生成するモードと、自分のデータを貼り付けるモードがあります。

相関係数と回帰直線

Pearson の積率相関係数 r と、その二乗である決定係数 r²、最小二乗法による回帰直線を表示します。r² は、一方の変数のばらつきのうち他方と共通している割合を表します。

r = Σ(xᵢ − x̄)(yᵢ − ȳ) / √[ Σ(xᵢ − x̄)² Σ(yᵢ − ȳ)² ]

95%信頼区間

Fisher の z 変換によって求めています。同じ r でもサンプルサイズが小さいほど区間は広く、r の値が不安定であることを示します。

z = ½ ln[(1+r)/(1−r)] CI = tanh( z ± 1.96/√(n−3) )

※ 本ツールは検定を扱わないため、p 値は表示しません。信頼区間は「この r をどこまで信用してよいか」の幅を示す目安として添えています。

相関係数を指定したデータの生成

指定した r をサンプル相関としてちょうど満たすデータを生成します。正規乱数から X を作り、もう1組の乱数を X と直交する成分に変換したうえで、Y = r·X + √(1−r²)·（直交成分）として合成しています。整数への丸めや 0〜100 への収め込みを行うと実際の r はわずかに変動するため、生成後のデータから計算し直した r を表示します。

「r = .30 の散布図はどのくらいばらついて見えるのか」を実際の図で確認したり、指定した相関を持つ練習用データを CSV で書き出したりできます。

Pre/Post としての表示

「Pre/Post として見る」を選ぶと縦横の軸が同じ範囲に揃い、対角線（y = x）が引かれます。対角線より上が得点の上がった学習者、下が下がった学習者です。上昇・下降の人数と平均変化量も表示されます。点にカーソルを乗せると氏名と変化量が確認できます。

※ 相関は直線的な関係の強さを表す指標であり、因果関係を示すものではありません。曲線的な関係や外れ値がある場合、r の値だけでは実態をつかめないことがあります。必ず散布図とあわせて判断してください。

バージョン履歴

バージョン	公開日	主な変更点
1.2.0	2026年8月13日	ページを3構成に拡張。「正規分布と効果量」ページ（正規分布の描画、±1SD/±2SD、分布の重なりOVL、d・Glass' Δ・優越率・U3、効果量の目安スケール）と「散布図と相関」ページ（相関係数を指定したデータ生成、r・r²・95%信頼区間・回帰直線、Pre/Post表示と対角線、CSV書き出し）を追加。全ページ共通のヘッダーナビゲーションを設置し、初期表示を3ページで統一（A群・B群、サンプルデータ）。「グラフを描く」ページに、ヴァイオリン図の幅調整スライダーと、表示中のグラフをPNG画像で保存するボタンを追加。新規2ページのグラフは外部ライブラリを使わずSVGで描画し、SVG／PNGで保存可能。
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から読み込みます（インターネット接続が必要）。「正規分布と効果量」「散布図と相関」の2ページは外部ライブラリを使わず、SVGを直接生成しています。
図の書き出し：新規2ページのグラフはSVGまたはPNG（2倍解像度）で保存できます。スライドや配布資料にそのまま貼り付けられます。
配色：OSのダークモード設定に追従します。書き出した図の背景色も表示中のテーマに合わせて出力されます。
データの取り扱い：入力されたデータはすべてブラウザ内のメモリに保持されます。サーバーへの送信・外部ストレージへの保存は一切行いません。
ファイル構成：index.php（グラフを描く）、distribution.php（正規分布と効果量）、correlation.php（散布図と相関）、about.php（本ページ）の4ファイルで完結します。各ファイルはHTML + CSS + JavaScript が1ファイルにまとまっており、同じディレクトリに置くだけで動作します。
サンプルデータの氏名：すべて架空です。

著者・連絡先

浦野研（Ken Urano）

北海学園大学経営学部

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

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

← ツールに戻る