CSS3を上手く使った気持ちのいいUIパーツまとめ8つ
以前日本人初のDribbberである貫井さんにお話を伺った際に、貫井さんはデザインをする上で「気持ちいい」ということを大切にしていると話していました。UIが良いとされるAppleのWebサイトのボタンなどは細部まで美しく、触った時に「気持ちいいな」と感じます。
そこで今回はWeb用のコードスニペットの配布サイトCODEPENから、CSS3で書かれた「気持ちいい」と感じるUIパーツを集めてみました！
http://codepen.io/minustalent/pen/GzuCa
ゴムでできたようなボタンです。押すともにゅってへこみます。
http://codepen.io/Dyki01/pen/BeKyp
でっぱっている文字をマウスオンすると文字がスッと引っ込みます。
http://codepen.io/diegopardo/pen/dGlfC
これはボタンでなくただのテキストなのですが、LOADINGというゴムのような文字が波打っています。LOADING画面にこれがあったらローディング中もストレス無く待てそうです。
http://codepen.io/TimPietrusky/pen/CLIsl
画面幅を狭めると画面横からリストが出てくるタイプのメニューになります。各項目をマウスオンするとリストがぷるぷる動きます。
http://codepen.io/tholman/pen/dKlcL
通常時は普通のTwitterの鳥のアイコンなのですがマウスオンすることで、鳥がパカっと分かれ、中からボタンが出てきます。
http://codepen.io/minustalent/pen/DaHyz
マウスオンすることで各ボタンの色が背景の色と同じに変化するのですがその時のアニメーションがかっこいいです。
http://codepen.io/caezaperro/pen/ieHqI
Androidのシェアボタンのような円形アイコンにマウスオンすると上記のように切り分けられたケーキのような形のSNSアイコンがにゅっと出てきます。ただ残念なのは各SNSアイコンにマウスオンするとアイコンが円をはみ出してしまうのがちょっと残念ですね。
http://codepen.io/pseudoheld/pen/kybhl
iOSアプリのフッター部分のようなパーツです。真ん中の「コメント」っぽいアイコンをクリックするとTwitterやGoogle+のおアイコンが書かれた紙がにゅるにゅる上に上がります。
以上です。
個人的にはどれも「気持ちのいい」UIパーツでしたが、一番最初にあげたゴムっぽいボタンをスマホでタップした時はとりわけ「気持ちいい」と感じました。これが使われているアプリがあったらぜひ触ってみたいです！