お問い合わせフォームのCVがあまりよくなくて、どうやって改善しようか考えていた。
たくさん実機で見たいところだけど、PCの方はとりあえずいろいろ見たからスマホだとどうだろうと自分のiPhoneで検証。
様々突っ込みどころはあったのだけれど、まず目がいったのがiPhoneでフォームを入力すると画面がズームされるということ。
これはinputやtextareaのfont-sizeが16px未満の時に起こるようだ。
これはAndroidでは起こらなかった。
ズームせずにすむ方法
これを解消するには2通りあるようで、一つはそもそもズーム自体させない方法。
viewportの指定をuser-scalable=noにしてしまうやり方。
Web業界の傾向として、使うユーザーがしたい動作をサイト側が妨げるのはあんまりよくないというところがあるので、この方法はいまいち。
もう一つはiPhoneのズーム機能は生かしたまま、font-sizeを大きくする方法。
input{
font-size: 16px;
}16px相当ならよいとのことだから、まぁ書き方はpx固定である必要はないのだろう。
ただ今回はサイト全体のデザインが結構小さめのフォントサイズだったので、ここだけ大きいのはちょっとバランスが悪いかもしれない。
その回避方法も探せば出てくるもので、font-sizeは大きくするけどtranform: scale();で縮小する、という力業があるようだ。(自分でまだ検証してないので断定はしない)
デフォルト機能のユーザビリティ
ここでちょっと考えざるを得なくなったのだが、もともと入力するのには小さいだろうからということでiOS側でズームする仕様だったわけだ。それをあえて小さくして使わせるっていうのは、見た目のデザインという面を除いて考えてもどうなんだろう。
実際16pxも要らないということも往々にしてあるだろうし、かといって大きくしてバランスをとるのが嫌なわけでもない。
SEO的にどうだとかいう向きもあるかもしれないが、常識的に作ればおそらく全く関係ないだろう。(極端に小さくない限りは)
使いやすさを含めてデザインなんだろうから、この場合は16pxでいくかscaleするかの2択で考えているけど、つらつらとそんなことをちょっと考えてしまった。
しかしiOSということはiPadも同様なのかな？実機が手元になくて確認できなかった。