【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

レスポンシブWebデザインサイト構築でエントリーフォーム最適化:文字入力モード切り替え

レスポンシブWebデザインサイト構築でエントリーフォーム最適化:文字入力モード切り替え

ソフトウェアキーボード最適化

こんにちは、開発部の河野です。

今回お伝えする内容は

  • フォームの内容に合わせた最適な入力方法が必要
  • HTML5 による文字入力モードの切り替え
  • レスポンシブサイトを意識した文字入力モード切り替えを実践するには

スマートデバイスではフォーム内容に最適な入力方法が必要

かつて、ケータイ(従来型携帯電話)の時代には、フォームに合わせて文字入力モードの切り替えをするのが一般的でした。例えば、メールアドレスを入力する際には半角英数字に、電話番号を入力する際には半角数字になど。それはパソコンのキーボードとは違い、限られたキーしかないケータイで少しでもストレスなくフォーム入力をしてもらうためにケータイ各社が用意した機能でした。

その文字入力モード切り替え方法もケータイ各社で仕様が異なり、それらを踏まえてサイトを構築すると複雑になるというのがケータイサイトを作成する難しさだったのですが、スマートフォン時代となった今でもやはり文字入力のしにくさへのストレスは変わっていません。

入力デバイスはテンキーからソフトウェアキーボードとなりましたが、日本語入力は今だケータイのテンキーを模したものとなっています。確かにフリック入力という新しいインターフェイスが誕生し日本語を入力するのはハードキー時代よりも楽になったかもしれません。

ただ、エントリーフォームにおいては項目毎に入力できる文字が決まっていたりします。電話番号の半角数字やメールアドレスの半角英数字がまさにそうです。そういった入力できる文字が決まっているところに、許されていない文字を入力してしまいエラーとなって再度入力をしなければならなくなる、ということは誰もが経験したことのあるストレスだと思います。

HTML5 による文字入力モードの切り替え

もし、そのフォームにフォーカスした際に自動で最適なソフトウェアキーボードに切り替わったとしたらどうですか?それは非常に快適ですよね。入力ミスが減りエラーとなることもなくなりストレスなくエントリーフォームを進めることができます。そうなれば離脱が減りコンバージョンが増えます。

このようなケータイ時代の文字入力モード切り替えのような機能が、スマートフォンの技術である HTML5 では用意されています。中には検討段階で実際に使えなかったり、ブラウザのバージョンで使えたり使えなかったりするものもあります。実はこのバージョンによりけりといったところがスマートフォンでの文字入力モード切り替えの難しいところです。

また、HTML5 というものはスマートフォンに限らずパソコン向けのブラウザでも利用されています。最近はパソコンでもタッチデバイスが増えてきているのでレスポンシブWebデザインサイトらしくマルチデバイスでの文字入力モード切り替えを意識してサイトを構築するといいでしょう。

レスポンシブサイトを意識した文字入力モード切り替えを実践するには

では実際にどのコードでエントリーフォームに最適化した文字入力モードをしていするのか、ご紹介します。

電話番号入力の場合

<input type="tel" name="tel" placeholder="09012345678">

電話番号入力最適化 電話番号フォームQR
QRコードを読み取っていただければサイトにアクセスできます。

電話番号やファックス番号の場合は type=”tel” を使います。

これでこの項目にフォーカスされたときにはソフトウェアキーボードが電話番号入力モードになります。通常のパソコン向けの場合は残念ながら特に最適化されることはないですが、HTML5 ではブラウザが入力チェックをしてくれる機能があり、対応している場合は入力内容が間違っている旨を教えてくれます。

また HTML5 に対応していないブラウザなどでも特に問題なく type=”text” と同じように扱われます。

メールアドレス入力の最適化

<input type="email" name="email" placeholder="sample@example.com">

メールアドレス入力フォーム メールフォームQR
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
QRコードを読み取っていただければサイトにアクセスできます。

郵便番号や年月日など数字だけを入力させたい場合は pattern='[0-9]*’ を使うと良いです。

数字を入力するのに type=’number’ というのもあるのですが、「数字」というよりは「数値」という扱いで、電話番号のように0から始まる数字の最初の0が欠けてしまったり、iOS5 では3桁ごとにカンマが入ってしまったりと、場合によっては意図した動作とならないことがあります。

なので pattern='[0-9]*’ を推奨するのですが、これはこれで Android が対応していません。type=’number’ の問題点を踏まえた上で利用するか、プログラムを使って Android の時だけ type=’number’ に変更するといった工夫が必要になります。

ちなみに type=’number’ もパソコンでの入力チェックや対応していないブラウザでの動作などは type=”tel” と同じです。ただ、パソコンの場合は入力方法が若干変わります。テキストフォームの横に上下の三角が出てきてクリックすることで数値を大きくしたり小さくしたりすることができるようになります。

さいごに

すぐに実装できるこのソフトウェアキーボードの最適化ですが、色々なECサイトを見ていてもまだまだ出来ていないところが多い印象です。

特にカートに商品を入れていざ購入しようと思っているユーザーに「買いやすい」「またここで買い物したい」と思ってもらえるような「おもてなし」でもあるので、是非実装してみてください。

河野

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+