brand-motion-guidelines

ブランドモーションガイドライン

成熟したデザインシステム（Slack、IBM Carbon、Klarna、Materialなど）のように、ブランドや製品の動きを定義するドキュメントとなるブランドモーションシステムを作成します。原則、イージング／タイミングのトークン、モーションライブラリ、ロゴのルール、フィードバック状態、アクセシビリティ、Do／Don'tの例を網羅した、すぐに記入できるテンプレートを出力します。

使用する場面

ブランドや製品のモーション言語を文書化する必要がある場合、チーム内でアニメーションに一貫性がない場合、デザイナーやエンジニア向けに名前付きのイージング／継続時間トークンを定義する場合、または動きを抑えた表示やアクセシビリティの基準を追加する場合に使用します。出力するのは構造化されたドキュメントであり、コードではありません。

意思決定ツリー — システムの範囲を定めてからトークンを選ぶ

判断するのは2つです。このブランドに実際にどの規模のシステムが必要か、そして個々のモーションにどのトークンを使うかです。ランディングページに7部構成のシステムを作る必要はありません。複数チームが使うデザインシステムに、1ページだけの文書を用意するのも避けましょう。

How many surfaces/teams will use this?
├─ One site / one campaign → lightweight: principles + tokens + a short
│   library. Skip deep logo/state sections unless relevant.
├─ A product (app/web) → full 7-part doc; tokens are mandatory.
└─ A brand across product + marketing + broadcast → full doc PLUS a
    Motion Personality preset (see motion-art-direction) so every medium matches.

Picking the token for a given motion:
  duration: larger element / longer travel → longer token
            (instant<fast<base<slow<slower)
  easing:   entrance → decelerate · exit → accelerate (and shorter)
            within-view move → standard · brand moment → emphasized
            continuous loop → linear · playful accent → spring (sparingly)

経験則：使うトークンを特定できないモーションは、その場限りのものです。そして、その場限りのモーションこそが、システムに一貫性がないと感じさせる原因になります。

モーションシステムの構成要素

完全なモーションガイドラインには、7つのパートがあります。次の順に作成します。

1. モーションの原則 — すべてのアニメーションを導く、名前付きの信条を3～5個定めます。
2. タイミングとイージングのトークン — 名前付きの継続時間と曲線を定め、モーションの一貫性とエンジニアによる実装のしやすさを確保します。
3. モーションライブラリ — 入場、退場、切り替えのパターンをトークンに対応付けます。
4. ロゴアニメーションのルール — ロゴマークを動かしてよい方法と、動かしてはいけない方法を定めます。
5. フィードバックと状態のモーション — 読み込み、成功、エラー、ホバー、フォーカスを定めます。
6. アクセシビリティ — 動きを抑えた表示、光過敏症、フォーカスの視認性を扱います。
7. Do／Don't — ルールを明確に伝える具体例を示します。

トークンが中核です

ほかのすべての要素はトークンを参照します。継続時間と曲線は、一度だけ名前付きのトークンとして定義し、ライブラリやコンポーネントで再利用します。これにより、モーションシステムは単なる装飾ではなく、実装可能なものになります。

継続時間トークンの例（記入／調整してください）

トークン	値	用途
duration-instant	100ms	マイクロフィードバック（トグル、タップ）
duration-fast	150ms	ホバー、小さな状態変化
duration-base	250ms	標準的なUIの切り替え（デフォルト）
duration-slow	400ms	大きなサーフェス、モーダル、ページセクション
duration-slower	600ms	ヒーロー／ブランドを印象づける演出、全画面

経験則：要素や移動距離が大きいほど、継続時間を長くします。ほとんどのUIモーションは150～400msです。約100ms未満は瞬間的に感じられ、500msを超えると通常のUIではもたついて感じられます。

イージングトークンの例（曲線）

トークン	cubic-bezier	印象／用途
ease-standard	(0.4, 0.0, 0.2, 1)	デフォルト。画面内で要素が移動するとき
ease-decelerate（ease-out）	(0.0, 0.0, 0.2, 1)	入場 — 速く始まり、落ち着く
ease-accelerate（ease-in）	(0.4, 0.0, 1, 1)	退場 — ゆるやかに始まり、加速して去る
ease-emphasized	(0.2, 0.0, 0, 1)	表現豊かな演出／ブランドを印象づける演出
ease-spring	spring(stiffness, damping)	遊び心のあるオーバーシュート（控えめに使用）

原則：入場は減速させます（オブジェクトが到着して落ち着くため）。退場は加速させます（意図を持ってオブジェクトを退場させるため）。重要な要素にリニアイージングは使いません。リニアは機械的な印象になるため、連続するループ（スピナー、進捗表示）に限って使用します。

モーションライブラリ（パターンをトークンに対応付ける）

