Advertisement
パーティクル・フロー生成とは？
本ツールは、HTML5のCanvas APIを活用した背景アニメーションを視覚的に作成できるジェネレーターです。 重い動画ファイルや大きな画像を使わずに、数KBのスクリプトだけでサイトに「奥行き」と「生命感」を与えることができます。モダンなコーポレートサイトや、雰囲気重視のポートフォリオに最適です。
こんなシーンで便利です
ヒーローセクションの背景演出
ファーストビューの背景に、ゆっくりと上昇する光の粒子（ボケ）を配置することで、ユーザーの視線を引きつけ、高級感やテック感を演出します。
季節に合わせたイベント演出
粒子の形状を丸にし、方向を「DOWN」に設定すれば、冬のWebサイトに最適な「降る雪」のエフェクトが簡単に作成できます。
ダークモードサイトの装飾
黒背景に低彩度の色を散りばめることで、宇宙空間のような広がりを感じさせる幻想的なデザインを構築可能です。
クリエイティブな下書き・検証
複雑なコードを書く前に、粒子の密度、速度、サイズのバランスをリアルタイムで試行錯誤し、最適な「動き」を確定できます。
使い方は簡単 4ステップ
- 「基本設定」で粒子の数（密度）と、動くスピード、基本サイズを決めます。
- 「動きと形」で上昇（UP）、下降（DOWN）、浮遊（FLOAT）から動きのタイプを選びます。
- カラーピッカーで粒子の色を選び、背景に馴染むように不透明度を調整します。
- 「実装用JSコードをコピー」を押し、自分のHTML/JSファイルに貼り付けます。
※プレビューは1280x720の比率で表示されますが、出力コードは全画面表示にも対応できるロジックになっています。
ご利用時の注意点
- 負荷について：粒子の数を200以上に増やすと、古いスマートフォン等の端末で描画負荷が高くなる場合があります。50〜100程度を推奨します。
- 実装方法：HTML側に <canvas> タグを配置し、そのIDとスクリプト内のIDを一致させて使用してください。
- カスタマイズ：生成されたコードをベースに、さらに「粒子同士が近づいたら線を引く」などの独自ロジックを追加することも容易です。
Advertisement
演出別：推奨設定とパラメーター目安
作りたい演出に合わせた粒子の数や速度のガイドラインです。実装時の参考にしてください。
| 演出タイプ | 粒子数 (推奨) | 速度設定 | 主な利用シーン |
|---|---|---|---|
| 降る雪 (Snow) | 80〜150 | 1.0〜2.0 (DOWN) | 冬の特設サイト・ECサイトの背景 |
| 夜空の星 (Stars) | 150〜200 | 0.2〜0.5 (FLOAT) | ヒーローセクション・ダークモード装飾 |
| 浮遊する光 (Bokeh) | 30〜50 | 0.5〜1.0 (UP) | 高級感のあるブランディング・ウェディング |
| デジタルノイズ | 200〜 | 3.0〜 (RANDOM) | テック系ポートフォリオ・サイバーパンク演出 |
| 上昇する泡 (Bubbles) | 40〜80 | 1.5〜2.5 (UP) | 飲料系サイト・爽やかなイメージの背景 |
動画背景との違い
動画ファイル（mp4）は数MBの容量を消費しますが、本ツールのCanvasコードは数KB。LCP（最大視覚コンテンツの表示時間）を改善し、SEO評価に直結するページ速度を維持したまま動的背景を実現できます。
レスポンシブ対応について
生成コードにはブラウザのリサイズイベントを監視するロジックが含まれています。 スマホ・PCを問わず、常に画面いっぱいに描画されるフルスクリーン背景を簡単に実装可能です。
※「JS 背景 雪 降らせる」「Canvas アニメーション 軽量 コード」「Web背景 パーティクル 実装」などの検索意図に最適化されています。
よくある質問（FAQ）
Q.出力されたコードはどこに貼ればいいですか？
A. HTMLの </body> 直前に <script> タグを作成して貼り付けるか、外部JSファイルとして読み込んでください。
Q.背景色を透過させることはできますか？
A. はい。コード内では ctx.clearRect を使用しているため、canvas自体のCSS背景が透過していれば背面のコンテンツが見える状態になります。
Q.ReactやVueでも使えますか？
A. はい。useEffect や mounted フック内でこのロジックを動かすことで、フレームワーク環境でも問題なく動作します。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。