Skillget

awesome-claude-motion-design-ja

agent
Guvenlik Denetimi
Uyari
Health Uyari
  • License — License: MIT
  • Description — Repository has a description
  • Active repo — Last push 0 days ago
  • Low visibility — Only 9 GitHub stars
Code Gecti
  • Code scan — Scanned 12 files during light audit, no dangerous patterns found
Permissions Gecti
  • Permissions — No dangerous permissions requested

Bu listing icin henuz AI raporu yok.

SUMMARY

32本の作例から選ぶモーショングラフィック制作ガイド。GIF・コード付きでツールと手法を比較。

README.md

Claude モーショングラフィック制作ガイド

Claudeを活用したモーショングラフィックスの制作スタックと実装コードをまとめたガイドです。44件のスキル・ツール・参考資料について、元の役割、機能デモ、GIF、編集可能な実装コードを掲載しています。

サイトを開く · 44本の作例を見る · 制作の始め方

Claude モーショングラフィック制作ガイド

ガイドの内容

  • 投稿15件の使い分け：モーション制作スキル7件を新たに紹介。用途・導入・利用条件を比較し、既掲載7件とUI/UX側の1件へ案内します。新7件は資料の確認段階で、作例の本数とは分けています。

  • 44本の作例：テキスト演出、UI、3D、2D、図解など各ツールの特性に合わせた作例。拡大再生して動きを確認できます。

  • GIFと実装コード：動きと実装をその場で確認し、コードをコピーして再現・編集できます。

  • 6カテゴリと4つの制作ルート：用途や実行環境に応じた組み合わせを選択できます。

  • Claude Motion（公式ベータ）：チャットから制作する方法。Team・Enterpriseの利用条件と、Charlie Hillsの制作手順・16種の作例記事を紹介しています。

  • 動きを詰める方法：指示の具体化とフレーム単位の修正。実験記事の要約と、コピーして使える修正ブリーフを掲載しています。

  • グラフと関係図：数値・工程・ネットワークを動かす。Chart.js、ECharts、Mermaid、React Flowなど9件を追加し、用途と独自作例を比較できます。

  • 日本語の制作スキル：Motion Reel。ブリーフ、時刻指定描画、音の同期、フレームレビュー、MP4書き出しをつなぐ独自スキルです。

  • 40秒の紹介動画：作例31本を用いた紹介映像。制作コード・構成表（Suno楽曲含む）も確認できます。

4つの制作ルート

チャット内で制作する公式サービスはClaude Motionの案内へ。下の4ルートは、コードと制作環境を組み合わせてつくる方法です。

つくりたいもの 主なスタック 詳細解説
商品紹介・文字演出 HyperFrames + 公式制作スキル + HTML HTML動画ルート
テンプレート・数値差し替え Remotion + 公式Agent Skills + React React動画ルート
操作に反応するUI・Web Motion / GSAP + Emil Kowalski Skills Web UIルート
数式・アルゴリズムの図解 Manim / Motion Canvas + シーン構成 解説動画ルート

スキル・ツール一覧

制作スキル・事例（11件）

スキル・ツール 使いどころ ライセンス
Remotion Agent Skills Reactを用いた動画制作全般。 独立LICENSE未確認
Emil Kowalski Skills UIコンポーネントやインタラクションの改善。 MIT
Motion Graphics Skill Pack トーン＆マナーを統一した告知動画やプロモーション映像の制作。 MIT
claude-motion 映像と効果音をフレーム単位で同期させる動画制作。 MIT
claude-motion-design Web技術を用いたモーショングラフィックスの動画書き出し。 MIT
/motion for Claude Code 図形やメタファーを用いた短い解説映像の作成。 LICENSE未確認
Anatomy 機械・装置・技術の仕組みを、操作できる立体図で伝える。 MIT
iart.ai Motion Skills 目的の表現に応じた専用プロンプトやスキルの選択。 MIT（索引）
Opus 5.5 Video Prompts プロンプトの記述粒度や技術選定パターンの調査。 CC BY 4.0（編集資料）
Motion Reel / Studio Yebisu 商品紹介、UIの変形、文字や図形の短い映像を、編集できるソースと確認資料付きで制作する。 MIT
Machine Skill エンジンやポンプなどの機構説明、製品紹介、技術教材。断面・分解・X線・入力変更・故障の再現を、操作できるモデルと動画で見せる。 MIT

動画制作・書き出し（7件）

