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

この記事はサイトやアプリの見た目をAIで底上げしたい人向け（コードが書けなくても読めます）。

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

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

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

Three.js（Webで3D表現を作るためのJavaScript道具箱）のコードを書いて、物理演算を組んで、色や動きを調整して…という流れになります。

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

AI Particle Simulatorは、その面倒な部分を全部AIに任せられます。

私はバイブコーディング（AIに会話形式でコードを書かせる開発スタイル）で作ったWebアプリの背景に使ってますが、白い画面にボタンが並んでるだけだったトップページが一気に「それっぽく」見えるようになりました。

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

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

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

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

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

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

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

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

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

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

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

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

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

この差はでかい。

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

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

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

これだけ。

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

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

従来は、この「動きのルール」をJavaScript（Webサイトを動かすプログラミング言語）で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（ブラウザで3Dを描く技術）が動くブラウザならOK。

Chrome、Edge、Firefoxで動きます。

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

日本語対応：なし

UI（操作画面）は英語のみ。

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

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

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

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

作った会社

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

個人〜少人数の会社が運営しています。

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

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

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

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

https://particles.casberry.in/ を開きます。

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

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

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

詰まりどころ: WebGLが無効化されたブラウザだと真っ黒な画面になります。

その場合はChromeかEdgeで開き直してください。

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

画面右側の設定パネルでパラメータをいじります。

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

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

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

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

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

動き方は5種類。

Static（静止）、Scroll（スクロール）、Wave（波）、Pulse（脈打つ）、Matrix（マトリックス風）。

個人的にはMatrixが好きです。

映画のマトリックスみたいに文字がバラバラ落ちていく。

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

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

詰まりどころ: 粒の数を一気に20,000まで上げるとPCがフリーズすることがあります。

最初は3,000あたりから始めて、カクつかない上限を探るのが安全。

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

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

出力形式が選べます。

Vanilla JS：そのままHTMLに貼り付けられるJavaScriptコード（HTMLファイル1枚に全部入った形）。

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は個人〜少人数の会社です。

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で作ったMatrixモードの粒を私のWebアプリのトップに貼っていますが、ボタンしかなかったページが「動いてる感」のあるトップに化けました。

5分で「あ、こんなことできるんだ」となるはずなので、まずは1個作ってみてください。

まとめ

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

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

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

この流れでコードを1行も書かずに3D演出が入れられます。

まずは particles.casberry.in にアクセスして、好きな単語をパーティクルにしてみてください。

参考リンク

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

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