開発日記⑬ スマホでも見やすい画面に整える

前回までの進捗

前回は、画面を役割ごとに5つのコンポーネントへ分割した。
現在点数、条件設定、必要点数、終局結果入力、結果表示をそれぞれ分けたことで、画面側のコードも少し整理できた。
今回は新しい機能を追加するのではなく、アプリの見た目と使いやすさを調整した。

画面全体の見た目を整える

ここまでは機能を作ることを優先していたため、画面はかなり簡素だった。
そこで、

• 各機能をカード形式で分ける
• 入力欄やセレクトボックスの見た目をそろえる
• ボタンの役割によってデザインを分ける
• 成功・失敗・警告を色で判別しやすくする

といった調整を行った。
機能自体は変わっていないが、どこに何があるのかは以前より分かりやすくなった。

スマホ表示にも対応する

PCでは、4人分の持ち点などを2列で表示している。
ただ、そのままスマホで表示すると入力欄が狭くなる。
そこで、画面幅が狭くなった場合は1列表示へ切り替えるようにした。

PC

東家　南家
西家　北家


スマホ

東家
南家
西家
北家

あわせて、スマホでは見出しやカードの余白も少し小さくしている。
PC用とスマホ用で別の画面を作るのではなく、画面幅に合わせてCSSでレイアウトを切り替える形にした。

状態によって表示を分かりやすくする

このアプリでは、計算結果として

• 目標達成
• 目標未達成
• 入力内容への警告

などを表示する。
これらをすべて同じ見た目にすると分かりにくいので、それぞれ色を変えた。

緑 → 目標達成
赤 → 目標未達成
黄色 → 警告

文章を読まなくても、ある程度状態を判別できるようになった。

ボタンの役割も分ける

「条件をランダム生成」と「入力内容を初期状態に戻す」では、操作の重要度が違う。
そのため、

条件をランダム生成
→ メインのボタン

入力内容を初期状態に戻す
→ 控えめなボタン

という見た目にした。
マウスを乗せたときや、キーボード操作でボタンを選択したときにも分かるように調整している。

機能を作ってから見た目を整える

今回のアプリでは、最初からデザインを作り込まず、

機能を作る
↓
画面を整理する
↓
見た目を整える

という順番で進めている。
個人開発では、最初から完成形を目指すより、まず動くものを作ってから必要な部分を直していく方が進めやすいと感じた。
まだシンプルな画面ではあるものの、最初の頃よりはかなりアプリらしくなってきた。

今回できたこと

今回の進捗は以下のとおり。

• 画面全体のレイアウトを調整した
• 各機能をカード形式で分けた
• PCでは入力欄を2列表示にした
• スマホでは1列表示へ切り替えるようにした
• 成功・失敗・警告を色で分けた
• ボタンの役割が分かりやすい見た目にした

今回も内部処理ではなく、実際に触る部分を中心に整えた。
画面回りは一区切りついた感じだから、次回からは機能拡充の作業になりそう。

今時、表示を画面サイズに対応させるなんて当たり前だが、
フロント側が苦手なのも込みで、なかなか苦戦している。牛一。