【マイレース開発記録(23) 】スコアボード演出改善　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

レースが終わったあとに、何を残すか

「マイレース」は、うさぎたちが走る様子を眺めながら、その日の流れやリズムを読むアプリです。

ただ、実際に作ってみると、レース中のアニメーションだけでは十分ではありませんでした。
走り終わったあとに、ユーザーが「何を見て、どう受け取るか」が曖昧だったからです。

最初の段階では、順位や秒数をただ並べるだけのシンプルな結果表示でした。
動作確認としては成立していても、占いアプリとしては物足りませんでしたし、何より「見ていて楽しい」とは言いづらい状態でした。

そこで見直したのが、レース終了後に表示されるスコアボードの演出です。

最初の結果表示は、情報としては正しくても味気なかった

開発初期のスコアボードは、必要な情報を表示することを優先していました。

どのカテゴリが何位だったか。
何秒でゴールしたか。
どのようなゾーンに入っているか。

そうした情報は揃っていたのですが、実際に画面に出してみると、どうしても「ただの結果一覧」に見えてしまいました。

「仕事」「金運」「恋愛」「健康」「勝負」という五つのテーマには、それぞれ違う意味があります。
それなのに、表示の仕方がどれも同じだと、体験として平坦になってしまいます。

このアプリは、単に計算結果を返すものではなく、“今日の自分を眺めるための道具”にしたいと考えていました。

そう考えると、スコアボードにももう少し空気感が必要でした。

電光掲示板のような見せ方を取り入れた理由

そこで発想の軸にしたのが、レース場の電光掲示板のような雰囲気でした。

レースが終わったあと、結果がすっと現れる。
少し暗めの背景の中に、文字が浮かび上がる。
順位やメッセージが、ただのデータではなく、その日の「読み」として並ぶ。

この演出にしたかった理由は、見た目の面白さだけではありません。

私はこのアプリを、
「未来を断定するもの」ではなく、
「今日の自分を眺めるための道具」にしたいと思っています。

だからこそ、結果表示も“通知”ではなく、少し立ち止まって受け取る場面にしたかったのです。

明るいカードUIでも成立はしますが、それだと軽く流れてしまう。
一方で、少し暗い背景に発光感のある文字を置くと、自然と視線が集まり、読もうという気持ちが生まれます。

演出として派手すぎない範囲で、でも「ここが大事な場面だ」と伝わる見せ方を目指しました。

実際に見直したポイント

今回の改善では、主に三つの方向から調整しました。

ひとつ目は、表示のタイミングです。
結果を最初から見せるのではなく、レース終了後に show クラスを付けて、あとから現れるようにしました。

JavaScript

function fn(){
document.querySelector(".race").classList.remove("running");
document.getElementById("scoreboard").classList.add("show");
sc();
}

この形にしたことで、「走る時間」と「受け取る時間」を分けられるようになりました。
体験としての区切りがはっきりしたのは、大きかったです。

二つ目は、情報の階層化です。
スコアボードの上部に「マイレースの結果」というヘッダーを置き、その下にゾーン表示、さらにその下に各カテゴリの結果を並べる構成にしました。

結果の一覧をいきなり出すよりも、まずその日の空気感を表すゾーンがあり、そのあとに各分野を見る流れのほうが自然でした。

三つ目は、視認性の改善です。
CSSでは、背景・文字色・シャドウ・行のレイアウトを調整し、情報が密集しすぎないようにしました。

CSS

#scoreboard.show {
max-width: 680px;
visibility: visible;
height: auto;
opacity: 1;

margin: 16px auto 0;
padding: 26px 28px;

background: rgba(0, 0, 0, 0.70);
backdrop-filter: blur(4px);
border-radius: 14px;

box-shadow:
inset 0 0 15px rgba(255,210,90,0.28),
0 12px 35px rgba(0,0,0,0.45);
}

このあたりは、かなり試行錯誤しました。
暗くしすぎると重い。
明るすぎると締まらない。
発光を強くしすぎると読みにくい。
逆に弱すぎると印象に残らない。

