フォーム入力のフォーカス移動をスムーズに「Focus transition」
Focus transitionはCSS3製のオープンソース・ソフトウェア（MIT License）です。
ちょっとした工夫でユーザビリティは大きく向上します。今回はWebフォームにおいてTabキーを押した時にアニメーションを実現するFocus Transitionを紹介します。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.30.22.1379903141.png)
インストールしました。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-21 22.32.56.1379903148.png)
任意のWebフォームにおいてFocus Transitionが適用されます。
Focus Transitionが行っていることはCSS3のアニメーションを適用することです。それによってTabキーを押した時にフォーカスがぱっと移るのではなく、アニメーションしながら移動していくようになります。これだけでフォーカスの大きな移動がスムーズになり、目線でも追いかけやすくなります。スタンドアローンのJavaScriptファイルの他、Google Chrome/Safari向け機能拡張も提供されています。
MOONGIFTはこう見る
WebサイトはURLごとに移動するのが基本になっているため、リンクをクリックした瞬間に頭が切り替わってしまいます。そのため何を入力していたのか忘れてしまったり、必要としていた情報を探し出せなくなったりします。これはタブやウィンドウをまたぐとさらにその傾向が強くなります。
スマートフォンアプリでは右や上下にスライドすることでユーザのストレスを低減するようにし、スムーズに操作が続行できるように工夫されています。こういった仕組みはWebにおいても使えるところがあるでしょう。Ajaxを使ったり、スムーズな表示切り替えにするだけでユーザビリティは向上するはずです。