キネティックタイポグラフィ
動画でテキストが画面に表示される際、最初に思い浮かぶ動きはフェード、スライド、ポップです。これらは悪くありませんが、デフォルトであり、選択ではありません。このスキルは、約80の技法を18のファミリーに分類して提示し、本当の選択を可能にします。
これはリマインダーであって、指示ではありません。作業に新たなステップやページ、承認プロセスを追加することはありません。
創造的自由を最優先
ここに書かれていることはすべてデフォルトまたは提案であり、決してルールではありません。ある瞬間に別の動きが適していると思ったら、デフォルトを破り、その理由を一文で述べてください（計画、コードコメント、または返信で）。メニューに載っていない技法も自由に使えます。メニューは選択肢を広げるためのものであり、制限するものではありません。
瞬間ごとに、意味に基づいて選択
言葉の動きを決める前に、その言葉を読んでください。その行が何をしているのかを問い、その意味に合った技法を選びましょう。
| 言葉が... | そのとき使う技法 |
|---|---|
| 何かを分割、破壊、分離する | slice, shatter |
| 答えを導き出す、秘密を明かす | scramble |
| 力強く着地する、カウントダウンする | stomp |
| 用語を定義する、初めて書く | stroke-write-on, marker-highlight |
| 変化する数字を表示する | odometer |
| 何かが消えていく様子を描写する | disintegrate, smoke-dissolve |
| グラフや数式に沿う | text-on-a-path, sine-wave-type |
メニューの「Reach for it when」列は、まさにこの質問のために書かれています。
バリエーションの程度
- 教育モード（レッスンや解説動画のデフォルト。リクエストに指定がない場合もこれ): 通常の行にはキャルムとタグ付けされた技法から1つのハウススタイルを選び、重要な瞬間（キーワード、答え、警告）のためにいくつかのアクセントを残す。teachとタグ付けされた技法は良いアクセントになる。アクセントは少ないほど効果的。
- 自由モード（ユーザーが「クリエイティブに」「自由に」「驚かせて」と依頼した場合): メニュー内のすべての技法を使用可能。ただし、意味に基づいて選択すること。自由だからといって多く使う必要はない。1つの大胆で適切な技法が10の技法に勝ることもある。
- 動画が明らかに教育用でない場合（ミュージックビデオ、予告編など）、モードが指定されていなければ、適切なものを選び、その選択理由を述べてください。
仕上げと確認
- 速い動きにはモーションブラー。 コンピュータアニメーションは完全にシャープなので、速いテキストはぎくしゃくして見えることがあります。移動方向に沿った少しのブラーで、撮影されたような見た目になります。Remotionにはモーションブラーツールがあります（
@remotion/motion-blur）。プロジェクトのRemotionバージョンと正確に一致するバージョンを、他の「Remotionで構築する」パッケージと同じ方法でインストールします（npm i -E @remotion/motion-blur@<バージョン>）。速い動きの仕上げとして使用し、ゆっくりした動きでは焦点が合っていないように見えるため使わないでください。 - 結合スクリプトでは文字レベルの効果が崩れます。 アラビア語、ペルシャ語など、文字の形が隣接する文字によって変わるスクリプトでは、単語を文字に分割する効果（カスケード、スクランブル、アナグラム、ランダムオーダー・ポップオン、3Dフリップイン）は文字の形を崩します。代わりに単語全体または行全体をアニメーションさせてください。
- フォントにアクセントが含まれているか確認してください。 アフリカーンス語などアクセント付きラテン文字テキストの場合、アニメーションさせる前にフォントに必要な文字（ê, ë, ô, ï...）が含まれていることを確認してください。
メニューの使用方法
選択する前に、references/menu.md（このスキルのフォルダ内）を開いてください。すべての技法がファミリーごとにグループ化され、以下の情報が記載されています。
- 名前とID（
KT_COMPONENTSのキー） - 一行の見た目と「どんな場面で使うか」のヒント
- タグ: calm（良いハウススタイル）、teach（良い教育アクセント）、exit（単語が消えることで終わる。行やシーンの終わりに適している）、✚ new
- ビルド方法:
component（既製）、またはexample（適応するための注釈付きシーン。パスが記載）
ファミリーの見出しをざっと見て、その瞬間に合ったファミリーの行を読んでください。
references/catalogue.mdは背景資料です。メニューの背後にある研究、出典、歴史、各技法の構築の難易度が記載されています。詳細を知りたいときだけ開いてください。
Remotionでの構築方法
- このスキルのフォルダから
remotion/フォルダをプロジェクトにsrc/kinetic-type/としてコピーします。 - プロジェクトに
remotion、@remotion/google-fonts、@remotion/layout-utilsがプロジェクトのRemotionバージョンと正確に一致していることを確認します（Remotionはすべてのパッケージが同一バージョンであることを前提としています）。例: バージョン4.0.536の場合:npm i -E @remotion/[email protected]（-Eは正確なバージョンを保存し、^4.0.536になりません）。 - メニューのIDでコンポーネントを参照し、
<Sequence>内でレンダリングします。
import { Sequence } from "remotion";
import { KT_COMPONENTS } from "./kinetic-type";
const House = KT_COMPONENTS["tracking-in"];
const Accent = KT_COMPONENTS["slice"];
export const Intro: React.FC = () => (
<>
<Sequence durationInFrames={75}>
<House text="Every whole can be shared" />
</Sequence>
<Sequence from={75} durationInFrames={60}>
<Accent text="Split it in half" keyWord="half" />
</Sequence>
</>
);
- Props (
KTProps):text（必須）、keyWord（アクセント処理を受ける）、fontFamily（デフォルトはPoppins）、color、accent、fontSize（デフォルトはフレーム幅に合わせる）。 - 各コンポーネントは、自身の
<Sequence>のフレーム0から開始し、約1秒以内で落ち着きます。したがって、Sequenceの長さがテキストの表示時間を設定します。2種類の技法は異なる動作をします:exit技法はSequenceの最終フレームまでにテキストが消え、音声に合わせた技法（ファミリー15）はテキストをSequence全体に広げるため、その長さがペースを設定します。 example技法の場合は、メニューに記載されたファイルを開き、シーンを適応させてください。- 他の動画ツールの場合: メニューと選択方法は引き続き適用されます。既製コンポーネントはRemotion専用です。
プレビュー、または動画全体のディレクション
- ギャラリー: すべての技法のライブプレビューは https://dricosnyman.github.io/kinetic-type-skills/ でご覧いただけます。
- 動画全体、または行ごとのディレクション: スクリプトからキネティックタイポグラフィ動画全体を作成する場合、または各ラインのタイポグラフィを構築前に計画・レビュー・承認したい場合は、
kinetic-type-directorスキルを使用してください。このスキルは、タイプスクリプトの下書き、編集可能なページの表示、承認されたバージョンをこれらのコンポーネントで構築する、という完全なプロセスを実行します。