キネティックタイポグラフィ

キネティックタイポグラフィ は何をしますか？

モーション中のテキストには、他のどんな役割よりも先に果たすべき仕事が一つあります：それは読めることです。アニメーションタイプの最も一般的な失敗は見た目の悪さではなく、視聴者が最初の単語を読み終える前にテキストが瞬時に過ぎ去ってしまうこと、またはテキストが動きすぎて目が言葉を追う代わりに動きを追いかけてしまうことです。これはクラフトレイヤーです。どの行がどれだけの時間表示され、どのように入って出ていくか、そして何が動くことを許されるかを決定し、それを実際にレンダリングするReact/TypeScriptを書くremotion-composeに具体的なフレーム予算を渡します。

統治ルール：読みやすさに奉仕するためにアニメーションを使い、決して装飾のために使わない。 モーションは、視線を誘導し、階層を確立し、ビートを刻むときにのみ、その価値が認められます。以下のすべてはそれを強化します。

全体を通して、一つの実行例を使用します：16:9の製品タイトルカードで、「Ship video in one prompt」（5単語）、30fps、その下にアニメーション化されたローワーサードキャプショントラックを配置します。

ワークフロー

これらの手順を順番に実行してください。ホールド予算を確保する前にエントランスアニメーションを選ばないでください。予算が、アニメーションの余地があるかどうかを教えてくれます。

ステップ1 - 最初に単語あたりの読み取り時間予算を計算する

テキストは、リラックスしたペースで読めるだけの時間、加えてエントランスとエグジットが消費する時間、画面上に留まらなければなりません。どんなアニメーションにも触れる前に、ホールド時間を予算化してください。

• 画面上の動画の基準読み取り速度は印刷物よりも遅くなります：約3.5単語/秒（約200 wpm）で快適に読めると仮定します。キャプション/字幕の慣例も同様で、単語あたりの読み取り可能なホールドを0.3秒未満にしないでください。
• 最小画面ホールド = 単語数 ÷ 3.5秒、ただし最低0.8秒を任意の行に（たとえ1単語でも、認識するために一拍が必要です）、および未知語（数字、名前、専門用語）に対して+0.3秒の税を加算します。
• エントランスとエグジットの時間は追加です - トランジションの途中ではテキストが完全に判読可能ではないため、読み取り時間としてカウントしません。合計スロット = エントランス + ホールド + エグジット。

以下のtype_budget.jsを実行して、コピーの行をフレーム予算に変換します。タイトルカードの場合、約43フレームのホールドが返されます。これは、remotion-composeにシーケンスの読み取り可能ウィンドウとして渡す数値で、エントランスとエグジットはその上に追加されます。

ステップ2 - デフォルトではなく、カットに合わせて出入りのタイミングを選ぶ

エントランスとエグジットは句読点であり、文そのものではありません。短く抑え、ホールドに仕事をさせましょう。

• エントランス：8-15フレーム（0.25-0.5秒）@ 30fps。 スナップ感を感じさせるのに十分速く、意図的と読めるのに十分遅い。タイトルカードは長めを取り、速いキャプショントラックは短めを取ります。
• エグジット：エントランスと同じかそれより短く。 エグジットは決して長引いてはいけません - 一度読まれたら、テキストはクリアされるべきです。6-12フレーム。
• エグジットを後続の内容に合わせる。 次のシーンへのハードカット → カット上でテキストを終了（フェードなし、カットに任せる）。クロスディゾルブ → ディゾルブの間にテキストをフェードアウト。ハードカットに向けて凝ったエグジットをアニメーション化してはいけません。編集と戦うことになります。これはmotion-design-principles（カットとイージング）とこのスキルの接合点です - イージングカーブはそこから取り、テキストに適用してください。
• 複数要素のリビールはずらして配置し、同時にアニメーション化しないでください。タイトル＋サブタイトルは、サブタイトルがタイトルのセトリング後4-8フレーム遅れて入ると最も良く読み取れ、視線が上から下に導かれます。

ステップ3 - 行ごとに一つのエントランステクニックを選び、一つのプロパティをアニメーション化する

同時に動くプロパティが多ければ多いほど、トランジション中のテキストは読みにくくなります。デフォルトでは単一プロパティのアニメーションにし、意図がある場合のみ二つを組み合わせてください（例：opacity + 小さなtranslate）。

