ブランドモーションガイドラインは何をしますか？

ブランドモーションシステムを執筆します。これは、ブランドやプロダクトがどのように動くかを定義する文書であり、Slack、IBM Carbon、Klarna、Materialなどの成熟したデザインシステムが採用している方法です。出力は、原則、イージング/タイミングトークン、モーションライブラリ、ロゴルール、フィードバック状態、アクセシビリティ、Do/Don'tの例をカバーする、すぐに埋め込めるテンプレートです。

使用するタイミング

ブランドやプロダクトに文書化されたモーション言語が必要な場合、チーム全体でアニメーションに一貫性が感じられない場合、デザイナーとエンジニア向けに名前付きのイージング/継続時間トークンを定義する場合、またはモーション減少/アクセシビリティ標準を追加する場合に使用します。出力は構造化された文書であり、コードではありません。

決定木 — システムの範囲を決め、トークンを選択する

2つの判断：このブランドには実際にどれほどの規模のシステムが必要か、および特定のモーションにどのトークンを使用すべきか。ランディングページのために7部構成のシステムを構築しないでください。マルチチームのデザインシステムに1ページのドキュメントを提供しないでください。

使用するサーフェス/チームの数は？
├─ 1つのサイト / 1つのキャンペーン → 軽量：原則 + トークン + 短い
│   ライブラリ。関連がない限り、詳細なロゴ/状態セクションはスキップ。
├─ プロダクト（アプリ/ウェブ） → 完全な7部構成のドキュメント；トークンは必須。
└─ プロダクト + マーケティング + 放送にわたるブランド → 完全なドキュメントに加えて
    モーションパーソナリティプリセット（motion-art-direction 参照）も追加し、すべてのメディアが一致するようにする。

特定のモーションのトークンを選択する：
  継続時間: 要素が大きい / 移動距離が長い → 長いトークン
            （instant < fast < base < slow < slower）
  イージング:   エントランス → decelerate（減速）・エグジット → accelerate（加速、より短く）
              ビュー内移動 → standard · ブランドモーメント → emphasized
              連続ループ → linear · 遊び心のあるアクセント → spring（控えめに）

経験則：モーションが使用するトークンを指定できない場合、それは一回限りのもの — そして一回限りのものがシステムに一貫性のなさをもたらします。

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

完全なモーションガイドライン文書は7つのパートで構成されています。順番に執筆してください：

モーション原則 — すべてのアニメーションを統治する3〜5の名前付きの信念。
タイミング＆イージングトークン — 名前付きの継続時間とカーブ。モーションが一貫性を持ち、エンジニアが実装可能になるようにします。
モーションライブラリ — トークンにマッピングされたエントランス、エグジット、トランジションパターン。
ロゴアニメーションルール — マークがどのように動いてよく、動いてはいけないか。
フィードバック＆状態モーション — ローディング、成功、エラー、ホバー、フォーカス。
アクセシビリティ — モーション減少、光感受性、フォーカスの可視性。
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）を使用して、グループが引きずられることなく生き生きと感じられるようにします。

テンプレート（記入）

[ブランド名] モーションガイドライン                         バージョン: ___  所有者: ___

1. 原則
   私たちは次のために動く：[原則1 — 例：「注意を導き、決して奪わない」]
                           [原則2 — 例：「デフォルトで高速、意図的に表現力豊か」]
                           [原則3 — 例：「すべてのモーションには理由がある」]
                           [原則4] [原則5]

2. タイミングトークン
   instant ___ms · fast ___ms · base ___ms · slow ___ms · slower ___ms

3. イージングトークン
   standard ____ · decelerate ____ · accelerate ____ · emphasized ____

4. モーションライブラリ
   エントランス：[パターン＋トークンのリスト]
   エグジット：    [パターン＋トークンのリスト]
   トランジション：[パターン＋トークンのリスト]

5. ロゴアニメーション
   許可：[リビールスタイル、継続時間トークン、アニメーションしてよいタイミング]
   禁止：[引き伸ばす、歪める、自由に回転させる、色を変える、___msを超える]

6. フィードバック＆状態モーション
   ローディング：[スピナー/スケルトンのルール＋それぞれの使用タイミング]
   成功：[確認モーション]
   エラー：[シェイク/色のルール — 色だけでは不可]
   ホバー/フォーカス：[トークン＋フォーカスの可視性要件]

