# 1,502球の打球データを「気づき」に変える——中央大学スポーツ情報学部のデータビジュアライゼーション制作

> Log — IE3 / https://ie3.jp/log/chuo-sports-data-visualization
>
> Published: 2026-09-22

中央大学スポーツ情報学部の1,502球の打球データを、操作できる3Dコンテンツに。試作と先生方との検証、不採用案、Three.jsによる描画やスクロール連動の実装を紹介します。

IE3では、中央大学スポーツ情報学部のキービジュアル、学部ロゴ、Webサイトなどを制作しました。今回は、硬式野球部の打撃練習データを使った、ブラウザで操作できるデータビジュアライゼーションを紹介します。

目指したのは、受験を考えている人や学部に興味を持った人が、スポーツ情報学の一端を楽しく理解できるコンテンツです。Rapsodoで計測した1,502球の速度・角度・方向・飛距離をもとに、ボールの飛び方や数値の関係を見比べられるようにしました。

[制作サイトを見る](https://sdb.chuo-u.ac.jp/special/) ／ [プロジェクト全体の実績](https://ie3.jp/work/sdb)

## 試作を重ね、先生方と表現を選ぶ

入口に据えた問いは「どんな打球が遠くまで飛ぶのか」。コースや視点を変えるうちに、「速い打球なのに、なぜ遠くまで飛ばないのだろう？」と角度にも目が向く。そんな体験を目指しました。

条件を絞れる散布図、球場上に打球を配置する3D表現、回転数別の軌道比較、スイングの重ね合わせなど、切り口や操作方法を変えて試作しました。それらを動かして比較し、専門家である先生方に確認していただきながら、採用する表現と組み合わせを選んでいます。

アイデアをすぐに動く形にし、検証しながら調整できるのは、デザインと実装を同じチームで行うIE3の強みです。

![フィルター付き散布図の試作](https://cms-media.ie3.jp/chuo-datavis-04-prototype-explorer-all-u5vj3wr2.png)

    _打球速度・角度・飛距離を操作する探索型UIの試作。試作段階では2,445件を使用しています。_

![フライに絞り込んだ状態](https://cms-media.ie3.jp/chuo-datavis-05-prototype-explorer-fly-1d1gmygf.png)

    _「フライ」を選択すると、629件に絞り込まれ、分布と平均値が連動して変わります。_

![表示調整用の3Dビューアー](https://cms-media.ie3.jp/chuo-datavis-09-prototype-direction-viewer-hum454ol.png)

    _カメラ、軸、照明、球場の高さ、点の高さに割り当てる値を調整できる検証用ビューアー。_

### 採用を見送った試作：35スイングの軌跡を重ねる

打つ動作を見せる試作では、動画の姿勢解析をもとにバット先端の位置を推定し、35スイング分の軌跡を重ねました。

![35スイングの推定軌跡を重ね合わせた試作](https://cms-media.ie3.jp/chuo-datavis-08-prototype-swing-overlay-7k4dj95g.png)

    _画像解析から推定した35スイングの軌跡。飛距離で色分けし、動きの重なりを可視化した不採用案。_

Canvas 2Dでフレームごとの推定位置を線でつなぎ、残像と加算合成で動きの重なりを表現。線は飛距離で色分けし、スイングの形と打球結果を見比べられるようにしています。

ただ、カメラのブレや障害物による遮蔽で検出が不安定になり、実際の動作と推定誤差を区別しにくい場面がありました。スイングの違いとして伝えるには精度が足りず、公開版への採用は見送りました。

## 「軌道」「方向」「条件」の3章につなぐ

比較検証を経て、次の3章に絞りました。

- **Trajectory：コースによって打球はどう変わるか** — 9分割のヒートマップと3D軌道
- **Direction：打球はどこに集まるか** — 球場上の分布と方向別の強調表示
- **HR Conditions：速度・角度・飛距離はどう関係するか** — 3D散布図と視点の切り替え

ボールの飛び方から球場全体の分布、数値の関係へ。身近な動きから抽象的なグラフへ進む順番です。

各章はVueコンポーネントに分け、データの選択と3D表示を担当させています。説明文は共通のファイルにまとめ、描画処理と別に調整できる構成にしました。

## CSVを共通データに整える

選手ごとのRapsodoのCSVから必要な列を読み取り、表示用のJSONに変換します。右打者7名の1,953件から、打球速度が0、または速度・角度・方向を数値として読めないレコードを除き、1,502件を使用しました。

右打者にそろえることで、引っ張り・流し打ちと打球方向の関係を同じ前提で説明できます。ただし、ここで見えるのは対象選手の練習データの傾向です。

JSONには選手名・IDを含めず、速度や飛距離などを小数第1位に丸めています。容量は約143KB。3章ともこの静的ファイルを読み込み、共通のデータを異なる切り口で表示します。

## Trajectory：計測値から軌道を近似する

![公開版：コース別の平均飛距離と、選択したゾーンの3D軌道。](https://cms-media.ie3.jp/chuo-datavis-01-live-trajectory-hgmau0u8.png)

    _公開版：コース別の平均飛距離と、選択したゾーンの3D軌道。_

9分割のコースを選ぶと、その位置に対応する打球の軌道が現れます。ヒートマップは飛距離・HR率・打球速度・打球角度を切り替えられます。なお、ここでの「HR率」は飛距離100m以上をホームラン級とした割合で、試合の公式記録とは異なります。

軌道は、打球速度をkm/hからm/sへ変換し、角度と方向から初速度の3成分を求めて計算します。重力、空気抵抗、回転による力を加え、0.02秒ごとに速度と位置を更新。時計表記の回転方向から、バックスピンとサイドスピンの成分を求めています。

これは撮影したボールの位置を再現するものではなく、計測値を使った近似です。計算結果だけでは記録された飛距離とずれるため、水平距離を次のように補正します。

```
// 説明用に簡略化したコード
const scale = measuredDistance / simulatedDistance

const correctedPoints = points.map((p) => ({
  x: p.x * scale,
  y: p.y,
  z: p.z * scale,
  t: p.t,
}))
```

横方向と奥行きに同じ倍率を掛け、高さと時刻は計算値を残します。着地までの水平距離は計測データに合いますが、補正後の速度や滞空時間まで実測と一致するわけではありません。

## Direction：着地点に速度を重ねる

![公開版：打球速度を高さに割り当てる表示と、その意味を案内する説明カード。](https://cms-media.ie3.jp/chuo-datavis-02-live-direction-story-dpw9315a.png)

    _公開版：打球速度を高さに割り当てる表示と、その意味を案内する説明カード。_

飛距離と打球方向から、各打球を球場の平面上に配置します。センター方向を0、ライト方向を正とした座標変換です。

```
// 説明用。thetaはラジアン
const x = distance * Math.sin(theta)
const z = -distance * Math.cos(theta)
const y = (exitVelocity / 180) * 13
```

平面上の位置は方向と飛距離、高さは打球速度を表します。実際のボールの高度と混同しないよう、説明カードにも高さの意味を明記しました。

点はホームベース付近から飛び出して着地した後、速度に応じた高さへ浮かび、地面と点を結ぶ縦線が現れます。「どこへ飛んだか」に「どれくらい速かったか」を重ね、打球のイメージからグラフへつなぐ演出です。この章の着地までの放物線は、Trajectoryの物理計算とは別の表示用アニメーションです。

## HR Conditions：同じ点群を、異なる視点から見る

![公開版：100m以上の打球を白く強調した状態。](https://cms-media.ie3.jp/chuo-datavis-03-live-hr-conditions-mxomxm3c.png)

    _公開版：100m以上の打球を白く強調した状態。_

打球速度・打球角度・飛距離を3D散布図に配置しました。スクロールに合わせて、負の角度、高い角度、10〜35度、高い速度、飛距離100m以上の打球へと注目先が変わります。

各ステップは、説明文・表示条件・強調条件・カメラ位置をまとめて定義しています。「表示する点」と「強調する点」を分け、比較対象を薄く残せるようにしました。

同じ点群の周囲をカメラが移動し、速度×角度、速度×飛距離、角度×飛距離の関係を順に見せます。移動には球面座標の補間を使い、半径と角度を滑らかに変化させています。不要な軸ラベルはフェードアウトし、画面外に出る軸名は位置を補正します。

負の打球角度の点は、ほかの打球と分けるため、飛距離方向の配置を反転し、縮尺を半分にしています。この領域は、ほかの点と位置だけで飛距離を比較できない表示です。

## スクロールと3D操作を両立する

DirectionとHR Conditionsでは、可視化を画面に残したまま説明が進みます。当初はGSAPのScrollTriggerのpinで固定していましたが、モバイルで表示がガタついたため、固定にはCSSの`position: sticky`を使い、ScrollTriggerは説明カードの位置検知に絞りました。

カードが所定の位置に入るとステップを切り替え、点群やカメラのアニメーションを開始します。上にスクロールしたときも対応するステップへ戻り、文章と表示を合わせます。

スマートフォンでは、3D操作がスワイプを受け取ってページをスクロールできない問題もありました。`touch-action: pan-y`を設定し、縦方向はページスクロール、横方向は3D回転に振り分けています。

## 点群をまとめて描画する

Three.jsの`BufferGeometry`と`Points`を使い、位置・色・透明度の配列を描画用の属性として渡します。

```
// 説明用に簡略化したコード
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
geometry.setAttribute('alpha', new THREE.BufferAttribute(alphas, 1))
```

JavaScriptで配列を更新し、カスタムシェーダーで点の形や明るさを描きます。表示条件が変わってもオブジェクトは作り直さず、色や透明度を更新します。

高解像度端末の負荷を抑えるため、ピクセル比は最大2に制限。ページを離れる際はアニメーションとイベントを解除し、ジオメトリ、マテリアル、レンダラーを解放します。

## データや専門的なテーマを、触ってわかるコンテンツに

今回の制作では、試作と先生方との検証を重ね、学部への興味につながる見せ方を探りました。データの意味を確かめながら、デザインと実装を往復して体験を形にした事例です。

IE3では、データビジュアライゼーションやWebサイト、体験型コンテンツの企画・デザイン・開発を行っています。「研究や事業のデータを面白く伝えたい」「専門的なテーマに興味を持ってもらいたい」。具体的な見せ方が決まっていない段階から、[Contact](https://ie3.jp/contact)でお気軽にご相談ください。