CSS animation day38 となりました。
毎日記事を投稿しているせいで、画像アップロード制限(100MB月)されました。
大変申し訳ないのですが、解除されるまで、画像は極力抑えて、codesandobox で随時貼り付けてお届けいたします。
今日で2月が終わりますね。
本日も、マイクロインタラクションで使える、ボタンを作っていきます。
前回 のボタンは確かに綺麗ですが、機能的に美しいとは言えません。
1. 完成版
See the Pen Next Button by hiroya iizuka (@hiroyaiizuka) on CodePen.
2.なぜか？
Medium や、impress の記事によると
ハンバーガーメニューがあるとユーザーはクリックしなかったり、再訪問やPV数が落ちることがあるそうです。
なぜかというと、ハンバーガーメニューを見るだけでは、どんな情報が隠れているか、どんなアクションが次に起こるかがわからず、わざわざ重い腰を上げてクリックする気にならないからと思います。(ハンバーメニューは完全に悪だ！という意見に対し擁護する声も散見されますが、確かにUserにとって、あまり優しくないデザインと個人的に思ってます。)
ボタンに当てはめて考えてみると。
ベストなボタンとは、押す前から、どんなボタンかが一目でわかり、かつ押した(触れた)瞬間に、想像通りの動きをしてくれるボタンです。(むやみやたらに豪華で派手な演出をつける必要ないです。)こういう時に予想外な奇天烈のアニメーションは、人を驚かせてしまい、その0コンマ数秒がおそらく、ユーザーにとって負の感情を産ませてしまう可能性があります。
デザイナーのエゴをすて、単一の動きでマイクロインタラクションを表現する必要があり、今日はそこを意識して作っていきましょう。
3. 参考文献
Button Hover Effects | Html CSS
Button hover effects with box-shadow
4. 分解してみる
❶.
マークアップしましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container">
<div class="button">
Button
</div>
</div>
</body>
</html>
body {
background: #000;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.button {
position: relative;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
color: #ff7f82;
font-size: 24px;
border-radius: 30px;
border: 2px solid #ff7f82;
background-size: 400%;
}
これで、背景が黒いところに、ボタンが中央に配置されました。
(画像なくて申し訳ありません m(__)m)
❷.
では、どんなアニメーションをつけると良いでしょうか？
ボタンを押した時に、次のページへ進む、機能を持つものとします。
「次に進む」、
1. 左から右に、ボタンの背景の色が変わる
2. 文字がNext、次へなどと、みただけでボタンの機能がわかるものとなっている
3. →が付いている
などが考えられます。(他にもアイデアがあったら教えてください。)
注意点として、左から右の一方向の流れを設定しているため、
逆方向や回転、跳ねる、広がるなどの動きは、microinteractionの流儀 から外れてしまいます。デザイナーのエゴを捨てましょう。
上記3つのアニメーションを取り入れます。
.button {
position: relative;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
color: #ff7f82;
font-size: 28px;
border-radius: 30px;
border: 2px solid #ff7f82;
background-size: 400%;
&:hover {
animation: insetChange 0.5s ease both;
&:before {
animation: arrowChange 0.2s ease-in both;
}
}
}
@keyframes insetChange {
100% {
box-shadow: 240px 0px 0px 0px #ff7f82 inset;
color: #fff;
}
}
@keyframes arrowChange {
30% {
color: #fff;
}
100% {
transform: translateX(15px);
}
}
.button:before {
position: absolute;
content: ">>>";
top: 0px;
right: 10px;
}
See the Pen Next Button by hiroya iizuka (@hiroyaiizuka) on CodePen.
ポイントは、
・animation の設定に both をつけ、hover終了時のアニメーションを維持でき、hoverを外すと、最初に戻るとこ。
・beforeクラスをつけて、矢印を作り、アニメーションを設定。
ただし、マイクロインタラクションを意識して、左から右に、色も統一感を出しました。
・ease-in をつけることで、はじめゆっくり動き、Buttonのbox-shadowが広がっていくのを待ってから動くことを意識しました。
いい感じですね！
では、また明日〜！