mcpField
T
title-kinetic-typography

title-kinetic-typography

github.com/calesthioクリエイティブ・メディア219183 回インストール15 週間前に更新
リポジトリ

title-kinetic-typography について

動画やWebなどの制作工程で使える、特定のプロバイダーに依存しないタイトル・キネティックタイポグラフィのスキルです。文字の階層、可読性、動き、ローカライズ、安全領域を扱います。

主な機能

  1. 01編集上の目的に応じた文字分類
  2. 02タイポグラフィの階層設計
  3. 03登場・保持・退出のタイミング設計
  4. 04意味を明確にする動きの活用
  5. 05可読性と安全領域の確認
  6. 06多言語の改行処理

活用シーン

  1. 01動画タイトルやインタータイトルの設計
  2. 02読みやすいソーシャル用フックや法的表示の制作
  3. 03ローカライズされた動く文字の計画
  4. 04字幕と文字のアクセシビリティ確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/calesthio/generative-media-skills --skill title-kinetic-typography

インストール後、Claude Code で/title-kinetic-typographyを入力して読み込まれたか確認します。

同梱ファイルEVAL.md

詳細

タイトルとキネティックタイポグラフィの方針

テキストを装飾的なオーバーレイではなく、デザインされたシーンのように機能させるために、このスキルを使用します。すべてのテキスト要素を、役割を持つタイミング上の編集判断として扱います。役割には、特定する、説明する、売り込む、感情を伝える、注意を誘導する、発話を読みやすくするといったものがあります。

この方針は、特定のプロバイダーに依存しません。最終的なアセットを After Effects、HTML/CSS/GSAP、Remotion、Lottie、ゲームエンジン、字幕、AI 動画プロンプト、静止画／動画ジェネレーターのいずれで作成する場合にも適用されます。テキストの正確さを保つ必要がある場合は、画像や動画ジェネレーターに文字の形を創作させるのではなく、編集可能なタイポグラフィレイヤーまたはレンダリング済みのタイポグラフィレイヤーを優先します。

事実、観察事項、ヒューリスティクスを分ける

文書化された事実：

  • WCAG 2.2 では、閾値以下の点滅を除き、ウェブコンテンツで任意の1秒間に3回を超えて点滅させないことが求められています。納品物がウェブページでない場合でも、動画内のテキストに対する保守的な安全ルールとして適用します。
  • 5秒を超えて続く、動く、点滅する、スクロールする、または自動更新されるコンテンツに関する WCAG のガイダンスでは、媒体が対応している場合、視聴者が制御できるようにすることが推奨されています。制御できない場合は、必須でない動きを減らすか、単純化します。
  • Unicode と W3C の国際化に関する資料では、改行規則は文字体系ごとに異なると定められています。英語の単語折り返しの挙動が、CJK、タイ語、アラビア語、インド系文字、または複数の文字体系が混在するタイトルにも適用できると想定しないでください。
  • TikTok の広告セーフゾーンに関する文書では、テキストやロゴなどの重要な要素を該当するセーフゾーン内に配置する必要があるとされており、セーフゾーンのサイズは広告の寸法、キャプションの長さ、追加要素によって変わります。2026-07-10 確認済み。
  • Google Ads の動画仕様に関するガイダンスでは、一部の広告枠でロゴ、商品、スーパーなどの重要な要素が覆われるリスクを抑えるため、指定されたセーフエリア内に配置することが推奨されています。2026-07-10 確認済み。
  • Meta Reels／Stories のセーフゾーンに関するガイダンスは Ads Manager から確認できますが、一般公開情報へのアクセスにはログインが必要な場合があります。広告を最終納品する前に、アカウントで現在の掲載位置オーバーレイを確認してください。2026-07-10 確認済み。

経験的な観察事項：

  • AI 画像／動画ジェネレーターは、文字のような魅力的なテクスチャを生成できても、正確な綴り、カーニング、句読点、ブランド固有のグリフ、多言語テキストを崩すことがあります。背景、タイポグラフィのムードフレーム、または抽象的な文字の動きに使用する場合も、グリフの正確さを確認してください。
  • デスクトップのプレビューでは読みやすく見えるモーションテキストも、プラットフォームの画面表示、圧縮、反射光、親指、キャプション、短い視聴時間の影響で、スマートフォンでは読みにくくなることがよくあります。
  • 速いキネティックタイポグラフィは、単体では印象的に感じられても、すべての単語が同じ強さで動くと疲れやすくなります。

