← 一覧へ

やってみようボタンや行のいろいろな場所を押してみてください

アニメーション・演出マイナー(知る人ぞ知る)

リップルエフェクト

Ripple Effect

押したところから、波紋が水面のようにフワッと広がる。

別名リップル波紋エフェクトインク(Ink)タッチフィードバック

どこで使われている?

よく見かける場所
Androidアプリ、Googleのサービス、マテリアルデザインのサイト
使うとよい場面
押したことがすぐ伝わるようにしたいボタンや一覧の行
避けたい場面
iPhoneらしく作りたいアプリ(押したところが薄く暗くなる表現が一般的)

補足Android(Material Design)でおなじみの表現です。iPhoneでは、押した部分が薄く暗くなる表現が一般的です。

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。

HTML / CSS / JavaScript で「リップルエフェクト(Ripple Effect)」を実装してください。

動き:ボタンやリストの行を押したとき、指が触れた位置を中心に半透明の円が広がりながら消えていくアニメーションを表示する。

使う部品:Ripple(自作。Material Web の md-ripple も使える)
もっと詳しく:プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

WebサイトならRipple(自作。Material Web の md-ripple も使える)
iPhoneアプリなら標準なし。自作(iOSでは押したときに薄く暗くなるのが一般的)
AndroidアプリならModifier.clickable で標準で付く(ripple())
FlutterならInkWell
React NativeならPressable の android_ripple(Androidのみ)