「片手・立ったまま・1分」を前提に作るということ
毎日ラボのツールは、ほとんどが通勤電車で使われることを想定しています。座れているとは限らないし、両手が空いているとも限らない。停まる駅で中断されるし、地下では通信も切れます。
この条件を「あとで対応するもの」として扱っていたころは、パソコンでは気持ちよく動くのに、電車で開いた瞬間に使えない、ということを何度もやりました。スマホ対応はレイアウトの話ではなく、何を作るかの話だったというのが、いまのところの結論です。前提を「片手・立ったまま・1分」に置くと、設計がどう変わるのかを書きます。
広い画面から縮めるのではなく、狭いほうから作る
いちばん効いたのは順番を変えたことです。パソコンの画面で作ってからスマホ幅に縮めるのをやめて、最初から幅375pxで作るようにしました。iPhoneのよくある画面幅で、ここで成立すれば大半の端末で成立します。
順番が逆だと何が起きるか。広い画面では、情報を全部載せても収まってしまいます。ボタンを横に3つ並べ、表を6列にして、補足を右側に置く。これを狭い画面に持っていく段階では、もう捨てられません。全部必要に見えるからです。結果として、文字を小さくする、横スクロールで逃げる、という苦しい対処になります。
狭いほうから作ると、そもそも入らないので最初に取捨選択をやらされます。表の行を減らすのではなく、表をやめて箇条書きにする、といった判断が自然に出てくる。この順番の違いだけで、出来上がるものがかなり変わりました。
公開前の確認も必ずこの幅でやります。横スクロールが出ていないか、はみ出している要素がないか、長い英数字や固定幅の画像が押し出していないか。過去に表が画面外にはみ出したまま公開していたことがあるので、毎回機械的に見ます。
親指が届く場所に、よく押すものを置く
片手で持ったスマホで自然に届くのは、画面の下半分から中央あたりまでです。上端に触るには持ち替えるか、端末を落としそうになりながら指を伸ばすことになります。吊り革を握っていれば、実質「押せない」に近い。
なので、繰り返し押すもの――回答、次へ、ベット、記録する――は画面の下側に置いています。上に置くのは戻る・設定のように、たまにしか触らないものだけ。作っている最中はパソコンの画面を見ているので、意識しないと絶対にできませんでした。
タップできる範囲の大きさも同じ理由で重要です。AppleとGoogleはそれぞれ、押せる要素の最小サイズをおおよそ44・48（それぞれpt、dp）として案内していて、これを下回ると押し間違いが目に見えて増えます。見た目のボタンは小さくてもいいので、当たり判定を周りの余白まで広げる。文字リンクほど、この処理を忘れがちでした。この手の失敗はUIの失敗5つにも書いています。
もうひとつ、取り消せない操作を、よく押す操作の隣に置かない。揺れる電車の中では誤タップは必ず起きます。「リセット」を「次へ」の隣に置いていたころは、自分でも何度か踏みました。
キーボードを出させない
スマホで最も重い操作は文字入力です。キーボードが立ち上がると画面の半分近くが隠れますし、片手では打ちづらく、揺れていれば誤入力します。1問ごとに入力を求めるツールは、電車では使われません。
そこで、進行は基本的にタップと選択だけで完結させています。どうしても数値の入力が要る場面――トレ飯相棒の体重や、ポケチップのベット額――では、入力欄の種類を数値用にして最初から数字キーパッドが出るようにしました。文字キーボードから切り替える1タップを省くだけで体感が違います。あわせて、キーボードが出た状態で入力欄や確定ボタンが裏に隠れていないかも確認します。パソコンでは絶対に出てこない不具合です。
途中で終わることを、異常ではなく通常として扱う
すきま時間の学習は、区切りのいいところで終わりません。駅に着けば終わりですし、話しかけられれば終わりです。
だから1回の単位を小さくしておくことが前提になります。宅建GYMに本試験と同じ50問の模試を置きつつ、入口を1問単位の一問一答にしているのはそのためです。50問しか入口がないツールは、まとまった時間が取れない日は起動すらされません。
そして、途中で閉じられても失われないように、進行はその都度保存します。「終了」を押してもらえる前提で作ると、たいてい失われます。人はアプリを閉じるのではなく、画面を消すだけなので。
再開したときに何をすればいいかを画面の側から指示するのも、この文脈です。1分しかない人に「どの分野をやりますか」と選ばせると、選んでいるうちに時間が終わります。今日やるべき1問がすでに表示されている状態にしておく。この考え方は続く仕組みの作り方に詳しく書きました。
通信は切れるし、屋外は明るい
地下鉄では通信が切れます。宅建GYMをホーム画面に追加すればオフラインでも学習できるようにしてあるのは、この場面のためです。通信が前提の作りだと、いちばん勉強したい時間帯に使えません。
屋外での見え方も、パソコンの前では気づけない点でした。室内のディスプレイでちょうどよく見える薄いグレーの文字は、日差しの下ではほぼ読めません。本文の色を濃くして、文字サイズは16px以上を基本にしています。薄い文字を使いたくなったときは、それが読めなくても困らない情報かを一度考えるようにしました。
情報量が多いものをどう畳むか
難しいのは、そもそも情報量が多いものです。雀トレの対局画面には、自分の手牌・場に出ている牌・点数・残り枚数が同時に必要で、減らしようがありません。
ここでの方針は横スクロールで逃げないことでした。横に流すと、指で押したいのかスクロールしたいのかが競合して操作が壊れます。牌の大きさは画面幅から逆算して、13〜14枚が確実に一列に収まるサイズに固定し、選んでいる牌は持ち上げて示す。優先度の低い情報は常時表示をやめてタップで開く場所に移す。入らないものは、小さくするのではなく畳むという整理です。
制約は、機能を減らす言い訳になる
最後に。スマホ前提で作ると、載せられる機能は確実に減ります。作っている側としては、思いついた機能が入らないのは面白くありません。
それでも、この制約を先に受け入れるほうがよかったと思っています。パソコンを開かないと使えないツールは、開く日にしか使われません。片手で1分あれば動くツールは、思い出したときにいつでも使えます。学習ツールにとっては、機能の数より起動される回数のほうが効きます。
公開前の最後の確認はいつも同じ質問です。これは、電車で立ったまま、片手で、1分で使えるか。 ひとつでも欠けているなら、まだ何か削れていません。
データを端末の中だけに置いている理由はこちらの記事に、問題データの作り方はこちらに書いています。使ってみて不便なところがあればお問い合わせから教えてください。
2026年8月13日公開
← 読みもの一覧へ