• フェード（opacity 0→1） - 最も安全で、常に読みやすく、キャプショントラックや本文行の正しいデフォルトです。
• 上昇/スライド（小さなtranslate、20-60px、フェードと組み合わせ） - 方向性と活気を加えます。タイトルカードの主力です。距離は小さく保ってください - 大きなスライドは、目が移動を追跡するために読む代わりに追従させます。
• 単語ごとのリビール - 各単語が独自の短いずらしで順にフェード/上昇します。強調行や歌詞風の作品に使用しますが、密集したキャプションには使用しないでください（読みがぎくしゃくします）。行全体のリビールがホールド内で十分に収まるように予算化してください。
• スケール/ポップ（スプリングで0.85→1） - エネルギッシュで、単一のヒーローワードや数字のコールアウトに適しています。完全な文をスケールさせないでください。リフローが読めなくなります。
• マスク/ワイプリビール - プレミアムで方向性があり、単一の見出しに最適です。構築にコストがかかるため、重要な一つのタイトルにのみ予約してください。

何を選んでも、プロパティはアニメーションします。テキスト自体はアニメーション中に決してリフローしません。 opacityとtransform（translate/scale/clip）をアニメーション化してください - font-size、width、または文字間隔をグリフを再レイアウトする方法でアニメーション化することは絶対にしないでください。レイアウト駆動のアニメーションはガタつき、読めなくなります。

ステップ4 - ウェイトとサイズをトランジションとしてアニメーション化し、ノイズとして使わない

ウェイトとサイズは、モーションにおいてタイプが強調を表現する方法です - しかし、それらは保持状態間のトランジションであり、継続的な揺れではありません。

• ウェイトトランジション： 単語が軽いウェイトから重いウェイトにセトリングして強調を落とし着けることができます（例：セトリング時に400→700を8フレームかけて）。実際の可変フォントのウェイト軸またはファミリーの二つのカットを使用してください。スケーリングで太字を偽装しないでください。
• サイズトランジション： 数字やキーワードは、階層を主張するために一度スケールアップし、その後保持することができます。スケール・アンド・ホールド、スケール・アンド・パルスではありません。テキスト上のループパルスは、壊れたレンダリングとして読まれ、強調としては読まれません。
• これらはアクセントです。行ごとに最大一つのウェイト/サイズアクセントを、最も重要な単一の単語に配置します。すべてを強調すると、何も強調されません。

ステップ5 - モーションにおけるタイプ階層を設定する（順序、サイズ、ウェイト、タイミング）

モーションにおける階層は、四つのシグナルから構築されます。これらを一緒に使用して、視線がどこをどの順序で見るべきかを示します。

1. エントランスの順序 - 最初にアニメーション化するものが最初に読まれます。見出しでリードし、サブタイトルを続け、CTAで終わります。
2. サイズのコントラスト - 明確な比率を維持してください（見出し ≥ 1.6× サブタイトル）。モーションは弱い静的な階層を救いません。
3. ウェイトのコントラスト - より重い = より重要。画面上で同時に最大二つのウェイト。
4. タイミング - 最も重要な行が最も長いホールドと、もしあれば、最も存在感のあるエントランスを得ます。最も重要でないもの（永続的なローワーサード、透かし）は、一度のエントランスの後はアニメーション化しません。

以下のmotion-type-specテンプレートに行ごとの予算、テクニック、階層ロールを記入してください。その記入済みの仕様がremotion-composeへのハンドオフとなります。

ステップ6 - アニメーション化しない場所を決定する

熟練者の動きは抑制です。最終決定の前に、以下の「禁止」リストからアニメーションを削除してください。一つのよく予算化された上昇を持つタイトルカードは、すべての単語が何かをするものよりも良く読み取れます。

品質基準

完成したモーションタイプ仕様は、次のすべてのホールドが満たされた場合にのみA+となります：

