Communitygithub.com

tugrulz/Kurzgesagtスタイル

フラットベクターアニメーションによる「科学解説」動画を、Kurzgesagt(In a Nutshell)スタイルで制作するためのクリエイティブディレクションスキル。彩度の高いグラデーションパレット、輪郭線のない丸みを帯びた形状、小さな点目キャラクター、軽快なイージング、スケールジャンプズーム、そして好奇心旺盛でドライなユーモアのあるナレーションを特徴とします。ユーザーがアニメ解説動画、科学・宇宙・生物学・経済・テクノロジー・歴史の解説、Kurzgesagt風動画、フラットモーショングラフィックス解説、またはそのようなルックのスクリプト・ストーリーボード・シーンデザイン・Remotionコンポジションを希望する場合に活用します。

Kurzgesagtスタイル とは?

このスキルは、Kurzgesagt(In a Nutshell)スタイルのフラットベクターアニメーション解説動画のためのクリエイティブディレクションを提供します。具体的には、彩度の高いグラデーション背景、輪郭線のない丸みを帯びた形状、小さな点目キャラクター、スナップインイージング、スケールジャンプズーム、そしてドライなユーモアのナレーションといった、スタイルの核となるルールを定義します。Remotionベースのプロジェクトにおいて、このスキルはルック&フィールを決定し、`remotion-*`スキル(`remotion-best-practices`、`remotion-markup`など)が実際のコード実装を担当します。ワークフローは、ブリーフィング、リサーチ(事実の検証)、スクリプト作成、ストーリーボード(シーンレシピの活用)、スタイルバイブル(カラースクリプト)、シーン構築、オーディオミックス、そしてレンダリング前チェックリストの実行で構成されます。このスキルは、正確な事実、アクセシビリティ(キャプション、フラッシュ制限)、重いトピックへの配慮、そしてオリジナリティ(Kurzgesagtのロゴや特定キャラクターの不使用)を重視したガードレールを備えています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tugrulz/kurzgesagt-style/tree/main

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Kurzgesagtスタイルの解説動画

このスキルはクリエイティブディレクションです。動画の見た目、動き、音、読み方を決定します。remotion-*スキルがコードでそれらを構築する方法を決定します。コンポジションを書く前に、まずremotion-best-practices(ルーター)とremotion-markupを読み、このスニペットと矛盾する箇所はそれらに従ってください。

このジャンルが効果的なのは、難しいアイデアを小さく、温かく、面白く感じさせつつ、映像は明確に保つからです。以下のルールのほとんどはそのためにあります。シンプルな形状でアイデアが読み取りやすく、常に優しい動きで生きているように感じさせ、スケールの大きなジャンプで数字や距離を読ませるのではなく感じさせること。

スタイルの10のルール

  1. 輪郭線なし。 形状は塗り、グラデーション、陰影で定義されます。輪郭線はダイアグラムの線、グラフ、ポインターにのみ、1つの均一な太さで丸い端を使って現れます。
  2. 丸みを帯びたシンプルな幾何学。 円、カプセル、角丸長方形、柔らかいブロブ。形状が12以上のパスポイントを必要とするなら、単純化してください。
  3. 深く彩度の高い背景、鮮やかなアクセント。 暗いグラデーションのフィールド(ネイビー、インディゴ、オベンジン、ディープティール)に、1~2の鮮やかなアクセント色。暖色対寒色のコントラストで視線を被写体に引きつけます。
  4. 光の方向は一つ。 すべてのオブジェクトは、ベースカラー+陰影(単に暗くするのではなく、青/紫に色相シフト)+ハイライトの細い線で構成されます。シーン内の光の方向は一つです。
  5. 小さく、ほとんど無表情なキャラクター。 点の目、通常は口なし、ずんぐりした手足。感情は表情の細部ではなく、姿勢と動きから生まれます。
  6. 賑やかな端、明確な中央。 背景レイヤーは小さな低コントラストのディテール(星、パーティクル、遠くの形状)を運びます。被写体はサムネイルサイズでも大胆で読み取れるようにします。
  7. 静止しているものは何もない。 アイドルドリフト、スローなカメラプッシュ、パララックス、きらめき。静止したフレームは死んでいるように感じます。
  8. スナップイン、ソフトアウト。 要素は少しオーバーシュートして、波状にずらしてポップインします。フェードとカメラ移動は優しくイーズアウトします。
  9. スケールが主な特殊効果。 オブジェクトを通り抜けて小さな世界にズームインし、何かがどれだけ小さかったかを見せるために引き、アイコンを繰り返して数字が着地するようにします。
  10. 言葉は控えめに。 ナレーションがコンテンツを伝えます。画面上のテキストは、ラベル、数字、時折のオチのためだけです。

