line-art-animationとは？
line-art-animationは、1つのリポジトリに2つのものが入っていま す。スキル（SKILL.mdと6つの参考ガイド）は、ブラウザで動く線画アニメーションの作り方をClaudeに教えます。ライブラリをプロジェクトにコピーし、キャラクターを1体見せて承認をもらい、動きをフレームごとに確認する、という流れです。ライブラリは依存関係のない4つのTypeScriptモジュールです。ペンの線を描く基本要素のink.ts、歩行と走行を解くgait.ts、ばね、振り子、風のmotion.ts、時刻に応じた配色のdaynight.tsです。
例が2つ付いています。クリックすると帽子を上げる、約150行の歩く男性と、運河沿いの日本の町並みです。町には予定に沿って動く住人、猫、鳥、船頭がいて、十数種類の操作に反応します。キャプチャ用スクリプトがヘッドレスChromeを1フレームずつ動かし、FFmpegがフレームを動画にします。参考クリップを計測して、そのタイミングに合わせるためのスクリプトもあります。
リポジトリはMITライセンスで、例を動かすにはNode 22.18以降が必要です。2026年11月10日に1つのコミットとして公開されました。
line-art-animationは使う価値があるか？
たいていのアニメーションスキルは、モデルにスタイルガイドを渡してうまくいくよう祈るだけです。このスキルは物理的な答えを渡します。歩行ソルバーは脚をキーフレームで動かすのではなく計算で解きます。接地した足はちょうど移動速度で後ろへ滑り、振り出す足は加加速度が最小になる軌道をたどり、かかとはつま先より先に上がり、腰の高さは脚が届く範囲から決まるので、体は一歩ごとに持ち上がります。コートや着物は膝の周りに描かれるので、歩幅に合わせて開きます。だから例は補 間ではなく、墨で描いたように見えます。
作業の進め方も理にかなっています。Claudeはシーンを作る前にキャラクターを1体見せて承認を取り、引き渡す前に動きをフレームごとに検証するよう指示されます。動画キャプチャはスクリーンショット1枚ごとにシーンをきっちり1フレーム進めるので、30秒の1080p動画は遅いノートPCでも速いノートPCでも同じ結果になります。ドキュメントには、SNSのクリップは多くが可変フレームレートなので時間で再サンプリングすべき理由も書かれています。
注意点：これは2026年11月10日の1コミットだけで、このレビューの4日前です。スター727、フォーク118で、保守の様子を判断できる履歴がありません。npmパッケージはなく、スキルはlib/をプロジェクトにコピーするので、本家の修正は届きません。また、作れるのは墨と紙に昼夜の移り変わりという1つのスタイルだけです。モーショングラフィックスや商品プロモーション、線画のキャラクター以外のものには、MotionmaxxingやBang Motionのほうが向いています。
結論：ランディングページに生きたイラスト、たとえば歩く人物や夕暮れの小さな町を置きたいフロントエンド開発者なら、汎用のアニメーションライブラリよりこちらのほうが午後のうちに先へ進めます。lib/は自分のものになったコードとして扱ってください。
真価を発揮する場面
小さなデザインスタジオのフロントエンド開発者
ポートフォリオサイトのヘッダーに、クリックに反応して歩く墨のキャラクターを置きたい
スキルを~/.claude/skillsにクローンし、Claudeにキャラクターを頼んで最初のポーズを承認します。歩く男性の例が約150行でその型を示しています。費用はClaudeのプラン代です。
パン屋のWeb開発者
店のトップページ用に、パン職人とオーブンのいる夜明けのループシーンを作りたい
昼夜の移り変わり付きでシーンを頼みます。daynight.tsが時刻に合わせて墨と紙の色を変え、夜には窓に明かりを灯します。ブラウザでSVGとしてリアルタイムに動くので、どの画面でもくっきり見えます。
クライアントの参考動画に合わせる必要があるモーションデザイナー
SNSのクリップの歩行サイクルを線画で再現し、1080pの動画で書き出したい
clip.tsでループの長さと足の位置を測り、Claudeに歩き方を合わせてもらい、キャプチャ用スクリプトで900フレームを撮ってFFmpegでエンコードします。
導入前に確認すること
- 導入
- リポジトリを~/.claude/skills/line-art-animation、またはプロジェクトの.claude/skillsフォルダにgit cloneします。Node 22.18以降でnpm installとnpm run devを実行すると例が見られます。
- 連携
- スキル経由のClaude Code、例を動かすVite、動画用にDevToolsプロトコル経由のヘッドレスChromeとFFmpeg。
- データとプライバシー
- すべてローカルで動きます。マシンの外に出るのはClaudeに送るものだけで、添付した参考クリップも含みます。
- 制限
- キャラクターは高さ約95単位の固定空間で描かれる。墨のスタイルは1種類。キャプチャにはローカルのChromeかChromiumが必要。公開パッケージもリリースもない。
良い点
- 歩行ソルバーで、キーフレームなしに接地した足と自然な上下動が出る
- ライブラリは実行時の依存がない4つのTypeScriptモジュール
- シーン全体を作る前にキャラクター1体で承認を取る手順
- 決定的なフレームキャプチャで、再現性のある動画レンダリングができる
- 参考クリップのタイミングに合わせるためのツール
気になる点
- コミットは1つだけで、レビュー時点で公開から4日
- 見た目は墨の線画の1種類だけ
- パッケージがなく、コピーしたコードには本家の修正が届かない
- 動画のレンダリングにはローカルのChromeとFFmpegが必要
おすすめの人
Claude Codeを使い、手描き風でインタラクティブなSVGのキャラクターやシーンをWebページに置きたいフロントエンド開発者とデザイナー。
line-art-animationの代替
line-art-animation：よくある質問
- line-art-animationは使う価値があるか？
- 珍しく本物の工学が下支えしているアニメーションスキルで、特に歩行ソルバーが見事ですが、公開から4日で、作れる見た目は1種類だけです。 評価は5点満点中3.6点です。
- line-art-animationの料金は？
- MITで無料です。スキルの利用にはClaudeのプラン代がかかります。動画のレンダリングにはローカルのChromeとFFmpegが必要です。
- line-art-animationの欠点は？
- コミットは1つだけで、レビュー時点で公開から4日; 見た目は墨の線画の1種類だけ; パッケージがなく、コピーしたコードには本家の修正が届かない; 動画のレンダリングにはローカルのChromeとFFmpegが必要.
- line-art-animationは誰に向いているか？
- Claude Codeを使い、手描き風でインタラクティブなSVGのキャラクターやシーンをWebページに置きたいフロントエンド開発者とデザイナー。
- line-art-animationは企業データを扱っても安全か？
- すべてローカルで動きます。マシンの外に出るのはClaudeに送るものだけで、添付した参考クリップも含みます。
- line-art-animationの代わりになるものは？
- 当サイトでレビューした中で最も近い代替はmotionmaxxing, Bang Motion 、 reanimateです。
回答確認日：2026年11月14日