スマートフォンユーザーに優しいフォームのために~type属性とinputmode属性によるキーボード最適化
はじめに：スマホからのフォーム入力の課題
スマートフォンでWebサイトにアクセスするユーザーにとって、フォームへの入力はPCに比べて手間がかかる場合があります。
特に、ソフトウェアキーボードの表示は、ユーザーエクスペリエンスに大きく影響します。
適切なキーボードが表示されなければ、ユーザーは意図しない入力方法を強いられ、ストレスを感じてしまうかもしれません。
この記事では、Webサイトのフォームにおいて、スマートフォンでアクセスしたユーザーがよりスムーズに入力を行えるよう、type属性とinputmode属性を活用して適切なキーボードを表示させる方法について解説します。
type属性を活用したキーボードの最適化
input要素のtype属性は、入力フィールドの種類を指定するだけでなく、一部の環境では表示されるキーボードの種類にも影響を与えます。以下に代表的な例を挙げます。
type=”text”
デフォルトのタイプで、通常のテキスト入力に適しています。特に指定がない場合はこのタイプが使用されます。
HTML
<input type="text" id="name" name="name">
type=”email”
メールアドレスの入力に適しており、「@」や「.」といった記号が入力しやすいキーボードが表示されることがあります。
HTML
<input type="email" id="email" name="email">
type=”tel”
電話番号の入力に適しており、数字や「-」、「+」などの記号が入力しやすいキーボードが表示されます。
HTML
<input type="tel" id="phone" name="phone">
type=”number”
数値の入力に特化しており、数字のみのキーボードが表示されます。ただし、小数点やマイナス記号の入力には対応していない場合があります。
HTML
<input type="number" id="age" name="age">
type=”url”
URLの入力に適しており、「/」や「.」などの記号が入力しやすいキーボードが表示されることがあります。
HTML
<input type="url" id="website" name="website">
inputmode属性による詳細なキーボード制御
HTML5.1で導入されたinputmode属性は、より詳細にユーザーに表示するキーボードの種類を指示することができます。type属性だけでは実現できない、より細やかな制御が可能です。
inputmode属性の主な値
none: 仮想キーボードを表示しません。ハードウェアキーボードを使用する場合などに適しています。text: 標準的なテキスト入力用キーボードを表示します。decimal: 数値と小数点記号に適したキーボードを表示します。numeric: 数字入力に最適化されたキーボードを表示します。tel: 電話番号入力に適したキーボードを表示します。search: 検索に最適化されたキーボードを表示します（例：Returnキーが「検索」ボタンになる）。email: メールアドレス入力に適したキーボードを表示します。url: URL入力に適したキーボードを表示します。
例えば、小数点を含む数値を入力させたい場合には、type="number"だけでは不十分な場合があります。このような場合にinputmode="decimal"を使用することで、より適切なキーボードを表示させることができます。
HTML
<input type="text" inputmode="decimal" id="price" name="price">
上記コードでは、type="text"としていますが、inputmode="decimal"によって、小数点入力に適したキーボードが表示される可能性が高まります。
type属性とinputmode属性の組み合わせ
type属性とinputmode属性は、組み合わせて使用することで、さらに効果を発揮します。例えば、type="tel"とすることで、電話番号入力に適した基本的なキー配置となり、さらにinputmode="numeric"を指定することで、数字入力に特化したキーボードをより確実に表示させることができます。
HTML
<input type="tel" inputmode="numeric" id="phone" name="phone">
まとめ：type属性とinputmode属性でユーザーフレンドリーなフォーム作成
スマートフォンユーザーにとって、フォームの入力は小さな画面とソフトウェアキーボードという制約の中で行われます。type属性とinputmode属性を適切に活用することで、ユーザーがより快適に、そして正確に入力を行えるようにすることができます。
これらの属性を理解し、フォームの目的や入力内容に応じて適切に設定することで、ユーザーエクスペリエンスの向上に繋がり、結果としてコンバージョン率の向上にも貢献するでしょう。常にユーザーの視点に立ち、入力しやすいフォーム作りを心がけましょう。
[参考]
inputmode属性について詳しくは下記のページをチェックしてみて下さい。
・inputmode – HTML: ハイパーテキストマークアップ言語 | MDN
関連記事
HTMLのautocomplete属性とは？フォーム入力支援の基本から応用まで徹底解説
HTMLのautocomplete属性は、ユーザーがフォームにデータを入力する際、過去に入力した内容やブラウザが推奨する値を候補として表示し、入力の手間を省くための便利な機能です。 この記事では、autocomplete属性の基本的な使い方から、指定できる値の種類、利用する上での注意点までを詳しく解説します。
WordPressのプラグイン”MW WP Form”で内容確認画面つきのフォームをつくる
WordPressサイトにフォームを設置できるプラグインにはいろいろなものがありますが、今回はユーザーが送信する前に入力内容を確認することができる「MW WP Form」というプラグインを使ったフォームの設置方法を紹介していきたいと思います。
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメントを残す