制作上のヒューリスティクス：

  • まず読みやすくし、次に表現力を持たせ、最後に目新しさを加えます。
  • 意味を伝える最小単位を動かします。ブロック、行、単語、音節、グリフ、ストローク、テクスチャが該当します。単位が小さいほど活気が増す一方、リスクも高まります。
  • 関係性や状態の変化を明確にするために動きを使います。動きによって明確化、強調、ペース調整、または楽しさのいずれも得られない場合は、取り除きます。
  • ショットを作る前にテキストシステムを構築します。文字の役割、セーフゾーン、タイミングのルール、モーションの語彙、ブランド上の制約、アクセシビリティの限界、QA の確認項目を定めます。

まずテキストの役割を定める

デザインを考える前に、各テキスト要素を分類します。

  • メインタイトル：作品を告げ、最も強いトーンを伝えます。表現豊かでも構いませんが、読みやすさは損なわないようにします。
  • タイトルカード／中間タイトル：章を切り替え、物語の展開を凝縮し、期待感を生み出します。ナレーションがなくても成立する必要があります。
  • ローワーサード：ほかのコンテンツが主役のまま、人、場所、製品、出典、指標を示します。控えめに表示し、読むのに十分な時間を確保してから、カットを邪魔せずに消します。
  • デザインとしてのキャプション：話し声や音楽を補強しながら、ビジュアル表現の一部になります。アクセシブルなキャプションの代わりに使う場合でも、ろう者や難聴者に役立つ必要があります。
  • 歌詞／テキスト動画：テキストを主役のパフォーマンスにします。テンポ、改行、感情を伝える動きが編集そのものです。
  • ソーシャルフック：最初の数秒で、すぐに興味を引きます。プラットフォームのオーバーレイや速いスクロールにも対応できる必要があります。
  • CTA／スーパー／法的表示：必須のメッセージを伝えます。装飾よりも明瞭さ、コンプライアンス、安全な配置を優先します。

各要素について、役割を一行で書きます。

  • 「挑発的なフレーズ一つで、最初の2秒の視線を引きつける。」
  • 「手や顔を隠さずに、話者を特定する。」
  • 「すべての歌詞を読みやすく保ちながら、サビを一体感のある合唱のように感じさせる。」
  • 「同じ視線の流れの中で、製品の訴求とその根拠を見せる。」

役割が曖昧だと、デザインはありきたりな動きに流されてしまいます。

タイポグラフィの階層を組み立てる

アニメーションを選ぶ前に、役割を定義します。

  • プライマリー：今すぐ視聴者に読んでもらうものです。
  • セカンダリー：プライマリーのメッセージの後に読める補足情報です。
  • ターシャリー：出典、日付、ラベル、ハンドル名、開示情報、メタデータです。
  • アンビエント：装飾的な文字、大きくトリミングした単語、文字によるテクスチャ、必読ではない反復フレーズです。

コントラストを意図的に使います。

  • サイズ：階層を最もすばやく伝えられますが、セーフエリアを消費します。
  • ウェイト：強調に役立ちますが、1つのフレームで多くのウェイトを使いすぎないようにします。
  • 大文字・小文字：短いラベルやインパクトのある単語にはすべて大文字も使えますが、字間を調整し、長いすべて大文字の文章は避けます。
  • 幅：コンデンス体はスペースを節約できますが、読みやすさを損なう場合があります。エクスパンデッド体は高級感や映画のような印象を与えますが、広いスペースが必要です。
  • 色と明度：静止画だけでなく、動きの中でも文字が背景から見分けられる必要があります。
  • 位置：上部、中央、ローワーサード、サイドレール、全画面タイトルのどこに置くかで、重要度の印象が変わります。
  • 動き：速く、早く、大きく、または弾力的に動くほど、重要に見えます。

すべてのコントラストの軸を一度に使わないでください。力強いタイトルは、多くの場合、1つの主要なコントラストと1つの補助的なコントラストで構成されます。

