AI Particle Simulatorとは？｜テキスト入力だけで3Dパーティクルが作れる無料ツール

パーティクルっていうのは、画面の中をふわふわ動く光の粒のこと。

Webサイトの背景で星が流れてたり、
ロゴの周りに光がまとわりついてたりするやつ。

あれ、普通に作ろうとするとけっこう大変なんです。

Three.jsっていう3Dライブラリ（Webで3D表現を作るための道具箱）のコードを書いて、
物理演算を組んで、
色や動きを調整して…。

エンジニアでも「パーティクルだけは面倒」って言うくらい。

AI Particle Simulatorは、
その面倒な部分を全部AIがやってくれる。

作ったパーティクルはReactやThree.jsのコードとしてエクスポートできるので、
サイトにそのまま組み込める。

この記事では、
使い方・エクスポートの手順・Claude Codeと組み合わせてサイトに載せる方法まで全部出します。

こういう人に読んでほしい記事です。

「サイトにかっこいい動く演出を入れたい」

「バイブコーディングでアプリを作ってるけど、見た目がしょぼい」

「3D表現に興味あるけど、コードは書けない」

3Dパーティクル制作の何が変わる？｜AI Particle Simulator vs 従来の方法

ポイントは「Webサイトにそのまま埋め込めるコードが出てくる」ところです。

Canvaでかっこいいアニメーション動画を作ることはできる。

でも、それはあくまで「動画」。

マウスを動かしたら粒が追いかけてくる、
クリックしたら弾ける、
みたいなインタラクティブな表現は動画じゃできない。

AI Particle Simulatorが出すのは「動画」じゃなくて「コード」。

だからWebサイトの中で、訪問者のマウスの動きに反応する3D演出が作れる。

この差はでかいです。

なぜテキストだけで3Dパーティクルが作れるのか？｜AI Particle Simulatorの仕組み

パーティクルシミュレーションって、やってることは意外とシンプルです。

「粒を画面上に大量に配置して、それぞれに動きのルールを与える」。

これだけ。

たとえば「すべての粒を中心に向かって引き寄せる」というルールを書くと、
ブラックホールみたいな表現になる。

「ランダムに散らばらせて、
ゆっくり上に浮かせる」なら、
雪が逆再生で舞い上がるような絵になる。

従来は、
この「動きのルール」をJavaScript（プログラミング言語の一種）で1行ずつ書く必要があった。

AI Particle Simulatorは、
「ブラックホールみたいなやつ」ってテキストで伝えるだけで、
AIがそのルールを自動生成してくれる。

裏側ではWebGL（ブラウザの中で3Dを描く技術）が動いてて、
最大20,000個の粒をリアルタイムで動かしてる。

2万個の粒が同時に動いてるのに、
ブラウザがカクつかないのはGPU（グラフィック処理チップ）を直接使ってるから。

普通のWebアプリとは処理の仕方が根本的に違う。

で、
できあがったパーティクルは、
ReactやThree.jsのコードとして書き出せる。

コードが出てくるということは、
Claude Codeに「これをサイトに組み込んで」と渡せるということ。

つまり、パーティクルを作る段階も、サイトに載せる段階も、AIに任せられる。

AI Particle Simulatorはどんな場面で使える？

バイブコーディングで作ったアプリの見た目を一気にプロっぽくしたい時

Claude Codeでアプリを作ると、
機能は動くけど見た目が素っ気ないことがある。

白い背景にボタンが並んでるだけ、みたいな。

そこにパーティクルの背景を1枚足すだけで、印象がガラッと変わる。

AI Particle SimulatorでReactのコードをエクスポートして、
Claude Codeに「この背景をトップページに入れて」と頼む。

コードを書かなくても、見た目のクオリティが上がります。

ポートフォリオやLP（ランディングページ）に動く演出を入れたい時

フリーランスの人がポートフォリオサイトを作る時。

ファーストビュー（最初に目に入る部分）に動くパーティクルがあるだけで、
「この人できそう」感が出る。

