LPのレスポンシブ化とEFO（エントリーフォーム最適化）
LP（ランディングページ）もレスポンシブ対応が必要か？
申し込み専用サイトを作成する場合には、LP（Landing Page）でサイトをデザインする事が多いと思います。
ユーザがスマホやタブレットでアクセスする事が予測される場合には、LPサイトでも一般のサイトと同様に、レスポンシブ化を行い、スマホやタブレットの表示に最適化を行う必要があるはずです。特に申し込みフォームには、より一層の配慮が必要になります。
スマホやタブレットでは、画面やキーボードがPCと異なる為、PCと同じままのレイアウトで表示してしまうと、入力エリアや文字が小さく表示されてしまい、入力し難くなります。
表示の最適化
フォームのレイアウトに関しては、一般的にはdlやul、table等のタグでレイアウトしている場合が多いかと思います。レスポンシブでスマホ表示に最適化を行う場合、それらのタグに対して、cssで「display:block」に設定し、ブロック要素にしてしまいえば、スマホ用にレイアウトを調整しやすくなります。スマホ等の横幅の狭い画面でテーブルレイアウトを使用すると、極端に狭くユーザの操作性を損ねる可能性があります。
EFO エントリーフォームの最適化
LPの目的が、お問い合わせや申し込みであれば、入力フォームが必ずあるかと思います。複数ある入力フォームに、ユーザが自身で入力する必要がある為、入力する手間や時間等といった負担がユーザ側に生じます。あまりに負担が大きかった場合、ユーザが途中で入力を止めてしまい、お問い合わせや申し込みに至らないケースが多くなってしまいます。少しでも、その負担を軽減する必要があります。それがEFO（Entry Form Optimization）、つまり「エントリーフォームの最適化」になります。
■必須入力の項目を見直す
EFOの基本は、必須入力の項目を極力少なくする事です。必須入力の項目が多すぎると、ユーザは入力が嫌になり、入力を途中で止めてしまいます。また、取得しようとする個人情報の内容にも配慮しなければなりません。初対面の相手から根掘り葉掘り個人の情報を聞くのは、相手からすれば気持ち良いものではありません。ユーザの立場になり、入力してもらう情報は、出来る限り必要最小限にします。
■jQueryによるバリデーションの実装
通常、入力フォームには、入力した内容に誤りがあるか、プログラムでチェックを行い、エラーを表示する、といった仕組みが実装されているはずです。php等のフォームで、一度情報をサーバーに送信し、画面のリロードを行ってエラー箇所を表示するタイプのバリデーションですと、読み込みに時間が掛かったり、何度も画面を読み込んでしまい、ユーザに不快感を与える可能性があります。また、一度入力した内容がクリアされてしまう様な仕様では、かなりの確立で、ユーザは入力を止めてしまう事が予想出来ます。
このような場合には、jQueryによる入力バリデーションを実装し、入力ミスがあるまま、送信ボタンを押すと、即座に入力ミス箇所を表示する仕組みを実現出来るようにします。こうする事で、何度も画面を読み込んだり、フォームがクリアされるようなストレスの要因を少なくします。
HTML5で新たに追加されたinput属性でUXを向上させる
HTML5による新しいinput属性は、スマートフォンやタブレット等といったモバイル端末で非常に有効です。HTML5で新たに追加された、「tel」や「email」等の新しいinput typeを使用すれば、スマホから入力した場合に、自動的に電話番号入力用のテンキーになり、UX（User Experience）を向上する事が出来ます。
■HTML5で追加されたinput属性
HTML5で追加されたInput属性は、search、tel、url、email、datetime、date、month、week、time、datetime-local、number、range、color等、多数追加されましたが、telやemail以外のInput typeに関しては、対応していないPCブラウザも多数存在している為、無理に使用する必要は現時点では、ないかと思います。
UXを常に考えて設計する
ユーザからお問い合わせを得る為には、ユーザを突き動かす体験や工夫が必要になります。ユーザの気持ちになる事で、その施策が見えてきます。直接会って会話が出来ないウェブでは、出来る事が限られてきます。限られた中で、最大の努力が出来れば、必然的にUXも向上し、ユーザが申し込みたい、と思えるようなサイトに仕上がるのではないでしょうか。今日も明日も、PDCAで頑張りましょう！
