タイムシート(律表)アニメーション作成

タイムシートアニメーション作成ツールについて

アニメ制作の現場で使われるタイムシート(律表)を、そのままブラウザ上の作画・編集画面にしたツールです。タイムシートとは「どのコマにどのセル(絵)を表示するか」を1コマ=1行で書き込む指示書のことで、日本の商業アニメは24コマ/秒(24fps)を基準に、同じ絵を2コマずつ見せる「2コマ打ち」・3コマずつの「3コマ打ち」といったリズムで動きを作ります。このツールでは画面右の律表とタイムライン、どちらからでもセルの表示タイミングを調整でき、結果は即座にプレビューへ反映されます。

セル(絵)は、クリスタなどで描いたPNG・JPG画像の取り込みと、ツール内での直接描画の両方に対応。取り込んだ画像の上から描き足すこともできます。完成したアニメはGIF・WebM/MP4動画として書き出せるほか、タイムシートそのものを紙の律表風のPNG画像やCSV・JSONデータとして書き出せるのが特長です。処理はすべてお使いのブラウザ内で完結し、画像やデータがサーバーに送信されることはありません。

使い方

1. 画面はウィンドウ形式です。ステージ・タイムライン・セル+タイムシート・カメラプレビューの各ウィンドウは、タイトルバーのドラッグで移動、右下の角で大きさを変更でき、配置は自動で記憶されます。「🪟 配置リセット」で初期配置に戻せます。セル欄(レイヤー)の追加は律表の上にある「＋ 欄を追加」ボタンから。
2. 「解像度」と「長さ」(秒+コマ)を決めます。フレームレートは24fps固定です。キャンバスは日本動画協会「AJA推奨レイアウト用紙規格」のレイアウト用紙(A4横 297×210mm)そのもので、中にメインフレーム(本番画面 254×142.875mm・16:9)が規格どおりの位置に置かれています。解像度は72dpi(842×595px)を基準に最大300dpi(3508×2480px)まで選べます。フレームの外にはみ出した作画も可能です。
3. 右側のセルパレットで「🖼 画像を追加」から連番画像を取り込むか、「＋白紙セル」でセルを作ってステージに直接描きます。画像はファイル名順にA1, A2, …と自動採番され、最初の取り込み時は2コマ打ちで自動配置されます。
4. セル欄は「種類」でBG(背景)・BOOK(ブック)に変えられます。BGの欄を最背面に、BOOKの欄をキャラの前面に置くなど、重ね順は「欄を前面へ/背面へ」で自由に調整できます(欄の並び=重ね順)。仕組みはセル欄と同じなので、BGの差し替えやブックのコマ打ちもタイムシートから操作できます。
5. 律表(右下の表)への配置は、パレットのセルを律表のコマへドラッグ&ドロップするか、律表のコマをダブルクリックして開くセル一覧から選ぶかの2通りです(クリックしただけでは置かれないので誤操作が起きません)。置いたセルはそのコマ以降、次の記入まで持続します。「× なし」もドラッグ(またはセル一覧)で置けて、そのコマから非表示にできます。律表のコマのクリックはそのコマへの移動と欄の選択、記入されたセル番号の縦ドラッグは配置コマの移動です。
6. ステージの「セル番号」をONにすると、そのコマに表示中のセル番号(「A1」「B2」)を欄ごとに別々のラベルでステージ上に表示します。各ラベルはドラッグで好きな位置へ移動でき(位置は欄ごとに作業データへ保存)、表示中は線撮り用にGIF・動画・PNGの書き出しにも入ります。「全セルを1枚ずつ透過PNGで保存」でも、チェック中のレイアウト枠と、そのセルの欄のセル番号ラベルだけが各PNGに入ります。
7. タイムライン(ステージ下)でも律表とほぼ同じ操作ができます: パレットのセルを欄の行へドラッグ&ドロップで配置、行のダブルクリックでセル一覧から配置、記入バー(セル番号)の横ドラッグで配置コマの移動、バーの境界ドラッグでタイミングの微調整、Shift+クリック/ドラッグで複数選択して一括移動(律表と選択は共通)、📷/SLの菱形のドラッグでキーの移動、ACT/CAM/台詞の行をドラッグして指示の作成、行のクリックでその欄の選択とコマ移動。
8. ACT(アクション)・CAM(カメラ)・台詞の列を上下ドラッグすると、その範囲への指示テキストを入力できます。カメラ・台詞はプレビューに字幕として表示されます。
9. 「📷 カメラ」モードでカメラワーク(PAN・T.U・T.B・回転)の指示を作れます。赤いカメラ枠をドラッグ=移動(PAN)、角ハンドル=拡縮(小さく=T.U寄り、大きく=T.B引き)、上のハンドル=回転(Shiftで15°刻み)。枠を動かすと現在のコマにキーが自動で打たれ、キー間はスプライン補間されます(中間キーでカーブ軌道)。キーの移動・全削除は◀◆ ◆▶(再生列)と「◆全キー削除」(セル・タイムシート上部)から。カメラ枠は撮影工程への指示で、描画面の絵は動きません。かわりにカメラモード中はレイアウト枠がカメラ枠に追従して画角を示し、ステージ右上の「カメラプレビュー」小窓にカメラから見た絵が表示されます。キーにはA, B, C…の記号が振られ、律表の📷列・タイムライン・指示図・律表PNG・CSVに表示されます。
10. 「🖐 SL」モードでセルスライド(セル引き)を作れます。選択中のセル欄の青い枠をドラッグ・拡縮・回転すると現在のコマにキーが打たれ、こちらは絵が実際に動きます。SLキーは律表の各欄セルの右肩(青い記号)とSL列(◆)、タイムラインの青菱形に表示されます。カメラキー・SLキーは、律表の📷列・SL列を縦ドラッグ、またはタイムラインの菱形を横ドラッグすると別のコマへ移動できます。
11. Followはカメラ操作としてCAM列から設定します。CAM列を縦ドラッグして期間を選び、ポップアップの「Follow(セル送り)を設定する」にチェックを入れて、動かす欄(BG欄があれば自動選択)・方向(←→↑↓ボタンまたは角度)・速度(mm/k=1コマあたりのmm)を入力して保存すると、CAM列に対象と速度・方向入りの指示(例:「Follow BG 2mm/k ←」)が書かれると同時に、選んだ欄がその期間を等速で動くSLキーが自動生成されます。
12. 「✏️ 描き込み」モード(既定ON)でステージに直接描画できます。ペン(にじまない2値ペン)・直線・塗りつぶし・消しゴムに対応し、Shiftを押しながら描くとペン・消しゴムがそのまま直線になります。「✋ ハンド」ツールでは、表示中のセルの絵そのものを緑の枠で移動・拡縮・回転して位置を整えられます(SLと違いキーは打たず、そのセルが表示されるすべてのコマに効く恒久的な位置調整です。「位置リセット」で元に戻せます)。色はアニメの色トレスでよく使う色(主線の黒・ラフの水色・ハイライトの赤・カゲの青など)のパレットからワンクリックで選べます。当サイトのカラーパレット作成で「📤 他のツールで使う」を押しておくと、作ったパレットの色が定番色の隣に丸いスウォッチとして並び、そのままペン色に使えます(配色を決めてから作画する流れに便利です)。そのコマに記入(セル番号)が無い状態で描くと、新しいセルが自動で作られてそのコマに置かれます — コマを進めて描くだけでパラパラアニメが作れます。同じセルに描き足したいときはセル番号が書かれたコマ(runの開始)で描いてください。オニオンスキンで前後のセルを薄く重ねて確認しながら描けます(「オニオン」横のスライダーで濃さを調整でき、設定はブラウザに記憶されます)。
13. 「レイアウト枠」をONにすると、AJA推奨レイアウト用紙規格(AJA Fr01)に準拠したガイドが表示されます: メインフレーム(実線)・タップ穴(上端)・センタークロス・四辺の二分割ライン・安全フレーム(90%・破線)・スキャンフレーム(110%)。枠を表示したまま書き出すと、GIF・動画・PNGにも枠が焼き込まれます(レイアウトの共有用)。完成品は枠をOFFにして書き出してください。
14. セル・タイムシートウィンドウの「不透明度」スライダーで選択中のセル欄全体の不透明度を変えられます(0〜100%)。下の欄を透かして位置合わせしながら描いたり、BOOKやエフェクトを半透明に重ねたりできます。プレビューと書き出しの両方に反映され、作業データにも保存されます。
15. キーボードショートカット: Space=再生/停止、←→=1コマ移動(Shift+←→=6コマ)、Home/End=先頭・末尾、P=ペン、E=消しゴム、H=ハンド(いずれも書き込みモードON)、C=カメラモード、S=SLモード、[=太く、]=細く、Ctrl+S=保存、F=全画面表示の切替、Ctrl+Z/Y=元に戻す・やり直す、Esc=複数選択の解除。ペンの太さはペンと消しゴムで別々に記憶されます。
16. 画面上部の「書き出し」からGIF・動画・律表PNG・CSVなどを保存します。「📷 カメラ視点で書き出す」にチェックを入れると、カメラプレビューと同じ、カメラ枠で切り抜いた16:9の映像として書き出せます(カメラワークの完成イメージ確認用)。作業の途中経過は「💾 保存」でファイルに保存し、「📂 開く」でいつでも再開できます。

