comfort-safety

安心感と安全性のアニメーション

ユーザーに安心感を与え、安全を守り、信頼できると感じてもらえるアニメーションを作成します。

感情的な目標

安心感は、驚かせることのない、予測しやすく穏やかな動きから生まれます。安全性とは、保護、安定性、ユーザーによる制御を伝えるアニメーションを意味します。

安心感を生むディズニーの原則

スクワッシュ＆ストレッチ

最小限で柔らかな変形（5-10%）にします。不安定さを感じさせず、優しくしなります。クッションのように衝撃を吸収しながら、形を保ちます。

予備動作

明確で安心できる準備動作を入れます（150-200ms）。ユーザーが次の動きを常に把握できるようにします。予想外の動きや、隠れたアクションは避けます。

演出

周囲に守られた構図にします。境界を明確にし、安全な空間を作ります。圧迫感を与えずに誘導する視覚的な階層を設けます。

ストレート・アヘッド・アクション

避けます。安全には予測しやすさが欠かせません。すべての動きを制御し、予測できるものにします。

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

クッションに包まれるように、穏やかに収束させます。柔らかく着地させます。包み込むように、要素を所定の位置へ落ち着かせます。

スローイン・アンド・スローアウト

全体を通して滑らかで穏やかな曲線を使います。急激な変化は避けます。予測しやすく快適な動きには ease-in-out を使います。

アーク

柔らかく自然な曲線を使います。包み込むような、抱きしめるような軌道にします。動きは横切るのではなく、対象を包み込むようにします。

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

安心感を与える合図だけを使います。チェックマーク、シールド、ロックなどです。安全性と完了を視覚的に確認できるようにします。

タイミング

中程度で、急がせない長さにします（300-450ms）。ユーザーが処理し、安心感を得るための時間を確保します。急かしたり、唐突にしたりしません。

誇張

なし、または最小限にします。現実的で、地に足のついた動きにします。安心感には信頼性が欠かせません。

立体感のある描画

安定感とバランスのある形にします。重心は低くします。地に足がつき、安心できると感じられる形にします。

魅力

温かみのある落ち着いた色を使います。柔らかなエッジにします。親しみやすく、心地よい見た目にします。攻撃的な印象や鋭い形は避けます。

タイミングの推奨事項

要素	期間	イージング
トランジション	300-400ms	ease-in-out
フィードバック	200-250ms	ease-out
確認	350-450ms	ease-out
保護機能の表示	400-500ms	ease-in-out

CSS イージング

--comfort-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--comfort-gentle: cubic-bezier(0.45, 0, 0.55, 1);
--comfort-settle: cubic-bezier(0.25, 0.1, 0.25, 1);

安心感を与えるパターン

@keyframes comfort-embrace {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes comfort-check {
  0% {
    stroke-dashoffset: 24;
    opacity: 0;
  }
  50% { opacity: 1; }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.safe-element {
  animation: comfort-embrace 400ms ease-in-out forwards;
}

安全性を伝える合図

• すべてのアクションに対して、明確で視認できるフィードバックを表示します
• 元に戻せることが分かるアニメーションを使います
• 進行状況が予期せず後戻りしないようにします
• 向きを維持するトランジションを使います
• ユーザーが安心して頼れる、一貫したパターンを使います

使用する場面

• 銀行・金融サービス
• ヘルスケアアプリケーション
• パスワードとセキュリティのフロー
• データプライバシーの設定
• 保険プラットフォーム
• バックアップと復元
• 保護者向け制限機能
• 機密データの取り扱い