スキル・ツール 使いどころ ライセンス
HyperFrames Web技術で構築するプロモーション動画やSNSコンテンツ。 Apache-2.0
Remotion データ駆動型動画、字幕入りコンテンツ、動画テンプレートの量産。 Remotion License
Motion Canvas プログラミングやアルゴリズム、技術的な仕組みの解説動画。 MIT
FFmpeg 連番画像からの動画作成、音声合成、解像度やビットレートの調整。 LGPL／GPL（構成による）
ffmpeg.wasm サーバーを介さずにブラウザ内で完結する動画変換・編集Webツール。 MIT（wrapper）＋coreの条件
Mediabunny 高速なブラウザ完結型動画エディタやレンダリング機能の実装。 MPL-2.0
Playwright seek(t)で指定したフレームの連番キャプチャや表示崩れのテスト。 Apache-2.0

UI・文字のアニメーション（4件）

スキル・ツール 使いどころ ライセンス
Motion インタラクティブなUI、画面遷移、マイクロインタラクション。 MIT
GSAP 複雑なシーケンスアニメーションや、一時停止タイムラインを用いた動画書き出し。 GSAP独自ライセンス
Anime.js SVGパスのアニメーション、幾何学模様のモーフィング、スタッガー演出。 MIT
canvas-confetti タスク完了、実績解除、祝賀演出のUIアニメーション。 ISC

3D・シェーダー（7件）

スキル・ツール 使いどころ ライセンス
Three.js 3Dモデルの表示、カメラワーク、ライティング、シェーダー表現。 MIT
React Three Fiber Reactアプリケーション内での3Dシーンの構築と状態連動。 MIT
Drei 3Dビューアのセットアップやスタジオライティングの簡略化。 MIT
Cobe 拠点表示、グローバルネットワーク、データビジュアライゼーション。 MIT
TWGL.js カスタムGLSLシェーダーを用いた背景演出やポストプロセスの実装。 MIT
Code Video Model カメラ、物体の配置、動きの順番をコードで調整し、その条件をAI動画の仕上げへつなぐ。 Apache-2.0（コード）
3d-force-graph 関係の密度やクラスタを立体で見せ、カメラから全体を観察する。 MIT

2D・ベクター（4件）

スキル・ツール 使いどころ ライセンス
Fabric.js グラフィックエディタ機能、オブジェクト単位でのアニメーション管理。 MIT
Rive Runtimes ユーザー操作や状態変化に動的かつ滑らかに応答するキャラクターやUI要素。 MIT（runtime）
Lottie Web デザイナーが作成したベクターアニメーションのWeb・アプリ組み込み。 MIT
PixiJS 大量のパーティクル演出、リッチな2Dビジュアル、ミニゲーム的表現。 MIT

データ・図解（11件）

スキル・ツール 使いどころ ライセンス
deck.gl 数千〜数十万件の位置情報、移動フロー、密度分布の可視化。 MIT
D3 カスタムチャート、インタラクティブなグラフ、統計データのトランジション表現。 ISC
Manim Community 数学、物理、コンピュータサイエンスの概念解説動画の作成。 MIT
Mermaid 制作フローやシーンの分岐を整理し、図解を順番に見せる。 MIT
Chart.js 数値の推移、比較、レポートの要点をグラフで伝える。 MIT
Apache ECharts 複数系列、ヒートマップ、ダッシュボードの変化を説明する。 Apache-2.0
React Flow / Svelte Flow 制作工程、分岐、依存関係をノード単位で説明するUI。 MIT
Plotly.js 波形や測定値、数式から得たデータの変化を可視化する。 MIT
Nivo Reactの画面やテンプレートで、数値を差し替えるチャート。 MIT
AntV G6 サービス依存、組織、知識のつながりを配置と強調で見せる。 MIT
Cytoscape.js 最短経路、接続関係、ネットワークの一部分を説明する。 MIT

再現と編集の手順

各項目には用途、必要要件、Claudeとの連携方法、公式リポジトリおよびライセンスへのリンクを掲載しています。RemotionやGSAPの独自条件、各モデルやスキルの利用条件は導入前にご確認ください。

使用バージョン・動画ファイル・コードの詳細はdata/preview-production.json、リポジトリの検証データはdata/verification.jsonに記録しています。

ローカルでの表示方法

Python 3環境で静的サイトを生成・プレビューできます。

python scripts/build_site.py
python scripts/check_site.py
python -u -m http.server 0 --bind 127.0.0.1

実行後にターミナルに表示されたURLをブラウザで開きます。公開はGitHub Pagesのmainブランチ（ルートディレクトリ）です。

編集対象ファイルはdata/curation.json、templates、assetsです。index.html、projects.html、guide.html、data/projects.json、本README、ツールと作例の対応はスクリプトによるビルド生成物です。詳細はコントリビューションガイドを参照してください。

一次資料の更新にはscripts/collect_sources.pyを使用します（--evidence-dirには公開リポジトリ外のパスを指定）。

関連ガイド

ライセンス

本ガイドの文章、データ、コード、図版はMITライセンスで公開しています。各ライブラリ、フォント、素材、APIには個別のライセンスが適用されます。詳細は出典とライセンスをご確認ください。

Yorumlar (0)

Sonuc bulunamadi