作業の進め方
pixel2motion はラスターのロゴを独立して動く部品に分け、編集可能な SVG 形状に再構築してから登場を演出します。元画像のアンチエイリアスを全ピクセル合わせるより、滑らかな縁、正しい余白形状、忠実な輪郭を優先します。
出力には静止ロゴ、操作可能な HTML モーション試作、確認用の証拠が含まれます。「最終フレームを検証済みの静止ロゴに一致させる」という要件が、形状の再構築とアニメーション制作を結びます。リプレイ、スローモーション、速度調整で演出を確認でき、タイムスタンプを指定するフックで難しい交差や受け渡しを調べられます。
想定される成果物
- 動く部品に安定した ID を持つ編集可能な logo.svg。
- 再生・速度・スロー操作付きの独立 logo_motion.html。
- 動きの仕様と、形状重ね合わせ・取得フレーム。
ブリーフからレビューまで
- 01動かす要素を特定する
元画像を確認し、図形とワードマークを区別して用途を選びます。形状を合わせる前にブランドの性格と登場順を記録します。
- 02最小の忠実な形を合わせる
複雑なパスを増やす前に基本図形と少数の滑らかな曲線を試します。描画を重ねて拡大した縁を確認します。IoU は診断指標であり共通の合格点ではありません。
- 03動かして着地点を比較する
安定した部品 ID で動きを作り、予備動作、動作、交差、収束を確認します。同じブラウザー・ビューポートで最終フレームと静止状態を比較します。