最初の入退室管理システムのUIは3教室を前提に作っていた。
3列グリッドで3つのカードを並べる。綺麗に収まる。画面に映えた。しかし教室が4つになったとき、4列グリッドに切り替えるためにコードを修正しなければならない。5教室になればまた修正が必要だ。
教室の数を画面の設計に焼き込んでしまっていた。
グリッドを可変にすることにした。教室の数はスプレッドシートの教室マスタシートから取得する。APIで返ってきた件数に応じてカードを並べる。
CSSはauto-fillを使った。
.classroom-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}auto-fillは利用可能な幅の中に収まるだけカラムを作る。280px以上の幅があればカードを横に並べ、なければ折り返す。教室が3つでも7つでも、コードを変えずに見た目が整う。
ただし可変にするだけでは足りなかった。
入退室管理システムの入退室画面はiPadで使われることが多い。縦持ちで使うのか横持ちで使うのかも教室によって違う。カードの最小幅が大きすぎると縦持ちiPadで崩れる。小さすぎると横持ちで間延びする。
280pxというのは何度か調整した結果の数字だ。iPadのポートレート（縦持ち）では2列、ランドスケープ（横持ち）では3列になる。これが一番使いやすかった。
もう一つの問題が「カードの高さを揃える」ことだった。
教室名が長い教室と短い教室が混在する場合、テキスト量の違いでカードの高さが変わってしまう。縦に不揃いになったグリッドは見づらい。
CSS Gridにはalign-items: stretchがデフォルトで効いているので、同一行のカードは高さが揃う。ただし行をまたぐと揃わない。
対策として、カードの中身をflex-direction: columnのflexboxにして、ボタンをカードの下端に固定した。テキストが短くてもボタンの位置が統一される。
動的なデータとUIの相性は常に気を使う。
静的なモックを作るときは「3教室で3カード」として設計する。本番に繋いだとき1教室の状態でテストして動いた、次に5教室にしたら崩れた、という展開はよくある。
可変グリッドの考え方は「データの件数をUIが吸収する」ことだ。件数をUIが知らなくていい状態にする。そのためにauto-fillは便利な仕組みだ。
教室を増やす作業がスプレッドシートへの1行追加になった。フロントを触る必要がない。
次回は、スプレッドシートをDBとして設計し直した話を書く。
シンプルシステム株式会社 代表 伊藤勝彦