ワークフロー

2つの承認チェックポイントを設けて段階的に進めます。スクリプトとストーリーボードは安価に変更でき、アニメーションは高価なので、構築前に合意を得てください。

  1. ブリーフィング 不足しているものだけを尋ねます:トピック、視聴者、長さ、アスペクト比、音声ソース(ユーザー録音、remotion-markupのvoiceover.md経由のElevenLabs、または無音プレースホルダー)、ムード。デフォルト:16:9、1920×1080、30 fps、3~5分。
  2. リサーチ → research/facts.md。表「主張|数字|ソース|確信度」。統計を捏造しないでください。推定値は推定値と明記してください。解説の質は事実の質に依存します。
  3. スクリプト → script.md。references/script-and-structure.mdを読んでください。チェックポイント:ユーザーがスクリプトを承認します。
  4. ストーリーボード → storyboard.md、ショットごとに1行(テンプレートはスクリプトリファレンスにあります)。各ショットにreferences/scene-recipes.mdからレシピを選んでください。チェックポイント:ユーザーがストーリーボードを承認します。
  5. スタイルバイブル assets/theme.tsをsrc/kg/theme.tsにコピーします。アクトごとにパレットを選びます(「カラースクリプト」、references/visual-language.md参照)。議論の展開に合わせてムードが変化するようにします。
  6. 構築 まずsrc/kg/に共有プリミティブ(陰影付き形状、星フィールド、キャラクター、ラベル、カメラリグ)を作成し、次にsrc/scenes/にシーンごとに1つのコンポーネントを作成します。references/visual-language.mdとreferences/motion-language.mdを読んでください。スキャフォールドにはremotion-createを、メカニクスにはremotion-markupを使用します。
  7. オーディオ まずナレーション、次にオーディオタイミングから各ショットの長さを導き出します(ワードタイミングはremotion-captions、動的長さはcalculateMetadata)。主要な登場ごとにミュージックベッドとソフトなポップ/ウーッシュを追加します(remotion-markupのsfx.md)。ナレーションとミックスする際は約-20 dB RMS、ミュージックベッドはその約8 dB下、ピークは-1 dBFS以下にします。テキスト読み上げファイルはしばしばピークが0 dBFSになるため、他のものを追加する前にナレーションを約0.8にスケーリングします(詳細はreferences/motion-language.md)。
  8. QAとレンダリング 各ビート、フレーム0、各シーン境界の両側でスチルをレンダリングします。以下のチェックリストを実行し、remotion-renderでレンダリングし、結果のオーディオを測定します。

プロジェクトレイアウト

src/
  kg/theme.ts         パレット、シェードランプ、イージングプリセット
  kg/primitives/       ShadedSphere, StarField, Character, Label, CameraRig, ...
  scenes/NN-name.tsx   ストーリーボードのショットグループごとに1シーン
  Video.tsx            シーンを順序付け、オーディオを所有
public/               ナレーション、ミュージック、効果音
research/facts.md
script.md
storyboard.md

