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

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

制作サイトを見る ／ プロジェクト全体の実績

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

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

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

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

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

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

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

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

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

画像解析から推定した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軌道。

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：着地点に速度を重ねる

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

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

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

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

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

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

公開版：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でお気軽にご相談ください。