attention-management

注意の誘導

Disneyの原則を使って、ユーザーの注意を適切に導きます。

問題の兆候

• ユーザーが重要なコンテンツを見落とす
• 装飾要素が注意を奪う
• CTAが目立たない
• ユーザーが最初に見る対象が正しくない
• 情報の階層が不明瞭

原則に基づく診断

舞台づくり

問題：複数の要素が注意を奪い合っている 解決策：一度に動かすのは1つだけにします。最も重要な要素をアニメーションさせ、ほかの要素は動かさないようにします。

タイミング

問題：すべてが同じ速さでアニメーションする 解決策：主要コンテンツは速くアニメーションさせます。副次的な要素は、ゆっくり動かすか、遅らせます。速さは重要度を示します。

誇張

問題：階層にかかわらず動きが均一 解決策：重要な要素には、よりドラマチックなアニメーションを使います。背景要素の動きは控えめにします。

予備動作

問題：視線を導くための動きがない 解決策：予備動作を使って注意を誘導します。小さな動きで、主要な動作の前に視線を引きつけられます。

魅力

問題：重要でない要素のほうが視覚的に目を引く 解決策：重要な要素を最も視覚的に魅力的にします。アニメーションは階層を強調するものであり、階層と競合させないようにします。

すぐにできる改善策

1. 一度にアニメーションするのは1つだけ - 並行させず、順番に実行します
2. 重要度に応じて時間差をつける - 最も重要な要素を最初にアニメーションさせます
3. 装飾的な動きを減らす - 背景は落ち着かせます
4. CTAのアニメーションのコントラストを高める - 周囲から目立たせます
5. 動きで読む順序を導く - 上から下へ、左から右へ

トラブルシューティングのチェックリスト

• ユーザーは最初に何を見ますか？（視線追跡またはテスト）
• アニメーションの順序は重要度の階層に合っていますか？
• 装飾的なアニメーションは十分に控えめですか？
• 主要なCTAに最も強い動きがありますか？
• 同時に動くアニメーションを数えます（1～2個が目安です）
• テスト：アニメーションを非表示にしても、階層は機能しますか？
• 動きは誘導になっていますか、それとも気を散らしていますか？
• 静止によって必要な箇所に強調が生まれていますか？

コードパターン

/* Stagger by importance */
.hero-title {
  animation: fadeInUp 400ms ease-out;
}

.hero-subtitle {
  animation: fadeInUp 400ms ease-out 100ms backwards;
}

.hero-cta {
  animation: fadeInUp 400ms ease-out 200ms backwards,
             pulse 2s ease-in-out 1s infinite;
}

/* De-emphasize background */
.background-element {
  animation: subtleDrift 20s linear infinite;
  opacity: 0.3;
}

動きによる階層

優先度	アニメーションスタイル
主要	速く、目立ち、ループする場合もある
副次	中程度の速さで、1回のみ
第三	ゆっくり、控えめ、または静止
背景	非常にゆっくり、またはアニメーションなし