こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
みなさん、こんなフォームの入力体験にイラッとしたことありませんか？
たとえば電話番号や認証コードなど、「桁ごとに区切られたフォーム」に数字を打ち込んでいっても、自動で次の欄に移動しない。
1文字ごとにキーボードでタブキーを押したり、クリックしたり…。
こういったちょっとした手間って、ユーザーにとっては意外とストレスなんですよね。
そこで今回は、フォームのUXをぐっと良くする「自動フォーカス移動」の実装方法をご紹介します。
ライブラリなし、JavaScriptだけで簡単に実装できるので、ぜひご自身のサイトに取り入れてみてください！
1. なぜ「自動フォーカス移動」がUX改善になるの？
まずは「なぜわざわざ実装する価値があるのか？」を押さえておきましょう。
- ユーザーの手間が減る（毎回タブキー不要）
- モバイルでも使いやすい（特にスマホで恩恵が大きい）
- 入力途中の離脱を防げる
ちょっとしたことですが、ユーザーの「感じの良さ」はこういうところから生まれます。
フォーム改善は地味に見えて、実はCV率や問い合わせ数に直結する大切な要素なんです。
2. HTMLの基本構造を用意しよう
たとえば、4桁の認証コードを入力するフォームを作る場合はこんな感じになります。
<form id="codeForm">
<input type="text" maxlength="1" class="code-input">
<input type="text" maxlength="1" class="code-input">
<input type="text" maxlength="1" class="code-input">
<input type="text" maxlength="1" class="code-input">
</form>ポイントは maxlength="1" をつけて、1文字ずつ入力できるようにすること。
この制限があることで、JavaScriptでの制御もしやすくなります。
3. JavaScriptで自動フォーカスを実装しよう
続いてJavaScript側です。
入力されたら、自動的に次の欄に移動するようにします。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
ここで注目ポイントは2つ
- 1文字入力されたら次へ移動
- バックスペース時に前の欄に戻る
この「行きも帰りも快適」な操作が、実際に触ってみると本当に気持ちいいんですよ。
4. スマホでの使い心地もチェック！
最近のWebサイトでは、スマホからのアクセスが過半数を超えるのが普通です。
だからこそ、スマホでの使い勝手はとっても大事！
以下のような属性を加えると、スマホでもさらに入力が快適になります。
<input type="text" maxlength="1" inputmode="numeric" pattern="[0-9]*" class="code-input">- inputmode="numeric" → 数字キーボードを表示
- pattern="[0-9]*" → 数字のみ許可（iOS向け）
5. 応用アイデア：電話番号やカード番号でも応用OK
この「フォーカス移動」の仕組みは、認証コード以外にも応用できます。
- 電話番号（例：XXX - XXXX - XXXX）
- クレジットカード番号（4桁×4ブロック）
- 生年月日（例：YYYY - MM - DD）
実際に浜松の観光施設やネット予約ページでも、スマホでの操作性を改善する手段としてかなり有効ですよ。
6. まとめ：小さな改善が大きな満足につながる
フォームって、ユーザーとの接点の中でもっとも繊細なパーツのひとつです。
ちょっとした工夫があるかないかで、使いやすさがガラッと変わるのがUXの奥深いところ。
今回紹介した「入力時に自動でフォーカス移動」は、まさにその代表例。
ぜひあなたのWebサイトにも組み込んで、「ちょっと気が利いてる」体験を提供してみてください！
それではまた、次回もお楽しみに。
satokotadesignキャンペーン実施中！