正直、見た目の印象って中身と同じくらい大事だったりする。

LP（商品を紹介する1ページのサイト）でも同じ。

静止画だけのページと、光の粒が流れてるページ、どっちを信頼するかって話です。

プレゼンや動画の素材として3Dビジュアルが欲しい時

AI Particle Simulatorは、
4K解像度の画像としてもエクスポートできます。

PNG、JPEG、WEBPに対応。

プレゼンの背景にしたり、動画のサムネイルに使ったり。

3Dモデリングソフトを覚えなくても、
パーティクルのスクリーンショットだけで十分かっこいい素材になる。

AI Particle Simulatorに必要なものは？

料金：無料

2026年4月時点で完全無料です。

有料プランの表記は確認できませんでした。

登録：不要

アカウント作成なしで全機能が使えます。

サイトにアクセスした瞬間から触れる。

環境：ブラウザ（Chrome推奨）

WebGLが動くブラウザならOK。

Chrome、Edge、Firefoxで動作します。

スマホでもアクセスできるけど、操作はPCのほうが圧倒的にやりやすい。

日本語対応：なし

UIは英語のみ。

でもボタンの数が少ないので、英語が読めなくても触ってればわかります。

エクスポートしたコードをサイトに組み込むなら

Claude CodeなどのAIコーディングツールがあると便利。

コードをコピーしてClaude Codeに渡せば、サイトに組み込んでくれます。

作った会社

Casberry（キャスベリー）というインドのデジタルクリエイティブエージェンシー。

Eswar Prasaathさんが運営してる個人〜少人数の会社です。

大企業のサービスではないので、
障害時のサポートやサービス終了リスクは頭に入れておいてください。

ただ、ブラウザで完結するツールなので、サポートが必要になる場面は少ないです。

AI Particle Simulatorの使い方は？｜3ステップで3Dパーティクルを作る

ステップ1：サイトにアクセスする

https://particles.casberry.in/ を開く。

開いた瞬間、デモのパーティクルが動いてるはずです。

まずはそのまま触ってみてください。

マウスを動かすと粒がついてくるのがわかると思います。

ステップ2：パーティクルをカスタマイズする

画面にある設定パネルでいじれる項目はこのあたり。

まずやってみてほしいのが、
Smart Text Engineに名前を入れること。

入力欄に名前を打って、動き方を「Wave」にしてみてください。

名前の形をした粒が、波打つように動き始めます。

これだけでポートフォリオのトップに使えそうなビジュアルが出てくる。

正直、初めて見た時は「え、これ無料で作れるの？」ってなりました。

動き方は5種類。
Static（静止）、
Scroll（スクロール）、
Wave（波）、
Pulse（脈打つ）、
Matrix（マトリックス風）。

個人的にはMatrixが好き。
映画のマトリックスみたいに文字がバラバラ落ちていく。

他にもいじれるところがあって、
Particle Count（粒の数、
最大20,000個）、
Simulation Speed（動く速さ）、
Glow Intensity（光の強さ）。

全部スライダーで調整するだけなので、直感でいけます。

ステップ3：エクスポートする

気に入ったパーティクルができたら、エクスポートボタンを押す。

出力形式が選べます。

Vanilla JS：そのままHTMLに貼り付けられるJavaScriptコード。

React：Reactで作ったサイトに組み込めるコンポーネント。

Three.js：Three.jsプロジェクト用のコード。

PLY / GLB / OBJ：3Dモデルとして書き出し。
Blenderなどの3Dソフトで使える。

PNG / JPEG / WEBP：画像として書き出し（最大4K解像度）。

「Vanilla JSって何？Reactって何？」って人は、
Vanilla JSを選んでください。

一番シンプルで、どんなサイトにも貼れるコードが出てきます。

ステップ4（応用）：Claude Codeでサイトに組み込む

エクスポートしたコードをコピーする。

Claude Codeを開いて、こう伝える。

「このパーティクルのコードを、
サイトのトップページの背景に入れて。
全画面で表示して、
コンテンツの後ろに配置して」

