_{ローンチフィルム、77秒。すべてのフレームとすべての音は anidoodle でコードから作られています。}

anidoodle

手描きのアートを、コードで書く。

イラスト、作画タイムラプス、映画、解説動画、インタラクティブなウェブアートを、32のスタイルで。
一筆一筆が関数で、一音一音が計算式だから、同じソースコードは
どのマシンでも、どんなサイズでも、いつまでも同じ絵を描き直す。

_{対応: Claude Code · Codex · Grok Build · スキルを読めるあらゆるエージェント。}

English · 日本語 · 简体中文 · 한국어 · Français · Español

スタイル · 作画映像 · 音楽 · つくれるもの · 搭載しているもの · 動き · はじめる

`要素だけで動き、フレームワークは不要。動きを抑える設定とキーボード操作にも対応する。各フレームは、そこに至る入力によって決まる。 ## 自分のプロダクトを、コードで描いてローンチする このページ冒頭の映像は anidoodle で作ったもので、そのときのキットも同梱している。`launch.mjs new <名前>` で記入用の仕様ができる。プロダクト名、ユーザーが打ち込むプロンプト、それに応える答え（描いた絵、自分のプロダクトの画面、または映像）、少しの言葉、インストール用の行。それを渡すと、拍に合わせてローンチ映像を編集する。ひとりでに入力されるチャット、インクのように開く回答、画面いっぱいのレタリング、そしてインストール行をコピーできるだけ長く見せるエンドカード。 - **4つの画面比率、1本のタイムライン:** 16:9、1:1、4:5、9:16。それぞれの画角に合わせて組み直し、スマートフォンでも文字が読める。 - **プロダクトを画面に:** データから描くインターフェース。要素が変更前の状態から変更後へ弾むように移る。 - **絵から生まれる音:** キー入力、クリック、着地のひとつひとつに効果音がつき、画面上で起きた位置に定位する。その下に映像のために作曲したスコア。 - **そのまま公開できる:** `launch.mjs ship <名前>` が各比率をレンダリングし、ポスターフレームと字幕（.srt と .vtt）を書き出し、納品ファイルで音と映像の同期とピークレベルを確かめ、文字が画面の端で切れるフレームを不合格にする。 ルックは2種類（手描きのインク、またはUI中心のプロダクト向けのクリーン）。30 fps と 60 fps、各フレームの速さに合わせたモーションブラー。 ルールは、自分たちのローンチ映像を四度編集した経験と、優れたローンチ映像の技法から来ている。五秒以内に何なのかを伝える、絵の上に文字を置かない、強拍で切り替える、最初のフレームをサムネイルにする。 → [`launch-video.md`](skills/anidoodle/references/workflows/launch-video.md) · [キット](skills/anidoodle/references/workflows/launch-video-kit.md) ## 自分の画像を持ち込む - **スタイルを合わせる。** 好きな絵を見せると、線や縁、色使い、紙の質感を読み取り、その画風で新しい絵を描く。借りるのは画風だけで、絵そのものではない。 - **写真を描き直す。** 写真をスクラッチボード、木版画、一本線の版画に。明暗や毛並み、布の向きを読み取り、見える線はすべてコードで描く。 - **キャラクターを保つ。** キャラクターを一度作れば、カットやポーズ、木版画からおもちゃのブロックまで、スタイルが変わっても同じ姿で登場する。 ## 描き方を学ぶ

キャプション付きのレッスン全編を見る (mp4, 95秒)

描き方を尋ねるか、自分の絵を持ち込めば、anidoodleがレッスンに組み直す。手順シートと字幕付きタイムラプスで、各段階に観察する点、描き方、よくある間違いを添える。 ## つくれるもの | 用途 | できること | |---|---| | **あなたのウェブサイト** | ヒーローイラスト、各機能のスポットアート、空状態や404ページまで、すべて同じ手で。透過PNGは元データから好きなサイズで書き出せるので、Retina対応も印刷用も追加コストなしで手に入る。 | | **説明資料やレポート** | 仕組み図、断面図、アニメーション付きインフォグラフィックを、手描き風のレタリングでラベル付けして。黒板、設計図、ボールペンのスタイルは真面目な内容にぴったり。アイデアを、動いて、分解して、また組み上がる機械として、好きなスタイルで描けます。 | | **ブランド表現** | 自ら描き上がっていくロゴ、タイトルシークエンス、どの投稿でもブランドを保てるソーシャルカードのテンプレート。 | | **SNSやチャット** | 終わりのないループ、GIF、透過背景のアニメーションスタンプを、フィードに合わせたサイズで。 | | **資料やドキュメント** | ひとつのプログラムから生まれる、章ごとのイラストのファミリー。シード値を変えるだけで、同じスタイルの姉妹画像が手に入る。 | | **物語** | 絵コンテやアニマティックから、オリジナルスコア付きの、長さを問わない完成映像へと育っていく。 | | **手持ちの画像** | 絵を持ち込めば、そのスタイルで別の題材を描ける。写真を持ち込めば、32のどの画風でも、一筆ずつコードで描き直せる。 | | **ウェブページ** | カーソルを追い、クリックやフォームに反応し、スクロールに合わせて描き上がるインタラクティブなイラスト。見出しの横に置くヒーロー画像やスポットも、ページの色とブランドに合わせて、ライトでもダークでも。 | | **学習** | 絵の組み立て方を、注目すべき点やよくある間違いとともに教える作画手順シートとタイムラプス。 | | **キャラクター** | 一度作ったキャラクターを、カットやポーズ、スタイルが変わっても同じ姿に保てる。 | | **あなたのローンチ** | テンプレートから作るプロダクトのローンチ映像。プロンプト、絵、言葉、インストール行を渡せば、音楽に合わせて編集される。 | 「採用ページ用にリソグラフ風の灯台のイラストがほしい、1600×900で」とか「料金プランの違いを黒板スタイルで説明する図を作って」というように、ふだんの言葉でお願いすればいい。anidoodleがそれを適切なワークフローとスタイルのレシピに振り分けて、足りない情報だけを聞き返してくる。 ## 搭載しているもの エンジンを作るのは、実は簡単な方の半分。難しいのは職人技の部分で、それはanidoodleがあなたの代わりに背負っている。6つの教訓はどれも、一度失敗してから学んだことを書き留めたもので、前のプロジェクトが終わった地点から始められるようになっている。 - **物語**が、作品に意味を与える。一枚絵ならひとつのアイデアとひとつの主題。映画ならひとつの変化、ひとつの見せ場、そして繰り返し登場するモチーフがひとつ。→ [`storytelling.md`](skills/anidoodle/references/storytelling.md) - **リアリズム**は、名づけることから生まれる。解剖学的な構造、視点、そして開いた参考資料。それがあってはじめて、蝶は体と翅脈を持つ生き物として見えてくる。→ [`realism-and-craft.md`](skills/anidoodle/references/realism-and-craft.md) - **スタイル**は、線そのものに宿る。32の完全なレシピ、案件ごとに選ぶためのガイド、そして自分だけのスタイルを生み出す手順。→ [`styles.md`](skills/anidoodle/references/styles.md) - **音楽**は、ジャンルの語彙から作品ごとに作曲し、コードで合成する。21のジャンル、バンドとオーケストラ一式、すべての長調と短調、セクションごとの情感、どんな長さにも合うテーマを備えている。→ [`music/README.md`](skills/anidoodle/references/music/README.md) - **決定性**が、その保証になる。純粋関数とシード付き乱数だから、ソースコードさえあれば誰でもまったく同じ作品を再構築できる。→ [`determinism-and-contract.md`](skills/anidoodle/references/determinism-and-contract.md) - **手法**が、スピードを保ってくれる。まず一枚の絵で見た目を確かめ、そのまま一気に作り上げ、間違えるとコストの高いところにだけ承認をかける。→ [`working-method.md`](skills/anidoodle/references/working-method.md) どのフォーマットも、同じソースコードから書き出される。PNG、スコア付きのMP4、GIF、透過対応のWebMとアニメーションPNG、そして単体で完結するHTMLファイルがひとつ。→ [`formats.md`](skills/anidoodle/references/formats.md) ## 描いてから、動きだす

線は、手が描くのと同じ順番で生まれていく。	設計図が水彩の中で目を覚まし、自分の草原へと飛び立っていく。

**▶ 47秒の完全版フィルム**、音声オンで。1080×1080、オリジナルスコア付き、すべてのフレームとサンプル音がコードで生成されている: https://github.com/user-attachments/assets/019d46d3-536a-4843-9f68-8e8f5f5c3401 1枚のフレームを描くのは、ひとつの純粋関数。だから完成イラストはその関数を一度呼び出したもの、スタンプは同じ関数をループさせたもの、映画はそこに物語とスコアを添えたもの。3つとも、同じ保証がそのまま成り立つ。 ## 一度書けば、何度でも描ける 画像生成モデルは、レンダリングのたびに、フレーム1枚ごとにトークンと計算資源を使い、しかも毎回違うものを描く。コードは、それを一度だけ使う。47秒のフィルムはたった1本のプログラムで、一度書けば1,410フレームすべてとステレオのフルスコアを、どんなサイズでも、どんなマシンでも、実行するたびに無料でレンダリングしてくれる。計算すると、最初の一回にかかるのはフレームあたりコード約60トークン分で、それ以降は毎回ゼロ。一枚絵ならほんの数百行。画像のファミリー全体でも、必要なのはシード値のリストだけだ。 ## はじめる **Claude Code:** ```bash /plugin marketplace add alexgreensh/anidoodle /plugin install anidoodle@alexgreensh-anidoodle ``` **Codex:** ```bash codex plugin marketplace add alexgreensh/anidoodle ``` 続いてCodexのTUIで`/plugins`を開き、anidoodleをインストールする。 **Grok Build:** ```bash grok plugin marketplace add alexgreensh/anidoodle grok plugin install anidoodle --trust ``` `--trust`でインストールを確定する。付けない場合、Grokはプラグインが実行できる内容を表示して止まる。`/plugins`のMarketplaceタブからもインストールできる。 **その他のエージェント:** anidoodleは標準的なスキルフォルダ（`skills/anidoodle/SKILL.md`）なので、スキルを読み込める環境ならコピーして使える。 あとは欲しいものを言葉で伝えるだけ。たとえば「レシピページ用に、鉛筆と水彩で洋梨を描いて」というように。エンジンを直接動かしたいときは: ```bash node /engine/tools/scaffold.mjs ~/art --still hero --film intro --format 9x16 --duration 60 cd ~/art && npm install && npx playwright-core install chromium node tools/still.mjs hero --out out/hero.png --scale 2 # a finished illustration, print size node tools/render.mjs intro --out out/intro.gif # a loop; also .mp4 with score, .webm with alpha node tools/emit.mjs intro --out out/intro.html # the whole piece as one offline file node tools/gate.mjs hero # determinism, contract and dead air in one pass node tools/verify-export.mjs intro --file out/intro.mp4 # the file you ship, decoded and checked node tools/music.mjs check score.ts#myScore # your score: key, loudness, balance, novelty node tools/launch.mjs new myLaunch # a launch film spec; then: launch.mjs ship myLaunch ``` Node 20以降が必要。一枚絵なら上記のブラウザだけで足りるが、動くものにはすべて`ffmpeg`も使う。 `emit`は、およそ100KBのHTMLファイルをひとつ書き出す。ダブルクリックすればオフラインのまま、音声付きで再生できる。中にレシピそのものが入っていて、開くたびにすべてをゼロから描き直す。メールに添付すれば、それだけでスタジオを一本まるごと送ったことになる。 4つのバックエンドがひとつのアートコアを共有していて、コア自身はどのバックエンドが描いているのか知らないまま、のんびり構えている: `playwright`、`html-player`、`remotion`、`hyperframes`。 ## サンプルのショートフィルム `skills/anidoodle/example/`には**Mechanical Lepidoptera(機械仕掛けの鱗翅目)**が入っている。1,410フレーム、47秒、自ら製図されていくぜんまい仕掛けの蝶が、水彩の中で命を得て、草の上に自分の設計図を残していく。これはエンジンのすべてが詰まった一作だ。実際の解剖学的構造の上に手で置かれた制御点、1ピクセルが依存するすべての入力に名前をつけるキャッシュキー、この作品のために作曲されたスコア、そして「組み立てられた状態」から「命を得た状態」へと途切れなく移り変わる動き。スタイルプレートは`skills/anidoodle/engine/src/canvas-core/`にエンジンと並んで置かれていて、それぞれの先頭にレシピが書かれている。どれでも開いて、数字をひとつ変えて、何が動くか見てみてほしい。 ## 正直に設計されている 音と動きは、言った通りであることを自分で証明する。スコアや動きについてのどんな主張の裏にも、計測か、人の目による確認のどちらかがある。緑のチェックマークは、再実行して初めてカウントされる。この規律があるからこそ、同じ作品が、どのマシンでも、毎回バイト単位でそのまま戻ってくる。 --- [Apache License 2.0](LICENSE)のもとで公開。Copyright 2026 Alex Greenshpun. _{anidoodleで制作。その知識はすべて、あの蝶を何度か正直に描いてみることで身につけた。}