同じサイトなのに、パソコンで見てるときは快適なのに、スマホで見た瞬間ボタンが押しにくくてイライラする、みたいな経験はありませんか。指とマウスカーソルは全然別物なので、UIの条件も当然変わってきます。実装するときに気をつけていることを書きます。
指はマウスより太い
マウスカーソルは針の先みたいに正確な位置を指せますが、指先はそれよりずっと太いし、押す位置も微妙にズレます。隣のボタンを誤タップしないくらいの大きさと間隔は確保しないと、使ってて地味にストレスの溜まるサイトになります。
自分もテスト中に何度か隣のボタンを押してしまって、「これ実装した本人がやらかしてどうする」と自分に呆れたことがあります。
目安としては、WCAGのターゲットサイズ基準で最低44×44 CSSピクセルが推奨されています。これより小さいと、指の太い人には結構つらいサイズです。
ホバーはスマホに存在しない
マウスだと「カーソルを乗せたら情報が出る」みたいなUIがよくありますが、タッチ操作にはそもそもホバーという概念がありません。重要な情報をホバー時だけに出す設計は、スマホでは単純に機能しなくなります。
パソコンで作って満足した後にスマホで確認して初めて気づくパターンが多い気がします。
あとスマホだと指でスクロールする動作自体が誤タップにつながりやすいので、ボタン周りの余白もパソコン向けとは違う感覚で置く必要があります。
「マウスを持ってる端末か」で分岐する
画面幅だけでスマホかパソコンかを判定する実装をたまに見かけますが、タブレットを外部マウスに繋いでる人もいれば、タッチ対応のノートPCもあるので、画面サイズと入力手段は必ずしも一致しません。CSSの@media (hover: hover)を使うと、実際にホバー操作が可能な端末かどうかで分岐できるので、画面幅で判定するより実態に近い出し分けができます。
/* ホバーできる端末（主にマウス操作）だけに適用 */
@media (hover: hover) {
.card:hover { transform: translateY(-4px); }
}結局実機確認が一番早い、というのが自分の中の結論です。