スマートフォンなどの小さい画面のデバイスには、タッチスクリーンが搭載されていることがよくあります。ノートパソコンやパソコンなどの大画面デバイスには、マウスやトラックパッドなどのハードウェアが付属していることが多いです。小画面はタップ、大画面はポインタと結び付けがちですが、
しかし、現実はもっと微妙です。一部のノートパソコンにはタッチスクリーン機能が搭載されています。ユーザーはタッチスクリーン、トラックパッド、またはその両方を操作できます。同様に、タブレットなどのタッチスクリーン デバイスで外部キーボードやマウスを使用することもできます。
画面サイズから入力メカニズムを推測するのではなく、CSS のメディア機能を使用してください。
ポインタ
pointer
メディア機能では、none
、coarse
、fine
の 3 つの値をテストできます。
ブラウザが pointer
値を none
と報告している場合、ユーザーがキーボードを使用してウェブサイトを操作している可能性があります。
ブラウザが pointer
値を coarse
と報告する場合、プライマリ入力メカニズムが正確ではないことを意味します。タッチスクリーン上の指は、粗いポインタです。
ブラウザが pointer
値を fine
と報告する場合、主な入力メカニズムはきめ細かい制御が可能です。マウスやタッチペンは優れたポインタです。
インターフェース要素のサイズは、pointer
の値に合わせて調整できます。さまざまなデバイスでこちらのウェブサイトにアクセスして、インターフェースがどのように適応するかを確認してみてください。
この例では、粗いポインタ用にボタンを大きくしています。
button {
padding: 0.5em 1em;
}
@media (pointer: coarse) {
button {
padding: 1em 2em;
}
}
細かいポインタに合わせて要素を小さくすることもできますが、その場合は注意が必要です。
@media (pointer: fine) { button { padding: 0.25em 0.5em; } }
きめ細かい操作が可能なメインの入力メカニズムがある場合でも、インタラクティブな要素のサイズを小さくする前によく検討してください。フィットス法則は引き続き適用されます。ターゲットが小さい場合は、精密なポインタを使用していても、より集中する必要があります。ターゲット領域を広くすると、ポインタ デバイスに関係なくすべてのユーザーにメリットがあります。
任意のポインタ
pointer
メディア機能は、プライマリ入力メカニズムの精度を報告します。ただし、多くのデバイスには複数の入力メカニズムがあります。タッチスクリーンとマウスの両方を使用してウェブサイトを操作しているユーザーがいる可能性があります。
any-pointer
は、ポインティング デバイスがテストに合格したかどうかを報告するという点で、pointer
メディア機能とは異なります。
any-pointer
の値が none
の場合、ポインティング デバイスが使用できないことを意味します。
any-pointer
の値が coarse
の場合、少なくとも 1 つのポインティング デバイスの精度が低いことを意味します。ただし、これが主な入力メカニズムとは限りません。
any-pointer
値が fine
の場合、少なくとも 1 つのポインティング デバイスがきめ細かい制御に対応していることを意味します。ただし、これが主な入力メカニズムとは限りません。
any-pointer
メディアクエリは、入力メカニズムのいずれかがテストに合格すると陽性の結果を報告するため、ブラウザは any-pointer: fine
の結果と any-pointer: coarse
の結果の両方を報告する可能性があります。その場合、メディアクエリの順序が重要になります。最後に設定した値が優先されます。
この例では、デバイスに精密入力メカニズムと粗い入力メカニズムの両方がある場合、粗いスタイルが適用されます。
@media (any-pointer: fine) {
button {
padding: 0.5em 1em;
}
}
@media (any-pointer: coarse) {
button {
padding: 1em 2em;
}
}
カーソルを合わせる
hover
メディア機能は、メインの入力メカニズムで要素にホバーできるかどうかを報告します。通常、これは、マウスまたはトラックパッドで操作される何らかのカーソルが画面上にあることを意味します。
精密ポインタと粗いポインタを区別する pointer
メディア機能とは異なり、hover
メディア機能はバイナリです。プライマリ入力デバイスが要素のホバーに対応している場合は、hover
の値が報告されます。それ以外の場合、値は none
です。
この例では、一部の補足アイコンはホバー時に使用できますが、メイン入力デバイスが要素のホバーに対応している場合に限られます。
button .extra {
visibility: visible;
}
@media (hover: hover) {
button .extra {
visibility: hidden;
}
button:hover .extra {
visibility: visible;
}
}
マウスでそのボタンにカーソルを合わせると、アイコンが表示されます。ただし、キーボードを使用してタブキーでボタンに移動しても、アイコンは表示されません。キーボードを使用する場合は、ホバーではなくフォーカスを設定します。マウスが接続されているパソコン デバイスでは、メインの入力メカニズムがホバーに対応していると報告されます。これは事実です。ただし、マウスが接続されているときにキーボードを使用しているユーザーは、:hover
スタイルのメリットを享受できません。そのため、:hover
スタイルと :focus
スタイルを組み合わせて、両方のインタラクションをカバーすることをおすすめします。
button .extra {
visibility: visible;
}
@media (hover: hover) {
button .extra {
visibility: hidden;
}
button:is(:hover, :focus) .extra {
visibility: visible;
}
}
メインの入力デバイスで要素にホバーできる場合でも、ホバー操作の背後に情報を隠さないように注意してください。情報が見つけにくくなります。ホバーを使用して、重要な情報や重要なインターフェース要素を非表示にしないでください。
任意のホバー
hover
メディアクエリは、プライマリ入力メカニズムについてのみレポートします。デバイスによっては、タッチスクリーン、マウス、キーボード、トラックパッドなど、複数の入力メカニズムがあります。
any-pointer
が任意の入力メカニズムについて報告するように、any-hover
は、使用可能な入力メカニズムのいずれかが要素にホバーできる場合に true になります。
上記の例のロジックを逆にする場合、ホバー スタイルをデフォルトにして、any-hover
の値が none
の場合に削除できます。
button .extra {
visibility: hidden;
}
button:hover .extra,
button:focus .extra {
visibility: visible;
}
@media (any-hover: none) {
button .extra {
visibility: visible;
}
}
ホバー可能な入力メカニズムがないデバイスでは、追加アイコンが常に表示されます。
仮想キーボード
ユーザーはカーソルと指を使ってインターフェースを操作しますが、情報を入力する際にはキーボードが必要になります。デバイスに物理的なキーボードが接続されている場合は問題ありませんが、タッチスクリーン デバイスを使用している場合は、少し複雑になります。これらのデバイスには、画面上の仮想キーボードが用意されています。
入力値の型
物理キーボードとは異なり、仮想キーボードは想定される入力に合わせてカスタマイズできます。想定される入力に関する情報を提供すると、デバイスは最も適切な仮想キーボードを表示できます。
input
要素を記述するには、HTML5 入力タイプが適しています。type
属性には、email
、number
、tel
、url
などの値を指定できます。
<label for="email">Email</label>
<input type="email" id="email">
<label for="number">Number</label>
<input type="number" id="number">
<label for="tel">Tel</label>
<input type="tel" id="tel">
<label for="url">URL</label>
<input type="url" id="url">
入力モード
inputmode
属性を使用すると、仮想キーボードをきめ細かく制御できます。たとえば、値が number
の input
type
が 1 つある場合、inputmode
属性を使用して整数と小数を区別できます。
年齢などの整数を尋ねる場合は、inputmode="numeric"
を使用します。
<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">
小数点を含む数値(価格など)を尋ねる場合は、inputmode="decimal"
を使用します。
<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">
予測入力
フォームに記入するのは誰にとっても楽しいものではありません。デザイナーは、フォーム フィールドの自動入力を有効にすることで、ユーザー エクスペリエンスを改善できます。autocomplete
属性を使用すると、お問い合わせフォーム、ログイン フォーム、購入手続きフォームを改善するためのさまざまなオプションを利用できます。
<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">
<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">
<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">
これらの HTML 属性(type
、inputmode
、autocomplete
)はフォーム フィールドに追加する小さな要素ですが、ユーザー エクスペリエンスに大きな違いをもたらす可能性があります。ユーザーのデバイスの機能を予測して対応することで、ユーザーの利便性を高めることができます。詳しくは、フォームの使い方に関するコースをご覧ください。
このコースの次のセクションでは、一般的なインターフェース パターンについて説明します。
理解度を確認する
インタラクションに関する知識をテストする
画面サイズからユーザーの入力タイプを推測するのではなく、どの機能を使用すればよいですか。
handheld
prompt()
でユーザーに尋ねる@media (pointer)
と @media (any-pointer)
の違いは何ですか?
ユーザーにとってより適切な仮想キーボードを表示するには、どの入力タイプを使用すればよいですか?
type="url"
type="tel"
type="email"
type="number"