よくある質問

Q. タイムシート(律表)・コマ打ちとは何ですか?

A. タイムシートは「何コマ目にどの絵を見せるか」を書き込む表で、アニメ制作の設計図にあたります。24fpsを基準に、1枚の絵を2コマ(1/12秒)ずつ見せるのが「2コマ打ち」、3コマずつが「3コマ打ち」です。このツールでは同じセルを続けて置くだけでコマ打ちを表現できます。

Q. なぜ24fps固定なのですか?

A. 日本のアニメ制作とタイムシートの規格が24fpsを前提としているためです。律表の1行=1コマ、1ページ=6秒(144コマ)という紙面の構成も24fps基準です。ゆっくりした動きは2コマ打ち・3コマ打ちで表現してください。

Q. 2コマ打ちにするにはどうすればいいですか?

A. 律表でセルを置いたあと、次のセルを2コマ下の行に置くだけです。間の行は自動的に前のセルが持続します(紙の律表の「ツメ」と同じ考え方です)。画像をまとめて取り込んだ場合は最初から2コマ打ちで自動配置されます。

Q. 取り込んだ画像のセルと、描いたセルの違いはありますか?

A. どちらも同じように律表へ置けます。取り込んだ画像の上にもペンや塗りつぶしで描き足せますが、消しゴムで消えるのは描き足した線・塗りだけで、元画像そのものは消えません。