モーションテキストの読みやすさに関するルール

アートボードではなく、実際の配信環境を想定してデザインします。

次の条件を確認してください。

  • 対象デバイスのうち最も小さいものと、想定される視聴距離。
  • アスペクト比とトリミングのバリエーション。
  • 背景の動き、コントラストの変化、圧縮。
  • プラットフォームの UI オーバーレイ、字幕、プロフィールハンドル、ボタン、広告の CTA。
  • 視聴者が音声を再生できるか、ミュートで視聴するか、字幕に頼るか。
  • テキストが正確さを保つべきブランド／法務文言か、柔軟に変更できる編集上の文言か。

実用的なガードレール：

  • 重要な読ませるテキストは対象プラットフォームのセーフエリア内に配置するか、プラットフォーム別のバージョンを作成します。
  • 重要なフレーズはすべて、表示後、消える前に、読める時間を確保します。
  • 重要なテキストを、顔、手、目、小さな製品のディテール、字幕、動きの激しい背景領域に重ねないようにします。
  • テキストの背後で背景が変化する場合は、プレート、グラデーション、シャドウ、ぼかし、ストローク、または暗転処理を加えます。
  • エディター上だけでなく、出力サイズ 100％とスマートフォンで確認します。
  • ブランドで別の指定がない限り、長めのフレーズには文頭のみ大文字を使います。
  • 1 つのフレームで同時に扱うテキストの主題は、2 つを超えないようにします。

字幕については、放送や教育分野の慣例が、デザイン性の高いソーシャルコンテンツでも参考になりますが、絶対的な基準ではありません。DCMP のガイダンスでは、読み取れる長さの短い字幕表示時間、2 行以内、安全領域への配置が推奨されています。コンテンツ、視聴者、プラットフォームに応じて必要な場合にのみ、より短い、または長い設定を使用してください。

改行は編集上の判断です

改行によって意味、リズム、視覚的なバランスが変わります。確認せずに、ヒーローテキストの自動折り返しを採用しないでください。

英語など、単語をスペースで区切る文字体系では：

  • 名詞句、動詞句、対比の組み合わせ、前振りと結論など、意味のまとまりで改行します。
  • 修飾語は、修飾する語と切り離さないようにします。
  • 1 行が不自然に感じられるほど短い語だけが残らないようにします。
  • 名前、単位付きの数値、製品名、URL、ハンドル、ハッシュタグ、法務文言を分割しないようにします。
  • 行の長さでリズムを作ります。強い印象を与える場合は短い行を、落ち着いて説明する場合は幅広の行を使います。

多言語や複数の文字体系が混在する制作では：

  • 対象言語、ロケール、文字体系、読み方向、承認済みの翻訳を確認します。
  • 英語の大文字表記、単語間のスペース、改行の慣例を、ほかの文字体系にそのまま適用しないでください。
  • アラビア文字やインド系文字には適切な字形処理を使用します。字形の分離によって意味や読みやすさが変わる場合は、個々の字形をアニメーションさせないでください。
  • 右から左に読むテキストでは、英語のレイアウトを単に反転させるのではなく、表示方向と読む順序を意図的にデザインします。
  • CJK では、ロケールに適した改行ルールを確認し、句読点が不適切に行頭や行末に来ないようにします。
  • タイ語、ラオス語、クメール語など、単語間に目に見えるスペースがない文字体系では、その言語に適したテキストエンジンまたは改行処理を使用します。
  • 拡張できる余地を残します。翻訳後のテキストは長さや行数が変わる可能性があるため、1 つのレイアウトに押し込むのではなく、バリエーションをデザインしてください。

テキストをローカライズする場合は、「意味の固定条件」と「レイアウトの固定条件」を定義します。

  • 意味の固定条件：変更できない単語、名前、数値、開示事項、主張。
  • レイアウトの固定条件：最大行数、セーフエリアの枠、おおよその強調箇所、表示時間の予算。

両方を満たす翻訳ができない場合は、文字を読めないほど小さくするのではなく、エスカレーションしてください。

タイミング：表示、保持、退出

テキストの各ビートには、タイミングを設定した3つの状態が必要です。

