はじめに
対局が終了した直後、手が疲れていたり次の半荘へ急ぐ中で、スコア記録の入力作業はできるだけ手短に済ませたいものです。しかし、スマートフォンの標準のキーボード（特に数字キーボード）は、小数点やマイナス記号の入力、あるいは次の入力欄へのフォーカス移動などの操作が煩雑になりがちです。
本アプリ「みんなで麻雀帳」では、このような入力ストレスを極限まで減らし、「最速の打鍵感」を実現するために専用のカスタムテンキー（キーパッド）を独自設計・実装しました。今回はその設計思想と、紙の麻雀帳との比較を交えたUI設計のポイントを解説します。
- ▪--
1. 紙の麻雀帳を意識した「1000点＝1ポイント」の換算とセル幅設計
麻雀の成績を記録する際、点数をそのまま「32,500点」と入力するのは桁数が多く手間がかかります。紙の麻雀帳（スコアシート）では順位に応じて固定のポイントが与えられる「ウマ」や、基準点からの差分の「オカ」を含めて算出し、一般的に1000点を1ポイントに換算した「＋32」や「−12」といったシンプルな数値で記録する手法が定着しています。100点の小数点以下は「四捨五入」もしくは「五捨六入」で切り上げ・切り捨てされることが多いのですが、Mリーグなど、公式の大会などではそのまま得点に採用される場合もあります。
本アプリのカスタムテンキーおよび入力フォームは、この「1000点＝1ポイント換算」での入力を前提に最適化しています。
- ▪数字のサイズとタップしやすさ:
点数は通常「プラスマイナスどちらか」と「1桁〜2桁の整数」となるため、キーパッド内の ±（プラスマイナス切り替え）キーを押しやすいサイズと位置に配置しました。また、小数点の入力も考慮しキーパッド内の `.`（ドット）キーも配置しました。
- ▪セル幅と入力エリアの最適化:
スマートフォン（特に横幅320px〜480pxの小型画面）において、4人分の点数入力エリアを1画面に横並びで収める必要があります。
「32.5」や「-15.0」といった4〜5文字の文字数がはみ出すことなく、かつタップミスが起きない限界のフォントサイズとセル幅（モバイル時は各プレイヤーの入力幅を約18%に均等配分）を計算して設計しました。
- ▪--
2. 紙の麻雀帳の「＋/ー列」を1列にスッキリ統合し、色分けで視覚化
昔ながらの紙の麻雀帳には、プラス（＋）の成績を書く列と、マイナス（ー）の成績を書く列が左右に分かれているデザインが多く見られます。これは「書き込む列の場所自体がプラス・マイナスを表現する」ことで、符号をわざわざ書く手間を省くための優れたアナログの工夫です。
しかし、スマートフォンの限られた画面幅でこれをそのまま再現しようとすると、プレイヤー1人あたり2列の表示スペースが必要になり、4人分で計8列となって画面が非常に窮屈になってしまいます。
そこで本アプリでは、「1人あたり1列」にスッキリ統合しつつ、アナログの視認性を損なわないデジタルならではの解決策を採用しました。
- ▪1タップでの符号切り替え（±キー）:
カスタムキーパッド上に `±`（プラスマイナス切り替え）キーを用意し、マイナススコアの入力時にも素早く符号を反転できるようにしました。
- ▪動的な色分け（カラーコーディング）:
入力された値がプラスの場合は黒太字、マイナスの場合は警告色である赤文字に動的に変化させます。
これにより、列を分けずとも「誰が勝っていて、誰が負けているのか」が一目で直感的に判別できます。
- ▪--
3. スマートなフォーカス移動（OK/次へボタン）
キーパッドで1人の点数を入力し終えた後、いちいち次のプレイヤーの入力欄を指でタップし直すのは手間です。
本アプリのテンキーには、左下に `次へ`、右側に大きな `OK` ボタンを設置しています。
- ▪プレイヤー1の入力を終えて `次へ` を押すと、キーパッドを開いたまま自動的にプレイヤー2の入力欄へフォーカスが移動します。
- ▪最終プレイヤーの入力を終えて `OK` を押すと、キーパッドが自動的に閉じます。
これにより、片手だけで「入力 -> 次へ -> 入力 -> 次へ」と手元を見ながらリズミカルに4人分のスコア入力を完結させることができます。
- ▪--
まとめ
スマートフォンのWebアプリで快適な操作性を実現するためには、既存のアナログの慣習（1000点換算やプラス・マイナスの表現方法）をリスペクトしつつ、デジタルの制約（画面幅の狭さ）に合わせてUI/UXを再構築することが不可欠です。
「みんなで麻雀帳」では、こうした細かな調整を繰り返すことで、麻雀プレイヤーにとって最もストレスのない入力環境を提供しています。ぜひ、対局時の集計にご活用ください！