logo-animation

ロゴアニメーション

明確なアイデア、ブランドに沿った形状、そして鮮明な静止でブランドマークに命を吹き込みます。ウェブ（SVG/Lottie）、動画のイントロ／アウトロ、アプリのスプラッシュ画面向けにアニメーションを作成し、必ず静止した最終フレームのフォールバックも用意してください。

使用する場面

• イントロの短い演出、締めの演出、アプリのスプラッシュ画面、またはローダーのアイドルループを作成する。
• ランディングページのヒーローやショーリールでブランドマークを表示する。
• SVG マークを描画する、一つずつワイプ／組み立て表示する、またはアイコンをワードマークにモーフィングする。
• マークの最後の静止をサウンドロゴのビートに同期させる。

基本原則

ロゴごとに手法を1つだけ選びます。描画、組み立て、モーフィングのいずれか1つにし、すべてを同時に使わないでください。表示時間は0.8～2.5秒にします。ブランドの形状を変形させないでください。拡大縮小とフェードは安全ですが、通常、傾斜や押しつぶしは避けるべきです。クリアスペースを守り、マークの最小余白に動きの残像が入り込まないようにします。動きを伴わず最終マークを表示する prefers-reduced-motion の経路を必ず用意してください。

手法一覧

手法	最適な対象	仕組み
ストローク描画	線のマーク、モノグラム、サイン	stroke-dashoffset 1→0
マスクワイプ／表示	塗りつぶされた図形、グラデーション	<clipPath>／<mask> の rect をアニメーションさせる
組み立て表示（段階表示）	複数パーツのマーク、グリッド	グループごとに opacity+transform を段階的に適用
モーフィング	アイコン ↔ ワードマーク、図形→ロゴ	GSAP MorphSVG または対応するパスの補間
アイドルループ	ローダー、雰囲気を演出するスプラッシュ	シームレスな周期的変形（回転／パルス）
ワードマーク	ロゴタイプ	文字ごとにマスク／移動を段階的に適用

クイックスタート：SVG のストローク描画

ブランドに沿ったウェブ表示を最速で実現できます。各パスが自ら描画された後、塗りの表示が整います。

<svg viewBox="0 0 200 80" id="logo">
  <path class="ink" d="M10 60 L40 20 L70 60" fill="none"
        stroke="#111" stroke-width="6" stroke-linecap="round"
        pathLength="1" stroke-dasharray="1" stroke-dashoffset="1"/>
</svg>
<style>
  @keyframes draw { to { stroke-dashoffset: 0; } }
  #logo .ink { animation: draw 1.1s cubic-bezier(.65,0,.35,1) forwards; }
  @media (prefers-reduced-motion: reduce) {
    #logo .ink { animation: none; stroke-dashoffset: 0; }
  }
</style>

pathLength="1" を指定すると、すべてのパスの長さが1に正規化されるため、形状に関係なく1つの stroke-dasharray／offset の値を使用できます。複数のストロークを段階的に表示するには animation-delay を使います。

クイックスタート：段階表示で組み立てる（GSAP）

import gsap from "gsap";
// each <g class="piece"> is one mark component
gsap.from(".piece", {
  opacity: 0, scale: 0.85, transformOrigin: "50% 50%",
  duration: 0.5, ease: "back.out(1.6)", stagger: 0.08,
  onComplete: () => gsap.to("#mark", { scale: 1, duration: 0.2, ease: "power2.out" })
});

グループの順序が重要です。まずベース／コンテナーを表示し、次にアクセントを表示してから、最後にワードマークを表示すると、視線が名前に集まります。

サウンドロゴとの同期

音声がある場合、ブランドの最後の静止フレームを音のアクセント（「チン」という音や風切り音のピーク）にぴったり合わせる必要があります。まず音声を決め、ピークのタイムコードを特定してから、そのフレームでマークが不透明度／スケールともに最大になるよう表示のタイミングを調整します。1.0秒の表示が1.2秒のジングルに合わせて終わると高級感が生まれますが、音から独立して漂うように静止すると安っぽく感じられます。インパクトを加えるため、ビートに合わせて小さなオーバーシュートから静止させます（約0.15秒かけてスケールを1.04→1.00にする）。

納品形式

• ウェブ、インタラクティブ／ヒーロー：インライン SVG + CSS または GSAP。データ量が最小で、どのサイズでも鮮明に表示でき、スクリプトで制御できます。
• プロダクト／アプリ、デザイナー制作：Lottie（After Effects から Bodymovin 経由で書き出した .json）。lottie-web または @lottiefiles/dotlottie-web を使い、loop、autoplay、ポスター用のフォールバックフレームを設定します。
• 動画のイントロ／アウトロ：Remotion（React）または After Effects から ProRes／H.264 にレンダリングします。鮮明さを保つため、2倍の解像度で事前レンダリングしてください。

