スマホでフォームを触ったら、画面が勝手に寄った。犯人は文字の大きさだった

自分のサイトの問い合わせフォームを、久しぶりにスマホで開いた。
名前の欄をタップした瞬間、画面がぐっと寄った。
文字が大きくなったのではなく、ページ全体が拡大されて右側がはみ出している。
そのまま打ち込んで送信ボタンを探したら、画面の外にあった。

パソコンで作っているとまず気づかない。
僕もずいぶん長いあいだ、そのまま置いていた。

なぜ勝手に拡大するのか

これは不具合ではなく、ブラウザが親切のつもりでやっている動きだ。
iPhone の Safari は、入力欄の文字がある大きさより小さいと「このままでは打つ人が読めない」と判断して、ページのほうを自動的に拡大する。
その境目が16pxで、15pxだと寄って、16pxだと寄らない。
1pxしか違わないのに、起きるか起きないかがきれいに分かれる。

Android の主要なブラウザでは、同じ動きをしない。
手元の確認用の端末が Android だけだと、この症状は一生見えないままになる。
僕が長く気づかなかったのも、たぶんそれが理由だった。

本当に困るのは、拡大したあと

拡大されること自体は、実はそれほど問題ではない。
困るのは、勝手に寄ったあと自分では元に戻らないことだ。

横に広がったまま次の欄へ移るので、指で戻しながら入力することになる。
送信ボタンが画面の外に出てしまい、押せないと思ってやめる人も出る。
そもそも「触ったら画面が勝手に動いた」という体験そのものが、この先を触るのが怖い、という感じにつながる。

問い合わせが少ない原因を、僕は文章と導線のほうに探していた。
実際にはその手前で、指が止まっていたわけだ。

直し方は、ほとんど一行で済む

入力欄の文字を16px以上にする。
対象は input と textarea と select の三つで、これだけで寄らなくなる。

画面が狭いときだけ16pxにする、という書き方もできる。
ただ僕は全部16pxで揃えてしまった。
パソコンで見ても16pxの入力欄が読みにくいということはないし、条件を分けるほど、あとから触ったときに壊す。

「入力欄が大きく見えて不格好だ」と感じるなら、直すのは文字ではなく余白のほうがいい。
上下の余白と枠の高さを詰めれば、文字は16pxのまま見た目は落ち着く。
小さく見せたいという気持ちの正体は、たいてい文字の大きさではなく欄の高さのほうだった。

やってはいけない直し方

調べると、ページの設定で拡大そのものを禁止する方法が出てくる。
たしかにこれでも寄らなくなる。
ただこれは、拡大が必要な人からピンチ操作を取り上げる直し方だ。

小さい字が読みにくい人は、指で広げて読んでいる。
こちらの都合で勝手に寄るのを止めたいだけなのに、その人が読む手段まで一緒に消してしまう。
原因が文字の大きさなのだから、文字の大きさで直すのが筋だと思う。

ついでに直した二つ

電話番号の欄とメールアドレスの欄に、種類を指定し直した。
種類を書いておくと、スマホのキーボードが数字だけになったり、アットマークが最初から出ていたりする。
打つ手間が減るぶん、途中でやめる人が減る。

もうひとつは、項目の名前をタップしても入力欄に入るようにしたことだ。
指で狙う的が広がるので、押し間違いが目に見えて減った。

フォームは、書いた文章より先に触られる場所だ。
寄るか寄らないかは些細な話に見えて、触った人の一手目の印象をそっくり決めていた。
リンクの見え方について書いた下線の回と、結局は同じことを言っている気がする。