The Shape of a Match
サッカーの試合は儚い。90分のあいだに起きたことのほとんどは残らない。人々の記憶に残るのはほんの一瞬だ。
FIFAワールドカップ2026の全104試合を、それぞれひとつの形として描いた。「The Shape of a Match ↗」。
1試合がひとつの立体となっている。その試合で放たれたシュートが、下から上へ伸びる。全部が上まで届くわけではなく、枠を外れたものは途中で止まる。スコアだけを見れば「1-0」という試合も、届かなかった多くのチャンスやピンチがある。ゴールの一瞬だけでなく試合自体を形にしたかった。
美しさを目指して描く
1試合をひとつの形にする。そこまでは固まっていた。ただ、その形に何の意味を持たせるかが固まらなかった。円、扇、球、円柱。形として成立するものは作れる。ただ、なぜサッカーの試合がその形になるのかを説明できない。データを立体にすること自体は難しくない。そこに必然性がなければ、ただの飾りになる。
突破口は、優勝トロフィーをそのまま描いてしまえばいい、という思いつきだった。人々が地球を持ち上げているあの形。大会を題材にするなら、あの形以上に必然性のあるものはない。
データとして使ったのは Football API の試合スタッツ。シュート総数、枠内シュート数、ペナルティエリア内外の内訳、ポゼッション、得点時刻、PK。個々のシュートの位置は取得できない。座標がない以上、軌道をそのまま再現する道はない。
すべてのシュートが最下段から出発し、下から上へ登っていく。ゴールの枠内に飛んだものだけが残り、そのうちペナルティエリア内からのシュートだけが球体まで届く。通過できなかった線は、その高さで途切れたまま残る。
この構造にしたことで、同じ「1-0」でも形がまったく違うものになった。20本撃って7本しか枠に飛ばなかったチームは、短い線が下に密集した形になる。10本しか撃たずに4本を枠に入れたチームは、線が少なく、上へ伸びる比率が高くなる。スコアだけを見ていたら同じに見える試合が、別の形として並ぶ。
図解にならないように
まず、シュートの通過点を直線で結んでみた。そうすると図解になってしまう。データの正しさは伝わるが、見ていて何も起きない。試合が持っているはずの生々しさを表現できなかった。全体をねじりながら進ませ、回転する量のぶん、角度や半径を補間しながら微調整した。
カップとしての美しさを保ちながら、どんなスタッツになっても破綻しない形に収める。調整を繰り返して形にしていった。
両チームをひとつの形にする
両チームを別々に描かないことを先に決めた。対戦を表現するなら、スタッツ表示のように左右に分けて比較するのが自然だ。ただしそれは、二つのデータを並べただけのものになる。試合は交互に起きるものではない。両チームがひとつのピッチで争う。それをひとつの形の中に入れた。
各チームには向きがあり、螺旋の巻く方向が互いに逆になる。二つの螺旋は絡み合いながら、同じ球体へ収束する。
パイプラインをつくる
この作品はp5.jsで描いている。ブラウザ上で試合を切り替えながら形を確認できるようにした。104試合ぶんを手作業で書き出すことはできない。試合IDを渡すと最後の動画書き出しまで出力されるパイプラインを組んだ。
- データ取得 — Football APIから試合のスタッツを取得し、描画に必要な形へJSON整形
- 描画 — p5.jsのスケッチを出力
- フレーム書き出し — 出力をキャプチャして連番画像として書き出し
- 動画化 — ffmpegで連番画像を動画に固める
インデックスページに並べるSVGは、これとは別のコマンドで書き出し。
104試合を滞りなく書き出せるかが不安要素だったが、この経路を先に組んだことで、試合スタッツが確定した時点で書き出しを始められる。目視で確認してから公開する。大会期間中は試合が終わるたびにこれを繰り返した。
並べてみて
104個が並んだページを眺めていると、大会そのものの形として見えてくる。とはいえ、これを見て試合の内容がわかるわけではない。読み解くための図ではないからだ。
情報として正確であることと、形として気持ちがいいこと。そのバランスは、まだまだ探索しがいがある。