• すべての行が読み取り時間予算を満たしている - ホールド ≥ max(0.8s, 単語数 ÷ 3.5 + 用語税)、type_budget.jsで計算され、エントランス/エグジットはその上に追加され、決してそこから差し引かれない。
• 各行が一つのプロパティをアニメーション化する（二つは明示的な意図がある場合のみ）、どの行もアニメーション中にグリフをリフローしない - opacity/transformのみ。
• エントランスは8-15フレーム、エグジット ≤ エントランス、エグジットは後続の編集（カット vs. ディゾルブ）に合わせられ、デフォルトではない。
• 階層が順序で読み取れる：エントランス順序、サイズ比率（≥1.6×）、ウェイトすべてが同じ最も重要な行を指している。
• 行ごとに最大一つのウェイト/サイズアクセント、何もループまたはパルスしない。
• 仕様がフレーム番号を命名している（エントランスイン、ホールド開始、ホールド終了、エグジットアウト）ので、remotion-composeが推測せずにシーケンスを書ける。

禁止事項

• 読み取り予算より短いホールドのテキストを出荷しない - 最も一般的なキネティックタイプの失敗。ホールドする余地がない場合は、ホールド時間ではなく単語を削減する。
• font-size、width、letter-spacing、またはグリフを再レイアウトするものをアニメーション化しない。レイアウトのバタつきは読めません。代わりにtransformでスケールする。
• 行ごとに一つまたは二つのプロパティ以上をアニメーション化しない、そして密集したキャプションを単語ごとにアニメーション化しない - 読みがぎくしゃくする。
• ループ、パルス、繰り返しバウンス、またはテキストを連続的に動かし続けない。止まらないモーションは読めません。
• すべての要素をアニメーション化しない。ローワーサード、透かし、永続的なラベル、法的テキストは一度のエントランスを得て、その後は静止する。本文/キャプションテキストを凝ったエントランスでアニメーション化しない - フェードが正しい。
• 基礎となるイージングカーブやシーンカットをここで決定しない - それはmotion-design-principlesの仕事です。ここでRemotionコンポーネントを書かない - 記入済みの仕様をremotion-composeにハンドオフする。
• コピーを発明しない。ユーザーが与えた単語をアニメーション化する。行がホールドするには長すぎる場合は、短縮するよう依頼する。

兄弟スキル - ハンドオフし、吸収しない

このスキルはテキストのタイミングと読みやすさを所有します。隣接する決定は兄弟に属します。それらから引き出し、ここで仕事をやり直さないでください。

• motion-design-principles - カット、非テキストモーションのペーシング、およびイージングカーブ（加速形状）。カーブをそこから取り、ここでテキストに適用する。
• video-storyboard - どのシーンとショットが存在し、どの順序か。まずシーンリストを取得する。このスキルはシーン内のテキストのタイミングのみを設定する。
• motion-color-and-light - 背景に対するタイプの色、コントラスト、可読性。色のためにテキストが読みにくい場合、それはそのスキルの仕事であり、ここでのタイミング変更ではない。
• product-demo-director - プロダクトデモの全体的なナラティブとビートリスト。タイトルカードが何を言い、いつ現れるかを決定する。このスキルは各カードがどのようにアニメーション化するかをタイミング設定する。
• sound-and-music-sync - テキストのリビールをビートまたはダウンビートに合わせる。holdStart@ / エントランスフレーム番号を渡して、リビールをトラックにスナップできるようにする。
• social-video-formatter - プラットフォーム用のキャプショントラックのリサイズとクロップ（9:16 TikTok、1:1フィード、セーフエリア）。ここで一度タイミングを作成し、そのスキルにプラットフォームごとにリフローさせる。

計算機

自己完結型のNodeスクリプト。type_budget.jsとして保存し、node type_budget.jsで実行。依存関係なし。lines配列を実際のコピーで編集すると、指定されたfpsでの各行のフレーム予算が返されます。

// Kinetic-type reading budget. Edit lines + fps, then: node type_budget.js
const fps = 30
const WORDS_PER_SEC = 3.5   // comfortable on-screen read (~200 wpm)
const FLOOR_SEC = 0.8       // minimum hold for any line, even one word
const TERM_TAX_SEC = 0.3    // per line containing a number/name/jargon term
const ENTRANCE_FRAMES = 12  // 0.4s entrance
const EXIT_FRAMES = 9       // exit <= entrance

const lines = [
  { text: 'Ship video in one prompt', hasUnfamiliarTerm: false }, // title card
  { text: 'Rendered headless in 4K',  hasUnfamiliarTerm: true  }, // caption: '4K'
  { text: 'Go',                       hasUnfamiliarTerm: false }, // hero word
]