Q. ペンの線がくっきり(ギザギザ)しているのはなぜですか?

A. なめらか補正(アンチエイリアス)をかけない2値ペンを採用しているためです。線の縁に混色が出ないので、塗りつぶしをしたときに輪郭のフチにゴミが残らず、アニメ塗りに向いています。

Q. 自分で作ったカラーパレットをペン色に使えますか?

A. 使えます。当サイトのカラーパレット作成でパレットを作り、「📤 他のツールで使う」を押してください。このツールを開く(または開いているタブに切り替える)と、ペン色スウォッチの定番色の隣に丸いスウォッチとして表示されます。パレットはお使いのブラウザ内(localStorage)に保存されるだけで、外部には送信されません。カラーパレット作成側でもう一度ボタンを押すと新しいパレットに置き換わります。

Q. レイアウト枠は書き出した動画にも表示されますか?

A. 「レイアウト枠」をONにしたまま書き出すと、プレビューと同じ枠がGIF・動画・PNGに焼き込まれます(レイアウトや原画の確認用共有に便利です)。完成品として書き出すときは枠をOFFにしてください。なお書き出し範囲は常に用紙全体(A4)で、メインフレームでの切り抜きは行いません。

Q. レイアウト枠はどの規格に基づいていますか?

A. 日本動画協会が制定した「AJA推奨レイアウト用紙規格」に基づき、A4横(297×210mm)の用紙にメインフレーム254×142.875mm(10×5.625インチ・16:9)を規格どおりの位置(中心が中央タップ穴中心の104.775mm下、用紙中心の垂直線上)に配置しています。タップ穴(上端から11mm)、センタークロス、四辺の二分割ライン、安全フレーム(縦横90%)、スキャンフレーム(縦横110%)の補助線を表示し、用紙右下に規格表記「AJA Fr01」が入ります。

Q. カメラワーク(PAN・T.U・T.B)はどう作りますか?

