日々の記事

LPやスマホUIでよく見る「←→にスワイプする指アイコン」。あれ、なんとなく置いていませんか？でも実は、閲覧者にとってはけっこう大事な存在です。

overflow-x: auto; を指定しただけでは、ユーザーは“横に動く”と気づかないことが多い。特にPC表示だとスクロールバーが見えにくかったり、モバイルではカードがきれいに収まりすぎていたり。そこで登場するのが、あの指アイコン。UIのヒント、いわば“非言語のマイクロコピー”です。

実装面では、最初の1回だけフェードインさせて、操作後に非表示にするなどの工夫もアリ。Intersection Observerで制御したり、localStorageで既読管理したりするとちょっと気が利いています。常時表示はノイズになることもあるので注意。

ただ置く、ではなく「なぜ必要か」「いつ消すか」まで考える。小さなアイコンですが、体験を底上げする大事なパーツ。そんな視点で今日もdivを組んでいきたいですね。