Ripple (リップル)
別名 Material ripple, Touch ripple, Ripple Button, Ink ripple
クリックやタップした位置から円形の波が広がり、フェードアウトします。
使いどころ
ボタン、リスト項目
バリエーション
- Ripple Button (Magic UI)
- CSS :active radial-gradient ripple
- JS click-position ripple
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にリップル(Ripple)の効果を追加してください。マテリアルリップル(material ripple)、インクリップル(ink ripple)とも呼ばれます。
クリックやタップのたびに、押した位置からやわらかい円形の波が要素全体を覆うまで広がり、広がりながら薄れていくようにしてください。素早く軽やかに。
波は要素の形で切り抜き、素早く連続して押したときはそれぞれ別の波を出し、キーボードで押したときは中心から広げてください。似ているモーション
A
マウスを乗せてください
Radial Fill (ラジアルフィル)
別名 Circle expand
ホバーすると色付きの円が中心から広がって、または中心へ縮んで要素を塗りつぶします。
使いどころ
ボタン
[適用する場所]にラジアルフィル(Radial Fill)のホバーエフェクトを追加してください。サークルエクスパンド(circle expand)とも呼ばれます。
新しい色の円が中心から滑らかに広がって要素を塗りつぶし、ポインターが離れると中心へ縮んで戻るようにし、その間ラベルの色も読みやすいように切り替えてください。
円は要素の形の内側に収まるよう切り抜き、ラベルは円の上に置いて、キーボードフォーカス時にも同じ効果を出してください。A
B
クリックしてください
Circular Reveal (サーキュラーリビール)
別名 Clip-path circle expand, Theme toggle reveal
クリックした位置から広がる円の中に、新しい画面が現れます。
使いどころ
ダーク/ライトテーマの切り替え、ページの切り替え
[適用する場所]にサーキュラーリビール(Circular Reveal)のトランジションを追加してください。クリップパスの円拡大(clip-path circle expand)、テーマ切り替えリビール(theme toggle reveal)とも呼ばれます。
押したコントロールから円が外へ広がり、その中に新しい画面が現れて全体を覆うようにしてください。なめらかで一定、始まりと終わりはゆるやかに。
円は押した位置ちょうどから始め、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は円を使わずに即座に切り替えてください。A
Ripple Rings (リップルリング)
別名 Background ripple, Concentric ripples
同心円が中心点から外側へ広がり、消えていきます。
使いどころ
ヒーローの中心要素、音声やペアリングのビジュアル
[適用する場所]にリップルリング(Ripple Rings)のエフェクトを追加してください。バックグラウンドリップル(background ripple)、同心円リップル(concentric ripples)とも呼ばれます。
リングが中心点から外側へ次々と広がり、大きくなるにつれて消えていくようにしてください。等間隔で一つずつ、ゆっくり一定のリズムで。
中心の要素は動かさずその場に置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波紋を止めてください。A
マウスを乗せてください
Hover State Layer (ホバーステートレイヤー)
別名 Hover State, State layer, Hover overlay
半透明のオーバーレイが要素に色を重ね、ポインターが乗っていることを示します。
使いどころ
デザインシステムのコンポーネント
[適用する場所]にホバーステートレイヤー(Hover State Layer)を追加してください。ホバーステート(hover state)、ステートレイヤー(state layer)、ホバーオーバーレイ(hover overlay)とも呼ばれます。
ポインターを乗せている間、コンテンツ色の薄い半透明オーバーレイが要素の上にすばやくフェードインし、離れるとフェードアウトするようにしてください。
コントラストを損なわないようごく薄くし、フォーカス時と押下時にも同じレイヤーの仕組みを使ってください。Micro-interactionのほかのモーション
Success Checkmark (サクセスチェックマーク)
別名 Animated success tick
円とチェックマークが描かれ、操作が成功したことを伝えます。
使いどころ
フォーム送信、決済完了
[適用する場所]にサクセスチェックマーク(Success Checkmark)のアニメーションを追加してください。アニメーション付き成功チェック(animated success tick)とも呼ばれます。
円がなめらかな一筆で描かれ、続いて内側にチェックが描かれ、マーク全体が小さくやさしくポンと弾むようにしてください。落ち着いて確かな印象で。
操作が成功したときに一度だけ再生し、スクリーンリーダーが読み上げられるテキストメッセージを添え、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成したマークをすぐに表示してください。ドラッグしてください
Swipe to Delete (スワイプで削除)
別名 Swipe actions, Swipe to reveal
リストの行を横にスワイプすると、削除やアーカイブなどの操作ボタンが現れます。
使いどころ
メール一覧、ToDoリスト
[適用する場所]にスワイプで削除(Swipe to Delete)のインタラクションを追加してください。スワイプアクション(swipe actions)、スワイプで表示(swipe to reveal)とも呼ばれます。
行を横にドラッグすると指にそのまま追従して動き、裏にあるアーカイブや削除などの操作ボタンが現れ、ボタンが全部見えたところで止まるようにしてください。離したら弾まずになめらかに所定の位置へ滑らせてください。
横にスワイプしている間も縦スクロールが効くようにし、スワイプしなくてもキーボードやスクリーンリーダーで同じ操作ができるようにしてください。クリックしてください
Toggle Switch (トグルスイッチ)
別名 Switch, Switch Thumb Slide
丸いつまみがトラック上をスライドし、オフとオンでトラックの色が変わります。
使いどころ
設定、ダークモード
[適用する場所]にトグルスイッチ(Toggle Switch)のアニメーションを追加してください。スイッチ(switch)とも呼ばれます。
オン・オフを切り替えると、丸いつまみがトラックの反対側までなめらかにスライドし、同時にトラックの色が変わるようにしてください。素早くきびきびと、弾みは不要です。
キーボードでも操作できる本物のアクセシブルなスイッチ(checked状態を持つrole="switch")にしてください。