// Lottie delivery with reduced-motion guard
import { DotLottie } from "@lottiefiles/dotlottie-web";
const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
const dl = new DotLottie({
  canvas: document.querySelector("#logo-canvas"),
  src: "/logo.lottie", autoplay: !reduce, loop: false,
});
if (reduce) dl.addEventListener("load", () => dl.setFrame(dl.totalFrames - 1));

出力チェックリスト

• 対象形式（SVG／Lottie／動画）のアニメーション付きマーク。
• 動きを抑えた表示やポスター用の、静止した最終フレームのフォールバック（SVG または PNG）。
• 明確な手法を1つだけ使用し、表示時間は2.5秒以内、ブランドの形状を保ち、クリアスペースを確保する。
• サウンドロゴの静止を音声のピークに合わせる（音声がある場合）。

納品と検証（スタンドアロン HTML）

同梱ヘルパー（scripts/）：scripts/seek-shot.sh anim.html 0 1.5 3 は ?t=N のテストハーネスを固定し、各時点のスクリーンショットを撮影します。scripts/contact-sheet.sh sheet.png frame-*.png は画像をタイル状に並べ、一目で確認できるシートを作成します。詳しくは scripts/README.md をご覧ください。

ロゴアニメーションは、Web／SVG／Lottie、動画、アプリのスプラッシュ画面にまたがります。Web／SVG／Lottie 向けの納品には、このスタンドアロン HTML の手順を使用してください。動画のロゴスティングには、代わりに remotion-video の検証手順でレンダリングしてください。

Web／SVG／Lottie 向けには、ブラウザーで直接開ける単一の .html ファイルを納品します。インライン SVG マークアップに、リビール用の CSS または CDN GSAP の <script> を 1 つ加えた自己完結型のファイルです。この規模には 1 ファイルが適切です。

出力要件：

• .html ファイル 1 つ：インライン SVG（または Lottie キャンバス）と、インラインの <style>／<script> によるリビール。
• アニメーションドライバーは 1 つだけにします。CSS の @keyframes による描画／構築、または GSAP の単一タイムラインのいずれかを使い、両方は使いません。
• 以下の固定用ハーネスを、使用する手法に合わせて含めます。これにより、任意の時点を決定論的にスクリーンショット撮影できます。

固定用ハーネス — スクリーンショット撮影のためにフレームを固定します。 手法に合わせて仕組みを選択してください。

<script>
  const t = new URLSearchParams(location.search).get("t");
  if (t !== null) {
    const T = parseFloat(t);
    // CSS stroke-draw / build-on:
    document.querySelectorAll("#logo *").forEach(el => {
      el.style.animationDelay = (-T) + "s";
      el.style.animationPlayState = "paused";
    });
    // GSAP timeline instead? → tl.pause(); tl.seek(T);
    // SMIL <animate>?       → const s = document.querySelector("svg"); s.pauseAnimations(); s.setCurrentTime(T);
    // Lottie?               → dl.setFrame(Math.round(T * fps));
  }
  window.__ready = true;                                          // ready signal for headless wait
</script>

検証手順 — レンダリング → 固定 → スクリーンショット撮影 → 確認：

1. リビールの開始時／中間／終了時（≤2.5s）に固定した状態でファイルを開きます。…/logo.html?t=0、?t=<dur/2>、?t=<dur> を使用します。
2. 固定した各フレームのスクリーンショットを撮影します。
3. 忠実度（マークに一致し、手法が明確に 1 つであること）とアーティファクトを確認します。ブランドの形状が歪んでいないこと、クリアスペースに動きの残骸がないこと、終了フレームに描画途中のストロークが残っていないこと、静止した最終フレームが正確なロゴであることを確認します。
4. 反復します： 確認項目に不備がある場合（例：?t=<dur> に描画途中のストロークが残っている、中間のリビールで形状が歪んでいる）、stroke-dashoffset／duration／easing を修正し、同じ ?t=N を再レンダリングして、再度スクリーンショットを撮影し、修正を確認します。すべてのフレームが問題なくなるまで繰り返します。

npx playwright screenshot --wait-for-timeout=500 "file://$PWD/logo.html?t=1.1" frame-mid.png

完了前に：

1. ブラウザーでスタンドアロン動作すること。コンソールエラーがなく、CDN の読み込み漏れがないこと。
2. 手法／ドライバーが 1 つであること。?t=N で正確なフレームを固定できること。
3. 開始時／中間／終了時にスクリーンショットを撮影していること。形状が保たれ、クリアスペースが守られ、最終フレームがきれいなマークであること。
4. prefers-reduced-motion に対応していること（静止した最終マークを表示し、動きをなくす）。静止した終了フレームのフォールバックも用意すること。
5. リビールが ≤2.5s であること。音声がある場合は、サウンドロゴのピークに合わせて収束すること。

参考ファイル

• references/logo-patterns.md — 各手法の実行可能なコード（ストロークの描画、マスクによるワイプ構築、GSAP MorphSVG によるモーフィング、シームレスなアイドルループ、Lottie の納品）、タイミング表（0.8–2.5s）、ブランドのクリアスペース規則、動きを減らす設定時のフォールバック。