7. アクセシビリティ
   モーション減少：[何が起こるか — 以下のセクションを参照]
   光感受性：最大3フラッシュ/秒。全画面ストロボは禁止。
   フォーカス：フォーカスインジケーターは決してアニメーションで消えたり、見えなくなったりしない。

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）。エンジニアはこれを直接実装でき、他のすべてのモーダルと一致します。

アンチパターン — 「雰囲気」ガイドライン:

「アニメーションはスムーズでモダンで楽しいものにする。適切なイージングを使い、動作は素早く、ただし速すぎないように。」

なぜ失敗するか：名前付きトークンがなく、値がなく、エントランス/エグジットルールがなく、実装可能なものは何もありません — 「スムーズ」と「素早い」は矛盾しており、エンジニアごとに解釈が異なるため、プロダクトは一貫性を失います（まさに文書が解決すべき問題です）。修正：形容詞をトークンテーブルに置き換え、各パターンをトークンにマッピングし、具体的なミリ秒値を持つDo/Don'tペアを提供します。

よくある間違い

症状	原因	修正
画面間でモーションが一貫しない	手動調整された一回限りの値、トークンなし	トークンを一度定義し、すべてのパターンがそれを参照する
文書は良さそうだが、構築できない	原則が形容詞で書かれ、値がない	各原則に数値トークンルールをペアで設定する
すべてがバウンドする	スプリング/オーバーシュートがあらゆる場所で使用されている	スプリング/強調はブランドモーメントにのみ予約する
エグジットが鈍い	エグジットの継続時間 ≥ エントランス	エグジットを一段階短くし、加速させる
アニメーションがアクセシビリティを損なう	モーション減少/色のみの状態がない	必須のアクセシビリティセクションを追加し、モーションをテキスト/アイコンと組み合わせる
ロゴアニメーションが場所ごとに異なる	ロゴルールがない	1つの署名リビールと明示的な「禁止」リストを記述する
トークン値が常に名前変更される	名前がリテラル（`duration-250`）	目的で名前を付ける（`duration-base`）ことで値が変更可能になる

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

出力は構造化された文書（テンプレートは references/full-template.md）であり、コードではありません。完全な文書には7つのパートすべてが含まれ、以下の特徴があります：

3〜5の名前付き原則。それぞれに1行のルール（形容詞ではない）。
値/カーブを持つ継続時間およびイージングトークン — 実装可能な核心。
すべてのパターンをトークンにマッピングするモーションライブラリ。
明示的なロゴ許可/禁止ルール。
フィードバック/状態モーション（ローディング、成功、エラー、ホバー、フォーカス）。
必須のアクセシビリティセクション（モーション減少、光感受性、フォーカス、色だけで意味を伝えない）。
あいまいさを取り除く具体的なDo/Don'tペア。

終了前のチェックリスト

3〜5の原則、それぞれ名前と1行のルールがある。
継続時間トークンが値とともに定義され、イージングトークンがcubic-bezier曲線とともに定義されている。
すべてのライブラリパターンが使用するトークンを指定している。
エントランスは減速、エグジットは加速して短く。線形はループのみ。
ロゴルールは許可と禁止の両方を記述している。
フィードバック状態はモーションをテキスト/アイコンと組み合わせている（色だけではない）。
アクセシビリティセクションが存在する：モーション減少、光感受性、フォーカス、コントラスト。
Do/Don'tペアは具体的（値あり）であり、「雰囲気」ではない。
トークン名は意味的（目的）であり、リテラル値ではない。

クイックリファレンス

決定	デフォルト
デフォルトのUI継続時間	`duration-base` 250ms
エントランスイージング	decelerate（ease-out）
エグジットイージング	accelerate（ease-in）、エントランスより短く
線形イージング	ループのみ（スピナー/プログレス）
スタガーオフセット	アイテムごとに30-50ms
ロゴアニメーション	予約済み、一貫性、歪めない
状態フィードバック	モーション＋ラベル/アイコン、色だけではない
モーション減少	変形をフェード/瞬時表示に置き換える

参考ファイル

references/full-template.md — すべてのセクションが拡張され、例のコピーが含まれる、完全な記入用モーションガイドライン文書。
references/token-reference.md — 値、cubic-bezier曲線、使用上の注意を含む、完全な継続時間およびイージングトークンテーブル。
references/dos-and-donts.md — 具体的なDo/Don'tペアと実例（Slack/IBM/Materialスタイル）のライブラリ。

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