交流

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

しかし、現実はもっと微妙です。一部のノートパソコンはタッチ スクリーン機能を備えています。ユーザーはタッチスクリーン、トラックパッド、またはその両方を操作できます。同様に、タブレットなどのタッチスクリーンデバイスでは、外付けのキーボードやマウスを使用できます。

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

マウスを使ってそのボタンにカーソルを合わせると、アイコンが表示されます。キーボードを使ってそのボタンに移動すると、アイコンは非表示のままになります。キーボードを使用する場合、カーソルを合わせるのではなくフォーカスしていることになります。マウスが接続されたデスクトップ デバイスでは、メインの入力メカニズムがホバーできる（true）と報告されます。ただし、マウスを接続した状態でキーボードを使用する場合、: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;
  }
}

ホバー可能な入力メカニズムのないデバイスでは、追加のアイコンが常に表示されます。

仮想キーボード

インターフェースはカーソルや指で操作しますが、情報を入力する際にはキーボードが必要になります。デバイスに物理キーボードが接続されていれば問題ありませんが、タッチスクリーン デバイスを使用している場合は、少し複雑になります。これらのデバイスは、画面上に仮想キーボードを備えています。

入力値の型

物理キーボードとは異なり、仮想キーボードは、想定される入力に合わせて調整できます。想定される入力についての情報を提供すると、デバイスで最適な仮想キーボードを表示できます。

HTML5 入力タイプは、input 要素を記述するのに最適な方法です。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）は、フォームのフィールドに少しだけ追加されたものですが、ユーザー エクスペリエンスを大きく変えることができます。ユーザーのデバイスの機能を予測して対応することで、ユーザーの力になります。さらに詳しい情報については、フォームについて学ぶためのコースを用意しています。

このコースの次のセクションでは、一般的なインターフェース パターンをいくつか見ていきます。

理解度をチェックする

やり取りに関する知識をテストする