投手・野手の個人ページに「タイトルカード」という機能を追加しました。 選手ページを開くと、打率や本塁打のような主要成績に👑🥇🥈🥉のバッジが付いて浮かび上がり、その選手が今シーズンどれくらいすごいのかが一目でわかるカードです。今回はその中身と、作る過程の話を書いてみます。
より比較しやすくするために
個人ページには元々、日次の成績ログや条件別のレポートなど、細かいデータがそろっています。ただ、それを一つ一つ見ていかないと「この選手が今シーズンどれくらいすごいのか」がすぐには分かりません。
特に不便だったのが順位です。打率や本塁打が他の選手と比べてどれくらいの位置にいるのか確かめようとすると、そのたびにランキングページへ飛んで、そこから該当の選手を探す必要がありました。個人ページとランキングページを行ったり来たりするその手間を、主要な項目だけでも無くしたい。そこで、成績と両リーグにおける順位を一枚にまとめたカードを作ることにしました。
バッジは👑🥇🥈🥉、"多いと困る"項目は⏬🔽
打率・本塁打・打点のような基本項目は誰のカードにも必ず出ます。それ以外の項目は、両リーグ1位か自リーグ3位以内に入ったときだけ、バッジと一緒に追加で表示される仕組みです。
- 👑 両リーグ1位
- 🥇🥈🥉 自リーグ1〜3位（両リーグ1位のときは自リーグのバッジは付けません）
三振や死球、投手なら失点や与四球のように「多いほど困る」項目は、同じ考え方のまま⏬（両リーグワースト)🔽（自リーグワースト1位）に切り替わります。ワースト2〜3位は絵文字を付けず、テキストだけの控えめな表示です。
2026年9月9日時点のデータで見てみます。
栗原陵矢選手（ソフトバンク）は本塁打37・打点106・打席548がともに👑両リーグ1位。4試合連続安打・2試合連続本塁打に加えて、5試合連続出塁の表示も出ています。
F.レイエス選手（日本ハム）は打率.314で🥇パ・リーグ1位、長打率.571も🥇パ・リーグ1位タイ。故意四球11は、ソフトバンク・小久保監督が申告敬遠しまくっていたこともあってか👑両リーグ1位です。一方で併殺打21は⏬両リーグワーストタイとしても出ます。良いところだけを並べる機能にはしていません。
前田悠伍選手（ソフトバンク）は勝利11・敗北0で、11連勝中の表示も出ています。それでも防御率の欄は「規定投球回未満」。登板がまだ16試合と少なく、好成績でも規定には届いていません。
ジャマだったら動かしたり閉じたりしてください
その日最初に個人のページを開くと、カードがポンと表示されるようにしています。ヘッダーをつまんでドラッグすれば好きな位置に動かせます。他の調べ物をする際に邪魔だったら、×で閉じておいてください。
もう一度見たくなったときは、右サイドの「おすすめ」パネルを開くと「タイトルカードを開く」というボタンがあります。そこから再度見ることができます。閉じた状態も好きな位置も、次に別の選手のページを開いたときにそのまま引き継がれます。
条件別レポートなど、日次ログ以外の個人ページでは、最初からこの開閉ボタンだけが右の「おすすめ」パネルに常設されています。カードの中身は常に1つで、パネル側はスイッチの役割だけを持つ、という分担です。
スマホだとだいぶジャマかもしれません
最初はスマホ表示で行き詰まりました。フローティングのままカードを出すと、日次ログの表が画面の残り高さぴったりに合わせる仕組みと衝突して、下の要素が押し下げられる不具合が出ました。
そこで一度、スマホでは表の下にボタンを置いて開閉する形に作り直しました。試行錯誤の結果、結局いまの「実体は1つのフローティングカード、パネル側はボタンだけ」という形に落ち着いています。
おわりに
👑🥇🥈🥉も⏬🔽も、このサイト独自の見せ方です。個人ページを開いたときに、まず目に入る場所として使ってもらえたらうれしいです。