A. 「📷 カメラ」モードで、動き始めのコマで枠を置き(動かすとキーが打たれます)、動き終わりのコマへ移動して枠を目的の位置・サイズに動かします。枠の平行移動がPAN(アニメではドリーもまとめてPANと呼びます)、枠を小さくするのがT.U(寄り)、大きくするのがT.B(引き)です。じわPAN・じわT.Bは移動量を小さく・キー間隔を長く、Q.PAN(フラッシュパン)は6コマ程度の短い間隔にします。実写と違い、アニメの本番のカメラワークは撮影(コンポジット)工程で付けるため、このツールのカメラは指示専用で描画面の絵は動きません。画角はカメラモード中に追従するレイアウト枠と、右上のカメラプレビュー小窓で確認できます。完成イメージを映像にしたいときは、書き出しの「📷 カメラ視点で書き出す」でカメラ枠どおりに切り抜いたGIF・動画・PNGを出力できます。

Q. 背景を流す(Follow)・セルを引くにはどうしますか?

A. Followはカメラ操作なのでCAM列から設定します。CAM列を縦ドラッグして期間を選び、ポップアップで「Follow(セル送り)を設定する」にチェック → 動かす欄(BG欄があれば自動選択)・方向(←→↑↓または角度)・速度(mm/k=1コマあたりのmm)を入れて保存すると、CAM列に「Follow BG 2mm/k ←」のような対象・速度・方向入りの指示が入り、選んだ欄がその期間を等速で動くSLキーが生成されます。キャラを追うカットでは、キャラのセルは画面に留め、BG欄を進行方向と逆に流すのが定石です。細かい調整は「🖐 SL」モードで枠を直接動かすか、SL指示PNG(区間ごとの移動値mm/k入り)で撮影へ渡せます。「SL図に絵を含める」をONにして書き出すと、キーのあるコマのセルの絵がキー位置に置かれた状態で重なります(始点・終点は濃く、中間キーは薄く)。

Q. カメラワークを撮影担当に指示として渡せますか?

A. 「📷 カメラ指示PNGを保存」で、レイアウト用紙の上に始点・終点のカメラ枠(赤実線)・中間キーの枠(赤破線)・カメラの軌道・コマごとの目盛り(キーのコマは長い目盛り)とコマ番号・進行方向の矢印を赤線で描いた撮影指示図を書き出せます。作画レイアウトに添える撮影(コンポジット)工程への指示書としてそのまま使えます。

Q. セルを個別の画像として書き出せますか?

A. 書き出し欄の「🖼 セルPNG一括保存」で、全セル欄のセルを1枚ずつ透過PNGとして保存できます。ファイル名にセル名(A1・BG1・BOOK1など)が付くので、他のソフトへ素材として渡すときに便利です。

Q. 300dpiを選ぶと動作が重いのはなぜですか?

A. 300dpiではキャンバスが3508×2480pxとなり、セル1枚あたりの内部メモリが約35MBになるためです。多数のセルを扱う場合や動作が重い場合は72dpi(画面確認・GIF用途には十分)をおすすめします。印刷を見据えた原画・レイアウト作画のときだけ高解像度を選ぶ使い分けが快適です。

Q. GIFの画質が元の画像と違って見えます

A. GIF形式の仕様で256色に減色されるためです(グラデーションの多い絵では縞が出ることがあります)。また透過には対応せず、背景色で塗りつぶした状態で書き出されます。画質を重視する場合はWebM/MP4動画での書き出しをお試しください。

Q. 動画の書き出しに時間がかかります

A. WebM/MP4はブラウザの録画機能(MediaRecorder)を使った実時間録画のため、アニメの長さと同じ時間がかかります。録画中にタブを裏に回すと空のファイルになるため、書き出し中はタブを前面のままにしてください。

Q. 保存したファイル(.tsproj.json)が大きいのはなぜですか?

A. 作業を1ファイルで完結させるため、取り込んだ画像本体をbase64形式で埋め込んでいるためです(元の約1.33倍)。タイミングだけを共有したい場合は、画像を含まない軽量な「タイミングJSON」書き出しをご利用ください。

Q. データはどこかに送信されますか?

A. いいえ。読み込み・編集・書き出しのすべてがブラウザ内(お使いの端末内)で完結します。画像やタイムシートの内容が外部サーバーへ送信されることはありません。