← 一覧へ

やってみよう「目標を達成する」を押してみてください

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

コンフェッティ

Confetti Animation

何かを達成したとき、色とりどりの紙吹雪がパーンと飛び出して、ひらひら落ちてくる。

別名紙吹雪紙吹雪アニメーションセレブレーションお祝いエフェクト

どこで使われている?

よく見かける場所
Duolingoの学習達成、Asanaのタスク完了、購入完了画面
使うとよい場面
初めての達成など、本当に嬉しい瞬間を一緒に祝いたいとき
避けたい場面
毎回の操作(すぐに煩わしくなる)

補足やりすぎると疲れるので、本当に嬉しい瞬間(初めての達成など)だけに使うのがおすすめです。

AIへの指示文

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

HTML / CSS / JavaScript で「コンフェッティ(Confetti Animation)」を実装してください。

動き:目標達成や購入完了のタイミングで、画面の中央下から色とりどりの小さな紙片を上向きに勢いよく飛ばし、回転させながら重力でひらひらと落とす。2〜3秒で消え、操作の邪魔はしない。

使う部品:canvas-confetti ライブラリ
もっと詳しく:プログラムでの部品名

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

Webサイトならcanvas-confetti ライブラリ
iPhoneアプリなら自作(CAEmitterLayer)または ConfettiSwiftUI
Androidアプリなら自作(Canvas)または Konfetti ライブラリ
Flutterならconfetti パッケージ
React Nativeならreact-native-confetti-cannon