環境に関する注意

  • Windows:プロジェクトパスを短く保ってください。 Remotionが起動するツール(esbuild、レンダラー、ヘッドレスChrome)は、解決されたパスが260文字を超えるとENOENTで失敗します。これはAppDataの下や深いセッションフォルダ内で簡単に発生し、システムがパスを解決するときにさらに長くなります。D:\my-videoのような場所にスキャフォールドし、構築前に1つのスチルをレンダリングしてください。
  • Remotionにバンドルされているffmpegは最小限のビルドで、volumedetectフィルターがありません。レベルを確認するには、レンダリング結果をWAVにデコードし(npx remotion ffmpeg -i out.mp4 -vn -ac 1 -c:a pcm_s16le check.wav)、短いスクリプトでピークとRMSを計算してください。

レンダリング前チェックリスト

すべてのシーンの開始、中間、終了、およびフレーム0と各シーン境界の両側のフレームのスチルに対してこれを実行します。

  • ダイアグラム線ではない形状に輪郭線はありませんか? 削除してください。
  • 各オブジェクトに、シーンの単一の光源から照らされた陰影面とハイライトがありますか?
  • フレーム内に、背景ファミリーに加えて最大2つのアクセント色がありますか?
  • 被写体は25%のサイズで判読可能ですか? そうでない場合は、拡大するか、周辺のコントラストを下げてください。
  • シーンの毎秒、何かが動いていますか(アイドルモーション、カメラ、パーティクル)?
  • 新しい視覚的ビートは、少なくとも2~4秒ごと、通常は文に合わせて着地していますか?
  • 画面上のテキストは6語以下で、1080pで少なくとも36 px、文頭大文字になっていますか?
  • 画面上のすべての数字はresearch/facts.mdにソースとともにありますか?
  • すべてのグローは単一のグラデーション(積み重ねられたバンドなし)ですか? また、フレーム0で画面外で待機しているものに可視のグローはありませんか?
  • ビネットは明るく(角で約35%)、紫色がかっていて、明るい被写体が濁らないようになっていますか?
  • 成長する被写体の横のテキストは、被写体の最大サイズから離れていますか? また、カウンターのボックスはその最も幅広い値に収まっていますか?
  • レンダリング後:オーディオのピークは-1 dBFS以下で、ナレーションがミュージックより明確に上にありますか?

ガードレール

  • オリジナリティ。 このルックは一つのジャンルであり、チャンネルのアイデンティティではありません。出力にKurzgesagtの名前、ロゴ、イントロ/アウトロ、またはその特定のキャラクター(鳥など)を使用しないでください。オリジナルのキャラクターとオリジナルのエンドカードをデザインし、動画をそのチャンネルの作品として提示しないでください。
  • 正確性。 解説動画は教えるものであるため、出典のある事実は美しいフレームよりも重要です。不確実性をナレーションで表明し(「科学者は推定しています…」)、誤魔化さず、動画の最後にソースリストを入れてください。
  • アクセシビリティ。 キャプションを追加してください(remotion-captions)。毎秒3回以上のフラッシュ(全画面ズームスルーフラッシュを含む)を避けてください。チャートの系列を色だけでエンコードせず、直接ラベルを付けてください。
  • 重いトピック。 かわいいビジュアルと深刻な主題の組み合わせは、このジャンルの魅力であり、リスクでもあります。死、病気、戦争、貧困については、ビジュアルをシンプルに保ち、冗談は避けてください。

リファレンスファイル

読むものタイミング
references/visual-language.mdパレットの選択、陰影付き形状の描画、背景、キャラクター、タイポグラフィ、構図、オブジェクトレシピ
references/motion-language.mdアニメーションの記述全般:イージング、ポップイン、アイドルモーション、カメラ、パララックス、ズームスルー、グラフ、タイミング
references/script-and-structure.mdナレーションの作成、構成の計画、ペーシング、ファクトシート、ショットリスト
references/scene-recipe.md各ショットの計画:スケールリビール、100人の群衆、カットアウェイ、タイムラインラッシュ、プロセス図など
assets/theme.tsデザイントークンの出発点(パレット、シェードランプ、イージングプリセット)

関連スキル