パーティクルエフェクト生成ツールとは？
Webサイトやアプリ向けのパーティクルアニメーションをデザイン・プレビューできます。パーティクルの数、速度、サイズ、色、形状、インタラクション、物理演算を設定し、雪、紙吹雪、ホタル、銀河などのエフェクトを作成できます。設定はすぐに使えるコードとしてエクスポート可能です。
中身は tsParticles なので、コピーしたJSONはそのまま React、Vue、素のJavaScript プロジェクトに貼れます。マウスホバーとクリック操作（反発、グラブ、バブル、プッシュ、削除）に加えて透明度のフェードや色（色相）アニメーションが標準で動作し、HTML エクスポートはCDN経由でエンジンを読み込むため、静的ページにビルドなしで貼り付けるだけで動きます。ライブプレビューをアニメーションGIFとして録画し、どこでもエフェクトを共有することもできます。
使い方
- プリセットエフェクト（雪、紙吹雪、ホタル、泡、銀河、ネットワーク、花火、炎、煙）を選ぶか、ゼロから独自に作成します。
- パーティクルのプロパティを細かく調整します：数量、速度、サイズ範囲、色、形状、不透明度、重力やバウンスなどの物理設定。
- アニメーションをリアルタイムでプレビューし、tsParticlesのJSON設定をコピーするか、スタンドアロンHTMLスニペットとしてエクスポートするか、プレビューをアニメーションGIFとして書き出します。
使用するタイミング
- 季節キャンペーンや製品リリースのLPに雪や紙吹雪のレイヤーを足したいとき。
- デザイナーに渡す前に、SaaSサイトのヒーロー背景を自分で試作したいとき。
- ポートフォリオサイトやゲームのメニュー画面に銀河や蛍の背景を入れたいとき。
結果
Web開発者が雪のプリセットを選択し、パーティクル数を200に増やして微風の効果を追加し、設定JSONをコピーしてホリデーシーズンのランディングページに冬の演出を加えます。
よくある質問
- 書き出したJSONはどのフレームワークでも使えますか?
- 使えます。設定は tsParticles 互換で、React、Vue、Svelte、Angular、素のJS 向けの公式ラッパーがあります。対応するラッパーを入れて、JSON を options として渡すだけで、ここで見たプレビューと同じ表示になります。
- 粒子数をどこまで増やすとカクつき始めますか?
- 最近のノートPCなら200〜400粒子で60fpsを保てます。500を超えると中位スマホでフレーム落ちが見え始めます。星形や多角形は円より重く、パス描画のコストがかかります。スマホ向けは100〜150・インタラクション控えめが安全圏です。
- HTMLで書き出した後、見た目が変わるのはなぜ?
- HTMLスニペットはキャンバスを親要素のサイズに伸ばします。小さいdivに貼ると粒子が窮屈になります。ラッパーに固定の高さ(例:100vhや400px)を与えれば、キャンバスもそれに合わせて広がります。
- 粒子の形に自分の画像を使えますか?
- UIからは設定できませんが、エンジン側は対応しています。JSONを書き出してから shape.options.image を編集し、PNG や SVG のパスを指定してください。シミュレーションが各粒子に割り当てたサイズと不透明度で画像が描画されます。
- アニメーションを入れるとパフォーマンススコアは下がりますか?
- エンジン読み込みでgzip後およそ30〜80KB、加えてキャンバスの連続再描画コストがかかります。Lighthouse対策には、モバイルで粒子数を減らしインタラクションをオフに。ヒーローが見えたあとに遅延読み込みすれば LCP は綺麗なまま保てます。