【マイレース開発記録(21)】UIとUXの再設計　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

画面が動くだけでは足りないと気づいた

この時期の「マイレース」は、すでに基本的な機能は動いていました。

生年月日、出生時間、出生地、そして眺めたい日を入力すると、5匹のうさぎがそれぞれのレーンを走り、順位やメッセージが表示される。
占いアプリとしての骨格は、ひとまず形になっていたと思います。

けれど、実際に何度も触ってみるうちに、ひとつ強く感じるようになりました。

「動くこと」と「使いやすいこと」は、まったく別だということです。

自分では仕様を理解しているので、多少わかりにくくても操作できてしまいます。
でも、初めて見る人にとってはどうだろうか。
入力の意味は伝わるだろうか。
結果の見方は直感的だろうか。
そもそも、このアプリが何をするものなのか、最初の数秒で理解できるだろうか。

そう考え始めてから、私はコードを足すことよりも、画面の体験を組み直すことに意識を向けるようになりました。

最初の課題は「何をするアプリか」が伝わりにくいことだった

マイレースは、普通の占いアプリとは少し違います。

結果を数値で見せるのではなく、うさぎの走り方や跳ね方を眺めながら、その日の「流れ」と「リズム」を読む構成にしています。
それがこのアプリの面白さでもあり、同時に、最初のわかりにくさでもありました。

入力フォームとキャンバスだけがある状態では、使う側からすると、

「これは何を入力するのか」
「何が出てくるのか」
「どう読むのか」

がすぐにはつかめません。

そこで、まず見直したのが左側の説明エリアです。
単なる注意書きではなく、このアプリの世界観と使い方を支える“取扱説明書”として再設計することにしました。

「走る＝外の流れ」「跳ねる＝内側のリズム」という読み方、順位は正解や失敗ではないこと、ゾーンごとの意味、結果をどう受け取ればよいのか。

そうした内容を、説明のための説明ではなく、使う人が安心して画面に入っていけるように整理していきました。

情報を増やすのではなく、迷いを減らしたかった

この再設計で意識したのは、情報量を増やすことではありませんでした。

むしろ逆で、どこで迷うかを減らすことを大切にしました。

私はもともと、情報が多すぎると全体をつかむ前に細部に引っ張られてしまうことがあります。
そのため、自分が使う側に立っても、「ここに何が書いてあるのか」を瞬時に整理できない画面には疲れやすいと感じます。

だからこそ、今回の見直しでは、
入力項目の並び
説明文の段落
見出しの位置
視線の流れ
すべてに「止まりすぎないこと」を意識しました。

たとえば、入力フォームは一カ所にまとまりがあるようにし、説明エリアは詳細を折りたたみながらも、必要なときにすぐ開ける形にしました。
また、レースの結果を見る前に、どういう意味を持つ画面なのかが自然に伝わるように、文のトーンもできるだけやわらかく整えました。

UIを整えるというと、見た目をよくすることだけに聞こえるかもしれません。
でも私にとっては、「理解しやすい順番に情報を置き直すこと」そのものがUXの改善でした。

フォームの役割を「入力欄」から「入口」に変えた

入力フォームも、この時期にかなり見直しました。

最初は「必要な値を送信できればよい」という発想が強く、フォームはどちらかというと機能優先でした。
もちろん、それでも動きます。
けれど、占いアプリとして見ると、それだけでは少し味気ない。

マイレースは、数字を入力して終わりではなく、「今日はどんな流れなのだろう」と静かに眺めるための入口であってほしかったのです。

そのため、フォームの背景や光り方にも意味を持たせました。
特に、結果に応じてフォームエリアがゾーン別に光る演出は、単なる装飾ではありません。

ユーザーが結果を受け取ったときに、「いま自分がどんな空気の中にいるのか」を、言葉だけでなく視覚でも感じられるようにしたかったからです。

追い風ゾーンなら少し前向きな光、整えるゾーンなら落ち着いた色味。
そうした変化が、結果の理解を助ける補助線になるよう意識しました。

レース結果は「一覧」ではなく「物語」として見せたかった

スコアボードの見せ方も、かなり迷ったところでした。

順位、タイム、ジャンプの状態、メッセージ。
これらをただ表のように並べるだけでは、情報としては成立します。
けれど、マイレースが目指しているのは、単なる一覧表示ではありません。

このアプリでは、
どの分野が先にゴールしたか
どの分野が今は静かか
どこに意識を向けると今日は少し楽に過ごせるか
そうしたことを「レースの結果」として眺めてもらいたいと考えています。

そのため、スコアボードも「結果発表の空気感」を持たせる方向で調整しました。
電光掲示板のような雰囲気、1位の強調、メッセージ欄の見せ方。
表示順にも意味を持たせ、単に数値を読むのではなく、今日の流れを読み解く場面として感じられるように整えていきました。

ここは、技術的にはDOM操作や表示切り替えの話ですが、体験としてはかなり大きな違いが出た部分だと思います。

AIと一緒だからこそ、UIの言語化が進んだ

この再設計で、AIとの共同開発の良さを特に感じました。

UIやUXの改善は、バグ修正のように「動かないから直す」という単純な話ではありません。
どこがわかりにくいのか。
なぜ迷うのか。
どの順番なら伝わるのか。
こうしたことを、自分の中だけで整理するのは意外と難しいものです。

私は、とくに「違和感はあるけれど、何が違和感なのか言葉にしにくい」という場面で止まりやすいところがあります。
けれどAIと対話しながら開発していると、その曖昧さを少しずつ言語化できます。

「この画面は情報が多い気がする」
「結果は出ているけど、気持ちよく受け取れない」
「説明文が“正しい”けれど、やさしくない」

そうした感覚を一つずつほどいていく中で、自分が本当に作りたい体験が見えてきました。

AIは完成形を与えてくれる存在ではなく、
曖昧な違和感を整理し、設計の言葉に変えていくための対話相手だったのだと思います。

再設計は、見た目ではなく「伝わり方」の調整だった

今回の見直しであらためて感じたのは、UIとUXの再設計は、派手な刷新ではないということです。

色を変える。
余白を調整する。
説明文を少し直す。
表示順を変える。
光り方を見直す。

一つひとつは小さな変更です。
でも、その積み重ねで、画面の受け取られ方は大きく変わります。

そしてそれは、就職活動のために制作物を見せるうえでも大事なことだと感じました。
動くものを作るだけでなく、「どうすれば相手に伝わるか」まで考えられるかどうかは、実装力と同じくらい大切だと思うからです。

このアプリを通して私は、ロジックを作ることだけでなく、それを人に渡せる形に整えることの難しさと面白さを、少しずつ学んでいます。

次回予告

UIとUXの再設計は、この時期の開発の中でもかなり大きな転換点でした。
「動くからよし」ではなく、
「どう伝わるか」「どう受け取られるか」を考えるようになったことで、マイレースは少し作品らしくなった気がしています。

次の記事は、

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

として、追い風ゾーン、慎重ゾーン、楽しさ重視ゾーン、整えるゾーンを、なぜその形で定義したのかを書いていこうと思います。

単なるラベルではなく、その日の過ごし方の手がかりとしてどう設計したかを、もう少し具体的に振り返ります。