こんにちは、開発部の河野です。
今回お伝えする内容は
- フォームの内容に合わせた最適な入力方法が必要
- HTML5 による文字入力モードの切り替え
- レスポンシブサイトを意識した文字入力モード切り替えを実践するには
スマートデバイスではフォーム内容に最適な入力方法が必要
かつて、ケータイ(従来型携帯電話)の時代には、フォームに合わせて文字入力モードの切り替えをするのが一般的でした。例えば、メールアドレスを入力する際には半角英数字に、電話番号を入力する際には半角数字になど。それはパソコンのキーボードとは違い、限られたキーしかないケータイで少しでもストレスなくフォーム入力をしてもらうためにケータイ各社が用意した機能でした。
その文字入力モード切り替え方法もケータイ各社で仕様が異なり、それらを踏まえてサイトを構築すると複雑になるというのがケータイサイトを作成する難しさだったのですが、スマートフォン時代となった今でもやはり文字入力のしにくさへのストレスは変わっていません。
入力デバイスはテンキーからソフトウェアキーボードとなりましたが、日本語入力は今だケータイのテンキーを模したものとなっています。確かにフリック入力という新しいインターフェイスが誕生し日本語を入力するのはハードキー時代よりも楽になったかもしれません。
ただ、エントリーフォームにおいては項目毎に入力できる文字が決まっていたりします。電話番号の半角数字やメールアドレスの半角英数字がまさにそうです。そういった入力できる文字が決まっているところに、許されていない文字を入力してしまいエラーとなって再度入力をしなければならなくなる、ということは誰もが経験したことのあるストレスだと思います。
HTML5 による文字入力モードの切り替え
もし、そのフォームにフォーカスした際に自動で最適なソフトウェアキーボードに切り替わったとしたらどうですか?それは非常に快適ですよね。入力ミスが減りエラーとなることもなくなりストレスなくエントリーフォームを進めることができます。そうなれば離脱が減りコンバージョンが増えます。
このようなケータイ時代の文字入力モード切り替えのような機能が、スマートフォンの技術である HTML5 では用意されています。中には検討段階で実際に使えなかったり、ブラウザのバージョンで使えたり使えなかったりするものもあります。実はこのバージョンによりけりといったところがスマートフォンでの文字入力モード切り替えの難しいところです。
また、HTML5 というものはスマートフォンに限らずパソコン向けのブラウザでも利用されています。最近はパソコンでもタッチデバイスが増えてきているのでレスポンシブWebデザインサイトらしくマルチデバイスでの文字入力モード切り替えを意識してサイトを構築するといいでしょう。
レスポンシブサイトを意識した文字入力モード切り替えを実践するには
では実際にどのコードでエントリーフォームに最適化した文字入力モードをしていするのか、ご紹介します。
電話番号入力の場合
<input type="tel" name="tel" placeholder="09012345678">
QRコードを読み取っていただければサイトにアクセスできます。
電話番号やファックス番号の場合は type=”tel” を使います。
これでこの項目にフォーカスされたときにはソフトウェアキーボードが電話番号入力モードになります。通常のパソコン向けの場合は残念ながら特に最適化されることはないですが、HTML5 ではブラウザが入力チェックをしてくれる機能があり、対応している場合は入力内容が間違っている旨を教えてくれます。
また HTML5 に対応していないブラウザなどでも特に問題なく type=”text” と同じように扱われます。
メールアドレス入力の最適化
<input type="email" name="email" placeholder="sample@example.com">
QRコードを読み取っていただければサイトにアクセスできます。
メールアドレスの場合は type=”email” を使います。これは注意が必要です。言語を英語にしていると普通に最適化されるのですが日本語では比較的新しい OS でなければ最適化してくれないようです。
docomo SH-02E Android 4.1.2 では英字入力になっているのを確認しましたが、他の機種や OS では対応していないものの方が多いです(2013年11月現在)。しかし、今後はここで挙げた機種のように対応する機種が増えてくることが予想されるので早いうちに対応しておいて損はありません。
また、パソコンでの入力チェックや対応していないブラウザでの動作などは type=”tel” と同じです。
数値入力の最適化
<input type="text" pattern='[0-9]*' name="zipcode" placeholder="1318634">
QRコードを読み取っていただければサイトにアクセスできます。
郵便番号や年月日など数字だけを入力させたい場合は pattern='[0-9]*’ を使うと良いです。
数字を入力するのに type=’number’ というのもあるのですが、「数字」というよりは「数値」という扱いで、電話番号のように0から始まる数字の最初の0が欠けてしまったり、iOS5 では3桁ごとにカンマが入ってしまったりと、場合によっては意図した動作とならないことがあります。
なので pattern='[0-9]*’ を推奨するのですが、これはこれで Android が対応していません。type=’number’ の問題点を踏まえた上で利用するか、プログラムを使って Android の時だけ type=’number’ に変更するといった工夫が必要になります。
ちなみに type=’number’ もパソコンでの入力チェックや対応していないブラウザでの動作などは type=”tel” と同じです。ただ、パソコンの場合は入力方法が若干変わります。テキストフォームの横に上下の三角が出てきてクリックすることで数値を大きくしたり小さくしたりすることができるようになります。
さいごに
すぐに実装できるこのソフトウェアキーボードの最適化ですが、色々なECサイトを見ていてもまだまだ出来ていないところが多い印象です。
特にカートに商品を入れていざ購入しようと思っているユーザーに「買いやすい」「またここで買い物したい」と思ってもらえるような「おもてなし」でもあるので、是非実装してみてください。
河野