入力フォーム支援(EFO)の進化は続くよどこまでも

入力フォーム支援(EFO)の進化は続くよどこまでも
■ 店頭より得で、予約しやすいオンラインショップ。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE

こんばんみ、EFO開発担当のMBです。
私は入力フォームのASPサービス「フォームアシスト」の開発のほか、メンテナンス要員としても従事しております。

この数年間で私が関わった入力フォームは、恐らく1000ページを超えています。
大手の銀行・証券・保険・採用のJSファイルに私の「MB」というサインが記述されているでしょう。

by the way、本日はこれまでの経験を活かし『入力フォームの進化と変遷』について、許す限り語り尽くしたいと思います。

入力フォームクロニクル:2013-2014
「“おもてなし”を意識し始めた時代」

2020年オリンピック開催地が東京に決まったこの年、「おもてなし」というキャッチフレーズが流行語大賞に選ばれました。

そして「おもてなし」はブームという枠を越えてウェブサイトに、さらには「おもてなし」を意識した入力フォームが増えてきたのも事実です。

従来の入力フォームは「文字を入力して送信ボタンを押す」、ただそれだけのことでした。

これまでも確認画面でユーザに確認させる、またはサーバ側で行うフィルタリングにより、間違っている場合は次ページに遷移させないといった“プチおもてなし”を導入するフォームは数多くありましたが、コンバージョン率を上げるための施策や方法などが世の中に広まったこともあり、リアルタイムで誤りを指摘してあげたり、的確な文字へと自動変換させるといったフォームも増えてきました。

これは各企業が「おもてなし」を意識し始めたことの表れではないでしょうか。

フォームアシストも元来、「おもてなし」を体現したASPサービスということもあり、導入社数が爆発的に増加した時期でもあるのですが、元々のフォームで「おもてなし」という名のEFOを実装しているケースも目立ち始め、フォームアシストのEFO機能と導入企業フォームが実装しているEFOとでバッティングする場合も増加しました。

結果的に双方のEFOを活かした、“カスタマイズ対応”が増加したことも鮮明に覚えております。

入力フォームクロニクル:2014-2015
「スマートフォンサイト強化の時代」

以前から予測はついてはいたものの、スマートフォンの普及率が年々増加傾向にありました。

そしてこの年、入力フォームにおいてもスマートフォンユーザに向けたのUI強化を実施する企業が多くなってきたことを身をもって実感した年でもあります。

JQUERY-MOBILEを駆使し、スマートフォン専用フォームとして仕立て上げているフォームが目につきました。これはラジオボタンで作成されているPC用入力項目を擬似的なセレクトボックスに変換させたり、さらに触りやすいサイズに変換させたりなど、擬似的な入力項目に変換させたものがほとんどです。

こういったインターフェイスの改善により、スマートフォン特有の課題である離脱率の軽減や、スクロール率の減少を狙っていたのではないでしょうか。

「おもてなし」を意識した対応としては、非常に素晴らしい風潮ではあります。

しかしフォームアシストでは通常の必須項目やエラー項目に対してカラーリング施す機能も実装しているため、前年同様に機能のバッティングが発生しがちでした。

当然ながらカスタマイズ対応を実施することで、フォームアシストを実装できる状態にする必要があるのですが、クライアントによって作りが異なるJQUERY-MOBILEを相手に悪戦苦闘の日々。。。

おかげでプログラミングスキルは向上しましたが、「もしうまくいかなかったら…」という危機感にさいなまれていました。

<参考:スマートフォン普及率>
2012年:18.0%
2013年:28.2%
2014年:36.9%
2015年:49.7%
http://consult.nikkeibp.co.jp/

入力フォームクロニクル:2015-2016
「セキュリティ強化・高機能スマホサイトの登場」

2015年、日本においてマイナンバー制導入が現実味を帯び、10月には指定が確定。そして世の中も“セキュリティ元年”とも言われるほど、官民挙げてセキュリティ対策が論じられることになりました。

時代の潮流は入力フォームの世界にも顕著に表れ、免許証で認証ログインするシステムなどの不正検知システムを始めとする、様々なセキュリティ対策が爆発的に普及しました。

例えば、ブラウザのオートコンプリートによるパスワード保存を阻止するといったものがあります。

オートコンプリートとはブラウザごとに動作・仕様は異なるものの、セッション履歴にキャッシュを行うというもの。

具体的にはフォーム送信後に「戻る」ボタンを押下することで、入力した項目にあらためてフォーカスすると、一度入力した内容が履歴として表示・反映される仕組みになります。

HTMLコードにて「autocomplete=’off’」という属性を記述することにより、ブラウザごとのオートコンプリート機能を無効化することができます。

しかし、最近ではIE11のなどでタイプが「password」などのinput要素だった場合、無効化できない仕様となっているようです。

セキュリティ対策を重んじる金融業界などのサイトでは、複数の方が同一PCを共有する可能性なども考慮し、オートコンプリートをさせないために、IE11でもオートコンプリート機能を無効化する手法を使うサイトが多くなってきました。

その手法を具体的に説明すると、本物のパスワード入力欄をhiddenタイプに切り替えて非表示にし、ダミーのパスワード入力欄を表示させます。

このダミーのパスワード入力欄のタイプはテキストになります。

表向きにはJQUERYによって、入力した内容が「●」といった解読できない文字列に変換されてダミーのパスワード入力欄にインサートされますが、裏側では実際に入力した本物の値が非表示の欄に入力されるといったものです。

ダミーのパスワードの属性には「autocomplete=’off’」が記述されますが、タイプがテキストになっているため、フォーカスしてもブラウザのオートコンプリートが起動しないという仕組みになっているわけです。

やはりこれもフォームアシストの設定には影響を及ぼしました。

非表示となった本物の項目に対してEFO機能が働くものの、実際に表示されているダミーの入力項目にはEFOが効かず。。。
読者のみなさまのご想像どおり、カスタマイズを施す必要が出てくるわけです。

そのほかにも不正検知システムと連動させるためのカスタマイズなど、都度、クライアントの元々の挙動とその仕組みについてに向き合わなければならないわけです。。。

わずか3年間の変遷ではありますが、それでも世の中のニーズに応じて閲覧端末のシェア割合が変わり、技術の進化や新機能の普及によって、ウェブサイトそのものはどんどん便利になっています。

また昨今では、古いブラウザがサポート対象外とするケースも多く、これまで古いブラウザも対応しなければならないという「足かせ」も徐々になくなってきています。そうなれば、より高機能なサイトが登場すると思われます。

フォームアシストが誕生してすでに8年が経過しています。

ウェブサイトのトレンドに合わせて、フォームアシストも大小様々なアップデート、そしてその時々のカスタマイズ対応を繰り返して、現在も多くのフォームでご活用いただいております。

より高機能なサイトがどのようなものなのかは想像できるものではありませんが、きっとフォームアシストも何らかの形で順応し、ずっと愛され続けるサービスであることを願うばかりです。

■最新のiPhoneの購入・機種変更なら店頭より得で、予約しやすいオンラインショップ。
機種の頭金や使わないオプションパックをつけて年間何万円も損していませんか?
オンラインショップなら故障のサポートもしっかりしていて最低限の費用。待たされることもありません。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE
がお得です。