スマホでフォームをタップすると画面が勝手に寄る。原因は入力欄の文字の大きさ

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

パソコンで作っているとまず気づかない。
作った側が長いあいだ放置しやすい不具合のひとつだと思う。

なぜ勝手に拡大するのか

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

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

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

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

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

問い合わせが少ないとき、原因は文章や導線のほうに探しがちだ。
実際にはその手前で、指が止まっていることもある。

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

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

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

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

やってはいけない直し方

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

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

ついでに見直したい二つ

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

もうひとつは、項目の名前をタップしても入力欄に入るようにしておくことだ。
指で狙う的が広がるので、押し間違いが起きにくくなる。

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