少しずつ調整しながら、レースの余韻を壊さない見え方を探しました。

1位だけを特別扱いしすぎないことも意識した

演出を強めるときに気をつけたのは、1位だけを“正解”に見せすぎないことでした。

コード上では、1位の行に first クラスを付けて少しだけ強調しています。

JavaScript

rows.forEach((x,i)=>{
let d=document.createElement("div");
d.className="board-row"+(i===0?" first":"");

ただし、ここでやりたかったのは「勝者を讃えること」ではなく、その日いちばん流れに乗りやすいテーマを分かりやすくすることです。

このアプリでは、最下位だから失敗、という考え方は取りたくありませんでした。
遅いカテゴリには、遅いカテゴリなりの意味がある。
休んだほうがいい分野が見えることにも価値がある。

だから見た目も、1位だけ極端に派手にせず、全体の中で少し目立つ程度にとどめています。
順位が“序列”ではなく、“読み解きの入り口”として見えるようにしたかったからです。

メッセージ表示を加えて、結果が「読むもの」になった

スコアボードを改善する上で、最も大きかったのはメッセージ表示の追加です。

順位やタイムだけでは、「で、今日はどう受け取ればいいのか」が伝わりません。
そこで各カテゴリごとに、ゾーン判定と順位をもとに短いメッセージを表示するようにしました。

たとえば、

• 追い風ゾーンなら「流れに乗って進めそう」
• 慎重ゾーンなら「勢いより段取りが力になる日」
• 楽しさ重視ゾーンなら「寄り道に大事なヒントがある」
• 整えるゾーンなら「今日は休もう。整える時間」

というように、結果を断定ではなく“受け止め方のヒント”として返しています。

実装では MESSAGE_TABLE を用意し、detectZone() と pickMessage() を通して文言を決めています。
このロジックが入ったことで、スコアボードは単なる一覧表示から、意味を伴った結果画面へと変わりました。

表示の瞬間にも、少しだけ「余韻」を持たせたかった

結果の見え方だけでなく、出るタイミングも調整しました。

レースが終わった瞬間にいきなり結果が全部出ると、画面としてはやや唐突です。
そこで、レース終了後に show クラスを付けて、スコアボードが少しずつ現れるようにしています。

CSS では visibility、opacity、height、padding に transition を入れて、
結果がふっと立ち上がるような見え方にしました。

CSS

.scoreboard {
visibility: hidden;
opacity: 0;
height: 0;
padding: 0;
transition: opacity 0.4s ease, height 0.4s ease;
}

この「出方」の調整は、派手なアニメーションではありません。
ただ、占いアプリとして考えたときに、結果が“通知される”より、“現れてくる”方が空気に合っていると感じました。

今回の改善で得られたもの

スコアボード演出の改善を通して得られたのは、単に画面が見やすくなったことだけではありません。

• レース結果を順位順に整理する
• ゾーンとメッセージを対応づける
• 視線の流れを作る
• 画面全体に意味を持たせる
• 表示のタイミングまで含めて体験を設計する

こうした一連の作業を通じて、
「機能を実装する」ことと「体験を設計する」ことは別のレイヤーにあるのだと、改めて実感しました。

就活用の観点でも、この改善は自分にとって大きな意味があります。
私はコードを書くだけでなく、ユーザーがどう受け取るかを考えながら改善を重ねていく姿勢を持っている、ということを示せるからです。

次回予告

スコアボードが形になったことで、マイレースはようやく「結果を返すアプリ」から「体験として眺められるアプリ」に近づいてきました。

ただ、まだ改善したい点は残っています。
表示ロジックと演出が増えたことで、コード全体の見通しは少しずつ悪くなってきています。

次回は、見た目を整えるだけでなく、内部構造も整理していく段階に入ります。

次の記事は。

【マイレース開発記録(24) バグの洗い出し】

として、表示・入力・ロジック周りでどのような不具合を見つけ、どう切り分けていったかを書いていく予定です。