canvas-confettiで「完了した感」を一瞬で作る（Django × JS）

はじめに

個人開発しているタスク管理Webアプリ LinkTasky を作っていて、
ずっと気になっていたことがありました。

・タスク完了しても淡白
・処理は終わってるけど達成感がない
・UXとして少し物足りない
・機能的には正しいけど、
・「気持ちよさ」が足りない。

そこで導入したのが
canvas-confetti です。

結果として、

実装は数分

見た目の効果は抜群

「ちゃんとしたサービス感」が一気に上がる

という、コスパ最強のUX改善でした。

canvas-confettiとは？

canvas-confettiは、
Canvasを使って紙吹雪（confetti）を表示する軽量ライブラリです。

特徴

・CDNで即導入できる

・依存ライブラリなし

・とにかく軽い

・商用利用OK（MIT License）

・バニラJSで完結

🎉公式リポジトリ

なぜcanvas-confettiを選んだか

UI演出の選択肢はいくつかありました。

・CSSアニメーション → 表現が単調

・Lottie → 導入と管理が少し重い

・自作Canvas → 実装コスト高

その中で canvas-confetti は、

👉 「一瞬で導入できて、効果が分かりやすい」

個人開発にちょうどいいライブラリでした。

CDNでの導入方法

まずは CDN を読み込みます。

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>

Djangoを使っている場合はbase.html に入れておくと便利です。

一番シンプルな使い方

confetti();

これだけで、画面いっぱいに紙吹雪が表示されます 🎉

よく使う基本設定

function fireConfetti() {
  confetti({
    particleCount: 120,
    spread: 70,
    origin: { y: 0.6 }
  });
}

fireConfetti();

よく調整するのはこの3つだけです。

・particleCount：量

・spread：広がり

・origin：出現位置

これだけで印象がかなり変わります。

タスク完了ボタンで使う例

<button id="completeBtn">完了</button>

document.getElementById("completeBtn").addEventListener("click", () => {
  confetti({
    particleCount: 150,
    spread: 80,
    origin: { y: 0.7 }
  });
});

「完了」→ 紙吹雪

この一手間で、操作の気持ちよさが大きく変わりました。

少し豪華な演出（短時間バースト）

function fireConfettiBurst() {
  const duration = 800;
  const end = Date.now() + duration;

  (function frame() {
    confetti({
      particleCount: 5,
      angle: 60,
      spread: 55,
      origin: { x: 0 }
    });
    confetti({
      particleCount: 5,
      angle: 120,
      spread: 55,
      origin: { x: 1 }
    });

    if (Date.now() < end) {
      requestAnimationFrame(frame);
    }
  })();
}

・一瞬で終わる

・でも印象に残る

出しすぎないのがポイントです。

driver.jsと組み合わせる

オンボーディング完了時に出すのもおすすめです。

const driver = new Driver({
  doneBtnText: '完了',
  onDestroyStarted: () => {
    confetti({
      particleCount: 180,
      spread: 90,
      origin: { y: 0.6 }
    });
  }
});

説明 → 理解 → 完了 → 紙吹雪

流れが自然で、UXがかなり良くなりました。

実際に使ってみて感じたこと

・良かった点

実装が本当に簡単

UX改善の即効性が高い

個人開発でも満足度が上がる

・注意点

出しすぎると逆にうるさい

本当に「達成した瞬間」だけに使うのが大事

まとめ

canvas-confettiは軽量で簡単

UX改善の効果が分かりやすい

タスク完了・オンボーディング完了と相性抜群

個人開発にちょうどいい演出ライブラリ

「少しだけ気持ちよくしたい」
そんなときに、かなりおすすめです。

おまけ：作っているサービスの紹介

今回 canvas-confetti を使っているのは、
個人開発しているタスク管理Webアプリ
LinkTasky（リンクタスキー） です。

タスクをリンク（URL）単位で整理

作業手順をテンプレートとして保存

初めての作業でも迷いにくい設計

👉 https://linktasky.com

UXは今も改善中なので、
触ってみてフィードバックもらえると嬉しいです 🙏