表示：

  • 視線を向ける場所を示します。
  • トーンと重要度を伝えます。
  • 視聴者がフレーズを認識する前に、過剰にアニメーションさせないようにします。

保持：

  • 視聴者が実際に読めるようにします。
  • 内容を理解できる程度にテキストを安定させます。
  • ムードを高め、可読性を損なわない場合に限り、微細な動きを使います。

退出：

  • カット、トランジション、または次のアイデアに備えます。
  • 最後の単語が読まれる前に退出させないようにします。
  • 退出は句読点のように使います。スナップ、ディゾルブ、ワイプ、ドリフト、収縮、カット、スミア、または分解などです。

タイミングの目安：

  • ソーシャルメディアのフックタイトル：意図的なサスペンスがコンセプトでない限り、最初の1秒以内に表示します。
  • ローワーサード：視聴者が人物や対象を見てから表示し、最初の完全な識別の瞬間まで保持します。
  • メインタイトル：表示が複雑でも、明瞭なヒーロー表示の時間を設けます。
  • デザインとしてのキャプション：音声や音楽に同期させますが、単語ごとの混乱よりも読みやすいフレーズを優先します。
  • リリックビデオ：表示のタイミングは音楽の拍子に合わせ、保持時間は意味に合わせます。
  • 法的表示／開示事項：意図的に隠しているように見えるほど速くアニメーションさせないでください。

秒数だけでタイミングを決めないでください。視聴者の注意に合わせて決めます。

  • テキストが表示される前、視聴者は何を見ていますか？
  • どの視覚的な出来事がテキストと競合しますか？
  • どの音のビートが動きを正当化しますか？
  • 次のカットまでに、何を理解してもらう必要がありますか？

モーションの意味づけ

動きには意味を持たせる必要があります。少数の動きの語彙を作り、一貫して再利用してください。

一般的な対応関係：

  • 上昇または持ち上げる：出現、楽観、ステータス、起動。
  • 落下または下げる：結果、重み、失敗、衝撃。
  • 発生源の方向からスライド：到着、帰属、会話への参加。
  • 拡大：重要性、自信、近接感。多用すると安っぽく感じられることがあります。
  • 縮小：精密さ、圧縮、気づき。
  • ぼかしからフォーカス：発見、明確化、記憶。
  • ワイプ／リビール：証明、公開、編集上の確信。
  • タイプオン：プロセス、証拠、思考の実況、計算。
  • スクランブル／グリッチ：不確実性、エラー、サイバーな美学。強くしすぎると可読性やアクセシビリティを損なうため、注意が必要です。
  • ストレッチ／スクワッシュ：遊び心、触感、音楽性。
  • トラッキングの拡張：高級感、呼吸、距離、映画的な間。
  • キネティックコリジョン：対立、ユーモア、強調、衝撃。
  • オブジェクトの背後にマスキング：空間への統合、高品質なコンポジット、リアリズム。

重要な場面では表現力の高い動きを、補助的なラベルには効果的で控えめな動きを使います。IBM Carbonのモーションガイダンスでは、控えめで実用的な動きと、より目立つ表現力豊かな動きを区別しています。この区別は、UI以外のタイトルシステムにも役立ちます。

セーフエリアとプラットフォーム別のバリエーション

セーフエリアは変わりやすいものです。書き出し時に、配置場所、アカウント、広告プロダクトに合わせて確認してください。

2026-07-10時点の確認内容：

  • TikTokの広告ドキュメントでは、テキスト／ロゴをセーフゾーン内に収める必要があると説明しています。セーフゾーンのサイズはフォーマット、キャプションの長さ、追加要素によって異なるため、納品前に実際のエフェクトをプレビューしてください。
  • Google Adsでは、動画広告用のセーフエリアの参照資料とテンプレートを提供しており、セーフエリア外に配置すると、一部の広告掲載枠で重要な要素が隠れる可能性があると警告しています。
  • Metaでは、Ads ManagerでReelsとStoriesの広告向けにセーフゾーンのガイドラインを提供していますが、一般公開のヘルプページにはログインが必要な場合があります。最終納品前に、アカウントのプレビュー／ガイドラインを使用してください。
  • サードパーティのShorts向けセーフゾーンツールでは、YouTube Shortsを一般に9:16とし、画面上部、下部、右側のUIが重なるリスクを示しています。これらは便利なオーバーレイとして利用し、プラットフォームの公式な保証として扱わないでください。メディアを購入する際は、YouTube／Googleの広告ツールで確認してください。

