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

フロントエンドの調整も終盤に近づき、PCではほぼ思った通りに動くようになっていました。
うさぎのレースも安定して描画され、結果のスコアボードも問題なく表示されます。

しかし、この段階で大きな問題に気づきました。

スマートフォンで見ると、レイアウトが崩れてしまうのです。

この回では、マイレースのレスポンシブ対応で起きた混乱について書いておきます。

PCでは問題なく動いていた

PCブラウザでは、次のような構成でレイアウトを作っていました。

• 左側：説明パネル（取扱説明書）
• 右側：ロゴ・入力フォーム・レース画面

CSSでは Grid を使い、次のような形です。

CSS

.layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 24px;
}

PCではこれで非常に見やすく、

• 左に説明
• 右に操作

という構成が自然に機能していました。

ところがスマートフォンで開くと、この「左右レイアウト」がそのまま適用されてしまいます。

スマートフォンでは横に詰まってしまう

スマートフォンで表示すると、

• 左に説明
• 右にフォーム

という構成がそのまま維持されるため、

• フォームが狭くなる
• canvasが縮む
• 説明が読みづらい

という状態になりました。

特に問題だったのが canvasのレース画面です。

レースは JavaScript で位置計算をしているため、

• CSSだけ縮む
• JavaScriptの座標は変わらない

という状態になり、ウサギの位置が不自然に見えることがありました。

レイアウトを縦構成に変更する

スマートフォンでは、左右構成をやめて縦レイアウトに変更することにしました。

そのために media queryを追加しました。

CSS

@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
}
}

これによって、

PC
説明 | レース

スマホ
レース
説明

という構成に変わります。

さらに、説明パネルは detailsタグを使っているので、スマートフォンでは折りたためる形にしました。

CSS

.side {
order: 2;
}

.main {
order: 1;
}

これで、スマホでは

1. 入力
2. レース
3. 説明

という順序になります。

canvasのサイズ問題

もう一つの問題はcanvasのサイズでした。

HTMLでは次のように定義しています。

<canvas id="raceCanvas" width="560" height="180"></canvas>

CSSでは

CSS

canvas {
width: 100%;
max-width: 560px;
height: 180px;
}

PCでは問題ありませんが、スマホでは

• CSSで縮む
• 内部座標は560px

という状態になります。

そこで、JavaScript側でも描画範囲を再計算する処理を入れました。

JavaScript

function updateRaceBounds(){
SX = cv.width * 0.12;
GX = cv.width * 0.93;
}

さらに、画面サイズ変更時にも再計算するようにしています。

CSS

window.addEventListener("resize", () => {
updateRaceBounds();
});

これにより、画面サイズが変わってもレースの開始位置とゴール位置が適切に調整されるようになりました。

スコアボードの崩れ

スマホ対応でもう一つ苦労したのが、結果表示（スコアボード）です。

PCでは gridを使って横並びにしています。

CSS

.board-row {
display: grid;
grid-template-columns:
1.8em
2.2em
3.2em
3.5em
3.5em
minmax(0,1fr);
}

しかしスマートフォンでは、このレイアウトが窮屈になります。

そこでスマホでは

CSS

.board-row {
grid-template-columns: 1fr;
}

として、縦に並べる形に変更しました。

UI設計の難しさを実感した

今回の作業で強く感じたのは、

UIは「動く」だけでは足りない

ということです。

PCでは問題ないUIでも、

• スマートフォン
• 画面サイズ
• 操作順序

によって使いやすさは大きく変わります。

レースの演出やロジックだけでなく、どの順番でユーザーが画面を見るのかを考える必要があると実感しました。

AIとの開発で助かったこと

レスポンシブ対応では、

• CSSの影響範囲
• canvasの座標
• Gridの挙動

などが複雑に絡みます。

一度に全部理解しようとすると、どこで崩れているのか分からなくなることがありました。

そのとき、

• 画面構造を分解する
• CSSとJavaScriptを切り分ける
• 変更の影響範囲を確認する

という形で、AIと対話しながら整理できたことが大きかったです。

発達特性として、情報が一度に多いと混乱しやすいのですが、対話を通して一つずつ整理することで作業を進めることができました。

次回予告

レスポンシブ対応が落ち着いたことで、
アプリ全体のUIを見直す余裕が出てきました。

次の記事は、

【マイレース開発記録(20) メッセージロジック最終版】

として、ゾーンとメッセージをどう設計し直したのかを書いていきます。