【マイレース開発記録(18)】CSSグロー演出の試行錯誤　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

フロントエンドの実装がある程度形になってきた頃、私は「見た目の演出」に手を入れ始めました。

マイレースは、ただ結果を表示するアプリではなく、レースを“眺める体験”そのものを楽しむアプリにしたいと考えていたからです。

その中でも特に悩んだのが、結果に応じてフォームを光らせる「ゾーン演出」でした。

ゾーンの結果を「雰囲気」で伝えたい

マイレースでは、
それぞれの分野の結果から「ゾーン」という状態を判定します。

• 追い風ゾーン
• 慎重ゾーン
• 楽しさ重視ゾーン
• 整えるゾーン

最初は、この結果をテキストで表示するだけでした。

追い風ゾーン

しかし実際に画面で見ると、「情報としては分かるけれど、体験としては弱い」と感じました。

そこで、

• 追い風 → 暖かい金色
• 慎重 → 落ち着いた緑
• 楽しさ → 明るいピンク
• 整える → 静かな青

というように、ゾーンごとに画面の雰囲気を変えることにしました。

フォームを光らせる演出

演出の対象に選んだのは、入力フォームを包んでいる .form-area です。

レースの結果が出たあと、その日のゾーンに応じて、このエリアがほのかに光ります。

JavaScriptでは、ゾーンに応じてクラスを付け替えています。

JavaScript

function applyZoneGlow(zone){
formArea.classList.remove(
"zone-tailwind",
"zone-steady",
"zone-playful",
"zone-rest"
);

if(zone === "tailwind") formArea.classList.add("zone-tailwind");
if(zone === "steady") formArea.classList.add("zone-steady");
if(zone === "playful") formArea.classList.add("zone-playful");
if(zone === "rest") formArea.classList.add("zone-rest");
}

CSS側では、それぞれのゾーンに応じて色と光の表現を変えています。

CSS

.form-area.zone-tailwind {
background: rgba(255, 245, 220, 0.55);
box-shadow:
0 0 30px rgba(255, 210, 80, 0.95),
inset 0 0 12px rgba(255, 240, 200, 0.6);
}

この仕組みによって、結果を見た瞬間に「今日は追い風っぽい日だな」という感覚が視覚的に伝わるようにしました。

最初は「光りすぎた」

実装の初期段階では、このグロー演出はかなり派手でした。

例えば、追い風ゾーンでは画面全体が光ってしまうような設定になっていて、正直なところ 少し目が痛いレベルでした。

そこで、

• 光の強さを落とす
• 背景色を淡くする
• outline を追加して境界を整える

といった調整を何度も繰り返しました。

最終的には、

「気づく人は気づくけれど、主張しすぎない」

というバランスに落ち着きました。

CSSだけではなく「時間」の演出も必要だった

もう一つ悩んだのは、演出が出るタイミングです。

もしページを読み込んだ瞬間に光ってしまうと、ユーザーには意味が分かりません。

そのため、

1. レースが走る
2. 結果が表示される
3. ゾーンが判定される
4. その瞬間にフォームが光る

という順序にしました。

コードとしては、スコアボードを表示する処理の中でゾーン判定を行い、そこでグローを適用しています。

JavaScript

applyZoneGlow(zoneKey);

この順序にすることで、「結果に反応して画面が変化する」体験を作ることができました。

見た目の演出も、ロジックの一部

今回の作業で印象に残っているのは、

UIの演出も、アプリのロジックの一部だ

ということでした。

もしゾーンの表示が文字だけなら、このアプリは「数字を表示するツール」に近いものになります。

しかし、

• うさぎがレースを走り
• 結果が並び
• 画面が光る

という流れがあることで、「その日の流れを眺める」体験に近づいた気がしています。

次回予告

フロントエンドの演出が整ってきたあと、次に取り組んだのは レスポンシブ対応でした。

PCでは問題なく動いていた画面が、スマートフォンではレイアウトが崩れてしまいます。

次の記事は、

【マイレース開発記録(19) レスポンシブ対応の混乱】

として、スマートフォン表示をどう調整していったのかを書いていきます。