本記事のトピック
- aリンクやinputボタンにボタンを押すような演出を追加したら、クリック時の反応が悪くなった気がした
- 原因はボタン要素を下に動かしていること
- シンプルな対策は移動をやめる
- それでも移動させたいなら
- まとめ
管理人作品宣伝
エンジニアが使う、7つの言葉。
動画 / 最終更新:2025-01-08エンジニアが使う、独特なニュアンスを含む何気ない言い回しを7つ紹介しています。 ※こ…
YouTubeで閲覧するニコニコ動画で閲覧する
利用素材等の詳細情報
AIの考えた怖い話-Part01
動画 / 最終更新:2024-11-28怪談系の怖い話を載せています。特に設定部分は人の手が入ってますが、なるべく生成AI(C…
YouTubeで閲覧するニコニコ動画で閲覧する
利用素材等の詳細情報
ボタンを押す演出でCSSのtranslateYやtopを使用することの問題
aリンクやinputボタンにボタンを押すような演出を追加したら、クリック時の反応が悪くなった気がした
aリンクやボタンの視認性を上げるために以下のようなボタンをCSSでデザインしました。
押してみるとボタンが沈み込みます。
元のcssは以下ページを参考にしております。
https://web-dev.tech/front-end/css/3d-button/
いろんなページを見てみても大体同じような実装をしており、 「ボタンを押した瞬間」に要素を「下方向にわずかに動かす」ことでボタン感を出すようにしているようです。
なのですが、これを実装してPCで自分で色々操作してみると、なぜかボタンを押しても反応しないことがありました。
(上のボタンの元のCSSはこちらです。divタグで作ってますが、そこはあまり気にしないでください)
元のcssは以下ページを参考にしております。
https://web-dev.tech/front-end/css/3d-button/
いろんなページを見てみても大体同じような実装をしており、 「ボタンを押した瞬間」に要素を「下方向にわずかに動かす」ことでボタン感を出すようにしているようです。
なのですが、これを実装してPCで自分で色々操作してみると、なぜかボタンを押しても反応しないことがありました。
(上のボタンの元のCSSはこちらです。divタグで作ってますが、そこはあまり気にしないでください)
/* css */
div.local-button{
display: inline-block;
padding: 0.8em 3em;
background-color: #e3364a; /* 背景色 */
box-shadow: 0 5px 0 #ca1c30; /* 影の太さ・色 */
border-radius: 60px;
color: #fff;
cursor: pointer;
text-decoration: none;
}
div.local-button:active{
box-shadow: none;
transform: translateY(5px);
}
原因はボタン要素を下に動かしていること
原因としては要素を押した瞬間に下に動かすことで、「マウスポインタがボタン要素から外れてしまうこと」のようでした。
下のボタンを押してみるとわかりやすいと思います。
真ん中あたりを押すとアラートが表示されると思いますが、上部分ギリギリを押すと空振るはずです。
上部分ギリギリを押すと、クリックを外す(mouseup)ときにはボタンからマウスポインタが外れ反応しなくなっています。
これはinputタグでもaタグでも同様のことが起こります。
下のボタンを押してみるとわかりやすいと思います。
真ん中あたりを押すとアラートが表示されると思いますが、上部分ギリギリを押すと空振るはずです。
上部分ギリギリを押すと、クリックを外す(mouseup)ときにはボタンからマウスポインタが外れ反応しなくなっています。
これはinputタグでもaタグでも同様のことが起こります。
シンプルな対策は移動をやめる
対策としてはボタンを押した瞬間の移動をやめて、別の形でボタン演出をすることかと思います。
ボクが使ってるブラウザの標準ボタンのデザインだと以下のようにして押してる感を出してるようです。
・押した瞬間に要素自体の色を少し暗くする
・あらかじめボーダーを上と左は少し暗く、下と右は少し明るくしておき、押した瞬間にそれらの色を逆転させる
下のボタンは、こちらの2点目を使ってボタン感を出しています。
ボクが使ってるブラウザの標準ボタンのデザインだと以下のようにして押してる感を出してるようです。
・押した瞬間に要素自体の色を少し暗くする
・あらかじめボーダーを上と左は少し暗く、下と右は少し明るくしておき、押した瞬間にそれらの色を逆転させる
下のボタンは、こちらの2点目を使ってボタン感を出しています。
それでも移動させたいなら
それでも移動させたいなら、親要素を持たせてそこで要素の高さを保証させるのがシンプルな対応方法だと思います。
ただこの方法だと元のhtmlの構造まで変えないといけないので、ボクは嫌いですが……。
※以下、白い部分がクリック領域。
分かりやすく親要素側は背景を白くしています。
元のCSSは以下です。spanをdivで囲う形で実装します。
ただこの方法だと元のhtmlの構造まで変えないといけないので、ボクは嫌いですが……。
※以下、白い部分がクリック領域。
分かりやすく親要素側は背景を白くしています。
元のCSSは以下です。spanをdivで囲う形で実装します。
/* css */
div.local-button2 {
display: inline-block;
height: 80px;
background-color: white;
border: 1px solid black;
}
div.local-button2 > span{
display: inline-block;
padding: 0.8em 3em;
background-color: #e3364a;
box-shadow: 0 5px 0 #ca1c30;
border-radius: 60px;
color: #fff;
cursor: pointer;
text-decoration: none;
}
div.local-button2:active > span{
box-shadow: none;
transform: translateY(5px);
}
まとめ
ボクはデザインがユーザビリティを邪魔するのはダメだと思ってるので、
ボタン要素を動かそうとする今回の実装も嫌いですが、絶対ダメという実装でもないと思っています。
ちょっとくらい反応が悪くても意外とユーザは気にしないものなので。
特にスマホであれば正直今回のような問題もあまり起こらないと思うので、スマホのみを対象にするのであれば問題ない気がします(タブレットだとどうかな?)。
最終的には好みの問題と思いますが、もしボタン要素を動かすような実装にしたい場合はクリック判定が外れることがあることを頭の片隅に置いておくのがいいのかなと思います。
ちょっとくらい反応が悪くても意外とユーザは気にしないものなので。
特にスマホであれば正直今回のような問題もあまり起こらないと思うので、スマホのみを対象にするのであれば問題ない気がします(タブレットだとどうかな?)。
最終的には好みの問題と思いますが、もしボタン要素を動かすような実装にしたい場合はクリック判定が外れることがあることを頭の片隅に置いておくのがいいのかなと思います。
コメントログ
コメント投稿