AnimatedWebs

Claude Code を離れることなく、ひと言のブリーフから本番公開できるアニメーション付きウェブサイトを作成できます。
シネマティックなテンプレート、ライブ WebGL シーン、動画背景、UI コンポーネント、デザインシステムを、1 つのプラグインで利用できます。

ウェブサイト · テンプレートライブラリ · ドキュメント · 料金 · サポート

概要

AnimatedWebs は、1,400 種類以上のアニメーション付きウェブサイトテンプレートを集めたライブラリです。それぞれにライブデモと完全なビルドプロンプトが用意されています。このプラグインは AnimatedWebs MCP サーバーを通じて Claude Code をライブラリに接続し、活用方法を把握したスキルやコマンドを追加します。

必要なものを説明してください。Claude が最適なデザインを見つけてライブデモを表示し、選んだデザインの動き、タイポグラフィ、レイアウトをそのまま保ってプロジェクトに組み込みます。

• テンプレート。 スクロールに合わせたストーリーテリング、WebGL、シェーダー、パーティクルシーンを備えた、サイト全体やヒーローセクションです。
• シネマティックな背景。 ヒーローセクションにそのまま追加できる、シームレスにループする動画です。
• UI ライブラリ。 ソースコード付きのアニメーションコンポーネントに加え、AI による生成と調整が利用できます。
• スタイル。 DESIGN.md、Tailwind テーマ、CSS 変数、トークンとして提供されるデザインシステムです。
• デザインスタジオ。 専用の MCP サーバーを備えた、プライベートなデザインワークスペースです。

インストール

Claude Code でマーケットプレイスを追加し、プラグインをインストールします。

/plugin marketplace add iboss21/animatedwebs-claude
/plugin install animatedwebs@animatedwebs

ツールを初めて実行すると、Claude Code がブラウザーを開き、AnimatedWebs へのサインインを促します。無料アカウントですぐに始められます。

別の MCP クライアントを使用していますか？ サーバーに直接接続します。

claude mcp add --transport http animatedwebs https://mcp.animatedwebs.com

Cursor、Codex、VS Code、Windsurf、Antigravity のセットアップガイドは、animatedwebs.com/mcp にあります。

クイックスタート

自然な言葉で依頼するだけです。適切なスキルが対応します。

建築スタジオ向けに、ダークでシネマティックな高級感のあるランディングページを作成してください。

このページのヒーローに、ゆっくり流れる動画背景を追加してください。落ち着いた青系の雰囲気でお願いします。

AI 製品向けのパーティクルシーンを探して、Next.js アプリに適用してください。

コマンド

コマンド	説明
/animatedwebs:site <business>	最適なテンプレートを選び、サイト全体を構築します
/animatedwebs:browse <style>	条件に合うテンプレートをライブデモへのリンク付きで一覧表示します
/animatedwebs:hero <idea>	現在のヒーローをシネマティックなものに置き換えます
/animatedwebs:background <mood>	ヒーローにシネマティックな動画背景を追加します
/animatedwebs:component <idea>	ライブラリからアニメーション付き UI コンポーネントを追加するか、新たに生成します
/animatedwebs:style <mood>	デザインシステムをトークン、テーマ、変数として適用します
/animatedwebs:design	AnimatedWebs Design Studio のワークスペースに接続します

スキル

スキル	次のように依頼したときに使用します
animatedwebs-site	ウェブサイト全体またはランディングページを作成する
animatedwebs-hero	ヒーローセクションを作成またはアップグレードする
animatedwebs-backgrounds	動画またはモーション背景を追加する
animatedwebs-components	アニメーション付き UI コンポーネントを追加する
animatedwebs-style	ビジュアルスタイルまたはデザインシステムを適用する
animatedwebs-design	Design Studio で作業する

MCP ツール

https://mcp.animatedwebs.com のサーバーは、22 個のツールを公開しています。すべてのツールには、MCP アノテーション（読み取り専用、破壊的、オープンワールド）とアイコンが付いています。

領域	ツール
テンプレート	search_templates · get_template · get_template_prompt · list_categories · open_in_builder · request_template
UI ライブラリ	search_components · list_component_categories · get_component · get_component_source · generate_component · refine_component
シネマティック背景	search_backgrounds · get_background
スタイル	search_styles · get_style_reference
デザイン	get_design_workspace
アカウントとコミュニティ	search_everything · get_account · get_pricing · search_creators · get_creator

注目のテンプレート

Noesis WebGL の星座状の脳 · AI / SaaS	Orchid シネマティックな動画ヒーロー · AI スタジオ	Amethyst シネマティックな動画ヒーロー · 旅行
Chrome Capital 液体クロムのフィルム · フィンテック	Aurora Lagoon シネマティックな動画ヒーロー · ウェルネス	Atlas 形状変化するパーティクルシーン · AI エージェント

1,400 件以上のテンプレートをすべて見る →

プラン

	Free	Pro
無料のテンプレートとプロンプト	無制限	無制限
Pro のテンプレート、背景、コンポーネントソース		無制限
AI コンポーネントの生成	1 日 5 回	1 日 100 回
Design Studio の AI リクエスト	1 日 40 回	1 日 600 回
クライアントワーク用の商用ライセンス		含まれます

Pro は月額 $19、または年額 $149 です。買い切りの Prompt Packs と Lifetime アクセスもご利用いただけます。animatedwebs.com/pricing をご覧ください。

セキュリティとプライバシー

• サインインにはブラウザーで OAuth を使用します。プラグインはパスワードや API キーを保存しません。
• データの読み取りのみを行うツールには読み取り専用のマークが付いているため、追加のプロンプトなしでクライアントから実行できます。
• コードはお使いの環境内に保持されます。サーバーが返すのはテンプレートとリファレンスのみで、プロジェクトファイルを読み取ることはありません。

詳しくはプライバシーポリシーをご覧ください。

サポート

ご質問やアカウントに関するサポート：animatedwebs.com/contact。バグやテンプレートのリクエスト：issue を作成。セキュリティに関する報告：SECURITY.mdをご覧ください。Claude 内でrequest_templateツールを使ってテンプレートをリクエストすることもできます。

法的情報

AnimatedWebs のテンプレート、プロンプト、デモ、メディアは、AnimatedWebs Termsに基づいてライセンスされています。このリポジトリのプラグインマニフェストとスキルは、AnimatedWebs サービスでの使用を目的として提供されています。

リリースノートはCHANGELOG.mdに、リポジトリのライセンスはLICENSE.mdに記載されています。

Claude と Claude Code は Anthropic, PBC の商標です。その他の記載された名称は、それぞれの所有者に帰属します。

_{© 2026 AnimatedWebs}