Claude Codeがコードの配置、
サイズ調整、
既存サイトとの統合を全部やってくれます。

パーティクルを作る→AIに渡す→サイトに載る。

コードを1行も読まなくていい。

AI Particle Simulatorのよくある疑問は？

Q. プログラミング不要？本当に？

パーティクルを作って画像としてエクスポートするだけなら、
完全にプログラミング不要です。

サイトに埋め込む段階ではコードの扱いが必要になるけど、
それはClaude Codeに任せればいい。

コードを書く必要はないです。

Q. 商用利用はできる？

2026年4月時点で、
公式サイトに利用規約やライセンスの明記は確認できませんでした。

商用で使う場合は、Casberryに直接確認するのが安全です。

個人のポートフォリオや非商用サイトなら問題ないと思いますが、
クライアントワークに使うなら念のため確認してください。

Q. スマホで使える？

ブラウザで動くのでアクセスはできます。

ただし、
パーティクルの操作（パラメータの調整、
テキスト入力）はPCのほうがはるかにやりやすい。

スマホは完成品の確認用と思ったほうがいいです。

Q. 他のAI 3Dツール（Meshy、Tripo等）とは何が違う？

Meshyとか3D AI Studioは「3Dモデル」を生成するツールです。

キャラクターとか建物とか、形のあるものを作る。

AI Particle Simulatorは「粒の動き」を作る。

形じゃなくて、動きと光の表現に特化してる。

用途が全然違うので、比べるものではないです。

AI Particle Simulatorの注意点と限界は？

個人開発のツールなので、安定性は未知数。

CasberryはEswar Prasaathさん個人〜少人数の会社です。

GoogleやAdobeのサービスと違って、突然なくなるリスクはある。

大事なパーティクルは、
作ったらすぐにコードをエクスポートして手元に保存しておくこと。

パーティクル数を増やすとPCが重くなる。

20,000個までいけるけど、
古いPCだと10,000個あたりからカクつく可能性がある。

サイトに載せる時も、
訪問者のPCスペックを考えて5,000〜10,000個くらいに抑えるのが現実的です。

Claude Codeに「モバイルではパーティクル数を減らすようにして」と頼めば、
自動で調整してくれます。

「パーティクルを作る」と「サイトに載せる」は別の作業。

ツール上でかっこいいパーティクルを作ること自体は簡単。

でもそれを実際のWebサイトに組み込む段階では、
HTMLやCSSの知識が多少いる。

ここはClaude Codeに任せれば解決するけど、
「ワンクリックでサイトに反映」ではないことは知っておいてください。

AI Particle Simulatorが広まると、Webの見た目はどう変わる？

ちょっと前まで、
Webサイトに3D演出を入れるのは「リッチな大企業サイトだけ」の世界でした。

制作会社に頼んで、エンジニアがThree.jsで何日もかけて作って、数十万円。

それが今、無料ツールで数分。

コードの組み込みもAIがやる。

つまり「見た目の格差」がなくなり始めてるんです。

個人ブログでも、
フリーランスのポートフォリオでも、
大企業と同じレベルの3D演出が載せられる。

「予算がないから見た目はしょぼくていい」が通用しなくなる時代。

逆に言えば、ちょっと手を伸ばすだけで、見た目で差をつけられる時代でもある。

AI Particle Simulatorで1つパーティクルを作って、
Claude Codeでサイトに載せてみてください。

5分で「あ、こんなことできるんだ」ってなるはずです。

まとめ

AI Particle Simulatorは、
テキスト入力だけで3Dパーティクルが作れる無料のブラウザツールです。

登録不要、
最大20,000粒、
React/Three.js/Vanilla JSのコードとしてエクスポート可能。

パーティクルを作る→Claude Codeに渡す→サイトに載る。
この流れでコードを1行も書かずに3D演出が入れられます。

まずは particles.casberry.in にアクセスして、
名前をパーティクルにしてみてください。

参考リンク

• AI Particle Simulator 公式サイト
• Casberry（開発元）公式サイト

※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。