習い事教室のタブレットUIを作り始めて、すぐに気づいた。スマートフォン向けのUIをそのまま拡大しても、タブレットで使いやすいものにはならない。
使われる場所を想像する
このUIが置かれる場所は、習い事教室の入り口だ。iPadが台の上に固定されている。生徒が教室に入るとき、自分のボタンを1回タップして中に入る。退室するとき、もう1回タップして帰る。
保護者のスマートフォンで自宅から見るシステムではない。10歳の子どもが、稽古バッグを持ちながら、後ろに友達が並んでいる状況で操作するシステムだ。
この場面を想像すると、設計の方針は自ずと決まった。画面を見て迷う余地をゼロにする。1タップで終わる。それ以外の要素は全部削る。
テキスト入力は最初から除外した
最初の案として「生徒コードを手打ちする」方式も考えた。シンプルで実装も楽だ。しかしすぐに捨てた。
「J」「0」「0」「1」を正確に打つには集中が必要だ。入力ミスをしたとき、どこが違うか確認しなければならない。後ろに並んでいる子が待っている。
ボタン一覧から自分のコードを選ぶ方式にした。生徒は自分の名前の横についたボタンを1タップするだけで完了する。間違えようがない。
3列か、4列か
ボタンをグリッドで並べるとき、列数を決める必要があった。iPad Airの画面は縦向きで820×1180pxだ。
1列では縦スクロールが長くなる。4列以上ではボタンが小さくなりすぎて、指で押しにくくなる。2列は中途半端で画面の横幅を持て余す。3列が、視認性とボタンサイズのバランスとして自然だった。
.btn-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 16px;
}
.student-btn {
padding: 20px 8px;
font-size: 1.1rem;
border-radius: 12px;
min-height: 80px;
touch-action: manipulation;
}min-height: 80pxはタップターゲットのサイズを確保するための下限だ。touch-action: manipulationを指定することで、ダブルタップによる拡大を無効化して1回のタップが確実に反応するようにした。
横向きに置いた教室もあるかもしれないと考え、landscapeのときは4列に切り替えるメディアクエリを入れた。画面幅が増える分、より多くの生徒ボタンを一覧できる。
操作後の3秒
ボタンをタップした後、画面にどう反応させるかも悩んだ。
「入室しました」というメッセージをモーダルで表示して、3秒後に自動で閉じる設計にした。メッセージには時刻と名前を含める。「10:30 田中花子さんが入室しました」という表示で、生徒自身も確認できる。
「閉じる」ボタンを置かなかった。後ろで待っている子が、前の子がボタンを閉じるのを待つ必要はない。3秒経てば自動で元の画面に戻る。この3秒は長さを実際に計測しながら決めた。短すぎると確認できない。長すぎると待たされている感が出る。
画面に余計なものを置かない
管理者向けのボタンや、設定への導線は一切表示しない。「ログアウト」も「ヘルプ」もない。タブレットは教室の入り口に固定されていて、生徒が設定を触る理由はない。
表示されているのは、教室名と「自分のボタンをタップしてください」という一行と、ボタンの一覧だけだ。
教室の切り替えはURLパラメータで行う（?school=JNK&classroom=A）。管理者が設置時に正しいURLをブラウザのお気に入りに登録する。それ以降、URLを意識する人間は誰もいない。
UIを「道具」に徹させる
このUIはシステムの主役ではない。生徒が稽古を始める前後の1秒、存在するだけでいい。
タップして、「田中花子さんが入室しました」という字が見えて、バッグを肩にかけて教室に入る。その短い時間の体験として、違和感のない設計ができたと思っている。
*シンプルシステム株式会社 代表 伊藤勝彦*