パターン	トークン	動作
フェードイン	duration-base + ease-decelerate	不透明度 0→1
スケール＋フェードイン	duration-base + ease-decelerate	スケール 0.96→1、不透明度 0→1
下からスライドイン	duration-slow + ease-decelerate	Y +8/16px → 0、フェードイン
フェードアウト	duration-fast + ease-accelerate	不透明度 1→0（表示時より速く退出）
モーダルを開く	duration-slow + ease-emphasized	スケール＋フェード、背景がフェードイン
ページ／セクションの切り替え	duration-base + ease-standard	クロスフェードまたは共有要素の移動
リストのスタガー	各項目に duration-fast、30-50ms のオフセット	項目を順に表示し、一度にすべて表示しない

デフォルトのルール：退出は表示より短くします。スタガーには小さなオフセット（30-50ms）を使い、グループに生き生きとした印象を与えつつ、もたつかないようにします。

テンプレート（記入してください）

[BRAND] MOTION GUIDELINES                         Version: ___  Owner: ___

1. PRINCIPLES
   We move to: [principle 1 — e.g. "Guide attention, never steal it"]
               [principle 2 — e.g. "Fast by default, expressive on purpose"]
               [principle 3 — e.g. "Every motion has a reason"]
               [principle 4] [principle 5]

2. TIMING TOKENS
   instant ___ms · fast ___ms · base ___ms · slow ___ms · slower ___ms

3. EASING TOKENS
   standard ____ · decelerate ____ · accelerate ____ · emphasized ____

4. MOTION LIBRARY
   Entrances: [list patterns + tokens]
   Exits:     [list patterns + tokens]
   Transitions:[list patterns + tokens]

5. LOGO ANIMATION
   Allowed: [reveal style, duration token, when it may animate]
   Never:   [stretch, distort, rotate freely, recolour, exceed ___ms]

6. FEEDBACK & STATE MOTION
   Loading: [spinner/skeleton rules + when each]
   Success: [confirmation motion]
   Error:   [shake/colour rules — never colour alone]
   Hover/Focus: [token + visible focus requirement]

7. ACCESSIBILITY
   Reduced motion: [what happens — see section below]
   Photosensitivity: max 3 flashes/sec; no full-screen strobing.
   Focus: focus indicators never animate away or disappear.

