【マイレース開発記録(22)】ゾーン表示の意味づけ　　　　　　　　　　　　　　　　　　　　　　　　　　

レース結果だけでは伝わらないもの

マイレースでは、5匹のウサギがそれぞれのレーンを走り、順位やタイムが表示されます。

最初の実装では、この「順位」と「スピード」だけを結果として表示していました。

しかし、実際に動かしてみると、どうしても一つの違和感が残りました。

順位だけを見ると、

• 1位＝良い
• 最下位＝悪い

という印象が強くなってしまうのです。

もともとこのアプリは、
「評価」ではなく「流れを眺める」ためのツールとして設計していました。

そのため、順位だけではなくその日の流れの質を示す指標が必要だと考えるようになりました。

そこで導入したのが「ゾーン」という概念です。

スピードとジャンプの組み合わせ

マイレースでは、ウサギの状態を二つの要素で表しています。

一つは スピード。
もう一つは ジャンプ（リズム） です。

スピードは、外側の環境との相性を表します。

ジャンプは、心や体のリズム、内側の状態を表します。

この二つを組み合わせることで、

• 環境は追い風か
• 心身は前向きか
• 今は動くタイミングか
• 休むタイミングか

という流れが見えるのではないかと考えました。

ゾーン判定のロジック

この考えをコードに落とし込むと、非常にシンプルなロジックになります。

Python

def detect_zone(is_fast: bool, is_jump: bool) -> str:
if is_fast and is_jump:
return "tailwind"
if is_fast and not is_jump:
return "steady"
if not is_fast and is_jump:
return "playful"
return "rest"

判定は次の二つです。

• 平均より速いかどうか
• リズム（ジャンプ）が高いかどうか

この組み合わせから、4つのゾーンを作りました。

4つのゾーン

追い風ゾーン（tailwind）

スピードもリズムも高い状態。

外側の流れも良く、内側のエネルギーも動きやすいタイミングです。

このときは、迷うよりも一歩踏み出す方が自然に物事が進みやすい日になります。

---

慎重ゾーン（steady）

スピードは速いけれど、ジャンプは高くない状態。

環境としては進みやすいものの、内側のリズムは落ち着いている状態です。

無理に勢いを出すよりも、

• 段取りを整える
• 一つずつ進める

という行動の方が、結果として安定します。

---

楽しさ重視ゾーン（playful）

スピードは遅めですが、ジャンプが高い状態です。

外側の環境はそこまで追い風ではありませんが、内側の気分は軽やかです。

このときは、

• 寄り道
• 試しにやってみること

が、後から意味を持つことがあります。

---

整えるゾーン（rest）

スピードもジャンプも低めの状態です。

このゾーンは、一見すると「停滞」に見えるかもしれません。

しかし実際には、

• 休息
• 準備
• 整理

といった時間が必要なタイミングです。

マイレースでは、このゾーンを「悪い日」とは扱っていません。

むしろ、回復のための重要な時間として位置づけています。

---

ゾーンをUIに反映する

ゾーンは結果画面だけではなく、入力フォームの演出にも使っています。

レースが終わると、その日のゾーンに応じてフォームの色が変化します。

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");
}

これは単なる装飾ではなく、

• 追い風 → 暖色系の光
• 慎重 → 落ち着いたグリーン
• 楽しさ → ピンク系
• 整える → 青系

というように、視覚的に「今日の流れ」を感じ取れるようにするための工夫です。

「順位」よりも「流れ」を見る

ゾーンを導入してから、このアプリの意味が少し変わりました。

順位だけを見ると、どうしても勝ち負けの感覚が生まれます。

しかしゾーンを見ると、

• 今は進むタイミングか
• 今は整えるタイミングか

という「流れ」が見えてきます。

このアプリで大事にしたかったのは、まさにこの部分でした。

AIと一緒に整理したロジック

このゾーン設計も、最初からうまくまとまっていたわけではありません。

最初は判定条件が増えすぎて、

• 条件分岐が複雑になる
• 表示の意味が分かりにくくなる

という問題が出ていました。

そこでAIとの対話の中で、

• ロジックをできるだけシンプルにする
• UIで意味を補う

という方向に整理していきました。

最終的に、

スピード × リズム

という二軸だけに絞ることで、コードも意味もすっきりした形に落ち着きました。

次回予告

次の記事は、

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

として、

• レース結果の表示方法
• 電光掲示板風UI
• Canvasアニメーションとの連携

など、結果表示まわりの調整について書いていきます。