私は、間違った幅で作っていた

はじめに届いたのは、文章ではなく写真でした。仲間のEが、自分のスマートフォンの画面を別の端末で撮って送ってきたのです。経費を登録する画面で、いちばん下にあるはずの保存ボタンが、上半分だけ見えていて、残りは画面の外に落ちている。添えてあったのは、これ、押せますか、という1行だけでした。彼はジャカルタから少し離れた町にいて、そこで毎日この画面を使っています。

私はそれまで、自分のやり方を疑っていませんでした。27インチの画面で開発して、スマートフォンでの見え方を確かめるときは、ブラウザの窓を横に狭めます。だいたい390pxくらいまで縮めて、崩れていなければ問題なし。そう決めていました。狭めた窓は、たしかに縦長の四角に見えます。ただ、それは私の机の上の四角であって、誰かの手のひらの上の四角ではありませんでした。

Eの端末の幅を測ってもらいました。CSSの単位で360pxです。390pxとの差は30pxで、指2本ぶんもありません。それでも、その30pxの中に、私たちの画面のいくつかが収まらなくなる境目がありました。私が確かめていた幅は、いちばん狭いところではなく、いちばん狭いところの少し外側だったわけです。

窓を360pxに固定して、KAZENA Booksの画面を端から順に開きました。全部で48画面。そのうち11画面で横スクロールが出ていて、さらにその中の3画面は、いちばん大事な操作——保存、書き出し、次へ——が画面の外にありました。横スクロールは、指で動かせば見えます。でも、動かせることを知らない人にとっては、そこには何も無いのと同じです。

原因は、ほとんどが1つの部品でした。金額の欄と税区分の選択を、横に2つ並べたレイアウトです。この2列には、余白まで含めて372pxが必要でした。360pxの画面では12pxはみ出す。たった12pxですが、はみ出した先にあるのが選択の欄なら、その画面ではもう選べません。しかも同じ部品を11画面で使い回していたので、1か所の見落としが11か所になっていました。

もっと厄介だったのは、幅ではなく高さのほうです。金額を打とうとすると、画面の下から文字入力の盤が出てきます。Eの端末では、縦640pxのうち下の300px近くを盤が占めていました。私たちは保存ボタンを画面の下に貼り付けていたので、そのボタンは盤の裏に隠れます。スクロールしても、貼り付けてあるものは動きません。彼が送ってきた写真は、まさにその状態でした。押せないのではなく、押せる場所に無かった。

もうひとつ、見ていなかったものがあります。文字の大きさです。端末の設定で表示文字を大きくしている人は珍しくありません。設定を1.3倍にして同じ画面を開くと、ボタンの中の文字が2行に折り返し、ボタンの高さが伸び、その下にあった注意書きが押し出されました。私たちは、ずっと100%でしか見ていません。文字を大きくするのは、見えにくい人がとる当たり前の手段です。それを選んだ瞬間に画面が壊れるのは、こちら側の落ち度です。

正直に書いておきます。似た報告は、6月にも届いていました。フィリピンで使ってくださっている方から、ボタンが切れている、という短い連絡です。私はそのとき、その方の端末に固有の問題だろうと考えて、そのまま閉じました。手元の窓を狭めても再現しなかったからです。再現しなかったのは、私の狭め方が間違っていたからで、その方の端末のせいではありませんでした。2か月、直せたはずのものを直さずに配っていたことになります。

この夏、ジャカルタの食堂で会計を待っているとき、隣の席の人が片手で皿を持ちながら、もう片方の手だけでスマートフォンを操作して支払いを済ませていました。昼の光の下で画面は白く飛んでいて、親指が届くのは画面の下半分だけです。私が机の上でやっている確認とは、条件がまるで違う。手書きのレシートを受け取りながら、うちの保存ボタンは、あの持ち方で押せるだろうかと考えていました。

直した順番を書きます。まず、画面の下に貼り付けていた主要な操作を、本文の流れの中に戻しました。フォームの最後まで進めば、そこにボタンがある。文字入力の盤が出ていても、盤の上まで自然に送られます。次に、横に2つ並べていたレイアウトを、幅が380pxを下回ったら縦1列に落とすようにしました。狭いところでは、並べないのがいちばん確実です。

それから、確認のやり方を変えました。私の目視をあてにするのをやめて、360px×640pxの画面で、主要な12画面のスクリーンショットを自動で撮るようにしています。同じ12画面を、文字サイズ130%でももう1周撮ります。はみ出していれば、絵を見れば分かる。ついでに、指で押す部分が44pxに満たない箇所が2か所あったので、そこも広げました。税区分を選ぶ小さな札が、その2か所でした。

この件で学んだのは、技術的なことではありませんでした。私が開発に使う画面の幅は、好みではなく、誰のために作っているかという決定だったということです。いまブラウザの既定の幅は360pxにしてあります。広く見たいときだけ、自分で広げる。もしお使いの画面で、押せないボタンや切れている文字があったら、写真1枚で構いませんので送ってください。Eがそうしてくれたおかげで、私はようやく自分の机を疑うことができました。