制作ルール：1つのアセットをTikTok、Reels、Shorts、有料広告で共用する必要がある場合は、重要なメッセージを中央の余裕を持たせた領域に配置し、CTA、キャプション、ローワーサードについてはプラットフォームごとに書き出してください。

ブランドの制約

デザインの前に、以下を確認してください。

  • 承認済みの書体、代替フォント、動画への埋め込みに関するフォントライセンス。
  • ロゴのクリアスペースと最小サイズ。
  • カラーパレット、コントラスト要件、使用禁止の組み合わせ。
  • ブランドの語り口：穏やか、ウィットに富む、プレミアム、攻撃的、エディトリアル、遊び心のある、格式高い。
  • モーションの原則：キビキビした、シネマティック、控えめ、弾力のある、機械的、有機的。
  • 必須の単語、法的文言、商標の表記形式、句読点、大文字・小文字、発音。
  • ローカライズ要件と対象市場。

ブランドシステムが存在しない場合は、簡易的なものを作成してください。

  • 見出し用書体、または見出し用の処理を1つ。
  • 読みやすさを支える書体を1つ。
  • テキストの役割を3つ：ヒーロー、補助、メタデータ。
  • モーションの強度を2つ：機能的、表現的。
  • アスペクト比ごとにセーフエリアのグリッドを1つ。
  • コントラストまたは背景プレートのルールを1つ。

商標の表記スタイルを創作しないでください。大文字・小文字、記号、アクセント記号、登録商標・商標記号、モデル番号、URL、法的文言はそのまま保持してください。

アクセシビリティと安全性

アクセシビリティをデザインブリーフの一部として扱ってください。

チェックリスト：

  • コントラスト：モーション中もテキストを判読できる状態にしてください。最良のフレームではなく、最も悪いフレームで確認してください。
  • モーションへの配慮：視聴者がオフにできない場合は、不要なカメラシェイク、強いズームのループ、急速な揺れ、大きな視差の反復を避けてください。
  • 点滅：WCAGのしきい値を下回ることが確認されている場合を除き、1秒間に3回を超える点滅は避けてください。全画面の高コントラストの点滅には、さらに厳しい基準を設けてください。
  • 読む時間：重要なテキストは、対象視聴者と内容の複雑さに応じて十分な時間表示してください。
  • キャプション：デザイン上のキャプションで標準のキャプションを置き換える場合は、重要な発話と意味のある非音声の音声をすべて含めてください。
  • 音声なしでの理解：タイトルカードとフックは、ミュート時にも内容が伝わるようにしてください。
  • ディスレクシア／認知負荷：詰め込みすぎた間隔、過度な全大文字の文章、頻繁に変わるフォント、密度の高い説明での単語単位のアニメーションを避けてください。
  • 色への依存：話者、状態、エラー、強調を伝えるために色だけを使わないでください。

安全性に確信が持てない場合は、点滅のコントラストを下げ、トランジションを遅くし、交互表示をなくすか、点滅をワイプ、暗転、ぼかし、単発のインパクトカットに置き換えてください。

プロンプトと仕様

生成ツールを使う場合、タイポグラフィをアートディレクションと忠実度の制約の両方として明示してください。

以下を含めてください。

  • 正確なテキストと許容されるバリエーション。
  • 言語・文字体系と読み方向。
  • フォント名だけでなく、書体の個性：ジオメトリックサンセリフ、エディトリアルセリフ、コンデンスグロテスク、等幅ターミナル、手描きブラシ体など。
  • 階層：プライマリ／セカンダリ／ターシャリの役割。
  • レイアウト：アスペクト比、セーフエリア、位置、行数。
  • タイミング：表示、保持、終了の時間または拍。
  • モーションの意味：その動き方をする理由。
  • 背景との関係：背景プレート、マスク、奥行き、相互作用、分離。
  • アクセシビリティの制限：コントラスト、点滅、動きの軽減、読みやすい表示時間。
  • 納品形式：編集可能なレイヤー、アルファ、ベクター、完成動画、字幕、プロンプトのみのコンセプト。

