social-media

ソーシャルメディアのアニメーション原則

ディズニーの12の原則を適用して、交流と感情的なつながりを促す、魅力的で表情豊かな体験を作りましょう。

適用する12の原則

1. 潰しと伸ばし

• いいねボタン：タップするとハートが潰れ、弾むように元に戻ります
• リアクション絵文字：選択中に遊び心のある伸縮をします
• 送信ボタン：メッセージが飛んでいく前に縮みます

2. 予備動作

• 投稿ボタン：公開前に短い予備動作が入ります
• ストーリーズ：長押しすると円形の進行状況が表示されます
• スワイプ操作：次に起こる動作をプレビューで示します

3. 演出

• コンテンツ優先：常にユーザーのコンテンツが主役です
• リアクションバー：わかりやすく、コンテンツの邪魔をしません
• 通知：目立ちながらも、閉じられるようにします

4. ストレート・アヘッドとポーズ・トゥ・ポーズ

• フィードのスクロール：途切れのない滑らかな流れ（ストレート・アヘッド）
• 投稿のフロー：段階を追った作成（ポーズ・トゥ・ポーズ）
• ストーリーの連続表示：フレームごとに進行します

5. フォロースルーとオーバーラッピング・アクション

• いいねアニメーション：アイコンが弾み、その後に件数が更新されます
• コメントスレッド：アバターが表示され、その後にテキストが表示されます
• 共有メニュー：オプションが順番に展開します

6. スローインとスローアウト

• 引っ張って更新：滑らかに減速します
• カードの切り替え：洗練された印象になるイーズイン・アウトを使います
• モーダルシート：快適な300msのタイミングにします

7. アーク

• リアクションの浮き上がり：絵文字がボタンから上向きの弧を描いて浮かびます
• ストーリーのジェスチャー：自然な曲線に沿ってスワイプします
• コンテンツの共有：投稿が共有先へ弧を描いて移動します

8. セカンダリー・アクション

• ダブルタップでいいね：ハートが弾けながらフェードアウトします
• 入力インジケーター：考え中を示すようにドットが弾みます
• アップロードの進行状況：処理中にきらめきます

9. タイミング

• インタラクション：操作への反応を促す、きびきびした100～200ms
• 切り替え：流れを保つ、すばやい250～300ms
• お祝いの演出：感情に訴える瞬間には500～800ms

10. 誇張

• リアクション：感情表現を強調します
• マイルストーン：フォロワー数や「いいね」の件数を祝います
• ライブ機能：躍動感があり、目を引く演出にします

11. 立体感のある描画

• アバターの一貫性：サイズとスタイルを統一します
• アイコンの言語：一貫性のある視覚表現にします
• グリッドレイアウト：適切に配置し、間隔を整えます

12. 魅力

• 個性を前面に：プラットフォームの個性を際立たせます
• ドーパミンを促すデザイン：小さなインタラクションに報酬を感じられるようにします
• 共有したくなる演出：録画して残したくなるアニメーションにします

業界標準のタイミング

操作	期間	イージング
いいね／リアクション	200ms	spring
引っ張って更新	300ms	ease-out
ストーリーの切り替え	250ms	ease-in-out
モーダルを開く	300ms	ease-out
メッセージを送信	150ms	ease-out

重要な原則

ソーシャルメディアでは、感情表現が大切です。アニメーションでつながりを強め、操作に心地よい手応えを与え、ユーザーを操作されていると感じさせることなく、継続的な利用を促しましょう。