calm-relaxation

落ち着きとリラクゼーションのアニメーション

心を落ち着かせ、穏やかにし、安らかなユーザー体験を生み出すアニメーションを作成します。

感情的な目標

落ち着きは、ゆっくりとした穏やかで予測しやすい動きから生まれます。リラクゼーションにつながるのは、呼吸するように自然に流れ、注意を引いたり緊張を生んだりしないアニメーションです。

落ち着きのためのディズニーの原則

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

ごく控えめに（2～5％）します。跳ねる動きではなく、穏やかな呼吸や脈動のような動きにします。雲や水のような柔らかく有機的な変形を取り入れます。

予備動作

長く、ゆるやかな準備動作（200～400ms）を取り入れます。ゆっくりとした立ち上がりで、驚きを生みません。すべての動きを十分前もって予告します。

演出

ソフトフォーカスと、周囲になじむ配置を取り入れます。注意を強く引きつけません。要素同士が競合せず、調和して空間を共有するようにします。

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

アンビエントアニメーションには、穏やかで有機的な流れを取り入れます。漂う雲、浮遊する粒子、微妙なグラデーションなど、自然なランダムさを活用します。

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

余韻のある優雅なフォロースルーを取り入れます。落ち着くまでの時間を長くします（500ms以上）。水面の葉のように、要素が漂いながら静止する動きにします。

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

動きの始まりと終わりの両方に、強いイージングを適用します。加速と減速をごくゆるやかにします。滑らかで穏やかな動きには cubic-bezier(0.4, 0, 0.6, 1) を使用します。

アーク

幅広く、弧を描く動きにします。穏やかな放物線を取り入れます。動きは水や風のように流れるようにし、角ばった動きや唐突な動きは避けます。

セカンダリアクション

アンビエントな背景の動きを取り入れます。控えめなパララックスや、穏やかに浮遊する要素を活用します。注意を引かない、動きを支えるアニメーションにします。

タイミング

ゆっくりと意図的に動かします（400～800ms以上）。長い時間をかけた動きは瞑想的な印象を与えます。素早い動きは避けます。呼吸のリズムは、1サイクルあたり4～6秒にします。

誇張

誇張は最小限にするか、まったく使いません。現実的で自然な動きにします。控えめな動きは心を落ち着かせ、誇張は緊張を生みます。

立体感のある描画

輪郭を柔らかくし、形状を丸くします。鋭角は避けます。自然で心地よく感じられる有機的な形を使います。

魅力

柔らかな色、低いコントラストを使います。穏やかなグラデーションと丸みのある形を取り入れます。自然で有機的な美しさを意識します。

タイミングの推奨値

要素	時間	イージング
フェードのトランジション	400～600ms	ease-in-out
浮遊する要素	3000～5000ms	ease-in-out
呼吸のような脈動	4000～6000ms	ease-in-out
パララックスの漂い	800～1200ms	ease-out

CSSイージング

--calm-gentle: cubic-bezier(0.4, 0, 0.6, 1);
--calm-float: cubic-bezier(0.37, 0, 0.63, 1);
--calm-breathe: cubic-bezier(0.45, 0, 0.55, 1);

呼吸アニメーション

@keyframes calm-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.02);
    opacity: 1;
  }
}

.breathing-element {
  animation: calm-breathe 5s ease-in-out infinite;
}

使用する場面

• 瞑想やウェルネスアプリ
• 長時間かかる処理のローディング状態
• アンビエントな背景
• 読書体験
• ナイトモードへの切り替え
• ヘルスケアのインターフェース
• オンボーディングのウェルカム画面
• お祝いの演出が必要ない成功状態