const sec2frames = (s) => Math.ceil(s * fps)

function budget(line) {
  const words = line.text.trim().split(/\s+/).length
  const raw = words / WORDS_PER_SEC + (line.hasUnfamiliarTerm ? TERM_TAX_SEC : 0)
  const holdSec = Math.max(FLOOR_SEC, raw)
  const holdFrames = sec2frames(holdSec)
  const totalFrames = ENTRANCE_FRAMES + holdFrames + EXIT_FRAMES
  return { words, holdSec, holdFrames, totalFrames }
}

let cursor = 0
for (const line of lines) {
  const b = budget(line)
  const enterIn = cursor
  const holdStart = enterIn + ENTRANCE_FRAMES
  const holdEnd = holdStart + b.holdFrames
  const exitOut = holdEnd + EXIT_FRAMES
  console.log(`"${line.text}" (${b.words}w)`)
  console.log(`  hold:        ${b.holdSec.toFixed(2)}s = ${b.holdFrames} frames`)
  console.log(`  total slot:  ${b.totalFrames} frames (enter ${ENTRANCE_FRAMES} + hold ${b.holdFrames} + exit ${EXIT_FRAMES})`)
  console.log(`  Sequence:    enter@${enterIn}  holdStart@${holdStart}  holdEnd@${holdEnd}  exitOut@${exitOut}`)
  cursor = exitOut
}
console.log(`Total track length: ${cursor} frames (${(cursor / fps).toFixed(2)}s)`)

実行例の出力

"Ship video in one prompt" (5w)
  hold:        1.43s = 43 frames
  total slot:  64 frames (enter 12 + hold 43 + exit 9)
  Sequence:    enter@0  holdStart@12  holdEnd@55  exitOut@64
"Rendered headless in 4K" (4w)
  hold:        1.44s = 44 frames
  total slot:  65 frames (enter 12 + hold 44 + exit 9)
  Sequence:    enter@64  holdStart@76  holdEnd@120  exitOut@129
"Go" (1w)
  hold:        0.80s = 24 frames
  total slot:  45 frames (enter 12 + hold 24 + exit 9)
  Sequence:    enter@129  holdStart@141  holdEnd@165  exitOut@174
Total track length: 174 frames (5.80s)

読み方：5単語のタイトルには43フレームの保持された、完全に判読可能な時間が必要です - そしてそれは12フレームのエントランスと9フレームのエグジットの上に追加されるため、実際のスロットは64フレームです。4単語のキャプションは短く見えますが、数字（4K）を含むため、用語税によりホールドが44フレームに押し上げられます - 単語が少ないにもかかわらずタイトルよりわずかに長くなっています。単一単語のGoは0.8秒の最低ラインに達します：たとえ1単語でも一拍を得ます。これらのenter@ / holdStart@ / holdEnd@ / exitOut@フレーム番号は、remotion-composeに<Sequence from={…} durationInFrames={…}>境界としてそのまま渡されます - テキストがどれだけ表示されるべきか推測する必要はありません。

テンプレート: motion-type-spec

これを記入し、remotion-composeにハンドオフします。テキスト行ごとに一つのブロック。

MOTION TYPE SPEC. [記入: コンポジション名].  fps: [記入]  canvas: [記入: 1920x1080 / 1080x1920]

LINE 1
  Copy (verbatim):     [記入]
  Hierarchy role:      [記入: headline / subtitle / caption / lower-third / CTA / hero-word]
  Size:                [記入]px        Weight: [記入: 400 / 700 / variable axis]
  Reading budget:      [記入]w -> hold [記入]s = [記入] frames   (from type_budget.js)
  Entrance:            [記入: fade / rise+fade / word-by-word / pop / wipe]  over [記入: 8-15] frames
  Exit:                [記入: fade / cut-on-edit]  over [記入: <=entrance] frames
  Property animated:   [記入: opacity / opacity+translateY / scale]   (NO font-size/width)
  Accent (max one):    [記入: none / weight 400->700 on word "X" / scale-up on "X"]
  Frame numbers:       enter@[記入] 

…

[翻訳のため省略]

(翻訳注：元のSKILL.mdが途中で切れているため、テンプレートの残り部分は元の英語のまま維持されています。完全な翻訳が必要な場合は、元の完全なSKILL.mdを提供してください。)