管理画面の文字を大きくするとき、表の情報を隠さなかった話

今日は、先日取り組んだ管理画面の文字サイズ切り替えを振り返った。Next.jsで作っているWebサービスで、運営側が読む文字を「標準16px・大18px・特大20px」から選べるようにした話だ。

文字を大きくするだけなら、CSSの数値を変えれば済みそうに見える。ただ、一覧表には複数の項目が並び、操作ボタンもある。文字が読みやすくなっても、右側の情報やボタンが消えたら、管理の仕事はかえって進めにくくなる。

実装中に見直したのが、横にはみ出す部分の扱いだった。はみ出しを隠す方法や、表そのものの表示形式を変える方法は取り下げた。既存の表を包む領域の内側だけで横スクロールできる形に絞り、情報を見えなくして収めることは避けた。

文字サイズの指定も管理画面の内側に限定した。利用者向けの公開ページまで一緒に大きくなる変更にはしない。選んだサイズは同じブラウザーで次回も使えるよう保存し、選択中のボタンが分かる状態も付けた。小さな機能でも、影響する範囲を決めてから触ることが大切だった。

ビルドを確認したあと、本番にも反映した。管理画面の一つで三段階の切り替えと、特大を選んで再読み込みしたときの復元を確認した。公開トップの見た目が維持されていることも確認した。

ただし、ここで「全画面の確認完了」とはしていない。問い合わせや別の一覧、入力フォームなど、すべての画面を全サイズで見直す確認は残っている。確認のために実際の業務データを更新したり、メールを送ったりする操作も行っていない。

今回改めて感じたのは、管理画面の改善は、機能を増やすことだけではないということ。毎日使う人が読めるか、必要な情報に届くか、元の操作を壊していないか。そうした小さな調整にも、実装と確認の両方が必要になる。

予約・顧客管理の画面で「文字が小さい」「表が使いづらい」と感じている方は、出品中の「AI・Webシステム開発の仕様と費用を整理します」からご相談ください。困っている画面と普段の操作を伺い、作り直しが必要か、部分的な改善で足りるかを整理します。