操作

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

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

画面サイズから入力メカニズムを推測するのではなく、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 メディア機能とは異なります。

none の any-pointer 値は、ポインティング デバイスが使用できないことを意味します。

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;
  }
}

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

仮想キーボード

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

入力値の型

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

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）は、フォーム フィールドに少し追加するだけで、ユーザー エクスペリエンスに大きな違いをもたらすことができます。ユーザーのデバイスの機能を予測して対応することで、ユーザーはより快適にアプリを利用できるようになります。詳細については、フォームの学習に役立つ専用のコースをご覧ください。

このコースの次のステップでは、一般的なインターフェース パターンについて見ていきましょう。

理解度をチェックしましょう

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