接点

スマートフォンのような小画面のデバイスには、多くの場合、タッチスクリーンが搭載されています。ノートパソコンやデスクトップ パソコンなどの大画面デバイスには、マウスやトラックパッドなどのハードウェアが付属していることがよくあります。小さな画面はタップに、大画面はポインタを表したくなるものです。

しかし、実際の状況はより微妙です。タッチ スクリーン機能を搭載したノートパソコンもある。ユーザーはタッチスクリーンとトラックパッドのいずれか、または両方を操作できます。同様に、タブレットなどのタッチスクリーン デバイスで外付けのキーボードやマウスを使用することも可能です。

画面サイズから入力メカニズムを推測するのではなく、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;
  }
}

このボタンにカーソルを合わせると、アイコンが表示されます。ただし、キーボードを使用して Tab キーでボタンに移動すると、アイコンは表示されません。キーボードを使用する場合、カーソルを合わせるのではなく、フォーカスを合わせます。マウスが接続されたデスクトップ デバイスでは、メイン入力メカニズムがホバー可能であると報告されます。これは正しいです。しかし、マウスを接続した状態でキーボードを使用する場合、: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）は、フォームのフィールドに少しずつ追加するものですが、ユーザー エクスペリエンスに大きな違いをもたらすことができます。ユーザーのデバイスの能力を予測して対応することで、ユーザーを支援できます。詳細については、フォーム学習に役立つ専用コースをご覧ください。

このコースでは次は、一般的なインターフェース パターンについて確認します。

理解度チェック

インタラクションに関する知識をテストする