「かっこいいキネティックタイポグラフィ」のような曖昧な依頼は避け、テキストシステムに置き換えてください。

  • 「STOP SCROLLING のフレーズを、太いコンデンスサンセリフの2段組みで表示します。中央のセーフエリアに、黒地に白で配置します。最初のドラムの音で勢いよく出現し、6％オーバーシュートした後、0.35秒までに安定させ、1.0秒間静止させてからカットアウトします。ちらつきやグリッチはありません。」

AI動画／画像のプロンプトには、復旧プランを追加してください。

  • 「文字を正確に生成できない場合は、テキストなしの背景プレートを生成し、タイポグラフィは別途レンダリングしてください。」

実装への引き継ぎ

ほかのエージェントやデザイナーが推測せずに制作できるよう、キネティックタイポグラフィの仕様を引き継ぎます。

最低限、以下を指定します。

  • キャンバス：解像度、アスペクト比、フレームレート、尺。
  • テキスト一覧：正確な文言、役割、言語、必要に応じて発音。
  • レイアウト：バウンディングボックス、配置、安全領域の制約、レスポンシブ／クロップのバリエーション。
  • タイポグラフィ：フォントファミリーまたはカテゴリ、ウェイト、サイズ範囲、トラッキング、行送り、大文字・小文字、色、エフェクト。
  • タイミング：開始／終了フレームまたはタイムコード、表示／ホールド／退場、音声やカットとの同期ポイント。
  • モーション：トランスフォームのプロパティ、イージング、強度、スタガー、マスク、ぼかし、変形、物理挙動に関する注記。
  • 背景との相互作用：プレート、マット、オクルージョン、シャドウ、減光、衝突、奥行き順。
  • アクセシビリティ：コントラスト目標、点滅の確認、必要に応じた動きを抑えた代替版、字幕の完全性。
  • ローカライズ：文字量の拡張許容範囲、改行ルール、RTL／CJKへの配慮、レビュー担当者。
  • QA：デバイス／プラットフォームの確認、テキストの正確性確認、ブランド／法務の承認。

可能な限り、実装にはフレーム番号を使ってください。ツールでフレームを指定できない場合に限り、秒数を使います。

反復ワークフロー

次の順番でレビューします。

  1. テキストの正確性：スペル、句読点、大文字・小文字、名称、数字、法的文言、言語。
  2. 読みやすさ：動画の再生中に、対象の視聴者が対象デバイスで読めるか。
  3. 階層：視線が最初に適切なフレーズへ向かうか。
  4. タイミング：表示／ホールド／退場が編集や音声に合っているか。
  5. モーションの意味：モーションがメッセージを強めているか。
  6. 安全領域：プラットフォームのUIが重要なテキストに重なっていないか。
  7. ブランド：処理がブランドの書体、トーン、モーションのルールに合っているか。
  8. アクセシビリティ／安全性：コントラスト、点滅、モーションの強度、字幕の完全性。
  9. 仕上がり：カーニング、改行、イージング、マスク、配置、視覚的なバランス、圧縮アーティファクト。

静止フレームだけを見て反復しないでください。スクラブして再生し、スマートフォンで視聴して、最も見づらいフレームを確認してください。

よくある失敗

  • テキストに誤字がある、またはAIが幻覚した文言になっている。
  • 表示は美しいが、ホールド時間が短すぎる。
  • すべての単語がアニメーションするため、重要な単語が際立たない。
  • ローワーサードが字幕、顔、手、製品の動作に重なる。
  • あるプラットフォームのセーフゾーンに関する前提を、別のプラットフォームにも流用している。
  • 法的文言やCTAテキストを、読めないほど小さな文字に詰め込んでいる。
  • ブランドフォントが利用できない、黙って別のフォントに置き換えられる、またはライセンスがない。
  • ローカライズ後のテキストがボックスに収まらず、読めるサイズを下回るまで縮小して解決している。
  • グリッチ／フリッカー効果によって点滅のリスクが生じる、または文字が読めなくなる。
  • モーションの方向が読み進める方向やストーリーの意味と食い違っている。
  • 1フレームだけでテキストのコントラストを確認し、動く映像の上ではコントラストが不足している。

