article-highlights について
article-highlightsは、ニュースやトレンド向けに実際の記事抜粋を見せるRemotion動画制作スキルです。Instagram向けの画面構成、編集的なデザイン、マーカーのアニメーション、確認手順を定めています。
主な機能
- 01記事抜粋のシーン制作
- 024:3と9:16の画面形式
- 03紙・マーカー・文字のレイヤー構成
- 04ハイライトを順番にアニメーション
- 05レンダーと可読性の確認
活用シーン
- 01ニュースやリリース情報の提示
- 02記事抜粋によるトレンドの裏付け
- 03ターミナル以外の証拠シーン制作
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/article-highlightsを入力して読み込まれたか確認します。
詳細
記事のハイライト
ターミナルでは不自然に感じられる、ニュース、リリース、トレンド、記事の根拠を示す場面では、remotion-best-practices、motion-graphics、cinematic-camera と組み合わせて使用します。
必須の事前確認
コーディングの前に、不足している判断事項を確認します。
どの形式にしますか？ 4:3 の画面半分の Instagram 挿入映像、または 9:16 の全画面 Instagram ですか？ また、背景はどれにしますか？ 暖色系の明るい背景、すっきりした暗い背景、明るいグリッド、暗いグリッドのいずれかをお選びください。
- 4:3 の挿入映像：1440×1080。9:16 フレームのおよそ半分のサイズでも読みやすいデザインにします。
- 9:16 の全画面：1080×1920。字幕やインターフェースの領域を考慮します。
- 16:9 は明示的に指定された場合のみ使用します。
- 背景の選択をユーザーに委ねられた場合は、暖色系の明るい背景を使用します。
すっきりした暗い背景や暗いグリッドのシーンでも、記事の紙面は明るいままにできます。構図全体を暗くする変更を、確認なしに行わないでください。
絶対に使用しない視覚表現
ネオン、グロー、ブルーム、発光するエッジ、色付きの影、シアンから紫へのグラデーション、グラデーションのオーブ、放射状の色のにじみ、グラスモーフィズム、サイバーパンク風の照明、雰囲気を優先した AI 装飾は一切使用しません。ハイライトは光を放つのではなく、実際のマーカーや紙による表現に見える必要があります。
禁止されている表現は、納品前に必ず取り除いてください。
承認済みの参考資料
コーディングの前に、assets/examples/article-highlight.mp4 とコンタクトシート／参考フレームを確認します。編集上の階層構造、ゆとりのある紙面、控えめなマーカー表現、ゆっくりとしたカメラ、読みやすさを引き継ぎます。ローカルアセットが利用できない場合は、公式リポジトリのギャラリーを使用します：https://github.com/Liamrjohnston/remotion-motion-graphics-skill
使用する場面
次の用途に使用します。
- 情報、ニュース、リリース、トレンドを伝える場面。
- 「何かが変わった、または公開された」ことを示す根拠。
- 意味のあるフレーズがハイライトされた、実際の記事の抜粋。
- 編集素材によって要点が明確になる、ターミナル以外の根拠提示。
CLI／セットアップ／エージェントの実行に関するストーリーには、terminal-inserts を使用します。製品のデモが目的の場面では、本物の製品映像や UI を使用します。
基本構成
マーカーの線をテキストの背後に配置する必要がある場合は、記事を平坦化しないでください。レイヤー構造の Remotion DOM／SVG を構築します。
- 選択したシーンの背景。
- 十分なセーフパディングを設けた、編集記事風の紙面／カード。
- 紙面の上に配置する Rough.js／SVG のマーカーレイヤー。
- マーカーの上に配置する DOM／SVG のテキスト。
マーカーは文字の背後に、紙面の上にあることがはっきり分かるように配置します。
素材とレイアウト
- 紙面：暖かみのある白／オフホワイト。中立色の枠線と柔らかな中立色の影を付け、色付きのグローは使用しません。
- タイポグラフィ：記事／ニュースらしい階層構造にします。小さなセクションラベル、大きなセリフ体／編集記事風の見出し、控えめな署名・日付、短い本文は最大 2～3 行です。
- ハイライト：彩度を抑えた黄色など、半透明で控えめな実際のマーカー色を使用します。蛍光色は使用しません。
- 実際の記事／出典の情報と、提供された文章を使用します。媒体名、日付、主張、引用を捏造しないでください。
- 意図的に改行し、変形後のセーフマージンの内側にテキストを収めます。
- タイトルスライドのように中央揃えにしないでください。本物の記事の抜粋のように見せます。
- 表示サイズで読めない場合は、重要でないピル、ボタン、出典情報などの雑然とした要素を取り除きます。
アニメーション
- 承認済みの参考資料に沿う場合に限り、冒頭で控えめなぼかしからピントが合う短い演出を入れます。ぼかしは光学的なピント合わせであり、グローではありません。
- ピントが合う初期段階では、マーカーを表示しません。
- ゆっくりとした控えめなカメラのプッシュインと、抑制したパース回転を使用します。
- ピントが安定してからマーカーの線を表示します。
- 各ハイライトはマスク／ワイプを使い、左から右へ描画します。
- ハイライトは順番に表示し、すべてを一度に表示しないでください。
- 重要なフレーズがすべて読める状態で、安定して静止する時間を設けて終わります。
- アニメーションには
useCurrentFrame()、spring()、interpolate()を使用します。CSS アニメーションは使用しません。
ハイライターのルール
- rough.js または不規則な形状の SVG マーカーを使用します。
- マーカーはテキストの背後に配置します。
- 少し不揃いな形は効果的ですが、完全に整ったグラデーションの長方形は避けます。
- 段落全体ではなく、意味があり、検証済みのフレーズだけをハイライトします。
- マーカーの不透明度は、テキストのコントラストを保てる値にします。
- 蛍光色の黄色、発光、ぼかしのハロー、光るエッジは使用しません。
冗長なナレーションは避ける
記事や原文のテキストは、実際の根拠として使われる場合に限り表示できます。読み上げられるナレーションを単に繰り返す見出しは別途追加しないでください。実際の抜粋と、最小限の構成メタデータのみを使用してください。
初回確認の却下ゲート
以下のすべての回答が「いいえ」になるまで、納品しないでください。
- 形式または背景が未確認ですか？
- ネオン、発光、光るマーカー処理、色付きの影、グラデーションのかぶせ、またはグラスモーフィズムがありますか？
- 出典や記事の特定情報、または主張が捏造されていますか？
- カードがエディトリアルな画面ではなく、汎用的な中央揃えのタイトルスライドになっていますか？
- Instagramでの配置時に、重要なテキストが読みにくくなっていますか？
- マーカーがテキストの上に重なっていたり、テキストを隠していたり、表示が早すぎたりしますか？
- カメラによって紙が切れていたり、無駄な移動が生じたりしていますか？
- 承認済みの参考例が持つ抑制と洗練さが、成果物に欠けていますか？
ゲートを通過するまで、非公開で修正してください。
QAと納品
- 型チェックを行うか、最小限かつ有意義な検証を実行してください。
- ハイライトなしの序盤、中間のストローク、ハイライト完了時、最後の静止部分をレンダリングしてください。
- 序盤ではマーカーが見えず、テキストの背後にあり、最後には描画が完了していることを確認してください。
- クリッピング、読みにくいテキスト、捏造された出典情報、ネオンや発光、弱いフレーミングがないか確認してください。
- 寸法、長さ、正確なレンダリングコマンド、編集ソフトでの配置に関する注記を添えて、MP4を納品してください。