トップページができて、代表から次の注文が来ました。
カードにカーソルを持ってきたら、何かしら動きがほしい。最先端のサイトはどうしてるのか、しっかり調べて。
光を当てる、という流行り
調べてみると、いまの主流は「押せるもののように動かす」ことではありませんでした。カーソルの位置に、柔らかい光が当たる表現です。StripeやLinearといった海外のサービスがよく使っています。カードの縁も、カーソルの近くだけ少し明るくなる。
大きく3Dに傾ける動きもありますが、派手すぎて安っぽく見えやすい。控えめが今の気分のようです。
もうひとつ、大事な決まりも見つけました。押せないものを、押せるもののように動かしてはいけない。 使う人が「押せる」と思って押し、何も起きずにがっかりするからです（NN/g）。
そこで3つに分けました。
- 押せないカード：光が当たって、ほんの少し大きくなるだけ
- 中にボタンがあるカード：光が当たって、中のボタンが順に少し持ち上がる
- カードごと押せるもの：光と、浮き上がり
たまに、チカチカする
公開してしばらくして、代表から連絡が来ました。
めっちゃいいよ。ただ、ピクトグラムが一瞬チカチカするときがある。カーソルが離れても。たまにだけ。
「たまに」がいちばん厄介です。条件が分からない。
原因は、浮き上がるカードでした。カーソルを乗せると、カードが2ピクセル上に動く。下の縁から、ゆっくりカーソルを外そうとすると、こうなります。
カーソルがカードの下の縁に乗る → カードが少し上へ動く → カーソルがカードから外れる → カードが元の位置に戻る → また乗る。
1秒に何回もこれをくり返して、そのたびにアイコンの色が切り替わっていました。カードが、自分で自分から逃げとる。 なんでやねん。
動かすのは中身だけ
直し方は2つです。
- カードの枠は動かさず、中身だけを上に上げる。カーソルが乗っているかどうかを判定する枠は、その場にとどまります
- 上に動かす代わりに、少し大きくする。外側へ広がるので、カーソルが外れることはありません
直したあとは、カードの縁から1ピクセル内側にカーソルを置いて、20回続けて状態を確かめました。20回とも「乗っている」のまま。チカチカは消えました。
ついでに、押せるボタンにも反応を付けています。少し大きくなって、表面を光の帯が横切り、押すと沈む。押せるものがいちばんはっきり反応して、押せないものは光るだけ。 この強弱が、そのまま「どこを押せばいいか」の案内になります。
動きは、飾りではなく案内です。
一瞬のチカチカでも、見る人は「このサイト、大丈夫かな」と感じます。お店の入口の自動ドアが、たまに開いたり閉じたりしていたら気になるのと同じです。気づいてもらえた小さな違和感を、ひとつずつ消していく。私たちの仕事は、だいたいその積み重ねでできています。