8. DO / DON'T
   ✅ [do]            ❌ [don't]

ロゴのアニメーションルール（記入してください）

許可することと禁止することを明記します。一般的な基本ルール：

• 許可：duration-slow-slower + ease-emphasized を使った表示／組み立て、穏やかな落ち着き、すべての場面で一貫して使うシグネチャーアニメーションを1つ。
• 禁止：ロゴマークを不自然に伸縮させる、自由に回転させる、パレット外の色に変更する、表示のたびにアニメーションさせる（重要な場面に限定する）、合意した最大時間を超える。

フィードバックと状態のモーション

• 読み込み中：コンテンツレイアウトにはスケルトンを使います。不確定な短時間の待機に限りスピナーを使い、約1秒を超える待機では進捗を表示します。
• 成功／エラー：モーションにラベルまたはアイコンを組み合わせます。色やモーションだけで状態を伝えてはいけません（アクセシビリティ）。
• ホバー／フォーカス：duration-fast + ease-standard を使います。フォーカス状態は明確に視認できる必要があり、アニメーションによって見えなくしてはいけません。

アクセシビリティ（必須セクション）

• モーションの軽減：ユーザーの「モーションを減らす」設定に従います。移動／視差効果／大きな変形は、シンプルな不透明度のクロスフェードまたは即時の状態変更に置き換えます。重要な意味は維持し、装飾的なモーションは取り除きます。（概念的には prefers-reduced-motion に対応します。）
• 光過敏：1秒あたりの点滅は3回までとし、全画面での高コントラストなストロボを避けます。
• モーション／色だけで意味を伝えない：必ずテキストまたはアイコンを組み合わせます。
• フォーカスの視認性：アニメーションによってフォーカスインジケーターを隠したり、取り除いたりしてはいけません。

具体例

良い例 — トークンに基づいたライブラリエントリー：

モーダルを開く：duration-slow（400ms）+ ease-emphasized。スケール 0.96→1、背景がフェードイン。閉じる：duration-base（250ms）+ ease-accelerate。

すべての値が名前付きトークンで、閉じる動作は開く動作より短く、イージングは意図に合っています（ブランドを印象づける表示には emphasized、退出には accelerate）。エンジニアはそのまま実装でき、ほかのすべてのモーダルと同じ動作になります。

アンチパターン —「雰囲気」に頼るガイドライン：

「アニメーションは滑らかで、現代的で、心地よいものにしてください。気持ちのよいイージングを使い、きびきびとしつつ速すぎないようにします。」

うまくいかない理由：名前付きトークンも値もなく、表示／退出のルールもないため、実装できません。「滑らか」と「きびきび」は矛盾し、エンジニアごとに解釈が異なるため、製品に一貫性がなくなります（このドキュメントが解決しようとしていた問題そのものです）。修正方法：形容詞をトークンの表に置き換え、各パターンをトークンに対応付け、具体的なミリ秒の値を用いて、すべきこと／すべきでないことを対にして示します。

よくある間違い

症状	発生する理由	修正方法
画面によってモーションに一貫性がない	値を個別に調整しており、トークンがない	トークンを一度定義し、すべてのパターンでそれを参照します
ドキュメントの内容は良いが、実装できない	原則が値ではなく形容詞で書かれている	すべての原則に数値トークンのルールを対応させます
あらゆる動きが弾む	どこでもスプリング／オーバーシュートを使っている	スプリング／強調表現はブランドを印象づける場面だけに限定します
終了時の動きがもたつく	終了時間が入場時間以上になっている	終了時の動きは一段階短くし、速めます
アニメーションがアクセシビリティを損なう	モーション低減／色だけに頼らない状態がない	必須のアクセシビリティセクションを追加し、モーションをテキスト／アイコンと組み合わせます
ロゴのアニメーションが場所によって異なる	ロゴのルールがない	代表的な表示アニメーションを1つと、明示的な「禁止」リストを定めます
トークン値の名前が頻繁に変わる	名前が値そのものになっている（duration-250）	値を変更できるよう、用途に基づいて名前を付けます（duration-base）

成果物の仕様 — 優れたモーションガイドライン文書に含めるもの

成果物はコードではなく、構造化されたドキュメントです（テンプレートはreferences/full-template.md）。完全なドキュメントには以下の7項目すべてが含まれ、さらに次の条件を満たします。

• 名前付きの原則が3～5個あり、それぞれに1行のルールがある（形容詞ではない）。
• 値／曲線を定めたdurationとeasingのトークンがある — 実装の中核となる部分です。
• モーションライブラリですべてのパターンをトークンに対応付けている。
• ロゴの許可事項／禁止事項を明示している。
• フィードバック／状態のモーション（読み込み、成功、エラー、ホバー、フォーカス）を定めている。
• 必須のアクセシビリティセクション（モーション低減、光過敏、フォーカス、色だけに意味を持たせないこと）がある。
• 曖昧さをなくす具体的な「すること／しないこと」の組み合わせがある。

仕上げる前に — チェックリスト

• 3～5個の原則があり、それぞれに名前と1行のルールがある。
• durationトークンに値が定義され、easingトークンにcubic-bezier曲線が定義されている。
• ライブラリ内のすべてのパターンに、使用するトークンが記載されている。
• 入場時は減速し、終了時は加速して短くする。linearはループにのみ使用する。
• ロゴのルールで許可事項と禁止事項の両方を明示している。
• フィードバック状態ではモーションをテキスト／アイコンと組み合わせている（色だけには頼らない）。
• アクセシビリティセクションがある：モーション低減、光過敏、フォーカス、コントラスト。
• 「すること／しないこと」の組み合わせが具体的で、値を含み、感覚的な表現ではない。
• トークン名が値そのものではなく、用途を表している。

関連フレームワーク

このドキュメントはブランドのモーションに関する信頼できる唯一の情報源です。関連する2つのスキルが、上流の理論とプロジェクトごとの表現を補います。それらを参照して適用し、表を重複させないでください。

• animation-principles — 原則のセクションにはThree Pillars（意図 → トーン → 技）を反映してください。モーションのPrimary／Secondary／Ambientレイヤーは、ヒーローの動きとアンビエントなドリフトで異なるトークンを使う理由を説明します。1/3 Ruleはスタガーの上限を正当化します（すべてを同時に動かさない）。これらを引用し、正式な表は元の場所に置いてください。
• motion-art-direction — 製品、マーケティング、放送にまたがるブランドでは、名前付きのMotion Personalityプリセットを選び、ドキュメントの冒頭に記載してから、それに合わせてトークン値を決めてください（よりキビキビしたプリセットならdurationを短くし、プレミアムなプリセットなら長く滑らかにします）。モーション言語の仕様はここにあります。

クイックリファレンス

判断項目	デフォルト
UIのデフォルトduration	duration-base 250ms
入場時のeasing	減速（ease-out）
終了時のeasing	加速（ease-in）、入場時より短くする
linear easing	ループ（スピナー／進捗表示）にのみ使用
スタガーの間隔	項目ごとに30～50ms
ロゴのアニメーション	控えめにし、一貫性を保ち、変形させない
状態のフィードバック	モーション＋ラベル／アイコン。色だけには頼らない
モーション低減	トランスフォームをフェード／即時表示に置き換える

参照ファイル

• references/full-template.md — 各セクションを展開し、記入例を含む、モーションガイドライン文書の完全な記入用テンプレート。
• references/token-reference.md — 値、cubic-bezier曲線、使用上の注意を含むdurationおよびeasingトークンの完全な表。
• references/dos-and-donts.md — 具体的な「すること／しないこと」の組み合わせと、原則を適用した例（Slack／IBM／Material風）をまとめたライブラリ。