01button
紙吹雪ボタン
ボタンを押すと、紙吹雪がふわっと出る。
送信完了や達成時に使うと、ちょっとした達成感が出ます。
Playful UI Experiments
楽しくなるUI UX集
ただ便利なだけじゃなく、押したとき・選んだとき・完了したときに少しうれしくなる。 そんな小さなUI演出を集めました。
button
02button
ぷにっとボタン
押すとやわらかく沈むボタン。
押した感が伝わるので、操作が気持ちよくなります。
03reaction
ハートが飛ぶいいね
いいねを押すとハートがぽんっと飛ぶ。
お気に入り登録やリアクションに向いています。
04button
星が出る達成ボタン
押すと小さな星が弾ける。
完了・保存・達成系の操作に向いています。
form
05form
スタンプチェック
チェックすると「ぺたっ」とスタンプが押される。
ToDoや確認項目が少し楽しくなります。
06form
褒めてくれる入力欄
入力が完了すると、下にやさしい一言が出る。
フォームの不安感を少し減らせます。
07input
表情が変わるスライダー
スライダーを動かすと顔の表情が変わる。
🙂
満足度や気分入力に使えます。
08toggle
変身トグル
ON/OFFで見た目が切り替わる。
ダークモードや設定切替に向いています。
hover
09hover
ふわっと浮くカード
カードにホバーすると少し浮く。
一覧ページや制作実績カードに使いやすい演出です。
10hover
きらっとボタン
ボタンの上を光がすっと走る。
CTAボタンに少し特別感を出せます。
11hover
磁石みたいなボタン
カーソルを近づけるとボタンが少し寄ってくる。
特別なCTAに使うと印象に残ります。
12hover
背景がふわっと動くエリア
カーソルに合わせて背景の小さな図形がゆっくり動く。
ゆっくり反応します
ファーストビューや特設ページに向いています。
motion
13complete
チェックマーク描画
完了時にチェックマークが線で描かれる。
送信完了画面に向いています。
14tab
ぬるっとタブ
タブを切り替えると内容がなめらかに入れ替わる。
ちょうどいい動きを、目的に合わせて設計します。
FAQやプラン比較に使いやすいです。
15toggle
やわらかアコーディオン
開閉時に中身がふわっと広がる。
フォーム完了、FAQ、カード一覧など、操作の区切りがある場所に合います。
固くなりがちな説明を軽く見せられます。
16scroll
読み進めメーター
スクロール量に合わせて上部バーが伸びる。
記事ページで読了感を出せます。
17send
紙飛行機送信
送信ボタンを押すと紙飛行機が飛ぶ。
問い合わせフォームの送信演出に合います。
18number
カウントアップ数字
数字が0から目標値まで気持ちよく増える。
0
実績数や達成数を見せるときに使えます。
