スマートフォン/PC:タッチ操作とマウス操作では、Webページの操作感が大きく異なる

イントロダクション

最近は、インターネットのWebページを閲覧するのにパソコンを使うのではなく、スマートフォンやタブレットといった、タッチパネルで操作する端末からのアクセスが多くなりました。

私自身も、主にパソコンでインターネット上のWebページを閲覧していますが、外出先ではスマートフォンでWebページを閲覧しています。

また、家の中に居ても、横になりながらといったリラックスした状態では、タブレット(iPad) を使ってWebページを閲覧しています。

タッチ操作とマウス操作では、Webページの操作感が大きく異なる

このように、今までは主にパソコンでWebページを見てきたのであまり気が付かなかったのですが、スマートフォンやタブレットといった端末でWebページを閲覧すると、パソコンで見た場合と操作性が大きく異なることに気が付きました。


タッチ操作では、どこを操作できるのか分かりづらい
その一つに、マウス操作では、リンクをクリックするときには、まずカーソルをリンクの上に乗せてからクリックするのに対して、タッチ操作ではいきなりリンクをタッチすることになります。

そのため、タッチ操作によってWebページを操作するスマートフォンやタブレットといった端末では、どこをクリックできるのか分かりづらいです。


マウス操作の場合には、カーソルを乗せれば、何らかの反応があるため、クリックできそうな要素かどうかを判断することができます。

タッチ操作の場合には、実際にタッチするまで、その要素がタッチすることによって何らかの反応がある要素なのかどうかを判断することができません。


そのため、タッチ操作で反応がある要素なのに、タッチ操作で反応がある要素に見えなかったり、タッチ操作で反応が無い要素なのに、タッチ操作で反応がある要素に見えてしまうという問題が発生します。


タッチ操作で反応がある要素なのに、タッチ操作で反応がある要素に見えないケースとしては、例えば、通常の本文と同色の文字色のリンク（カーソルを乗せると、色や装飾が変化して、リンクであることがわかる要素）が挙げられます。


タッチ操作で反応が無い要素なのに、タッチ操作で反応がある要素に見えてしまうケースとしては、例えば、強調する意味で引いたアンダーライン(下線)が、まるでタッチできる要素のように見えてしまうケースが挙げられます。

まとめ

このように、マウス操作では問題の無かったことでも、タッチ操作では問題になる場合があります。

様々な端末からアクセスされた場合にも、Webサイトやブログの操作性が損なわれることが無いようにしたいものです。