106.9K+ダウンロード
使い方ガイドへスキップ
Logo Animation作者 iart-ai

Logo Animation スキル。

既存ロゴを1つの明快な演出で動かし、原形に忠実な静止代替も用意します。

  • ロゴモーション
  • ブランド
OpenDesignをダウンロード使い方ガイドを見る
ソースレビュー · logo-animationSKILL.md
タスク 既存ロゴを1つの明快な演出で動かし、原形に忠実な静止代替も用意します。 成果物 選んだ Web・Lottie・動画形式の動くブランドマーク。 始める前に 使えるベクター原稿、余白ルール、設置場所を用意します。Web モーション、Lottie、動画のどれが必要か決め、登場タイミングを定める前にサウンドロゴのアクセントを提供してください。
記事用の要約 · ソース確認日 2026-11-02 · 生成された例ではありません

01 機能概要

既存ロゴを1つの明快な演出で動かし、原形に忠実な静止代替も用意します

形状と余白を保ち、音のタイミングと動きを減らす設定に対応した SVG・Lottie・動画のロゴ演出を計画します。

ソースに基づくワークフロー実行ベンチマークではありません

作業の進め方

logo-animation は1つの主要技法で既存ブランドマークを動かします。形状と用途に応じて、線の描画、マスク、段階的な組み立て、モーフィング、控えめな待機ループから選びます。最終的なブランドマークと規定余白を常に基準にします。

この Skill は Web、Lottie、レンダリング動画を扱い、出力ごとに異なる方法を使います。Web では1つの HTML ファイルと1つのアニメーション制御を使います。最終フレームの静止代替も出力し、音主導の演出では意図した音のアクセントに合わせて動きを収束させます。

想定される成果物

  • 選んだ Web・Lottie・動画形式の動くブランドマーク。
  • 最終フレームの静止代替となる SVG または PNG。
  • 開始・中間・収束状態を確認できるプレビュー。
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    登場の仕組みを選ぶ

    マークが線、塗り形状、独立パーツのどれでできているか確認します。形状を尊重する技法を選びます。

  2. 02
    最終マークまでの順序を決める

    出現順とタイミングを設定します。サウンドロゴがある場合、後付けせず、最後の収束を音のアクセントに合わせます。

  3. 03
    着地と代替表示を確認する

    代表的な時点を固定し、余白と線の完成を確認します。動きを減らす設定では完成ロゴが即座に表示されることも確かめます。

02 利用場面

使いどころ

使えるベクター原稿、余白ルール、設置場所を用意します。Web モーション、Lottie、動画のどれが必要か決め、登場タイミングを定める前にサウンドロゴのアクセントを提供してください。

向いているケース

  • 短いブランドイントロ既存マークを使う Web のヒーロー、製品スプラッシュ、動画の締めに使えます。
  • SVG の部品が存在する個別指定できる形状やグループがあれば、アイデンティティを作り直さず明快な演出を作れます。

確認すべき制限

  • 使えるマークが前提これはアニメーションの手順です。ラスター画像からの再構築は別の要件です。
  • 出力先でツールが変わる単独 SVG プレビュー、Lottie アセット、エンコード動画は、異なるプレーヤーや書き出しツールを必要とします。

用意する入力

  • ロゴのソースベクター原稿とブランドの形状・余白ルールを提供します。
  • 設置場所ヘッダー、スプラッシュ、ローダー、動画の文脈と利用可能な空間を説明します。
  • タイミングと音声登場時間、ループ動作、サウンドロゴのアクセントを指定します。

03 重要な判断

重要な判断

  1. 認識しやすい1つの発想

    単一の登場手法で、移行中もロゴの読み取りやすさを保ちます。

  2. 整った静止状態

    静止代替はポスターフレームと動きを減らす表示に対応します。

  3. 音に結び付く完了

    収束を音のアクセントに合わせ、音と視覚のアイデンティティを結び付けます。

04 依頼例

目的を絞った依頼文を試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

ソースとセットアップを確認する

ベクター原稿とブランドの形状・余白ルールを提供します。

アップストリームのソースファイル
https://github.com/iart-ai/motion-design-skills/blob/3c129f769d90a1328c209c386492333c9ac62312/skills/logo-animation/SKILL.md

以下の参照先から、提供元の手順を確認できます。利用前にリポジトリのセットアップ要件を確認してください。これはインストールコマンドではありません。

一つの成果物から始める

スキルを実行する前に、このブリーフの範囲、素材、制約を調整してください。

サンプルブリーフ
logo-animation を使い、提供した SVG ワードマークをサイトのイントロにしてください。既存パスに合う控えめな登場技法を1つ選び、元の比率と余白を維持してください。演出全体を2秒未満にし、正確な静止マークで終えてください。単独 HTML プレビューでは制御手段を1つにし、固定時刻で繰り返し確認できるようにして、静止 SVG 代替も納品してください。サウンドロゴは終盤にアクセントがあります。収束時刻を決める前に確認してください。動きを減らす設定で完成マークが即座に出ることを検証してください。

結果を確認する

実際の出力を、次の観察可能な基準に照らして確認してください。

  • 最終状態を提供ロゴの形状と比較する。
  • 線の完成、余白、中間状態の欠けを確認する。
  • 動きを減らす設定と、音声がある場合の同期を確認する。

OpenDesignは、コーディングエージェント向けのローカルデザインワークスペースを提供します。この掲載は、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味しません。

OpenDesignをダウンロードクイックスタートを読む

05 ソースとライセンス

ソースとライセンス

このページは、下記にリンクされた固定のソースリビジョンについて説明しています。アップストリームの挙動や要件は変更される可能性があります。

ソースの所有者
iart-ai
リポジトリ
iart-ai/motion-design-skills
スキルファイル
SKILL.md
ライセンス
MIT
確認したスナップショット
2026-11-02 · 3c129f769d90
編集部によるソース要約
既存ロゴを1つの明快な演出で動かし、原形に忠実な静止代替も用意します。

リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付時点の人気の指標であり、スキルの利用状況や品質スコアではありません。

06 開始前の質問

始める前の質問

複数の技法を組み合わせるべきですか？

ソースは描画、組み立て、モーフィングなど1つの明快な仕組みを勧め、無差別な重ね合わせを避けます。

Lottie を出力できますか？

Lottie は文書化された出力先の1つで、対応プレーヤーと静止代替を伴います。アセットと再生の独立した検証が必要です。

動きを減らす設定ではどうなりますか？

文書化された代替は登場演出をせず最終マークを表示し、認識をアニメーション視聴に依存させません。

OpenDesign

依頼内容とデザイン作業を一つの場所に。

ブリーフ、ソース資料、デザイン作業をローカルワークスペースにまとめて管理できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

OpenDesignをダウンロードデザインスキルを見る
アップストリームのソースファイル
https://github.com/iart-ai/motion-design-skills/blob/3c129f769d90a1328c209c386492333c9ac62312/skills/logo-animation/SKILL.md