例：ソーシャル向けフック

意図：縦型ソーシャル広告のフック。食事計画アプリ向け。9:16。音声なしでの視聴を最優先。

仕様：

  • テキスト：Dinner decisions are stealing your week.
  • 役割：メインのフック。
  • レイアウト：中央の安全領域内に2行で配置。右側のUI領域と下部の字幕／CTA領域を避ける。
  • 書体：太めのヒューマニスト系サンセリフ。文頭のみ大文字にし、行送りは詰めつつ読みやすくする。
  • モーション：Dinner decisionsを1つのブロックとして8フレームかけて上にスライドさせる。続いて、stealing your weekをわずかな遅れを加えて左から右へワイプ表示し、その後ホールドする。
  • 30 fpsでのタイミング：表示 0:00-0:14、ホールド 0:14-1:18、1:18のカットで退場。
  • 背景：テキストの背後にある調理中の映像を35%暗くする。圧縮テストで必要な場合に限り、柔らかなシャドウを追加する。
  • 安全性：フラッシュなし、グリッチなし、安定したホールド。
  • QA：プラットフォームのUIを重ねた状態でスマートフォン用プレビューを確認し、句読点まで含めて正確性を確認する。

このように構成する理由：テキストの役割はスクロールを止めることです。そのため、短い一文に絞り、伝えるアイデアを1つにまとめています。モーションは時間を失う感覚を強めつつ、読める長さのホールドを確保しています。

例：メインタイトル

意図：ゆっくりとしたマクロの商品映像に重ねる、プレミアムブランドの映像タイトルです。

仕様：

  • テキスト：Built for the long run
  • 役割：メインタイトルです。
  • レイアウト：16:9では中央揃えで1行、9:16では視覚的な区切りを設けて2行にします：Built for / the long run。
  • 書体：コントラストの強いエレガントなセリフ体、またはブランド用ディスプレイ書体を使用します。圧縮や小さな画面が想定される場合は、細いヘアラインを避けます。
  • 動き：文字のトラッキングをやや広げた状態で始め、カメラのプッシュインが緩やかになるのに合わせて、32フレームかけて内側に落ち着かせます。文字ごとのバウンスは使いません。
  • タイミング：商品のシルエットが認識できるようになってから表示を開始し、次のカットに移る前に、少なくとも一度深呼吸できる長さだけ表示し続けます。
  • 背景：文字の背後に暗色から中間色へのグラデーションプレートを置きます。商品のロゴを遮らないようにします。
  • アクセシビリティ：点滅させません。商品で最も明るいハイライトを基準にコントラストを確認します。

この構成にする理由：プレミアムな印象は、多数のアニメーション効果ではなく、抑制、余白、そしてすっきりとした表示の継続によって生まれます。

例：デザインとしての字幕

意図：解説動画で、デザインされた字幕を映像のリズムの中心として使います。

仕様：

  • 話し言葉のセリフ："The trick is not doing more. It is removing the decision."
  • 字幕テキスト：Not doing more. の後に Removing the decision. を表示します。
  • 役割：アクセシブルな字幕と強調グラフィックです。
  • レイアウト：画面下部のセーフエリアより上に配置し、下端には置きません。最大2行にします。
  • 書体：読みやすいサンセリフ体を使用し、半透明のチャコール色の角丸プレートに白い文字を載せます。
  • 動き：最初の節は話し始めに表示してそのまま保ち、その後、more の文字を穏やかにフェードアウトします。2つ目の節は、滑らかに上へワイプして置き換え、decision をブランドのアクセントカラーで強調します。
  • タイミング：すべての単語ではなく、話し言葉のフレーズの区切りに同期させます。
  • アクセシビリティ：話し言葉の意味をすべて含めます。アクセントカラーだけに頼らず、図を覆わないようにします。

この構成にする理由：話し手の意味を保ちながら、理解しやすいように字幕を編集しています。動きによって、概念の転換を示しています。

参考資料

現在のプロジェクト仕様の代わりではなく、根拠資料として使用してください。

コメント

Markdown 対応